Using Bootstrap 4's Reboot with Custom Variables

I don't know if you've been keeping up with Bootstrap lately, but their version 4.0 release is coming along quite nicely. I'm a particular fan of its Reboot settings, which build upon Normalize.css to give some opinionated defaults. You can read about some of the plusses here, but that article skips over my favorite feature - modern system native fonts.

System native fonts essentially use the same font that your OS uses for its UI elements, so the websites you create feel like they belong on that particular system. Each OS has come out with some really great fonts that look fantastic on websites. No more loading Google Fonts just to get sane defaults font-families!

Using Bootstrap 4's Reboot in Your Projects

If you want to use Bootstrap 4's Reboot on a non-Bootstrap site, you'll need to declare some variables and mixins before importing it with Sass. I went through each line of the _reboot.scss file and created a Gist with all the requirements. Save that as _reboot-variables.sass in your projects Sass folder, and then add @import "reboot-variables" to the top of your main Sass file. After that, you'll just @import "../../node_modules/bootstrap/scss/reboot", changing the path to reflect wherever you have Bootstrap 4 in your project.

Other Dependencies

You may also want to add normalize.css before you add the _reboot file. You can see here that Bootstrap 4 currently does this, but I suspect that some day the main reboot is all you'll need.

Final Thoughts

• If you don't want all these variables and just want to drop Bootstrap's Reboot into your site as-is, you can grab it from https://github.com/twbs/bootstrap/tree/v4-dev/dist/css instead. I prefer having these variables so I can re-use them on other parts of my stylesheet.