May 31, 2013

Using Twitter Bootstrap to Speed Up Responsive Website Development

Occasionally in our office, we have small, one-off projects that don’t need to fit into our existing content management system. This gives us more flexibility in design and structure, but we need to get them done quickly and without a lot of resources. When we built the redesigned and responsive VOA Pronunciation Guide, we used Twitter Bootstrap to get it up and running fast.

Twitter Bootstrap is an open source HTML, CSS and Javascript framework. It was developed by Twitter engineers at their first Hackweek as a flexible and streamlined framework for all of their developers—replacing the tendency to build projects from scratch or from a variety of different frameworks.

Responsive CSS

Using Bootstrap’s fluid grid system makes your site scale-able to any device, big or small. If you’re just getting started with responsive CSS, poke around the bootstrap-responsive.css file to see how styles are changed based on screen size. The CSS uses @media queries to change the display based on screen size, like this:

The Bootstrap examples have all of this CSS completed for you. If you’re already a pro at responsive CSS, downloading Bootstrap gives you source files to start from, which you can leave as is or manipulate.

Easy to Implement User Interface Components

It can be difficult to decide on user interface elements before you see them in action. With Bootstrap, much of the custom development time is eliminated, so you can experiment with different components without adding a ton of extra work.

For example, to add breadcrumbs as seen below, simply create a list and add the class “breadcrumb” to the <ul> tag. To add a divider between the list items, add <span class=”divider”>/</span> before closing the <li> tag.

Pretty CSS Forms

I love CSS, but I don’t love trying to make forms look pretty using CSS. Twitter Bootstrap read my mind with their default form styles in the base CSS. They are slightly more complicated than the breadcrumb example above, but use the same method of adding class names to indicate the function — and corresponding look — of the item.

For the VOA Pronunciation Guide, we started with the basic marketing site template, and customized the look and feel by editing the CSS. We added several Bootstrap components, including dropdowns, tabs, suggestive search, glyphicons, breadcrumbs, pagination, and buttons. Using Bootstrap helped us get the project off the ground quickly, without a lot of development resources.