Bootstrap 5 alpha is released!

Bootstrap 5 alpha is released!!!

The official documentation of Bootstrap 5 is available here.

Bootstrap is one of my favorite open-source CSS frameworks.

What is Bootstrap?

Bootstrap is a 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.

The journey

Bootstrap 4 is released in Jan 2018. For Bootstrap 5, the team is currently the team working on various aspects like CSS variables, faster javascript, fewer dependencies, and better APIs.

We will get a clear picture of the entire breaking changes details and future list once the beta version released. Now the alpha version available to play around.

Bootstrap 5 alpha no longer depends on jQuery

jQuery played major roles in the earlier versions of bootstrap (let’s say up to 4.x).

Similarly, From Bootstrap version 5, we no longer need jQuery help to use the bootstrap components. Example: maintaining a toggle state, etc.

Now, Bootstrap includes its javascript to do those operations.

We can see the full list of JS related changes in the first bootstrap 5 alpha project on GitHub.

Note: Bootstrap dropped jQuery dependency doesn’t mean you can’t use jQuery at all. You can collaborate with jQuery if your project really needs it. It’s just dropped from its official packages to improve the codebase and various aspects.

Bootstrap 5 alpha CDN

Since we have discussed javascript and jQuery, let’s discuss the CDN that needs to be used in boilerplate code.

In Bootstrap 4, we need to import popper.js, jQuery slim, then bootstrap js.

From bootstrap 5, we can simply import only popper.js and bootstrap.js like below

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>

And it should be imported or included in same order.

Bootstrap 5 drops support for Internet Explorer

CSS Custom Properties

Bootstrap 5 begun use CSS Custom Properties in table component. They currently experimenting to include in various component like buttons, etc.

Vaious local variables are included in bootstrap to achieve variants in table.

Example

@mixin table-variant($state, $background) {
  .table-#{$state} {
    $color: color-contrast(opaque($body-bg, $background));
    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
    $active-bg: mix($color, $background, percentage($table-active-bg-factor));

    --bs-table-bg: #{$background};
    --bs-table-striped-bg: #{$striped-bg};
    --bs-table-striped-color: #{color-contrast($striped-bg)};
    --bs-table-active-bg: #{$active-bg};
    --bs-table-active-color: #{color-contrast($active-bg)};
    --bs-table-hover-bg: #{$hover-bg};
    --bs-table-hover-color: #{color-contrast($hover-bg)};

    color: $color;
    border-color: mix($color, $background, percentage($table-border-factor));
  }
}

Improved 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. Team also added options to your grid gutter spacing that matches the spacing utilities you’re already familiar with.

Bootstrap includes six default breakpoints, sometimes referred to as grid tiers, for building responsively. These breakpoints can be customized if you’re using our source Sass files.

BreakpointClass infixDimensions
X-SmallNone0–576px
Smallsm≥576px
Mediummd≥768px
Largelg≥992px
Extra largexl≥1200px
Extra extra largexxl≥1400px

These breakpoints are customizable via Sass—you’ll find them in a Sass map in our _variables.scss stylesheet.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

Take a look at the redesigned and restructured Layout docs to learn more.

RTL support is coming soon!

Bootstrap icons

Meanwhile, bootstrap has its own icon library to support its components.

You can take a look at Bootstrap icons here.

Bootstrap icons can be used as Embedded HTML, External image or custom CSS.

Bootstrap Icons are published to npm, but they can also be manually downloaded if needed.

npm

Install Bootstrap Icons via command line with npm.

npm install bootstrap-icons

Conclusion

In conclusion, We can have a detailed blog once the beta version is released with realtime examples.

Why build a Progressive Web Apps?

Want to know what is Progressive Web Apps(PWA)? Take a look here!

Building a high-quality Progressive Web App has incredible benefits, making it easy to delight your users, grow engagement and increase conversions.

  • Worthy of being on the home screen
  • Work reliably, no matter the network conditions
  • Increased engagement
  • Improved conversions

Worthy of being on the home screen

Is an app worthy to present in our home screen?

