How's the Bootstrap 4 Alpha Looking?

I've used good 'ol Twitter Bootstrap for many designs of mine in the past, and I've delved into the source code hundreds of times, so I'm very familiar with virtually every component of the framework. I have also stolen countless classes for smaller projects I was working on that didn't require the bulk of the entire Bootstrap CSS, because it can be overkill at times.

So naturally I was excited when @mdo and @fat announced they were releasing version 4 of the framework in alpha. I was exited because usually when a developer or team of developers create a new version of a project instead of simply updating it, it means that they want to create entirely new components and at the same time improve existing ones, perhaps using new tools to create those components and scrapping old and unnecessary ones. The new version obviously improves in performance and often drops in size, which is great.

So, let's take a look at some great things already available in the version 4 alpha:

Things I Like

Sizing in rem

In version 4, Bootstrap has swapped out pixels for rems. The new CSS3 unit of length: rem or "root em", bases it's dimensions of the font-size attribute from either the :root or html selectors in CSS. This is different from em which gets it's dimensions from the font-size of it's parent, unfortunately this leads to elements cascading which can break layouts, however with rems you don't have this issue.

The new version now uses rems throughout the majority of it's CSS, and the root font size that controls these dimensions is stored (in SASS) within a variable, which essentially allows you to scale the entire framework to your liking.

Here's how the team at Bootstrap put it:

Dropping support for IE8 means we can take advantage of the best parts of CSS without being held back with CSS hacks or fallbacks. Pixels have been swapped for rems and ems where appropriate to make responsive typography and component sizing even easier. If you need IE8 support, keep using Bootstrap 3.

Improved Grid

A fifth tier has been added to the grid in v4, and by tier I mean media query breakpoint. In version 3 there were four breakpoints: xs, sm, md and lg, now exists extra large as well: xl.

Since Alpha 3, grid modifier classes have been simplified, by removing the .col- prefix, turning .col-*-offset-* into .offset-*-*, this applies to pulls and pushes as well.

There is also a new optional flexbox grid that be enabled in _variables.scss, simply by setting $enable-flex to true. This change comes with the dropping of IE8 support, and could offer many advantages over the traditional grid, like for example matching the height of different columns in a row.

Note: At the time that this was written, flexbox is not currently supported in IE9. See more here.

Cards

Bootstrap 3 had panels (and wells), version 4 now has cards. Cards are essentially content blocks just as panels were, but with many more out-of-the-box customization options, like headers, footers, contextual background colours and various display options.

Cards can also be put into groups or decks, and there's even an experimental masonry-like grid that can be used to display them.

I think these will get used a whole lot in the final version of the framework.

Utility Classes

A ton of new utility classes have been included in version 4, using these helpers you can now control: display types, sizing and positioning, spacing, border and border radius, typography and more.

The best by far is the spacing helper, which allows you to quickly add or remove margin or padding to any element. The documentation explains this really well:

Spacing utility classes are named using three "parameters", property, sides and size:

Where property is one of:

  • m - for classes that set margin
  • p - for classes that set padding

Where sides is one of:

  • t - for classes that set margin-top or padding-top
  • b - for classes that set margin-bottom or padding-bottom
  • l - for classes that set margin-left or padding-left
  • r - for classes that set margin-right or padding-right
  • x - for classes that set both *-left and *-right
  • y - for classes that set both *-top and *-bottom
  • a - for classes that set a margin or padding on all 4 sides of an element

Where size is one of:

  • 0 - for classes that eliminate the margin or padding
  • 1 - for classes that set the margin or padding to $spacer-x or $spacer-y
  • 2 - for classes that set the margin or padding to $spacer-x * 1.5 or $spacer-y * 1.5
  • 3 - for classes that set the margin or padding to $spacer-x * 3 or $spacer-y * 3

Here's an example:

<div class="row">
    <div class="col-md-6 mb-2"></div>
</div>

These naming conventions are different since alpha 2, they were previously represented as -auto, or md, lg. The class names were changes to avoid confusion with grid tiers.

Things I don't Like

Nothing at the moment, well, a few minor things, but this is still in alpha which is important to remember. By the time the beta rolls around most issues I have with the framework will more than likely be resolved.

Conclusion

Bootstrap 4 is still very early on, but it's still exciting to see what's to come. If you want to follow along with the alpha's progress, keep an eye on the blog.

Until version 4 is ready, Bootstrap 3 will continued to be supported.

This article is my oldest. It is 919 words long