systematize

systematize.scss: normalize styles across browsers. Like normalize.css, but with system fonts.

Usage no npm install needed!

<script type="module">
  import systematize from 'https://cdn.skypack.dev/systematize';
</script>

README

systematize.scss: normalize styles across browsers

Like normalize.css, but with system fonts.

npm


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