Tutorial

A Look at Bootstrap 4's New Reset: Reboot.css

Draft updated on Invalid Date

Nicholas Cerminara

A Look at Bootstrap 4's New Reset: Reboot.css

This tutorial is out of date and no longer maintained.

Introduction

I’ve been wanting to write this article for a long time - since August 25, 2015, to be exact. It’s been in the back of my mind and bugging me forever. I’m glad I’m finally going to sit down and bang this post out despite there probably being a ton of great resources out there on this.

If you don’t already know, Bootstrap is an awesome front-end framework! I’ve been using it for a really long time, and I think it helps out all types of developers. It doesn’t matter if you are a front-end or back-end developer. Bootstrap is a robust and flexible set of tools that helps you code awesome websites for all use cases.

Bootstrap 4 recently came out of Alpha and into Beta. What the Bootstrap core team is doing is no small task. They’re literally pushing out code that is used by gazillions of people and websites (seriously, like over 20% of the web)! On top of that, CSS exists in a land where every individual developer is super-opinionated about the right and wrong way to do things. It’s no easy task.

Let’s talk about a really neat new feature in Bootstrap 4 called Reboot. In this post, I’ll blab a bit about the history of resets, Bootstrap, some cool features of Reboot, and how you can start using it today.

The History of Resets

The Eric Meyer Reset

I’m pretty sure the term “reset” first came around when Eric Meyer, came out with a stylesheet to literally reset all browsers to look the exact same. The problem with this is, it really reset things. Literally, everything looked the same regardless of the element. Elements like h1s were the same as h2s. This meant front-end people would have to build their own base styles. This is both a good and bad thing.

Normalize.css

Normalize was different because it resets your browser styles and gave you some dead-simple, super pretty base styles.

Normlalize.css doesn’t use border-box by default though, requiring that you add it somehow. Normalize.css is still active today, widely used, and you can still easily swap this.

Reboot.css

Reboot in the simplest terms possible is Bootstrap 4’s “reset”. It’s a little bit different than your typical reset though.

Reboot.css is like a Normalize.css 2.0 in my opinion. It has some awesome “reset” type features:

It uses box-size: border-box; by default on all elements.
“Resets” browser styles for consistent cross-browser development.
Keeps a simple and natural base-style on elements.
Carries a little bit of an opinion on how to write your CSS for the modern web.
Made by the Bootstrap people (lots of trust)

Bootstrap 4 puts all this into a single page making it dead-simple to use.

CSS is becoming more and more featured-pack by the day. Things like “Flexbox” or “Grid” are getting wider browser-adoption making frameworks less necessary for doing complex layouts easily.

On top of that, you have some ridiculously cool tools like LESS, Sass/SCSS, and PostCSS becoming the default go-to for writing styles making it easier to automate tedious tasks such as creating a set of button styles.

Get Started with Reboot.css Now

So, how can we test Reboot.css out now and actually see what the heck it is?

Use this CodePen I made. It has every single element on a single webpage and lets you easily swap out different resets to see the difference.

https://codepen.io/ncerminara/pen/RLMwmy

If you want to just find the CSS and test yourself, check these resources:

Box-Sizing: Border-Box Default

Reboot.css uses box-sizing: border-box; by default for all elements. This in my opinion is the most distinguished difference between normalize.css.

So, it’s safe to say it’s “responsive ready” out-of-the-box. Here’s what it looks like at the top of the file:

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

If you’re familiar with this, it’s taken from Paul Irish’s arguably super famous post.

Use “rems” for Sizing and Spacing

rems are just not for font-sizing, it can be used for all spacing. To show you just how much Reboot.css embraces this, check out the demo below:

https://codepen.io/ncerminara/pen/ZGgJVa/

Unit of Measurement Differences Explained

CSS3 introduced a new unit of measurement called rem. It all comes down to accessibility for users (resizing of font-sizes / screen-sizes) and maintainability/consistency for front-end developers.

Here it is summarized:

px: Good for consistency, bad for accessibility
em: Good for accessibility, just okay for maintainability / consistency
rem: Good for accessibility, really good for maintainability / consistency

There’s a ton of good resources to learn a bit more about units of measurement.

How REMs Work

So, you know that 100 pixels are always going to be 100 pixels long regardless if you have your operating system show large fonts, are on a 4K monitor, or those 100 pixels are in a 1000 or 5000-pixel sized container. It doesn’t matter. 100 pixels is 100 pixels. This is good for consistency but bad for usability since it doesn’t scale well to user-specific preferences.

The unit em was first introduced to try and help with this “scaling” issue by being a computed unit of measurement. This means the sizing is always relative to something, in this case, the parent. So in a basic example, you could say: “Instead of being 100px long, be 10% of the 1000px long container” or 0.1em". This way if the container was resized by the user, device, system, or whatever it would remain consistent in perceived length.

This is cool, except it gets real crazy when you have an em be relative to another em. Or worse, an em that is relative to an em that is relative to an em. Things get complicated and messy and become impossible to deal with over time.

I like to think of rems as a simple em. Everything is always relative to the root (aka, the body tag or html tag). So if your root was 1000px, your length is 0.1rem regardless of container, settings, whatever.

Native Font Family

Have you ever designed a website to see slight differences between operating systems? This is because of how systems render fonts. Reboot.css embraces using whatever their native font stack is to the operating system.

This actually means 2 things.

Near-zero load time for the default font
Uses the font the user wants or looks best for them

Here’s the code. Check out all the fallbacks!

$font-family-sans-serif:
  // Safari for OS X and iOS (San Francisco)
  -apple-system,
  // Chrome >= 56 for OS X (San Francisco), Windows, Linux and Android
  system-ui,
  // Chrome < 56 for OS X (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  "Roboto",
  // Basic web fallback
  "Helvetica Neue", Arial, sans-serif !default;

Compiled CSS:

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

Margin Top

Reboot.css makes the following elements no longer have any top margin:

h1
h2
h3
h4
h5
h6
p
ul
ol
dl
pre

This actually makes a ton of sense. I can vouch for this method. I never use margin-top in any of my base CSS that I have ever done. It makes things fall into place a lot easier when things are CMS-powered and the content can be anything. I would even suggest adding table to this list.

Clean, Dead-Simple Base Elements

Reboot.css also provides a clean and naked style to all common elements. Things like blockquote, tables, forms, and much more. This goes a bit more to be able to have clean and simple form fields to get up and running with.

Reboot.css Form Stlyes

Mobile Fast Click

By default Reboot.css uses touch-action: manipulation to speed up any delay that might exist for touch users.

Here’s the full code:

a,
area,
button,
[role="button"],
input:not([type=range]),
label,
select,
summary,
textarea {
  -ms-touch-action: manipulation;
      touch-action: manipulation;
}

You can see that clicking links, buttons, and form fields will be a lot quicker and responsive on touch devices.

Conclusion

Overall, I would say Reboot.css is a great project and continuation of standardizing the modern web with familiar web practices. You can learn more about Reboot.css at the following links: