sys

systematize

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

Showing:

Popularity

Downloads/wk

79

GitHub Stars

52

Maintenance

Last Commit

2yrs ago

Contributors

39

Package

Dependencies

0

Size (min+gzip)

1.0KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

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 nameWhy
-apple-systemApple
Segoe UIWindows
system-uiGeneric font family
RobotoAndroid
Helvetica NeueOld Apple
sans-serifCatch-all

Segoe UI comes before system-ui for reasons.

Monospaced Fonts

Font family nameWhy
SF MonoApple
Ubuntu MonoUbuntu
ConsolasWindows
DejaVu Sans MonoBitstream Vera Sans Mono (Linux)
MenloBitstream Vera Sans Mono (Apple)
monospaceGeneric font family

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

Coding Style

See Sass Guidelines

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100