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:
box-sizingis globally set on every element—including
border-box. This ensures that the declared width of element is never exceeded due to padding or border.
<body>also sets a global
text-align. This is inherited later by some form elements to prevent font inconsistencies.
<body>has a declared
background-color, defaulting to
<p>are reset to have their
margin-topremoved. Headings have
margin-bottom: .5remadded and paragraphs
margin-bottom: 1remfor easy spacing.
margin-topremoved and a
margin-bottom: 1rem. Nested lists have no
<pre>element is reset to remove its
remunits for its
<caption>, collapse borders, and ensure consistent text-align throughout.