systematize v3.3.1

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

Segoe UI comes before system-ui for reasons.

Monospaced Fonts

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

Coding Style

See Sass Guidelines