systematize

systematize.scss: normalize styles across browsers

Like normalize.css, but with system fonts.

---

This project is an SCSS version of normalize.css (8.0.1 at the time of this writing.) They share the following functionality:

• Normalize styles across browsers
• Preserve useful browser defaults, rather than erasing them
• Correct bugs and common browser inconsistencies
• Improve usability with subtle changes

Additionally, systematize.scss aims to do the following:

• Default to system fonts, and better typography in general
• Be slightly more opinionated while retaining clear focus

Installation

npm install --save systematize

Demo

CodePen

Variables

• $sys-font-stack System fonts, detailed below
• $sys-font-stack-mono Monospaced fonts, detailed below
• $sys-selection-background Selection background color, #b2d7ff
• $sys-selection-color Selection text color (not set by default)
• $sys-normalize-fonts-inputs Normalize font properties on form elements (off by default)

System Fonts

Font family name	Why
-apple-system	Apple
Segoe UI	Windows
system-ui	Generic font family
Roboto	Android
Helvetica Neue	Old Apple
sans-serif	Catch-all

Segoe UI comes before system-ui for reasons.

Monospaced Fonts

Font family name	Why
SF Mono	Apple
Ubuntu Mono	Ubuntu
Consolas	Windows
DejaVu Sans Mono	Bitstream Vera Sans Mono (Linux)
Menlo	Bitstream Vera Sans Mono (Apple)
monospace	Generic font family

There is no Monaco because Menlo shipped with Mac OS X 10.6 Snow Leopard in 1948.

Coding Style

See Sass Guidelines