Twitter Bootstrap 101: Introduction

Twitter’s Bootstrap is an excellent set of carefully crafted user interface elements, layouts, and javascript tools, freely available to use in your next web design project. This video series aims to introduce you to Bootstrap; taking you all the way from downloading the resources, to building a complete Bootstrap-based website.

When Mark Otto (@mdo) and Jacob Thornton (@fat) released Twitter Bootstrap to the world in August 2011, their announcement explained what its value would be: empowering front-end developers to kickstart projects more efficiently and effectively.

The Bootstrap stylesheet provides an easy-to-implement 960 grid for efficient layout, as well as expertly crafted styles for typography, navigation, tables, forms, buttons, and more. To take care of everyday JavaScript touches, Bootstrap provides a well built set of jQuery plugins for drop-down menus, tabs, modal boxes, tooltips, alert messages, and more.

Together, these interface elements provide all the trappings of a standards compliant, user-friendly, professionally built HTML5 website, right out of the box. As @mdo put it in the original post:

Bootstrap is a very simple way to promote quick, clean and highly usable applications … providing a clean and uniform solution to the most common, everyday interface tasks developers come across.

And yet none of it gets in the way of further customization. Again, in the words of @mdo, while Twitter Bootstrap "is very extensive," it nevertheless remains "flexible enough to work for many unique design needs." Thus,

You can use Bootstrap to throw together quick prototypes or guide the execution of more sophisticated designs and larger engineering efforts.

The liberal licensing terms, under the Apache 2.0 license, provide a great deal of creative freedom. So long as you give the good folks at Twitter due credit for their work, you’re free to take, tweak, and customize everything to your heart’s content, then turn around and launch the resultant site for yourself or for a client, for free or for profit. (For further reading, check out this discussion thread, where the folks at Twitter have explained how to remain in compliance with the license while customizing the code.)

Given the obvious value of what it offers and the liberal terms of its license, it’s no wonder so many developers have begun taking full advantage of it. The Tumblr site, "Built with Bootstrap", has documented a number of Bootstrap-built sites, including:

• CodeAcademy.com
• CodeCards.com
• Codesprint
• The Hub Cycle Shop
• Concerts in the Clearing
• And even MSNBC’s new site: BreakingNews.com

In all of these examples, you’ll note a clean grid and an interface that connotes professionalism. You’ll also note a good deal of variety in the details. And you may be struck by the fact that developers at respected outfits like Code Academy and MSNBC have opted to build with Bootstrap.

If you’re anything like me, you’ll be sorely tempted to check it out for yourself — and you should!

In fact, I’ve been checking it out recently. Let me show you around.

In the two brief videos below, I’ll introduce you to Twitter Bootstrap’s home base, walk you through downloading the code, after which we’ll crack it open and begin organizing things to prepare our own Bootstrap-built site.

Get the Code

• Go to Twitter Bootstrap’s Homepage
• Download Bootstrap v. 1.4.0 (used in this tutorial)

Video 1: Introduction

Steps covered in this video:

1. Visit Bootstrap’s homepage of online documentation
2. View some sites built with Bootstrap
3. Download the code from Github
4. Unzip it

Video 2: Unpack and Organize

Steps covered in this video:

We’ll do the following, but not precisely in this order:

1. Organize the CSS
2. Organize the JavaScript
3. Get rid of unneeded files (saving LESS for another day)
4. Keep the Apache 2.0 license file, as required by Twitter Bootstrap’s licensing terms
5. Prepare to develop our own Bootstrap-built site

Next Steps?

In future tutorials, I’ll walk you through Bootstrap’s main features, and I’ll help you use Bootstrap to build your own custom repository of Bootstrap snippets. In so doing, we’ll get to know Bootstrap, gain experience using it and customizing it, and prepare ourselves to work with even greater efficiency on our future Bootstrap-built projects.