Jun 28 2013

10 Killer Resources To Rock Your Next Bootstrap Project

Advertisement

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. Jetstrap

image002_0000-w550

THE Twitter Bootstrap Builder: Not just a mock-up tool, Jetstrap is the premier interface-building tool for Bootstrap.

The title isn’t an over-exaggeration. If you want some guidance building interfaces with Bootstrap, or just want to do it easier, Jetstrap is pure awesomeness. Why? Jetstrap tells you why: “Life is too short to dig through docs when you just want to build. Grab snippets of clean markup and quickly use complicated components. Take off faster!” Really, it’s true. Since it is easy to use, it works great for both designers and developers. The concept is similar to another generator named Divshot. Just drag and drop your way to the exact code you need.

How it works: It is a simple drag-and-drop interface that lets you quickly create a page with Bootstrap elements. When you are done, export all of your clean code and go to town!
Model: Commercial, starting at $16 monthly.
Video: http://youtu.be/AuTo_6id3J8
Website: http://www.jetstrap.com

2. Kickstrap

image004_0000-w550

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), extras like Font Awesome, 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/

3. Paintstrap

image006_0000-w550

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/

4. Divshot

image008-w550

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/

5. Fancyboot

image010-w550

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/

6. Bootswatch

image012-w550

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/

7. Bootsnipp

image014-w550

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/

8. Form Helpers

image016-w550

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/

9. Bootstrap Lightbox

image018-w550

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/

10. Built with Bootstrap

image020-w550

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. Follow or Like his company for more Mobile, CMS and SEO resources.

(dpe)

About the Author

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.

Homepage

Comments and Discussions
  • Edward NineOne, 28 June 2013

    If Jetstrap + developer = <3, I think I should give a try :D

    • Ryan Boog, 29 June 2013

      Edward give it a shot. Sometimes experimenting is the best way to find out what works for you.

      Tubs heard a LOT about Codekit and sadly havent dove into it yet. I will soon.

      Jake, you’re welcome. Glad you enjoyed the read.

  • Tibs, 29 June 2013

    My favourite resource when working with bootstrap & a bunch of other frameworks is codekit, it is a zero setup for processing less, sass, coffeescript etc plus it auto refreshes the browser. I don’t have time to waste when prototyping a site. Drag & drop frameworks in. The time I have saved has made me reevaluate my process. It is my new pet app hence the rave!

  • Jake Johnson, 29 June 2013

    Jake from Divshot here. You’re right about our business model. We’re planning to introduce paid plans in the near future with premium features for teams. Thanks for sharing! We love Bootstrap.

  • Chris Ochsenreither, 19 July 2013

    What about bootply.com? It’s like a jsfiddle for bootstrap.

    • Tom Michew, 26 November 2013

      +1 – Bootply is my favorite tool for Bootstrap.

  • David Miller, 02 September 2013

    Another great resource for Bootstrap development is http://startbootstrap.com – a growing library of free, open source HTML templates for Bootstrap 3.

  • Rocky Singh, 13 September 2013

    Thank you for sharing these resources. There are many resources out of these that we use in our daily development work for responsive website development. We work with many web design companies and freelance designers and our developers are making good use of these tools, to offer cost effective and timely solutions. Bootstrap form helpers and lightbox are great tools.

    I am going to share this article on our facebook page for the help of other developers. Thank you.

  • elizabeth, 20 September 2013

    thank you, it’s really useful

  • Daxi, 13 January 2014

    Nobody mentioned Pingendo, an interesting free alternative to Jetstrap

Leave a Reply

Comments are moderated - and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!

comments form
search form
 
image description image description