Bootstrap 5 alpha is Here.

What is Bootstrap?

Bootstrap is the most popular free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.

Journey

Initially, after launching Bootstrap, they launched its 2nd version after 2 years, and then version 3 after a year of launching V2. However, it took them 5 long years to introduce version 4. And now the alpha version of the much-awaited Bootstrap 5 framework was released on 16th June 2020.
 

Major changes included with the Bootstrap 5 alpha framework:

• New Logo

• Bootstrap 5 alpha no longer depends on jQuery

• CSS custom properties added

• Enhanced Utilities API

• Better Grid System

• Switched from Jekyll to Hugo

• Switch to Vanilla JavaScript

• Responsive font sizes

• IE 10 and 11 support removed

• Custom set of SVG Icons added

• Improved customizing docs

• Updated forms

 

Bootstrap 5 alpha no longer depends on jQuery

jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax which is efficient in almost any web development requirement. Bootstrap has been using JQuery for more than 8 years but now it has become quite a large and distended framework. Due to this, websites need to download and increase loading time for their library. JavaScript frameworks, like Vue, React, and Angular are dominating the web development community, JQuery is losing its popularity due to its significantly lower performance, as it uses virtual DOM  instead of direct DOM. The bootstrap team has removed jQuery from 11 plugins including Util, Alert, Button, Carousel, and more. Using ‘Data’ and ‘EventHandler’ in unit tests is no longer supported.

 

CSS custom properties added

In v4 they only included a handful of root variables for color and fonts, and now they added them for a handful of components and layout options. Take for example our .table component, where they have  added a handful of local variables to make striped, hoverable, and active table styles easier :

 

table {
  --bs-table-bg: #{$table-bg};
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: #{$table-striped-color};
  --bs-table-striped-bg: #{$table-striped-bg};
  --bs-table-active-color: #{$table-active-color};
  --bs-table-active-bg: #{$table-active-bg};
  --bs-table-hover-color: #{$table-hover-color};
  --bs-table-hover-bg: #{$table-hover-bg};
   // Styles here...
}
 

 

Enhanced Utilities API

They implemented a brand new utility API into Bootstrap 5.

$utilities: () !default;
$utilities: map-merge(
  (
    // ...
    "width": (
      property: width,
      class: w,
      values: (
        25: 25%,
        50: 50%,
        75: 75%,
        100: 100%,
        auto: auto
      )
    ),
    // ...
    "margin": (
      responsive: true,
      property: margin,
      class: m,
      values: map-merge($spacers, (auto: auto))
    ),
    // ...
  ), $utilities);
API based approach, they created a language and syntax in Sass to create our own utilities on the fly while also being able to modify or remove.

 

Better Grid System  

• The team added a new grid tier! Say hello to XXL.
• .gutter classes have been replaced with .g* utilities, much like our margin/padding utilities.
• Form layout options have been replaced with the new grid system.
• Vertical spacing classes have been added.
• Columns are no longer position: relative by default.
• Bootstrap includes six default breakpoints, sometimes referred to as grid tiers, for building responsively.

example of how to use the new grid gutter classes:

<div class="row g-5">
  <div class="col">...</div>
  <div class="col">...</div>
  <div class="col">...</div>
</div>

 

Switched from Jekyll to Hugo

Jekyll is a website generator that’s designed for building minimal, static blogs with easy-to-use navigation and website components. However, Bootstrap 5 switched to Hugo as it is described as a fast and flexible static site generator. It is written in Go language which makes it fast, easy to use, and configure. Almost all features are identical to Jekyll, however, Hugo has great integration with the popular web host and can also organize your content with any URL structure.

 

Switched to Vanilla JavaScript

Vanilla JS is a name to refer to using plain JavaScript without any additional libraries like jQuery Vanilla JS is the most lightweight framework available anywhere. The modern web development community is dominated by JavaScript. Almost all modern web browsers on consoles, desktops, games, tablets, and mobile phones include JavaScript interpreters.

 

Responsive font sizes

If we want to maintain the readability of the page on smaller screens, we need to decrease the font size, as well as most other elements (images, buttons, etc.). Bootstrap 5 will enable responsive font sizes by default. Now, it will be easier to resize the typography components according to the user’s viewport through the Responsive Font Sizes or RFS engine.

Deleted classes : .font-size-sm, .font-size-base, .font-size-lg, .font-size-xl
New utility : .text-sm, .text-base, .text-lg, .text-xl
 

IE 10 and 11 support removed

The new version of bootstrap has dropped the support of Internet Explorer v-10 and v-11 which was earlier in Bootstrap version 4.Inorder to encourage web designers and developers to focus more on designing modern web pages rather than having to worry about breaking any piece of codes on old browsers.
 

Custom set of SVG Icons added

For Bootstrap 5, they introduced a brand new SVG icon library crafted brilliantly by Mark Otto, co-founder of Bootstrap. They scale quickly and easily and can be styled with CSS. They're open-sourced (MIT), so you're free to download, use, and extend.
 

Improved customizing docs

They expanded the theming page with more content and code snippets for building on top of Bootstrap’s source Sass files. They also expanded the color palette in v5.
Extensive color system built-in for a more customized look and feel without ever leaving the codebase.
 

Updated forms

Created a new Forms section (including the input group component). With v5, they have gone fully custom.
With a single set of form controls and a focus on redesigning existing elements vs generating new ones via pseudo-elements which give a more consistent look and feel.
 
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="” id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>
 
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>
 <div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>

Every checkbox, radio, select, file, range, and more includes a custom appearance to unify the style and behavior of form controls across OS and browser.
 

Conclusion 

The new Bootstrap 5 makes the framework lightweight, simple, useful, and faster for the developer’s benefit. They are having ready-made designs, coded templates, and themes for projects. Spawoz technologies can help you get the best in industry to benefit your business.