Bootstrap 5 : what’s new in bootstrap 5 new releases Part-2

Bootstrap 5 : what’s new in bootstrap 5 new releases Part-2

Bootstrap, the most popular front-end framework built to design modern, responsive, and dynamic interfaces for professional design web pages, is currently undertaking a major update, Bootstrap 5. We have seen some topic in earlier artile now the rest of the topics are include in this article.

Continue of what’s new in bootstrap 5 new releases...

 

7.Improved forms

In addition to the new Customize section, They’ve overhauled our Forms documentation and components. They’ve consolidated all our forms styles into a new Forms section (including the input group component) to give them the emphasis they deserve.Alongside new docs pages, They’ve redesigned and de-duped all our form controls. In v4 They introduced an extensive suite of custom form controls—checks, radios, switches, files, and more—but those were in addition to whatever defaults each browser provided. With v5, They’ve gone fully custom.

If you’re familiar with v4’s form markup, this shouldn’t look too far off for you. With a single set of form controls and a focus on redesigning existing elements vs generating new ones via pseudo-elements, They have a much 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. These new form controls are all built on completely semantic, standard form controls—no more superfluous markup, just form controls and labels.

Be sure to explore the new forms docs 

8.New Responsive Fonts

Designing a website that looks good across multiple platforms or viewports has been quite challenging for some developers. Media queries have been a great tool to solve typography common problems that allow developers to control the appearance of typographies on web pages by specifying specific font sizes for the typography elements on a specific viewport.

Bootstrap 5 will enable responsive font sizes by default which will automatically resize the typography element according to the size of the user’s viewport through RFS engine or Responsive Font Sizes.

According to RFS repository, RFS is a unit resizing engine which was originally developed to resize font sizes. RFS offers the ability to resize basically every value for any CSS property with units, like margin, padding, border-radius or box-shadow.

It is a preprocessor or postprocessor-powered-mechanism that automatically calculates the appropriate font-size values based on the user’s screen size or viewport. It works on known preprocessors or postprocessor tools such as Sass, Less, Stylus or PostCSS.

As an example, assuming that you have a hero-title class which is a class for your h1 tag element that you want to use for your main title on the hero section. Using Sass the following mixin will do the trick:

.hero-title {
  @include font-size(4rem);
}

This will be compiled to this:

.hero-title {
  font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
  .hero-title {
            font-size: 4rem;
  }
}

9.New Utilities API And Helpers

They’ve 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);

Ever since utilities become a preferred way to build, They’ve been working to find the right balance to implement them in Bootstrap while providing control and customization. In v4, They did this with global $enable-* classes, and They’ve even carried that forward in v5. But with an API based approach, They've created a language and syntax in Sass to create your own utilities on the fly while also being able to modify or remove those They provide. This is all thanks to @MartijnCuppens, who also maintains the RFS project, and is responsible for the initial PR and subsequent improvements.

if you haven’t built a Bootstrap-powered project that way yet, your mind will be blown.

Heads up! They’ve moved some of our former v4 utilities to a new Helpers section. These helpers are snippets of code that are longer than your usual property-value pairing for our utilities.

 

Download bootstrap alpha 5 from here Download Bootstrap 5.0.0

 

For More Information About Installation And Proper Guidence Visit It's Introduction Page Introduction

 

Next releases

Official statement of the Bootstrap team:

"We still have more work to do in v5, including some breaking changes, but we’re incredibly excited about this release. Let the feedback rip and we’ll do our best to keep up with y’all. Our goal is to ship another alpha within 3-4 weeks, and likely a couple more after that. We’ll also be shipping a v4.5.1 release to fix a couple of regressions and continue to bridge the gap between v4 and v5."

 

Queations in your mind??

Is Bootstrap 5 stable and ready to use in production?

No, not yet.

" Bootstrap 5 is now in alpha—breaking changes will continue to occur until our first beta. We haven’t finished adding or removing everything, so check for open issues and pull requests as you have questions or feedback."

Also Read:

Remove China Apps : Indian Engineer made this app to help users remove made in china app

Post Comments(0)

Leave a reply