9 Killer Resources To Rock Your Next Bootstrap Project

Bootstrap is the young star that is getting all the attention lately. Released in August of 2011, even Twitter may not have known how big it would get. As of June 2013, it is still the most popular GitHub development project with over 52k stars and over 16k forks. Bootstrap can be mind-blowing when you consider how easily it incorporates so many complex things on a website. But can it get improved upon? Are there tools to make it even more astounding? Yes. Here’s 10 resources to help you on your Bootstrap journey.

1. Kickstrap

A complete kit for making websites: The first of its kind, Kickstrap is a no-install front-end framework with apps, themes, and extras.

This is a little different than options like Jetstrap, as this is a framework you use with Bootstrap to extend it. What it brings to the picnic is the ability to add cool JavaScript libraries (apps) like Raphael.js (demo with Kickstrap), or even some cool themes thanks to Bootswatch.

How it works: Think of it as turning a typical Bootstrap website into a surge protector– where you can plug a lot of different things in and they all work together.
Model: Non-commercial as of June 2013.
Video: http://vimeo.com/55423707#at=0
Website: http://getkickstrap.com/

2. Paintstrap

Generate beautiful Twitter Bootstrap themes using the Adobe Kuler / COLOURlovers color scheme

This one is, in my opinion, very underutilized and has great potential. Here’s why: Bootstrap comes with colors in it, but how often do they truly match up to the theme or website’s colors? Rarely, almost never — that’s how much. Typically when working with a company, they already have a logo and some kind of a color scheme. Paintstrap not only works with that, but it incorporates COLOURlovers and Adobe Kuler, which most of the time improves upon the color scheme.

How it works: Input the Kuler theme ID or COLOURlovers palette ID, and then choose your colors for your elements (with a live preview). When you are done, export your CSS and/or LESS files.
Model: Non-commercial as of June 2013.
Website: http://paintstrap.com/

3. Divshot

The Interface Builder for Web Apps: Drag-and-drop. Export to responsive HTML & CSS. Now in beta.

I would have to imagine that if there was any competition to Divshot, it would be Jetstrap. The main goal and functionality is somewhat similar — drag-and-drop elements and code that is created for you. Where Divshot separates itself is by talking a lot about how clean the outputted code is, its ability to integrate with Bootswatch, and its pricing model. Looking at what they show, the code does look clean.

How it works: It is a simple drag-and-drop interface that lets you create pages with Bootstrap elements and Bootswatch themes. When you are done, export all of your clean code and go to town!
Model: Non-commercial as of June 2013, mostly due to it being in beta. It appears there may potentially be a commercial release in the future.
Video: http://youtu.be/g9KhSUgf38A
Website: http://www.divshot.com/

4. Fancyboot

Fancyboot: Customizing Bootstrap the easy way. Made for Bootstrap lovers.

If you want to tinker around with your custom Bootstrap files and see live previews while doing so, Fancyboot may be just for you. Color picker? Check. Extra variables? Check. Real time previews? Check. This is a great, simple way to live preview and edit a custom Bootstrap installation.

How to use: Select your plugins and components that you want included, and use the side menu and pick the colors that you wish to use. Watch the live preview to see if you doing well or need to change a few things.
Model: Non-commercial as of June 2013.
Website: http://fancyboot.designspebam.com/

5. Bootswatch

Bootswatch:
Free themes for Twitter Bootstrap

If you’ve read this far, you’ve seen Bootswatch mentioned already. That is because it integrates so well with different Bootstrap applications. Bootswatch is simply themes for Bootstrap. It’s all pre-made, so you don’t have to do anything.

How to use: Download the CSS and use. No messing around with hex values. Import the files into various apps if needed.
Model: Non-commercial as of June 2013.
Website: http://bootswatch.com/

6. Bootsnipp

Bootsnipp: Design elements and code snippets for Bootstrap HTML/CSS/JS framework

Bootstrap is such a grand framework — it makes incorporating elements in page fairly simple. But there are times where you can use multiple Bootstrap elements in succession to create a truly impressive section of a website. This all used to have to be figured out by the developer. Not anymore. Bootsnipp allows you to take useful snippets of Bootstrap code and paste them into your site. Sample snippets include pricing tables, address and payment forms, sign-ins, and more.

How to use: Click on the snippet you like, and select the code. Insert it into your site.
Model: Non-commercial as of June 2013 (but they ask you for a tip).
Website: http://bootsnipp.com/

7. Form Helpers

Bootstrap Form Helpers: Extend Bootstrap’s components—now with 12 custom jQuery plugins.

Bootstrap is a game-changer, but some brave souls said, “Not good enough. Let’s add more to it.” How can you improve on the sweetness of Bootstrap? By adding very useful snippets easily — that’s how. Do wondrous things like pre-populate country lists, auto-format phone numbers, select box with filters, and more.

How to use: Download by clicking the giant blue button, copy the necessary files and folders over, and incorporate just as they show you on their website.
Model: Non-commercial as of June 2013.
Website: http://vincentlamanna.com/BootstrapFormHelpers/

8. Bootstrap Lightbox

Bootstrap Lightbox: A simple lightbox plugin based on the bootstrap modal plugin.

This one is simple. You add lightbox functionality to your bootstrap site based on the modal plugin. Lightboxes can have captions as well. It is a simple addition that can make your next Bootstrap project all the much better. Bazinga!

How to use: Again, download by clicking the giant blue button, copy the necessary files and folders over, and incorporate just how they show you on their website.
Model: Non-commercial as of June 2013
Website: http://jbutz.github.io/bootstrap-lightbox/

9. Built with Bootstrap

A showcase of sites and apps built on Twitter Bootstrap

Our final resource lets you see what real, polished Bootstrap websites look like. Built with Bootstrap is basically a website gallery of websites that have Bootstrap incorporated. These websites are professionally done and use some great Bootstrap goodness. This is a great resource to get ideas from.

How to use: Visit http://builtwithbootstrap.com/
Model: Non-commercial, but the site has many ads.
Website: http://builtwithbootstrap.com/

I hope you enjoyed these 10 killer Bootstrap resources. Do you have more? Add them in the comments below.

About the Author:

Ryan Boog is the owner of Happy Dog Web Productions, a web and mobile development firm that also offers Search Engine Optimization.

(dpe)

Image Photo by Kevin Ku: on Pexelse