40 Useful Resources for Twitter BootStrap Fans.

November 6, 20120 Comments
Facebook Twitter Pinterest Plusone

Bootstrap is a responsive design, HTML, Javascript and CSS framework which has alot of the design elements that you would require to get a polished product off the ground quickly. It’s a great way to get your project started without sourcing and integrating multiple third party projects, and still look good.

As an open source project Bootstrap continues to evolve, with 2.2.1 the latest version released recently, it has significant grounding in the development community, and is described by some as rapidly becoming the ‘jQuery of HTML frameworks’. Within a few months of its launch, the project grew to be the most popular project on the world’s largest social coding service, Github, and for good reason – it is a formidable framework for rapid development.

This collection of resources around the project showcase the best of what the web has to offer Bootstrap fans.

Design and Theming.

URL: http://bootswatch.com/

One of the main critisms when using a framework with pre-designed buttons and widgets – is that your end product can begin to look samey. Bootswatch is a free theme marketplace that aims to prevent that, with a number of bespoke Bootstrap implementations available to download for free. Its still the core Bootstrap product – just with a different skin applied. For designers who need inspiration on what level of customisation is available, Bootswatch is a pretty good place to start.

URL: https://wrapbootstrap.com/

Following in a similar vein – WrapBootstrap is a commercial theme marketplace, where you can both buy and sell your Bootstrap theme. It’s a great example of the niche communities burgeoning on the web around the product, and offers the ability to see how many other people have also purchased the same theme.

URL: http://bootswatchr.com/

Fancy a more DIY approach to customisation? Bootswatchr provides a visual interface for you to use to customise Bootstrap themes from the ground up. Think of it like a theme-roller (ala jQuery UI) – that lets you see interactively the elements being customised in front of your eyes. Tres handy.

URL: http://stylebootstrap.info/

Also offers a customisation tool set, with the advantage that individual URLs created can be shared with others, showcasing your theme.

URL: http://jetstrap.com/

JetStrap offers an extremely clean easy way to build Boostrap interfaces, and generate working Bootstrap code out the other side. It’s somewhere between a Mockup and Interface building tool, that takes the manual coding away, and makes it a snap to drag and drop Bootstrap components onto your page and generate a working HTML interface.  If you are in the early stages of product development, and are convinced that Bootstrap is the perfect framework for you going forward, then you’ll love how quickly JetStrap gets you moving.

URL: http://paintstrap.com/

PaintStrap offers and alternative approach to theming Bootstrap. If you are an avid ColourLovers or Adobe Kuler user, then you can simply input the theme directly into PaintStrap, and it wacks out a Bootstrap theme with those beautifully handpicked colours. Very simple, but very effective way to make the site look the part.

URL: http://jumpstartui.com/

Often the case with theme frameworks is that they focus on what is needed from a FrontEnd design perspective. Jump Start have taken the Bootstrap theme, and applied it to Admin interfaces, offering premium Bootstrap implementations designed to make your Backend systems really shine.

URL: http://www.boottheme.com/

BootTheme is yet another Theme generator tool, however Boottheme offers an instant preview approach, letting you see the effects of your changes in real time. You can also see how your changes will perform directly on multiple devices in a responsive way, which makes it useful in initial design decision making.

URL: http://ajkochanowicz.github.com/Kickstrap/

Kickstrap is a community driven project adding improvements to the Bootstrap frontend UI framework. Bootstrap has been adopted with wide spread arms by most developers on the web. While full of features, some thought it could do better, and while their suggestions and feature requests might have not made it to the Bootstrap core distribution, they have been found a home in Kickstrap.

Fonts and Typography

With fonts making such a fundamental difference to the standard BootStrap implementation, there’s no excuse not to customise them. This great article take you through the steps to achieving that with a custom icon library. In this particular instance, they’ve used the popular FamFam icon set; however you could feasibly use something else.

URL: http://fortawesome.github.com/Font-Awesome/

Font Awesome is an icon project designed to add some level of differentiation to Bootstrap. With integration into Bootstrap a sinch, Font Awesome also provides a custom CSS stylesheet for your project, so its a combo of both code, and icon snazziness.

 URL: http://pfefferle.github.com/openwebicons/

Like your icons more, well minimal? OpenWeb Icons started using Font Awesome as the inspiration, but morphed into a collection of other fantastic icons, particularly brilliant for more grayscale themes.

URL: http://fontello.com/

This tool lets you combine iconic webfonts for your own project. With fontello you can access large sets of professional-grade open source icons for use inside BootStrap.

Code Snippets.

URL: http://bootsnipp.com/

BootSnippr provides free HTML snippets for use with BootStrap. With everything from Signup Forms to User Profiles, you can literally copy and paste together a working prototype with minimal coding, letting you get on with the server side stuff.

URL: http://www.joostrap.com/

Joomla fans will be delighted to find that BootStrap themes, components and code snippets for Joomla are available at JooStrap. A must bookmark for Joomla developers.

URL: https://github.com/320press/wordpress-bootstrap

WordPress BootStrap is – yes you’ve guessed it, a WordPress BootStrap ready theme.

Design Templates

