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

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

http://www.divshot.com/

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/

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.

Add Amazingly Useful Icons to Your Website

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

http://gregoryloucas.github.com/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.

Also, check out Elusive Icons.

Make Your Tables Beautiful

http://tableclothjs.com

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/

If you’re familar with Twitter Bootstrap, you know that it comes with percent-complete bars.

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

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.

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

Make That Awesome Photo Gallery

http://jbutz.github.com/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

Forms. 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/

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

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?