Bootstrap’s Reboot — Next Evolutionary Step for CSS Reset

Bootstrap 4 is coming, among other things, with substitution for Normalize.css. Its own browser defaults unification code, Reboot.

Since the days of Eric A. Meyer’s CSS Reset are long gone, Normalize.css has come with a more sensitive approach — instead of resetting all values, it simply unifies the display of basic styles in browsers. In our code, we just set values we disagree with.

Reboot Follows Normalize.css and Adds Two Concepts I Warmly Welcome

I am pleased, because I am using both concepts in any non-Bootstrap projects:

1. All typographical measures are in rem units. The interface can then globally zoom in and out from one default font size value.
2. Only one direction is used for the vertical margin — bottom. Thanks to this, is easier to follow the typographic rhythm in your own code.

→ If you want to study Reboot and Normalize results in detail, I made these two Codepens just for this purpose — Normalize.css and Reboot.

Four Interesting Things in the Reboot Code

1) Border Box Everywhere

Reboot calculates the dimensions of elements including padding and border. Finally, with the declaration for pseudoclasses. (Code)

html {  
  box-sizing: border-box;  
}

*,  
*::before,  
*::after {  
  box-sizing: inherit;  
}

2) Viewport on Windows Phone

You probably know that you must not forget the @-ms-viewport declaration. But what you might not be aware of is the @at-root Sass directive. It enforces rule insertion into the top level and thus outside all nesting. (Code)

@at-root {  
  @-ms-viewport { width: device-width; }  
}

As a result of deploying this rule, IE 11 and Edge are adding strange behavior to scrollbars. Therefore, the workaround for yet another level of struggle with Microsoft looks like this:

body {  
  -ms-overflow-style: scrollbar;  
}

3) Removing 300ms Delay

a,  
area,  
button,  
[role="button"],  
input,  
label,  
select,  
summary,  
textarea {  
  touch-action: manipulation;  
}

The touch-action property is finally supported by mobile Safari, so you will not need to use the FastClick library in the near future. It is ready in Reboot. (Code)

4) Reset for min-width: min-content

You may not be familiar with one of the new values for the min-width — min-content. It sets the minimum width of the element to inner width which is the width of the longest word or the width of the table or picture. Reboot removes gotchas in some browsers that are created by setting the value for fieldsets.

fieldset {  
  /* Chrome and Firefox setting here  
     min-width: min-content */  
  min-width: 0;  
}

Reboot can not be downloaded and installed separately, but in the Bootstrap 4 documentation, there is some stuff already prepared. Anyway, a copy / paste installation works here.

Originally posted on my Medium.com.