If you want to go all out and customise everything around BootStrap, then it may be worth getting your designer take a look through some of these. With Adobe PSD templates, PNG scalability with Fireworks to wireframing assistance, these links should help with the more granular aspect of Bootstrap customisation.

URL: http://www.extendingfireworks.com/?p=133

This fantastic Adobe Fireworks file provides a base UI Toolkit for Twitter Bootstrap with the entire UI recreated as vector images for Adobe Fireworks.

URL: http://gui.repixdesign.com/

Photoshop fans, worry not – there are plenty of PSD’s out there for the customisation of Bootstrap. This one from RepixDesign, is particular well put together and being Vector based makes it easily scalable.

URL: http://viget.com/inspire/an-omnigraffle-stencil-for-twitter-bootstrap-2

OmniGraffle if you aren’t already familiar, is a brilliant mockup and wireframing tool. This stencil now provides much need Bootstrap UI and navigational elements to your templates.

URL: http://www.arvendo-media.com/projects#c-twitter-bootstrap-design-template

If you are more of an illustrator kid, then this EPS should provide a decent start to creating Bootstrap ready designs.

UI Components

URL: http://exacttarget.github.com/fuelux/

Fuel UX adds some additional tidy Javascript components to Bootstrap, including a Combobox, Datagrid, Pillbox, Search and Spinner. Definitely worth a look at including for an extra level of polish.

Buttons

URLhttp://charliepark.org/bootstrap_buttons/

Provides a Button ‘Customiser’ similar to that found in some of the custom Bootstrap themers mentioned earlier

URL: https://github.com/nostalgiaz/bootstrap-toggle-buttons

Bootstrap Toggle Buttons, for sexier iPhone esq switches.

WYSIWG Editors for Bootstrap

URL: http://wrapbootstrap.com/preview/WB0DFT966 

BootStrap Live Editor

URL: https://github.com/samwillis/pagedown-bootstrap

PageDown Fork developed to fit with Bootstrap principles.

URL: http://vitalets.github.com/bootstrap-editable/

If in page editing is more your thing, ‘Bootstrap Editable’ is a fantastic component for your CMS.

Notifications / Popups

URL: http://nijikokun.github.com/bootstrap-notify/

Although Bootstrap has its own notification engine, the code for creating them isn’t just as simple as adding a CSS class. This is what BootStrap notify brings to the party.

URL: http://bootboxjs.com/

Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes using Twitter’s Bootstrap modals, without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers

URL: https://github.com/Gild/bootstrap-tour

Thinking of giving product tours within your application for new users? Bootstrap Tour is an easy to configure site tour wizard which walks and guides your user around your interface, teaching them the tricker parts of your interface.

URL: http://jbutz.github.com/bootstrap-lightbox/

Almost all applications require a lightbox implementation of some sort. Whether it be a modal dialog for logging in without leaving the same page, or for showcasing large images.

SelectBox / Combobox / Pickers

URL: http://ivaynberg.github.com/select2/index.html

Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results. Look and feel of Select2 is based on the excellent Chosen library.

URL: https://github.com/dangrossman/bootstrap-daterangepicker

Probably the coolest Date Range Picker you’ll find on the web, and better again its Bootstrap ready.

URL: http://jdewit.github.com/bootstrap-timepicker/

If your application has time sensitive input, then BootStrap Timepicker is a neat little UI enhancement that helps to ensure more accurate client side user input.

URL: https://github.com/danielfarrell/bootstrap-combobox

Bootstrap Combobox enhances the standard combo, by allowing users to type their input at the keyboard, and it auto selects the relevant entry. Subtle, but effective.

URL: http://www.eyecon.ro/colorpicker-and-datepicker-for-twitter-bootstrap.htm

A colourpicker and datepicker for BootStrap. The colourpicker is particularly nice.

Other Goodies

URL: http://bootstrap-arrows.iarfhlaith.com/

Need arrows in your UI?  This simple jQuery plugin provides Bootstrap with an easy way to include predesigned arrows at any angle within your designs, all through the use of particular CSS classes.

URL: http://botmonster.com/jquery-bootpag/

BootPag is dynamic pagination jQuery plugin for twitter bootstrap.

URL: http://blueimp.github.com/Bootstrap-Image-Gallery/

Bootstrap Image Gallery is an extension to the Modal dialog of Twitter’s Bootstrap toolkit, to ease navigation between a set of gallery images. It features mouse and keyboard navigation, transition effects, fullscreen mode and slideshow functionality.

URL: http://aozora.github.com/bootmetro/

Inspired by the latest incarnation of Windows Metro apps, Bootmetro provides the look and feel of Metro ontop of the core Bootstrap offering. Although, there are clearly some kinks still to be ironed out (from a responsive POV) it is still a worthy resource for those of you looking for something different style wise.

URL: http://bootstrap-forms.heroku.com/

Drag and Drop form builder for BootStrap, that outputs the HTML you need to bring it to life. Handy.

URL: https://github.com/davidber/twitter-bootstrap-sample-page-layouts 

Some additional page layouts not already included in the BootStrap framework. Samples can be viewed quickly here. 

Filed in: Programming
Tagged with:

About the Author ()

Paul is a regular 30 year old web bloke / programmer with a penchant for online marketing. This blog is a personal outlet, with an eclectic mix of articles.

Leave a Reply

Back to Top