I’m in the process of converting Bootswatch from Bootstrap 2.3.2 to 3.0.0, which you can preview right now. This process has meant a lot of labor first off, but also exposure to what’s new with Bootstrap 3. Here are some of the big wins I’ve observed.
Bootstrap 3 is much easier to theme. If you’re digging into the LESS, B3 offers more variables that propagate to multiple components in a consistent manner. For instance, B3 adds variables (@state-info-text) that are shared by forms and alerts.
B3 also eschews color names (@red) for more semantic state names (@brand-danger). This enforces greater consistency by removing one degree of indirection. The old path was #ff0000 -> @red -> danger; the new one is #ff0000 -> danger. Of course if you need a set palette, you still have the choice to set your own variables.
If you’re simply overriding the default CSS, that’s easier too thanks to the simplified code that comes with flat design. In many instances, you only need to override the property of interest (color or background-color), rather than playing whack-a-mole with borders, box shadows, and gradients that are coupled with it. And anecdotally speaking, the specificity of Bootstrap has loosened up, meaning you don’t have to use a five-combo selectors to override most things.
With fewer properties being used thanks to flat design, another benefit is the smaller file size. Bootstrap has gone from two files at 149kb/123kb minified to a single file at 86kb/69kb minified.
In addition to the flat design, the Bootstrap developers have worked hard at making the code as efficient as possible. To illustrate, look at Slate, one of the more skeuomorphic themes. It’s slimmed down from 155kb/130kb minified to 105kb/87kb minified.
One of the biggest changes driving B3 is a mobile first approach. While in B2 you had the option to go responsive or not, B3 assumes that you are.
While this will be a “gotcha” to people not accustomed to designing responsively (which you should be), the rest of us get a much more powerful grid system. Do you want to show 4 columns for desktop, 3 columns for tablets, and 1 column for phones? Move the left column to the right? No problem.
Another handy addition to B3 is the img-responsive utility class, which scales images up to their parent element as it resizes.
B3 adds some new components, including the list group. My only complaint with it is that I wish it were easier to get working with the ScrollSpy plugin.
Perhaps the change that elicited the most impassioned response was the switch from camelCase to hyphens. While the change did force me to unlearn some muscle memory, it wasn’t long before I had adjusted. And in the long term, hyphens seem more readable, and are certainly much easier for editing partial strings, like when changing “btn-primary” to a “btn-default”.
Overall, it didn’t take long to pick up on B3, despite some of the more arcane, less humane, class names. As Bootstrap developers, the majority of changes will stay hidden under the hood. Converting the Tumblr Bootstrap theme for this blog from 2.3.2 to 3.0.0 required only updating the navbar markup and column class names (span4 offset1 became col-lg-4 col-lg-offset-1). Here’s a useful migration guide.
As you can see, Bootstrap 3 offers a lot of wins. Even if you’re not in such a rush to update your existing projects, you should use your next project as an opportunity to give B3 a whirl.