Using Twitter Bootstrap to Speed Up Responsive Website Development

bootstrap-blog-headerimage

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:

@media (min-width: 768px) and (max-width: 979px) {
.class { your css here }
}

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.

breadcrumb

Instructions to add all of the components are clearly spelled out on Bootstrap’s GitHub.

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.

forms

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.

To explore the VOA Pronunciation Guide further, visit pronounce.voanews.com.

- – - – -

Thoughts? Feel free to post comments or questions in the section below or tweet us @BBGinnovate.

- – - – -

The foregoing commentary does not constitute endorsement by the US Government, the Broadcasting Board of Governors, VOA, MBN, OCB, RFA, or RFE/RL of the information products or services discussed.

The following two tabs change content below.
Lynne Venart

Lynne Venart

Lynne Venart is a web designer for the BBG's Office of Digital and Design Innovation. Follow her on Twitter: @LynneVenart
Lynne Venart

Latest posts by Lynne Venart (see all)

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *