By Tom Bennett, Front End Developer in Mobas' Digital team.
At Mobas we’ve been using the Bootstrap framework for quite some time. Recently, Twitter released an alpha version of the 4th major iteration. There are a few differences between version 3 and 4 so today we’re going to take you through a few of these.
First of all, Bootstrap has dumped LESS in favour of SASS, although a SASS port of Bootstrap 3 existed. This might split opinion between developers, especially here at MobasIgnite. Those that have grown used to LESS might be somewhat put off by this change, but it is regarded by many developers as the CSS preprocessor of choice. We can’t help but feel that the industry is going to be leaning more towards PostCSS in the future, but perhaps it was too early for Bootstrap 4 to utilise it – although that depends on the expected life cycle.
Media queries have been changed from using pixel values to using ems, which is something that a lot of developers have been using for a while, so it’s good to see that Bootstrap 4 has caught up in this regard. In Bootstrap 3 we would often add some extra LESS to make media queries easier to manage, but this should no longer be necessary as breakpoints are now easily configurable in SASS.
The grid system, by and large, hasn’t changed. They’ve moved away from pixel values for their grids, and are now using rems instead. Font sizes all use rems by default as well now, which is something we’ve been baking into our projects here at MobasIgnite anyway. This means everything is relative to the HTML root so we can scale the grid and font-sizes in our project by simply changing the value on the HTML root element.
Glyphicons are gone. We’ve moved towards using a more complete icon set in our projects recently, such as FontAwesome or Ionicons, so there’s really very little need for these any more. There is flexbox support built in, but it has to be enabled.
Finally, Bootstrap 4 is now more lightweight, which is always a good thing, especially as it has pretty much the same feature set as before. Like all web developers, we’re always hoping to reduce the weight of our pages and so every little helps.
There are plenty more new features, but this is a brief overview of some of the bigger ones that we believe will affect us most here at MobasIgnite. There are alternative frameworks out there which have gained popularity recently, so it’ll be interesting to see if Bootstrap 4 can maintain its dominance in an ever crowded and improving market.
Mobas is a creative, digital agency based in Cambridge, offering a number of lasting web solutions from responsive web design, digital consultancy and search engine optimisation. Find out how you could benefit from better digital support by contacting us today.