Great news Bootstrap 4’s long and very much anticipated release is almost here! Twitter has been working on fixing broad issues with Bootstrap version 3 for close to an entire year. Bootstrap version 4 is currently still in the late Alpha testing and has to go through the needed Beta testing to ensure software quality.
Bootstrap 4 “Less” to “Sass”:
Currently Bootstrap is using two code preprocessor to help increase page speed and code rendering, “Less” and “Sass” are two of the most popular preprocessor in the industry. Bootstrap 4 looks to switch from the JavaScript based “Less” preprocessor to utilize the more popular Ruby based “Sass” preprocessor. The “Sass” preprocessor can handle more options and styles then the “Less” preprocessor which is one of the reasons they are switching to the “Sass” preprocessor.
Bootstrap 4 adding Typography “REM”:
The typography em unit is based on the font-size of the parent, which can cause compounding issues. Rem unit is based on the html element. That means that you can define a single font size on the html element and define all rem units to be a percentage of the initial html element size. This allows the perfect sized font on your website no matter what kind of device you are viewing from.
Features Bootstrap 4 Will No longer Support:
Bootstrap will no longer come installed with a set of Glyphicons, this was bloating Bootstrap and there is no reason for supporting them anymore. Don’t worry there are many websites that will provide a wide selection of Glyphicons that you can use at anytime. Also rejoice for the fact that Bootstrap 4 is dropping the support of Internet Explorer 8, and Bootstrap 4 will be better because of it too. Not supporting legacy browsers allows the ability to use new CSS3 techniques that can conform to all modern browsers. For companies that still need to support legacy browsers there will be downloads for previous versions of bootstrap available for you to use.
Some New Additions From Bootstrap 4:
• Cards replace Bootstrap 3’s old panels and wells. Cards are defined as a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
• An Opt-in Flex Box Grid. Internet Explorer 9 doesn’t support Flex Box, but it didn’t hold the makers of Bootstrap back from adding this to version 4. It’s just optional.
• Now that Internet Explorer 8 support is dropped. It’s safe to always use jQuery 2.0 with Bootstrap. jQuery 2.0 is smaller, faster, and has more features.
• A 30% Smaller Footprint. Bootstrap 4 is 30% smaller than the latest Bootstrap 3 build! It previously was around ~123kb and now ~88kb. This is huge win without losing many features.
• Changing from a 4 tier grid system (xs, sm, md, lg) to a 5 tier grid system (xs, sm, md, lg, xl). Allows for easy integration and support for 4K screens.