I Love These 12 Twitter Bootstrap Tools and Resources (and You Will Too)

bootstrap

I’ve been spending the last week working with Twitter Bootstrap and some various Twitter Bootstrap Tools and Resources. From my previous article introducing the subject to now, the full scope of how how totally bitchin’ Twitter Bootstrap is is just now becoming apparent.

Twitter Bootstrap itself is, like Ben Affleck in “Good Will Hunting” might say, wicked smaht (yes, that’s spelled right).

ben-affleck

It’s full of powerful shortcuts that make creating good looking, functional websites must faster. This includes scaffolding – it uses a 9 or 12 column grid system similar to HTML5 Bootstrap and 960.gs. It includes a bunch of default classes for wells, alerts, buttons, forms, and more. This is super handy. I really can’t stress that enough.

However, Zed Shaw can. Only he’ll tell you how awful CSS is (and javascript, and HTML, and… honestly, this guy hates most everything…) by singing the praises of a grid system. It’s got NSFW language in it, so be fair warned. (Jump to 8:10 to see specifically what I’m talking about. I’d link directly to it but on Vimeo, if I did that, it’d play automatically and that’d be annoying. So help a brother out and just jump to 8:10 to see a coder get mad at CSS.)

But back to Twitter Bootstrap, it also comes with a bunch of built-in components – menus, labels, badges, progress bars, etc. – and JavaScript capabilities – modal windows, drop downs, alerts, etc.

You know, useful things.

And having designed a detailed signup form (which I’m hoping to turn into a future tutorial for the site) for a website this week with it, I can say that Twitter Bootstrap is a much welcomed addition to my workflow.

What I didn’t expect were all of these awesome resources to pop up from the larger Internet community. I LOVE THEM.

If you didn’t already have enough of a reason to spend the time to learn Twitter Bootstrap, now with these Twitter Bootstrap tools you can also…

Drag and Drop to Build Your Website

http://www.jetstrap.com

Jetstraphttp://www.divshot.com/

DivShot

The idea of JetStrap (and DivShot) is pretty awesome. It’s a great attempt at building a tool that allows users to build a website using Twitter Bootstrap just by dragging and dropping items on a page and then configuring those items. It’s obviously still somewhat rough – but from what you can already do, the future looks bright. What’s really nice about the tool is that it outputs all of the code that you generate with your creation. This makes creating small sections for your website (like forms and such) something that you can create and code in minutes.

Create Your Style Guide Incredibly Quickly

http://pikock.github.com/bootstrap-magic/

Bootstrap Magic

They call this tool Bootstrap Magic. And when you see it, it pretty much IS magic.

See, there are two kinds of designers: designers who work from components and designers who work from a complete design. Some people break design down to its individual bits and then build websites with them. Others treat that design like one cohesive whole and only break down the design afterward.

The component style of design is more comfortable to designers who are also programmers. We think in terms of H1, H2, H3, and p tags and so forth. Designing from an art-first point of view makes this a bit more challenging.

Those of us who have to bang out designs on a routine basis know that we’re going to be responsible for a certain amount of base design no matter what. I mean, the background has to have a color (or an image), the headlines and paragraph tags need styling and so forth. This little tool helps you nail down those items right out of the gate. What’s really killer is that it outputs your code for you so you already have your main site colors, branding, scaffolding, typography, and more, ready to go.

It couldn’t be easier.

Alternately, customize your download of Bootstrap and pre-pick all of your colors and styles with Fancyboot.

fancyboot

Add Amazingly Useful Icons to Your Website

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

Font Awesome

http://gregoryloucas.github.com/Font-Awesome-More/

Font Awesome More

The Font Awesome (and Font Awesome More) isn’t exactly a font. But it behaves like one, even though it doesn’t have any letters or numbers in it. Confused? Awesome!

But seriously, Font Awesome behaves like glyphicons. Glyphicons are small graphical images that you can use in your design that come with Twitter Bootstrap. They are really easy to drop into buttons and menu items. They make websites easier to follow and increase findability. They’re really handy and easy to use.

Font awesome is something very similar. It’s 249 icons that behave like a font – you can resize it to suit your needs and it looks great at any size – but it’s implemented like a glyphicon. Meaning, it’s not definied using @font-face or font-family. I love this if for no other reason than they make swapping out bullets in an unordered list with check marks stupid easy. It’s perfect for building out an amazing sales page.

checks in font awesomeAlso, check out Elusive Icons.

Make Your Tables Beautiful

http://tableclothjs.com

tablecloth.js

It’s a dirty fact of life for web designers: we still use tables. With tablecloth.js, it does the heavy lifting of making the tables look beautiful while we spend our precious time in other, more pressing, less boring ways.

Hook Up a Wizard Like a… uh… WIZARD!

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

Screen Shot 2013-02-11 at 4.32.13 AMIf you’re familar with Twitter Bootstrap, you know that it comes with percent-complete bars.

twitter bootstrap bars

I used this in a way very similar to this in a multi-step checkout process.

checkout progress

Fuel UX, is a series of lightweight javascript components that you can add to your site. And so far you’re all ho-hum. Because “lightweight javascript components” doesn’t mean a whole lot. What that means though is “cool bits of interactivity that you don’t have to program yourself”. Score!

