Advertisement
Complete Websites

Twitter Bootstrap 101: Introduction

by

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.

bootstrap

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:

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

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes!

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

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes!

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.

Related Posts
  • Web Design
    eCommerce
    E-commerce for Mobile: Making the Most of Your SiteMobile thumb
    In this article we’re going to address some mobile e-commerce hurdles. I'll break down a few of the most important steps to take account of in preparing an e-commerce site for mobile access and offer you some advice based on my experience.Read More…
  • Code
    Creative Coding
    Advanced Grunt TechniquesGrunt logo 400
    In a previous post in this series, I walked you through setting up Grunt in your project. Now that we have everything setup, I would like to talk about a few advanced techniques that you can use with Grunt. Specifically, I'm going to focus on the configuration of your existing tasks and how to create custom tasks.Read More…
  • Web Design
    HTML/CSS
    Why I Choose Stylus (And You Should Too)Stylus thumb
    The world of front end web development has been steadily increasing its uptake of what we call "CSS Preprocessors", which extend the functionality of regular CSS. Arguably the two most well known, with the greatest user base, are LESS and Sass/SCSS. However there is a third preprocessor that hasn't received quite as much attention, and that's Stylus.Read More…
  • Code
    JavaScript & AJAX
    JavaScript Tools of the Trade: JSBinJsbin retina preview
    We've all been there. There are times when you simply want to throw some JavaScript code up and see how it works. Sure, you could go through the hassle of:Read More…
  • Web Design
    UX
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…
  • Web Design
    Workflow
    Twitter Bootstrap 101: CustomizeBootstrap
    Built into Twitter Bootstrap's documentation is a handy Customize page, which provides a quick way to implement a custom color scheme, custom typography and a number of other CSS customizations. Of course, the most powerful approach is to work directly with Bootstrap's LESS files. But with a few quick adjustments, and for those who prefer to work in straight CSS, this page offers you a great way to jumpstart your customizations.Read More…