A slightly opinionated CSS reset.
Normalize is made to make browsers consistent. This is cool, but in the real world margins, padding, box-sizing, are all really annoying things. The easiest way to deal with it is to simply reset them all.
Sanitize.css does something similar and is fairly popular. I might assimilate Sanitize over Normalize in the future, but for now Normalize seems a bit more stable.
This is just my personal-preference layer on top of resets.
REEEEEEEEEEEEEE GET OUT NORMIE!!!!
- Normalize.css
*
to remove margin, padding, and inherit box-sizing: border-box- Reset Normalize's sneaky margins/padding (
<h1>
,<figure>
, and<fieldset>
) max-width: 100%
typically overflowing elements to make them responsive- Add generic styles to H5BP .browserupgrade
- Basic/simple typography
- Beautiful/fast system fonts
- 1.666
line-height
(not because I worship Satan, but because of some rule-of-thirds design thingy) - Generic heading sizes/line-height
- Sized in rems for easy responsive typography
- Protip Use the 'Lobotomized Owl' technique on content areas. Example:
article * + * {
margin-top: 1rem;
}
HTTP2:
<link rel="stylesheet" href="https://unpkg.com/reeeset">
<link rel="stylesheet" href="css/your_styles.css">
HTTP1:
@import 'https://unpkg.com/reeeset';
/* your styles... */
unpkg is legit (well-known OSS contributor backed by a large company), but if you don't trust the longevity of free CDNs on production work (you really shouldn't) just copy/paste the contents of dist/reeeset.min.css to your file-system.