/reeeset

:rage3: A slightly opinionated CSS reset. 3 e's.

Primary LanguageHTMLMIT LicenseMIT

reeeset

A slightly opinionated CSS reset.

Why?

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.

"But I like building on top of browser defaults"

REEEEEEEEEEEEEE GET OUT NORMIE!!!!

Features

  • 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;
}

Installation

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.