The Release of Bootstrap 3 RC1

11 years ago

Last weekend, the team behind Twitter Bootstrap, a widely used and highly favored front-end framework for websites, launched the first Release Candidate of Bootstrap 3.  The primary focus of this release is the shift to a mobile-first platform and becomes responsive by default.  You can read more about the release from the Twitter Bootstrap Blog.

On the same day of the Bootstrap release, Meanpath also released data on their blog revealing that “Twitter Bootstrap now power[s] 1% of the web”.  Considering the massive size of the web this is an impressive figure.  It is also great news for companies like ours who believed in the future of the framework enough to have built a CMS tool, which relies on Bootstrap.

There is currently web chatter concerning the major alterations to this edition of Twitter Bootstrap.  “With over ~1,600 commits, ~72,000 additions/deletions, and ~300 files changed, everything has changed.” - @mdo and @fat.  We want to spend some time highlighting those big changes and what this will mean to our peers who are building websites and platforms on Twitter Bootstrap.

Summary of Core Changes

Bootstrap has now adopted a mobile-first methodology.  Basically, this means that the responsive design of a site starts with the focus of a mobile device and uses media queries to change the display for tablet and desktops as the view scales out. 

In the past, the default of Bootstrap was based on the desktop view with a width of 940px.  If you wanted your Bootstrap site to be responsive, you had to include both the default bootstrap and the responsive files.  Because of the mobile-first goal, the team no longer separates the responsive features from the core file. 

 This is a welcome change because it simplifies websites by reducing the number of referenced files.  This reduced-file trend is also evident in the popular content delivery network, BootstrapCDN, which already provides a combined CSS file to merge the responsive styles with core styles.

There is really more to it than just merging code files.  With mobile-first design, there are changes to nearly everything in Bootstrap.  These include a revamped grid system and forms, as well as adjustments to many other features we have come to know and love in Bootstrap.

One of the most controversial changes in Boostrap 3 relates to the grid.  The Twitter team has decided to drop the static rows in favor of all fluid rows.  This change is in place to put the emphasis on mobile-first.   In the previous version, when viewing a website on a mobile device, there would be a percentage based width with right and left margins.  This change simply makes all the grids responsive.  It allows for a single grid instead of grids within grids, and reduces much of the prior version’s complexity.

At SquareHook, we initially designed our editor to output the static grid.  After integrating a few templates, we quickly discovered a lot of annoying issues with the use of the static grid.  The shift to dynamic grids in the new release is a welcome one as we start thinking about making changes to our system to support Bootstrap 3.

Another addition to this Bootstrap edition is the migration from .span* to .col-*.  The new features allow for finer-tuning at different device sizes from its predecessor.  This makes it easier to control increasingly complicated grid outputs.

The new styling of V3 has to be one of my favorite features.  Streamlining the look of Bootstrap to be flatter provides easier customization of the default Bootstrap theming.  Again this is a welcome change as we are constantly making adjustments to the theme.  Changes like removing shadows and gradients should be much quicker in version 3.  I’m excited for the new styling and can’t wait to see what they have in store for the designer.   

Updates to Icons, Buttons, Forms, and Menus

Glyphicons have been a impressive asset to Twitter Bootstrap, but separating them out from the core was necessary.  With great alternatives like Font Awesome, we frequently look to other icon libraries for more options in icon sets. 

The button changes are pretty straightforward; much of the changes have been around cleaning up semantics and providing a flatter, modern look based on current web trends.  My favorite aspect of the change is the buttons without outer box-shadow by default.

Forms are now mobile-first.  Basically, inputs now have a width of 100%, by default.  Also there are a number of styles dropped from this section.  In particular, removing the .form-search which will likely not be missed.  Twitter also dropped the inline-help, not surprising since forms inputs are now 100%.

One very controversial change is the removal of submenus.  Many are wondering why this change is happening in the dropdowns.  We made an active decision a year ago to not support this feature in our own development.  I can see the value of it, but I can also see how it increases user complexity.  The work in supporting this feature, is a lot and I agree with mdo:

“@quasipickle We haven’t seen anyone using submenus in meaningful ways and the code necessary to make them work well is just too much overhead. Submenus just don’t have much of a place on the web right now, especially the mobile web.  They will be removed with 3.0.”

Conclusion

The changes in Twitter’s Bootstrap 3 are interesting.  Those of us building out applications that use Twitter Bootstrap have our work cut out for us over the next couple weeks.  Overall, I love the changes and want to thank @mdo and @fat for their excellent work.  Thanks guys.  It’s exciting to see new stuff!

Author: Joshua Maag, CEO at SquareHook