Musings of relative value
Twitter Bootstrap – Version 3 – Light Blue – Homepage Image

Needless to say, the changes in the latest version of Twitter Bootstrap are extensive.

Those familiar with the popular framework know that up to version 2.3.2, much of the layouts, class names and base stylings stayed relatively the same, making it easy to breeze through an initial wireframe or template mockup.

Well, throw most of what you know out the window and be prepared to hit the books. The README books that is. Version 3.0 is here, and there’s a lot to go over if you plan on migrating.

Some of the new changes:

  • The move to flat design  The say they’re not following the trend, but rather just a simplification of the aesthetics, allowing an easier base to start designing from.
  • Mobile first priority  The idea is that through the grid, the default behavior will be to adapt to mobile environments and scale up. But it is flexible in that you can indicate how elements behave based on viewport.
  • Box Model improvement  Everything, all elements, now default to box-sizing: border-box. No more manually calculating additional padding to an element’s width
  • Revamped grid system  There are now has four tiers of grid classes. When defining a grid column, you now can specify up to 4 classes that will inform how the column will behave in different view sizes. What was once <div class="span*"></div> now becomes <div class="col-md-*"></div>. The four layout sizes are extra small, small, medium and large.
  • Rewritten JavaScript plugins  All events are now namespaced, no-conflict stuff works way better, and more.
  • Glyphicons font  Grow tired of always having to use the font-awesome vector icon set over Bootstrap’s image based icons? Me too. Now Bootstrap’s icons are in font format and include 40 new glyphs
  • The modal window issues  It plays much nicer on mobile devices now, primary because they scroll the entire viewport instead of having a max-height.
  • Consistent sizing  Buttons, tables, forms, alerts, and more have been updated to have more consistent classes. IE btn-default is required for the base button styling now, where as in previous versions, the base button styling was used as an absence of any of the other styling classes, such as btn-primary

I wouldn’t recommend migrating a completed project, or one that is stable and you’ve already put into production, as there would just be so much code to change. But if you’ve read through the docs and have a sense of the overall changes, I would say definitely give version 3 a shot when starting something new.

Check out the migration guide for more specific guidance. Download Bootstrap 3 here


Leave a Reply

  • (will not be published)