The Bootstrap 4 Alpha is here

The most popular front-end framework is launching a new version

Florian Fischer

At Bloopark, Bootstrap 3 is the air we breathe. Every day we are working with the popular framework and we came to love its features. The easy use, its very semantic classnames and the vast adoption of the open-source solution save us a lot of time and thereby costs. Specially the core of bootstrap, its grid system, makes it easy to build complex layerd layouts fast. In the following you will find my favourite picks from the features of the 4-alpha version of Bootstrap

1. FlexBox Support

Personally I was craving this feature the most. Since Odoo is using the current Bootstrap version 3 and the browser support for flexbox has only been gaining traction recently, we could only use this technology sparsely and not where it was the most useful: the grid system. With a flexbox integration into Bootstrap we are getting a lot more control and an easier handling of the grid system while all the class names stay the same. Problems like vertical centering or keeping a flexible but same height column structure will be problems of the past with flexbox.

$enable-flex: false !default;

To enable flexbox you just have to put the flex variable in the _variables.scss file to true. It is going to be interesting to see if Odoo is going to implement the flexbox grid. Since the default Bootstrap grid will still works with floats, it would be the easier option to just keep the old grid system. But since flexbox is the biggest advancement in CSS in the recent years it would be foolish to stay with the old years.

#1 Column height

A common problem for front-end devs is keeping the same column height while still staying flexible to the content. So far we had to use workarounds or fixed column height. Flexbox makes it possible to make columns adapt to the content while containing the same height as its siblings.

#2 Vertical positioning

Another very common problem of CSS3 has been the consistent vertical centering of elements. So far we had to use hacks like setting a large lineheight and vertical-align to middel or simply use top-margins which is very unflexible. Flexbox makes it possible to use vertical centering independently from the height of the content.

You can learn more about the advantages of flexbox on the page by Philipp Warton Solved by Flexbox.

2. Rem for font sizes

I was very happy to work with rem at Bloopark from the beginning. This meant though that we had to overwrite a lot of default values and sometimes ended up with a mix of rems and pixel units.

Rem are relative units where the font size is calculated as a multiple of the font size of the root element. This way you can adapt font sizes for different media queries by just changing one value and having it applied to all fonts of your page. This is especially useful for large screens and high-res displays.

3. Spacing Classes

In its website builder Odoo is already using spacing classes like mb16 (margin-bottom: 16px). The big problem with those problems was always the low responsiveness. By setting a margin of 64 pixels to an element you do so for all screen sizes, even if the margin should be smaller for mobile. It looks like Bootstrap is trying to solve this problem with its own margin and padding classes, although the documentation on this is not complete yet. It is also going to be interesting to see how Odoo will implement these features into the website builder. Will it dodge its own class system and adapt to the Bootstrap 4 standard?

4. New, flexible media queries

Bootstrap 3 was always subjected to not follow the mobile first doctrine as consequently as the big competitor Foundation by Zurb. With an em based approach for media queries the breakpoints are getting much more flexible and we are also getting a brand new brnadpoint at 480px for mobile landscape views, which we so far had to write by hand for every project.

5. Sass instead of Less

With Odoo v9 and the current themes for the Odoo v8 the Odoo team changed from Sass to Less as a CSS precompiler. The differences between the two are basically minimal, still I always found the Sass (Scss) syntax more intuitive. We will see how the Odoo team will handle that change and if Bootstrap 4 will have a Less port for compilation.

6. Bootstrap Themes

Currently there is a vast number of themes for Bootstrap 3 available from different vendors. It seems like the Bootstrap team is now jumping on the same train to make some cash off this lucrative market. The themes will cost $99 and are available for web apps, dashboards and marketing pages. Every theme is a separate framework, building up on Bootstrap.

TL;DR

Bootstrap is joining the revolution with an opt-in flexbox grid. Rem units for font sizes will make text more fluid and easier to handle with Bootstrap 4.