Quantity and quality
If handled well, I will suggest that Bootstrap is a boon for the web development community in terms of quality as well as efficiency. Since developers are attracted to the web development framework, they become part of a coding community that draws them increasingly into current best practices. From the start, Bootstrap has encouraged implementation of tried, tested, and future-friendly CSS solutions, from Nicholas Galagher's CSS normalize to CSS3's displacement of image-heavy design elements. It has also supported (if not always modeled) HTML5 semantic markup.
Improving with age
With the release of v2.0, Bootstrap helped take responsive design into the mainstream, ensuring that its interface elements could travel well across devices, from desktops, to tablets, to handhelds.
With the v3.0 release, Bootstrap stepped up its game again by providing the following features:
- The responsive grid was now mobile-first friendly.
- Icons now utilize web fonts and thus were mobile and retina-friendly.
- With the drop of support for IE7, markup and CSS conventions were now leaner and more efficient.
- Since version 3.2, the autoprefixer was required to build Bootstrap.
- This book is about the v4.0 release. This release contains many improvements and also some new components while other components and plugins are dropped. In the overview below, you will find the most important improvements and changes in Bootstrap 4:
- Less (Leaner CSS) has been replaced with Sass
- Refactoring of CSS code to avoid tag and child selectors
- Improved grid system with a new grid tier to better target mobile devices
- Replaced the navbar
- Opt-in flexbox support
- A new HTML reset module called Reboot. Reboot extends Nicholas Galagher's CSS normalize and handles the
box-sizing: border-boxdeclarations. - jQuery plugins are written in ES6 now and come with UMD support.
- Improved auto-placement of tooltips and popovers, thanks to the help of a library called Tether.
- Dropped support for Internet Explorer 8 which enables us to swap pixels with rem and em units.
- Added the Card component, which replaces the Wells, Thumbnails, and Panels in earlier versions.
- Dropped the icons in font format from the Glyphicon Halflings set.
- Dropped the Affix plugin, which can be replaced with the
position: stickypolyfill (https://github.com/filamentgroup/fixed-sticky).
The power of Sass
When working with Bootstrap, there is the power of Sass to consider. Sass is a preprocessor for CSS. It extends the CSS syntax with variables, mixins, and functions, and helps you in DRY (Don't Repeat Yourself) coding your CSS code. Sass was originally written in Ruby. Nowadays, a fast port of Sass written in C++, called libSass is available. Bootstrap uses the modern SCSS syntax for Sass instead of the older Sass's indented syntax.
Note
Those who work with CSS in their daily job and have some experience with functional programming language, won't find learning Sass very difficult. However, those who want to get more out of Sass should read my Sass and Compass Designer's Cookbook (https://www.packtpub.com/web-development/sass-and-compass-designers-cookbook) too.
In Bootstrap 4, Sass replaced Less. Less is another preprocessor for CSS. The Bootstrap team preferred Sass over Less, because of the increasingly large community of Sass developers. If you are used to Less and have to switch to Sass now, you should realize that Sass is more like a functional programming language in contrast to the more declarative nature of Less. In Sass you cannot use variables before declaring them first, so you have to modify your variables at the beginning of your code. Bootstrap's variables have default values which can be overwritten by declaring and assigning a new variable with the same name before the default declaration.
In contrast to Less, Sass does support if-else-then constructs and for and foreach loops.
When we move beyond merely applying classes to markup and take the next step to dig in and customize Bootstrap's SCSS files, we gain tremendous power and efficiency. Starting with a solid basis using Bootstrap's default styles, we can move on to innovate and customize to our heart's content. In other words, Bootstrap is a powerful resource. I intend to help you leverage it in exciting and serious ways, working with efficiency, adhering to best practices, and producing beautiful, user-friendly interfaces.
Downloading the compiled code
On http://getbootstrap.com/, you will find some button links which enable you to download the compiled code of Bootstrap. These downloads contain the compiled CSS and JavaScript code ready to use in your projects. The compiled code contains the CSS and JavaScript code for all of Bootstrap's components and features. Later on, you will learn to create a custom version of Bootstrap, which includes only those components and features that you really use.
Instead of the default code, you can also choose to download the Flexbox-enabled or grid-only versions.
The Flexbox enabled version
On http://getbootstrap.com/, you can also download a compiled version of Bootstrap with the optional Flexbox support already enabled. Since switching to the Flexbox version does not require any HTML changes, you will only have to change the CSS source.
The grid only versions
Bootstrap ships with a 12 column, responsive, and mobile first grid. People who only want to use the grid for their projects can download the grid only version. The grid only version provides the predefined grid classes and does not require any JavaScript. Those who only use the grid should add their own HTML reset which includes the box-sizing: borderbox setting as described in the Box-sizing section of this chapter.
Beside the predefined grid classes, you can also have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts.
Running Bootstrap from CDN
Instead of downloading your own copy of Bootstrap, you can also load it from CDN (Content Delivery Network) inside your projects. CDNs help to distribute bandwidth across multiple servers and allow users to download static content from a closer source.
Note
Bootstrap can be loaded from https://www.bootstrapcdn.com/. BootstrapCDN is powered by MaxCDN which can be found at https://www.maxcdn.com/.
Subresource Integrity (SRI)
CDN can be quite a risk, because others can get control over the CDN code and may inject arbitrary malicious content into files. You can prevent this risk by adding the integrity attribute to the <script> and <link> elements which loads the file from CDN. The integrity attribute should be set to a string with base64-encoded sha384 hash. You should also add the crossorigin attribute. The script element to load jQuery into your project from MaxCDN may look like the following:
<script src="http://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
Note
You can read more about Subresource Integrity checking at https://www.w3.org/TR/SRI/.
