You may have heard a “big news”: Bootstrap4 merged the PR codenamed #21389, announced that it would give up support for IE9, and use the flexbox flexbox model by default.
This marks the further advent of the era when front-end development has fully entered the “modern browser”; style processing is once again facing the future, embracing a more flexible flexible box model-Flex layout.
This article will take you deep into the latest version of Bootstrap’s source code, pry into the mystery of its architecture and organization, and analyze the most brilliant rasterization system.
You will also learn about the advanced usage of sass and the latest grammatical mysteries of flex.
New features of BS4
Before starting our exploration, it is necessary to sort out the new features added by BS4:
1) From Less migrated to Sass:
Now, Bootstrap has joined the Sass family. Thanks to Libsass (Sass parser), Bootstrap’s compilation speed is faster than before;
2) Improve the grid system:
Add a grid layer to adapt to mobile devices and rectify semantic mixing.
3) The default flexbox model (flexbox):
This is an epoch-making change, using the advantages of flexbox to quickly layout.
4) Abandoned wells, thumbnails and panels, use cards instead.
5) New customization options:
No longer like the previous version, the gradient, fade in and fade out, shadow and other effects are placed in a separate style sheet. Instead, all options are moved to a Sass variable.
Want to define a default effect for the global or unconsidered corners? It’s very simple, just update the variable value and recompile it.
6) Use rem and em units.
7) Refactor all JavaScript plugins:
Bootstrap 4 rewrites all plugins with ES6. Now provides UMD support, generic disassembly methods, option type checking and other features.
8) Improve tooltips and popovers automatic positioning:
This part thanks to the help of Tether (A positioning engine to make overlays, tooltips and dropdowns better) tool,
If you don’t know what Tether is yet, You can go to his Github address.
BS4 Grid System Demystification
Understanding the above new features, we mainly study the biggest “selling point” of BS since its birth-the grid system .
A grid example
We select a representative BS4 official website example, which can be referenced online, or see the screenshot below,
on the big screen Below, we see:
When the screen width is less than 576px, we have:
Corresponding code:
...
...
...
...
. The col-6 class style can be simply summarized (incompletely) in the source code as:
.col-6 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.col-sm-3 class in the source code can be summarized as:
.col-sm-3{
-webkit-box-flex: 0;
-webkit-flex: 0 0 25%;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
Two types The coexistence and alternation of
We see that these two classes are set in the code for style declaration. It is obvious that their style attributes are in conflict, so how do they achieve “peaceful coexistence” alternate Does it work?
1) When the screen width is greater than 576px, we find that .col-sm-3 does not work, but .col-6 works at this time.
We found in the source code that the style declarations of .col-sm- are all in the media query of @media (min-width: 576px) {…},
This ensures that the width is above 576px On the screen, only the .col- style declaration outside of the media query played a role.
2) When the screen width is less than 576px, hit the media query and hit the style declaration of .col-sm-3. His priority must be greater than .col-6 (high priority for media queries), which ensures that the style of the mobile terminal has the upper hand.
flex Explanation
We see a declaration similar to flex: 0 0 25% in the style code. In order to understand it, we start with the flex attribute:< br>The flex property is the abbreviation of flex-grow, flex-shrink and flex-basis (similar to backgroud is the abbreviation of many background properties),
Its default value is 0 1 auto. The last two attributes are optional. The grammatical format is as follows:
.item {
flex: none | [<'flex-grow'> <'flex-shrink'>? || <'flex-basis'& large column in-depth The new version of BS4 source code explores the mystery of flex and engineered sassgt; ]
}
1) flex-grow: The attribute defines the magnification ratio of the item, the default is 0. We see that this value in the BS code is always 0, that is, if there is remaining space, it will not be enlarged.
2) flex-shrink: The attribute defines the shrinking ratio of the item, the default is 1, that is, if the space is insufficient, the item will shrink.
3) flex-basis: The attribute defines the main size of the project before the extra space is allocated.
The browser calculates whether there is extra space in the main axis based on this attribute. It can be set to the same value as the width or height attribute (such as 350px), and the item will occupy a fixed space.
Of course, BS4 is set here as a proportional value, which is also the basis for the natural realization of responsiveness.
The great role of SASS in BS4 engineering
Seeing this, it’s not difficult to understand the implementation of BS4 grid, but This is not the ultimate goal of this article. We can go deeper. For example, in the grid system of BS4, a row has 12 columns in total. His media query breakpoints include: xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px.
Referring to the style code in the dist/css directory of its source code, we will want to organize and generate such a large number of CSS styles, and it is simply anti-human not to use a preprocessor. But BS4 takes sass to the extreme.
.col-sm-*How is generated
We go deep into its scss directory, scss/mixins/_grid.scss File:
@if $enable-grid-classes {
@include make-grid-columns();
}
In enable-grid-classes When the variable is true (default is true), call make-grid-columns()
make-grid-columns() This mixin is defined in the scss/mixins/_grid-reamework.scss file ( I am so tired to find it…):
@mixin make-grid-columns($columns: $grid-columns, $gutters: $grid-gutter-widths, $breakpoints: $grid-breakpoints ) {
...
}
This mixin accepts three parameters:
1) $columns indicates that the number of grids defaults to 12
2) $gutters default Is 30
3) $breakpoints represents the breakpoint setting, which is a global variable and is of map type.
You can find these in the scss/mixins/_breakpoints.scss file and the scss/_variables.scss file.
Recognizing these parameters, let’s look at the specific implementation of .col-sm-. The following code has been streamlined extensively, and only the relevant parts of col-sm- are retained and added Note:
@each $breakpoint in map-keys($breakpoints) {
// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
$infix: breakpoint-infix($breakpoint, $breakpoints);
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
// Makes the @content apply to the given breakpoint and wider.
@include media-breakpoint-up($breakpoint, $breakpoints) {
@for $i from 1 through $columns {
.col#{$infix}-# {$i} {
@include make-col($i, $columns);
}
}
}
}
We Step by step analysis:
1) @each $breakpoint in map-keys($breakpoints), to traverse each breakpoint;
2) breakpoint-infix is a function, which is defined in css/mixins/ In the _breakpoints.scss file, a dashed breakpoint identification string is returned. For example, here we are related to “-sm”;
3) media-breakpoint-up is a mixin:
@ mixin media-breakpoint-up($name, $breakpoi nts: $grid-breakpoints) {
$min: breakpoint-min($name, $breakpoints);
@if $min {
@media (min-width: $min) {
@content;
}
} @else {
@content;
}
}
4) breakpoint-min and Is a function, it returns the specific value of the breakpoint. This is used to spell media query conditions.
5) In the final generation of the most critical style, another mixin defined in the css/mixins/_grid.scss file is used:
@mixin make-col($size, $columns: $ grid-columns) {
flex: 0 0 percentage($size / $columns);
max-width: percentage($size / $columns);
}
So far, we have delved into the source code in the scss/ directory of Bootstrap V4, and the research involved:
css/mixins/_grid-framework.scss file;
css/mixins/_breakpoints.scss file;
css/mixins/_grid.scss file;
css/_variables.scss file;
css/bootstrap-gris.scss file;
……
If you understand these, Then there will be no difficulty in reading the new version of bootstrap source code. I believe you can also understand the role played by sass and the organization of large-scale style frameworks from a “God perspective” on the whole.
Summary
By reading the grid system part of the source code, we should realize the importance of sass for such a large style framework system: 1) CSS modularity The flexibility of management organization; 2) the meaning of reuse, we use a lot of mixins, functions, global variables; 3) magical syntax like JS, including conditions, traversal, etc. We should also have a deeper understanding of the flex artifact.