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

  • By я котик пур-пур
  • Last update: Oct 15, 2022
  • Comments: 6

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

Github

https://github.com/mvasilkov/systematize

Comments(6)

  • 1

    Following steps after I downloaded the npm and Node.js

    I‘m a noob but fond of Mac system font so I download the latest release but I have no idea what should I do next.

    I tried to input npm install —save systematize in terminal but got this:⸨░░░░░░░░░░░░░░░░░░⸩ ⠇ rollbackFailedOptional: verb npm-session 5b64df302bdd24b ) and font didn’t change to SF when I open websites on safari. It’s likely that I missed or totally misunderstand sth.

  • 2

    Action required: Greenkeeper could not be activated 🚨

    🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

    To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

    Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

    If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

    Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

  • 3

    Accessibility fix: Allow iOS browsers to auto-scale fonts based on user preference

    May be a good idea add font:-apple-system-body to the HTML element CSS to allow iOS browsers to auto-scale font sizes based on user preference set in Accessibility > Display & Text size.

    See this Codepen for the full code example. https://codepen.io/chrislachance/pen/OJpmgrM

    (PS: iOS is set to a default of 17px instead of the browser-standard 16px when using this method.)

  • 4

    The -moz-selection pseudoelement is now unneeded

    Firefox 62, which will be released on September 5, has unprefixed the ::-moz-selection CSS pseudoelement. Please drop it from the style sheets once it’s released.

  • 5

    Including .css files with @import is non-standard behaviour which will be removed in future versions of LibSass.

    I had this problem with normalize.css but it also happens with systemize using webpack+sass-loader

    @import "systematize";
    
    DEPRECATION WARNING on line 1, column 8 of stdin:
    Including .css files with @import is non-standard behaviour which will be removed in future versions of LibSass.
    Use a custom importer to maintain this behaviour. Check your implementations documentation on how to create a custom importer.
    
    • node-sass: 4.9.2
    • sass-loader: 7.0.3
    • webpack 4.15.1

    Any suggestion? I'm pretty new on this world.

  • 6

    Code style

    • [ ] Decide on the comment style (especially sections), and use it in all files
    • [ ] Use single quotes in SCSS
    • [ ] Output consistent quotes (either aways ', or always ") in generated CSS
    • [ ] Bonus: strip redundant quotes using cleancss CLI
    • [ ] Bonus: } on its own line in generated CSS