In the series “Back to Front” our consultant Eoghain will look at the latest developments, releases and news in technologies from (you guessed it) the Back-end to the Front. He is happy to talk technologies suggested by our readers and answers any questions you have.

 

Back in the old days when I was taking my first steps into coding web pages, responsive design was one of those things that I loathed to do… media queries were and still are one of the most tedious aspects of my work but, as always, a necessity for making a truly great web experience for the majority of users.

Those legends at Twitter threw me a lifeline shortly after. The first release of Bootstrap was a revelation to me, suddenly more than half the work was done as soon as I had written the HTML for my page, was it perfect? No, but it was an improvement. Now all these years later Twitter have released the Beta 2 of Bootstrap 4

Even from a cursory glance, this is miles better than what I could have hoped with many of my favorite tools are now native within the framework. No longer will I have to make sure all my CDNs are included in the header (or working) before I use them, theoretically they should just work.

Bootstrap 4

 

Let’s dive a little deeper into why I think this release only bodes well:

The move to SASS

Firstly, I love that SASS is now the native CSS preprocessor for Bootstrap 4. I have always loved using it and while LESS wasn’t a million miles from it, I just always preferred it, especially considering the ease of use of the variables. Now Bootstrap 4 has a number of predefined variables for native styles and UI elements which makes customization extremely quick and easy.

Font-awesome replaces Glyphicons

If you are like me you fell in love with font-awesome the moment you saw it, and the library has grown and improved with subsequent iterations, now it gets even better with its native integration in Bootstrap 4. I know this is minor since it was always compatible and pretty easy to use but to me, this is like the art in the foam on your latte, it doesn’t make any major difference but makes the experience more enjoyable because it is there.

Flexbox and the new grid system

Bootstrap 4 finally takes advantage of Flexbox, I was wondering why this hadn’t happened before since it’s such a logical step, but then again rewriting the entire grid system is no small task so I kind of understand. I haven’t had a chance to play around with this much so far but I’m hoping that there will be performance enhancements for mobile displays which is exactly what they are promising with this release.

Reboot is the new Normalize

One of the aspects of Bootstrap 4 that I’ve anticipated most is the fork of Normalize.css that Twitter are calling Reboot. From what they have described we should be seeing performance improvements due to this fork since they have now consolidated all of the HTML resets into a single CSS module. Additionally, this has allowed them to implement more opinionated resets and make them a core native feature.

Final thoughts

Everything about this release screams brand new, every JavaScript plugin has been rewritten from the ground up in ES6 to take advantage of all the latest features but this comes at a cost. Older browsers are no longer supported, this includes IE8, IE9, Safari 8, iOS8 and below, so if you are going to transition to the latest and greatest Bootstrap, then know your user demographic first (Granted, this is something you should be doing anyway but…).

No doubt there is much more to say about this release but until I get the chance to play with it properly I won’t say more. I will say though I am excited by all of this, it’s a giant step in the right direction and it makes me all the more eager for the first non-Beta version to see how it has been refined.

Let me know if you have any thoughts on this release and the benefits you see coming from Bootstrap 4.

Contact me: [email protected]