systematize.scss: normalize styles across browsers. Like normalize.css, but with system fonts.
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:
Additionally, systematize.scss aims to do the following:
Installation
npm install --save systematize
Demo
Variables
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