Resources That Complement Twitter Bootstrap
18/07/2012Posted by pada
Twitter Bootstrap is a beautiful “web design kit” for creating cross browser, consistent and good looking interfaces.
And, it seems to be rocking the web design community as there are lots of websites already built and being built with it (it is also the most watched/forked repository in GitHub).
Twitter Bootstrap is already powerful enough to empower any web interface. In order to make more use of it and/or ease the development process, there are various tools/resources that complement it.
These include Bootstrap themed vector UI images, WordPress themes, web-based Bootstrap customizers and more. Here they are:
This is an awesome resource for jQuery and Twitter Bootstrap users that combines the power of both.
It is a jQuery UI theme that not only brings Bootstrap-themed widgets but also enables us to use (most) of Twitter Bootstrap side-by-wide without any components being broken visually.
This is an extension for the “Modal dialog” of Twitter Bootstrap toolkit for simplifying the navigation through a set of images.
It has features like mouse + keyboard navigation, transition effects, fullscreen mode and slideshow.
Similar to the jQuery UI theme above, this is a theme built for jQuery Mobile.
It is a handy resource if you have a web front-end built with Twitter Bootstrap and want to offer a similar look for mobile.
A slick datepicker and colorpicker built for Twitter Bootstrap.
They integrate into the system as any other component and can be attached to any field or HTML element.
Twitter Bootstrap has its own customizer but StyleBootstrap is a more detailed one with color pickers and the ability to style each component differently.
And, for every generated style, the application generates a unique URL in case you want to share it with others or return back and edit anytime later.
One of the most attractive parts of Twitter Bootstrap is the beautiful buttons it has: standard, dropdown, pagination, etc.
This is an online button designer that eases customizing the output with user-friendly sliders that help changing each variable.
Twitter Bootstrap’s default theme is very nice, however, we may want to have another look but still get the awesomeness offered by the kit.
Bootswatch provides free-to-use themes for Twitter Bootstrap and they can be used by simply downloading and replacing the CSS file.
A toolkit for designing Facebook iframe apps in both relevant sizes which is built on top of Twitter Bootstrap.
It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more, styled in the typical facebook look and feel.
The design kit includes all base elements of Twitter Bootstrap layered in Photoshop for typography, buttons, grids, navigation and more.
They are vector based, each item is in a separate layer and their colors can be adjusted easily.
A very well organized vector image set of Twitter Bootstrap’s components.
Each item comes with varieties of different states and all of the UI components are organized in pages within Fireworks.
That’s a great resource for anyone designing first in Fireworks and then switching to HTML.
P.S. There is also another Fireworks-Bootstrap set which is simpler-yet-nice.
This is a toolkit for connecting Django with Twitter Bootstrap.
It is still a work in progress yet promising and can be very useful for Django fans.
WordPress Themes For Twitter Bootstrap
There are multiple WordPress themes that use Twitter Bootstrap as a base and help anyone build new WP-powered websites using the kit:
There are also few other resources built for Twitter Bootstrap including: