Bootstrap 4 Alpha: Super Smart Features to Win You Over

After months of anticipation, anxious tweets asking for the disclosure of a release date, and a few scattered scraps of news by Mark Otto and Jacob Thornton, having the effect of intensifying rather than quenching our curiosity, Bootstrap 4 alpha is out.

As a designer, I love crafting my own CSS. However, I confess, I find Bootstrap such a well thought-out and strongly supported front-end framework that I’ve immensely enjoyed using it, both to build my projects and to learn more about writing better, modular CSS.

After the much awaited news, as you can probably guess, I downloaded the source files for Bootstrap 4 and spent some time going back and forth between reading the docs and digging into the code to find out more.

I expect the alpha release of Bootstrap 4 will undergo a number of changes in the coming weeks, even months. The curious among you, can keep an eye on the issues section of the project’s GitHub repository. However, the features I’m going to list here are more like broad coding principles and practices that keep improving on each new release of the framework. That’s why I think it’s likely they’re here to stay. If anything, they can only get better.

Here they are. I hope you find them awesome too!

New Interactive Documentation

The Bootstrap documentation has been exemplary since the framework’s early days. It’s always had the crucial role of being a living document, that is, a tool in sync with the collaborative effort of building the framework and communicating it to others:

Abstracting and documenting components became part of our process for building this one tool and Bootstrap in tandem.
Mark Otto in 2012

Mark himself is quite a fan of great documentation. His Code Guide by @mdo is evidence of his approach to high quality documentation as being part and parcel of outstandingly coded projects.

The documentation for version 4 has been rewritten from scratch using Markdown. Understandably, given the alpha stage of this version at the time of writing, it’s still a work in progress.

The Bootstrap docs …

• are a pleasure to navigate, both using the traditional sidebar navigation and the brand new search form.
• structure information in a logical manner; content is never overwhelming or confusing.
• include instructions and how-tos covering all areas of the framework, from different ways of installing Bootstrap to using each component and dealing with browser quirks.

If you take the time, you’ll soon find a few valuable nuggets scattered throughout various sections of the docs. For instance, dealing with over-sized SVG images that use the .img-responsive class in IE9-10, accessibility best practices, enabling the mq4-hover-shim to fix sticky :hover styles on mobile devices, and much more.

Finally, if you’d like to run the Bootstrap docs locally on your computer, install Jekyll, a great website building tool, and follow these instructions.

Top-notch Modular Architecture

Bootstrap has often been the target of complaints about code bloat, too opinionated CSS styling, and a profuse quantity of components. The good news is: Bootstrap 4 has both simplified and further modularized its structure.

To begin with, some components have been eliminated altogether: the Glyphicons icon library is not bundled with the framework any more; panels, wells, and thumbnails are replaced by the Cards component. Also, all CSS reset/normalize code and basic styling are now dealt with in a single brand new module called Reboot.

Further, more than ever before, using Bootstrap now feels like assembling and arranging Lego blocks in different ways. Here are some examples to clarify what I mean.

Continue reading %Bootstrap 4 Alpha: Super Smart Features to Win You Over%

by Maria Antonietta Perna via SitePoint