We need following qualities to answer YES for this question.

  • Reliable
  • Fast
  • Engaging

When the Progressive Web App criteria are met, Chrome prompts users to add the Progressive Web App to their home screen.

Actually, we use service workers to trigger installable shortcut based on our needs. Lets say, we are targeting only the mobile based users to install our PWA in their devices. We can detect the device based on browser and then we can prompt the user to install PWA apps.

Work reliably, no matter the network conditions

We have to handle various network conditions in PWA to meet the reliability.

The various connection modes are

  • Perfect
  • Slow
  • Lie-Fi
  • Offline

Increased Engagement

Web push notification helping a lot to provide the feel of native apps to keep the user engaged. And keeping the user more engaged once they visited the PWA application.

Improved conversions

The ability to deliver amazing experience without any distraction. Once the user started to use the application in dedicated window, it feels like native apps and there is less chance to jump to between other application similar to switching tabs in browser.

Lighthouse

Lighthouse, an open-source, automated tool for improving the quality of your Progressive Web Apps, eliminates much of the manual testing that was previously required. You can even use Lighthouse in continuous integration systems to catch regressions.

PWA Checklist

Lighthouse provides an chrome extension which provide helpful checklist that can be used to track of features of PWA.

Advantage of PWA over Native Apps

In the native application, the upgrade process is tedious or complex based on structure.

We need think of migration and data integrity, and we don’t have control at certain extent.

But in a PWA, we have control to all updates or upgrades to application. We can provide wide range of security fixes, bug fixes without any hesitation.

When we have SaaS platform application, PWA is the right combination of website with native application feel. User won’t have to worry about the upgrade scenarios. The developers will take of everything.

Popular Realtime Progressive Web Apps

There are plenty of popular websites converted their website into PWA to engaged more with their audience.

Dev.to

Dev.to is blogging or social forum where programmers share ideas and help each other grow.

They are displaying following canvas to users whenever the internet goes down. The user can paint in the meantime when the internet is trying to reconnect.

This has been achieved with the power of Progressive Web Apps.

Spotify

The popular music giant application which has large number of user base.

With all these things going on, it looked like Spotify was unable to resist the temptation and joined the race with their own version of Spotify PWA, despite having their own desktop app.

Your background colors are now adaptable to your needs as you progress through the PWA, making your experience more personalized and unique—as a music player should be.

Ola cabs

In the competitive ola cabs did the trick and leads the market over Uber by using PWA.

During installation time native apps (Apps from play store or Apple store), you can just open Ola cabs PWA and book your ride within.

You can save your mobile data and works well in unstable 3G network as well.

Sounds like a master plan.

Swiggy

Swiggy is an online food ordering app. It leads the market over Zomato by having adaptive screen in mobile devices.

Even though you have poor mobile network, the PWA works out of box and serves you the perfect needs of the user.

Can you spot difference between native app and Progressive Web App?


And lazy loading and service workers helps the website to load only required content instead downloading whole assets files.

Even though Swiggy and Zomato is popular in India. User feels Zomato is providing more offers than Swiggy.

Because they didn’t proper user engagement and mobile app user retention.

That’s the place Zomato losing the market with Swiggy (Based on my personal experience, I’m mentioning these point; not to offend anyone)

As a user of 2+ years in both apps, I prefer PWA app whenever I needed.

Pinterest

Pinterest – Infinite scrolling – never ending image social media

The design of this application itself makes the application user to stay for long time.

You would feel the difference between native app and web app (and also PWA)

Twitter

The popular social media which lets the people to write shorter and makes PWA to use the mobile data also shorter.

The following figure shows the application of Twitter client in various medium.

Take Away

We have seen various aspects of Progressive Web Apps. And the popular web application which uses the power of PWA to engage more with the user base. Do you think its worth to give a try and convert your web application into PWA?

Leave your replies in comment section below.

In the next blog, we can see the approaches to turn the Web Application into Progressive Web Apps (PWA).

Related Post

Why Progressive Web Apps is next big thing?

Progressive Web Apps – Web App Manifest

To get latest updates you can follow or subscribe! #peace