My favorite component of Fuel UX is their Wizard script. It makes a very smart, attractive looking box that shows the order of the steps to get through the wizard.

Fuel UX Wizard scriptSee how the percent bars are OK but the Wizard is awesome for e-commerce checkout sections, wizards, and even multi-page surveys. And it’s as easy as adding a class of “wizard”.

I’m also really interested to check out the Data Grid, which also looks incredibly useful.

Fuel UX Data Grid

Make That Awesome Photo Gallery

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

bootstrap lightbox

If you have a website, at some point you’re going to need a light box. It’s just inevitable. You’re going to want to show a group of pictures. So what are you going to do? Find a plugin? Been there, done that my friend. But what would be even better is if there was a Twitter Bootstrap light box that took advantage of the things that Bootstrap already does – like modal windows – to give us a nice looking, functional light box.

Meet Bootstrap Lightbox. It’s basically everything I just described. Just link to the .js file, reference two bits in your a href tag and BOOM. Done.

Make Your Form Easier to Build and More Functional For Your User

http://vincentlamanna.com/BootstrapFormHelpers

Bootstrap Form HelpersForms. Gah.

It’s one of those basic elements of the web that most people don’t spend any time thinking about, like buttons. They are just there.

So why are they such a pain in the balls to create?

Every time I make a form and have to go find a list of the US States or a list of Countries, or I have to format the text field to accept a phone number in a specific (yet generic) way, I die a little inside. This has literally been done millions of times by designers the world over. Isn’t there an easier way?

Oh right. There totally is a better way. It’s called Bootstrap Form Helpers and it does exactly what its name says it does. This is a series of incredibly helpful components to make developing (and using) a form so much easier. That list of US States? It’s got that. How about countries. With icons motherfucker! Want to format for a 10-digit phone number. It does that too. Time zones, date pickers, time pickers, and the list goes on. Trust me when I say that Bootstrap Form Helpers is your friend.

Make A Tour For Your Website in the Style of WalkMe or Joyride

http://sorich87.github.com/bootstrap-tour/

bootstrap tour

Tours.. they’re becoming a big thing. Folks are realizing the complexity that can be built into today’s websites and applications and need a quick way to bring users up to speed. ZURB has put out the wonderful Joyride and WalkMe has their tremendous product when you want to get all full-featured. If you have the need to create a tour for your Bootstrapped website, you should take a look at Bootstrap Tour. It’s one of several Tour scripts for Bootstrap, and a good one at that.

Use Fantastically Useful Code Contributed by the Community

http://bootsnipp.com

bootsnipp

The best thing about Twitter Bootstrap is that there’s a rapidly growing community that’s able to contribute code that we can all use and integrate immediately into our own projects. Nothing so clearly proves how much easier Twitter Bootstrap makes your life as a designer than being able to cut and paste the code you wish you would have written and then only needing to edit it slightly to fit your needs. It sounds too good to be true, but with Bootsnipp, that’s what you get.

Do you need a compact contact form? They got you, dawg. How about a pricing table? Knock knock. Who’s there? Your pricing table. What about a way to display vacation rentals? Okay. I know that’s not many of you. That’s weirdly specific. But Bootsnipp has you covered there too.

It’s not exactly Github, but for bits of useful code that you’re likely to need, Bootsnipp is definitely a place to check out and bookmark.

Speaking of Github… it’s littered filthy with Bootstrap projects. Seriously.

If you haven’t gotten in on the Bootstrap action yet… what are you waiting for?

About the Author

A longtime web professional with over 18 years of experience working with clients in the music business, actions sports industry, and local businesses. Owner of Little Wing Marketing. Google Plus

17 comments on “I Love These 12 Twitter Bootstrap Tools and Resources (and You Will Too)

  1. Pingback: The Rundown on Front-End Web Design Templates: Twitter Bootstrap, HTML5 Boilerplate, and More | A Better User Experience

  2. Pingback: 6 Of The Best Twitter Bootstrap Tools for Easy Website Design | A Better User Experience

  3. Just wanted to say thanks for a great resource. We use bootstrap on our site and your article has given us loads of great ideas!

  4. Hello ,

    i want to advise you Pingendo.com.

    It’s a visual builder for HTML5 documents. With drag and drop, full CSS3 styling and realtime HTML/CSS editor. With support for Bootstrap…
    would be ideal to add to this list of app resources…

    enjoy it!
    Bye!

  5. Hi Ben,

    It is very interesting to see the growing community around Bootstrap. It inspired me to create Bootply, a Web-based editor just for Bootstrap: http://bootply.com

    I would love to hear feedback from your audience.

    Thanks.

  6. A useful bunch of tools to check out but one thing:

    >> “It’s a dirty fact of life for web designers: we still use tables.”

    Actually it’s not a dirty fact. Tables are fine. You should’t use them for layout. Nobody does anymore.

    If you are presenting tabular data and using something other than a table, that might be ‘a dirty fact’.

  7. Pingback: Twitter Bootstrap vs Foundation 4 - Which One Is Right For You?

  8. This is a great collection you’ve started here- thanks for sharing! I just recently started using Jetstrap and I LOVE it. It’s so easy to use and efficient. Can’t wait to try out all the other tools on this list.

Leave a Reply

Your email address will not be published. Required fields are marked *