systematize
v3.3.1
Published
systematize.scss: normalize styles across browsers. Like normalize.css, but with system fonts.
Downloads
3,550
Maintainers
Readme
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
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