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.
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
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
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
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
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!
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.
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
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
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
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
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?
Pingback: The Rundown on Front-End Web Design Templates: Twitter Bootstrap, HTML5 Boilerplate, and More | A Better User Experience
Pingback: 6 Of The Best Twitter Bootstrap Tools for Easy Website Design | A Better User Experience
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!
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…
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.
Bootply.com looks similar to Koding.com? Have you checked it out. It looks promising.
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’.
Alex Walker is correct here! Tables are totally correct in the right application.
Pingback: Twitter Bootstrap vs Foundation 4 - Which One Is Right For You?
Thanks ben for this great article, hopefully you will keep updating the list with new interesting resources, here is our contribution http://twittstrap.com/twittstrap. Your feedback is really appreciated .
thanks for sharing these resources
Thank the the great list of resources, will come in very handy.
Thanks great collection of tools there,
gotta love web design this last few years got whole lot harder / easier at the same time.
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.
Quite useful resources and you can also checkout http://www.themebulk.com/ … they have beautiful and responsive themes made with bootstrap.
Thanks for sharing anyway.
Another great resource for Bootstrap is Start Bootstrap – a Free and Open-Source library of HTML starter templates for Bootstrap. Plus, they are all up to date for Bootstrap 3. Grab them at http://startbootstrap.com.
Font Awesome & FuelUX are awesome we’ve used them in our bootstrap projects ex. http://bootstrapmaster.com/themes/admin-dashboard/genius-dashboard-bootstrap-admin-template/
In next project we will use also Bootstrap Tour
Another good resource for Bootstrap 3 is http://www.prepbootstrap.com, which contains free themes and code templates.
Great article, with a wealth of resources.
You may also want to add http://www.prepbootstrap.com, which includes free templates and fully functional themes, all up-to-date with the latest bootstrap version.