Tutorial

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

Draft updated on Invalid Date
    Default avatar

    By 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.

    1. Near-zero load time for the default font
    2. 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:

    Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

    Learn more about us


    About the authors
    Default avatar
    Nicholas Cerminara

    author

    Still looking for an answer?

    Ask a questionSearch for more help

    Was this helpful?
     
    Leave a comment
    

    This textbox defaults to using Markdown to format your answer.

    You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

    Try DigitalOcean for free

    Click below to sign up and get $200 of credit to try our products over 60 days!

    Sign up

    Join the Tech Talk
    Success! Thank you! Please check your email for further details.

    Please complete your information!

    Get our biweekly newsletter

    Sign up for Infrastructure as a Newsletter.

    Hollie's Hub for Good

    Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

    Become a contributor

    Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

    Welcome to the developer cloud

    DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

    Learn more
    DigitalOcean Cloud Control Panel