Kyle Nunery

Boost Your Development, Use Twitter Bootstrap

Kyle Nunery -

Twitter Bootstrap is a great css framework to use when building websites. What makes Twitter Bootstrap so freakin awesome? It takes all of today’s best HTML and CSS practices and wraps them up into a very convenient package.

I have built 2 websites using Twitter Bootstrap and keep coming back to it for it’s pure awesomeness. The css provided in the Bootstrap framework is rock solid. The css naming convention followed through out is very semantic and clean.

Reset CSS

The css includes a good reset adapted from Normalize.css by Nicolas Gallagher.
Inside the default css there are two classes that I like to use no matter what css I am working with: clearfix and hidden.
.clearfix {
  *zoom: 1;
}

.clearfix:before,

.clearfix:after {

display: table;

content: "";

}


.clearfix:after {

clear: both;

}

...

.hidden {

display: none;

visibility: hidden;

}

Icons

Bootstrap provides 140 eye pleasing icons built by Glyphicons.



Forms CSS

It’s important to be able to toggle vertical and horizontal forms via css in order to be able to rapidly change your layouts based on customer feedback. The Bootstrap framework provides tidy css to do exactly that. By flipping the css class from form-horizontal to form-vertical, you can make a wide horizontal form to be a vertically stacked input form.

12 Column Grid

The provided css grid framework is by default based on a 12 column grid which is my favorite number of default columns. A 12 column grid can be divided into halves, thirds, and fourths, so it’s an optimal number of columns for a default grid. The columns can be offset or nested.

JavaScript Plugins

Bootstrap also contains a nice set of JavaScript plugins. My 2 favorite jQuery control plugins Bootstrap has are the Tooltip and Popover controls. jQuery UI doesn’t even have these 2 plugins. I have found tooltips and popovers in general to be great helpers in building pleasing user interfaces.



I built a site that uses Twitter Bootstrap for a Nonprofit group called HorsesHelpingPeople. Twitter Bootstrap was a great tool that helped me build that site.
What do you think about Twitter Bootstrap? Would you recommend any library over Twitter Bootstrap?