Reboot - A CSS reset inside Bootstrap

Apr 27, 2021reviewscss-resetscss

Reboot is a CSS reset file, builds upon normalize.css, part of Bootstrap, providing many HTML elements with somewhat opinionated styles using only element selectors.

This reset is definitely very opinionated, specifically designed for Bootstrap, not as a drop-in for any project. It focuses heavily on using rem instead of em, single direction of margin, and using inherit whenever possible.

The sole purpose is to provide an elegant, consistent, and simple baseline to Bootstrap components build upon. Following are elements updated to provide better page-wide defaults:

  • The box-sizing is globally set on every element—including *::before and *::after, to border-box. This ensures that the declared width of element is never exceeded due to padding or border.
  • The <body> also sets a global font-family, line-height, and text-align. This is inherited later by some form elements to prevent font inconsistencies.
  • For safety, the <body> has a declared background-color, defaulting to #fff.
  • The default web fonts (Helvetica Neue, Helvetica, and Arial) have been dropped in Bootstrap 4 and replaced with a native font stack for optimum text rendering on every device and OS.
  • All heading elements and <p> are reset to have their margin-top removed. Headings have margin-bottom: .5rem added and paragraphs margin-bottom: 1rem for easy spacing.
  • All lists—<ul>, <ol>, and <dl>—have their margin-top removed and a margin-bottom: 1rem. Nested lists have no margin-bottom.
  • The <pre> element is reset to remove its margin-top and use rem units for its margin-bottom.
  • Tables are slightly adjusted to style <caption>, collapse borders, and ensure consistent text-align throughout.
  • Various form elements have been rebooted for simpler base styles.
  • And many more