Twitter Bootstrap 101: Introduction
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.
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:
- 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
Video 1: Introduction
Steps covered in this video:
- Visit Bootstrap's homepage of online documentation
- View some sites built with Bootstrap
- Download the code from Github
- Unzip it
Video 2: Unpack and Organize
Steps covered in this video:
We'll do the following, but not precisely in this order:
- Organize the CSS
- Get rid of unneeded files (saving LESS for another day)
- Keep the Apache 2.0 license file, as required by Twitter Bootstrap's licensing terms
- Prepare to develop our own Bootstrap-built site
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.