BOOT-STRAP 4: WHAT YOU NEED TO KNOW
With new and complex constraints presented by touch screens and smart-phones, the complexity of developing websites is now more than ever.
Web designers and developers have had to come up with new and creative solutions to handle all this complex constraint, which included smaller screens and pixel densities, ability to adjust screen size according to landscape or portrait orientation and slow data connection amongst many others.
The desire to overcome all this complexity led to the development of the Bootstrap CSS framework. Created by Mark Otto and Jacob Thornton at Twitter, Bootstrap is a gigantic, free and open source front-end framework that includes almost everything one would need for building a website or a web application.
Hosted, maintained and developed on GitHub, Bootstrap is one of the most widely used framework that contains HTML, CSS, and JavaScript to design elegant, powerful and responsive interfaces for professional web pages.
Bootstrap has made developing responsive, mobile and desktop based websites faster and easier. Forget all those complex lines of codes, with Bootstrap, websites and applications can be easily and efficiently scaled to fit from phones to tablets to desktops.
Bootstrap framework offers 3 types of installation:
Pre-compiled version
In this version, everything from CSS, JavaScript and fonts comes in a pre-compiled form, ready for immediate usage. This version is suitable for those who don’t know programming.
B. Source Code version
This version requires a LESS compiler and some set-up for its installation. However pre-compiled JavaScript and CSS are included along with their respective source codes and documentation. This version is preferred for web developers.
C. Sass
This version is needed if you tend to use Sass-only projects and Rails or Compass.
The latest version of Bootstrap, Bootstrap Version 4, introduces a wide array of new, amazing and easy to learn features that makes front-end web design even more exciting and simple.
This article focuses on providing you an insight into the features of Bootstrap 4. Read on if you want to know what Bootstrap 4 has to offer.
1. FROM LESS TO SASS
Less is JavaScript-based pre-processor that extends the functionality of CSS by providing functions, variables, mixins and many other techniques.
Sass(Syntactically Awesome Style Sheets) is an extension of CSS3 which provides us the facility to use nested rules, variables, mixins, inline imports and more.
This monumental change in Bootstrap 4 from LESS to SASS has made people proclaim the “death of Less”. As compared to Less, Sass is easier to organize, more developer friendly, provides a wider support and a larger community.
It also compiles faster than Less. And as such, this switch does not come as much of a surprise.
2. A NEW AND IMPROVED GRID SYSTEM and FLEXBOX
Another noticeable feature introduced into Version 4 is the improved Grid System and the inclusion of FlexBox.
Grid System allows developers to target devices with different view-ports. Bootstrap 3 contained 4 grid classes – .col-sx-XX for mobiles, .col-sm-XX for tablets, .col-md-XX for desktops and .col-lg-XX for larger desktops.
With version 4, a new fifth grid class has been added into the Grid System, which will target smaller devices under 480px viewport width.
Flexbox is basically a simple flexible layout options in CSS. It provides alignment of content within a parent element vertically with equal height columns via grid-based layouts.
The support for Flexbox is also something desirable, as it provides a far better and more flexible layout options. By default, the regular grid will be in action, but it can easily be switched to FlexBox by switching a simple Sass variable.
However, the 12 column layout division remains the same as in Bootstrap 3.
3. CARD COMPONENT
Bootstrap 4 marked the birth of a whole new “Card” container which offers plenty of styling options.
A ‘Card’ is a flexible and extensible container, that includes a completely redesigned set of headers and footers, contextual background colors and display options.
Functionality of panels (.panel), thumbnails (.thumbnail) and wells(.well) have all been replaced with a singlecard(.card) component in this version.
One to four cards can be fit in a full-width row, even though a second block can be added underneath, in case you want more number of cards.
It also provides us the facility to add underlay image or video as a background to the card block. Having only a single component, instead of three makes the framework a little lighter and easier to learn.
4. NEW IMPROVED BUTTONS
The old buttons have been discarded and replaced by a pack of 9 different types of buttons – each serving a particular semantic purpose. The buttons are: Primary, Info, Success, Warning, Danger, Link, Light, Dark and Secondary button class.
Along with the new buttons, another new feature that has been added is the predefined outline appearance. This feature can be used by adding –outline to the corresponding button class like
“btn-success-outline”.
All these classes can be easily accessed, which makes customizing your mobile-friendly website a pleasant experience.
The default button size is still present in version 4, along with two new small “btn-sm” and large “btn-lg” options.
5. TYPOGRAPHY AND IMPROVED REM-SIZING
In Bootstrap 4, the prevalent default font size of 14px has been changed to 16px, which makes the text appear a bit bigger and more visible.
Another important enhancement is that the font-sizing and the Grid System are now based on rem. which tends to make the framework more dynamic. Know that, the use of px and em are still available for typography.
The advantage of using rem is that all font sizes are relative to the font size of the root element(the html tag), making it easier for mobile devices to scale up or down.
6. A NEW TABLE CLASS “INVERSE”
Another exciting feature added to Bootstrap 4 is the introduction of a new “.table-inverse” class for inversing the colors of tables. You can also use its “thead-inverse” class to inverse only the header section.
Along with this, Bootstrap 4 also comes with new reflow tables, in which the rows and columns gets inverted and “reflow-together” onto the next row, depending on the width of some of the contents.
7. ES6 JAVASCRIPT PLUGINS
To benefit from the newest JavaScript enhancements, every plugin has been rewritten in ES6, which means better plugin support in Bootstrap 4.
8. NO IE8 and IE9 support
Bootstrap 4 no longer supports IE8 and IE9 for good. One major setback of IE8 is that it does not support CSS media queries, which is essential for responsive design implementation.
And now with IE8 dropped from Bootstrap, developers can take complete advantage of CSS without any CSS hacks or fallbacks.
Need IE8 support? Go back to Bootstrap3.
9. Dropped Normalise.css
With Bootstrap 4, Normalize.css has been substituted by the new Reset module called “Reboot”. With Reboot, all generic element selectors and reset styles have been moved into a single Sass file.
Reboot takes the core of Normalize.css and expands it to include more opinionated resets like box-sizing: border-box, margin tweaks, and more all in a single Sass file.
10. MORE UTILITY CLASSES
The use of utility classes, enables quick and easy adjustment of content outside of any component styles.
Until Bootstrap 4, this has been restricted to a few simple changes, like floating (pull-left, pull-right),color (.text-primary), clearfix(.clearfix) and a few more.
In Bootstrap 4, a bunch of whole new utility classes around padding and margin has been provided, enabling users to quickly push and align contents.
11. AND MUCH MORE ..
The list of features that this updated version of Bootstrap tags along is extensive. In addition to the above features, it also offers the following:
i) Improved tooltips and popovers, using an all new JavaScript library, popover.js
ii) Custom form controls, validation styles.
iii) An extensive documentation and tons of other features.
Conclusion
With more than 115,144 stars and 53,800 forks in GitHub Bootstrap has always been one of the essential tools amongst web designer.
It has earned a reputation of being a convenient and widely supported framework for building fast, responsive, and reliable websites and apps.
And with Bootstrap 4, it seems to be getting even better. The development team of this version of Bootstrap, aimed to build a framework that was simple and easy to work with.
Features such as the use of Sass variables, ES6 JavaScript plugins, Mega Lego type architecture and easier scaling across devices really makes it stand out in the crowd.
