mvasilkov/systematize

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

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

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

systematize's Issues

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.

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.

Don’t recommend BlinkMacSystemFont

That name is deprecated and will be removed. In Chrome under macOS, system-ui is enough.

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.

Monospaced fonts

This is opt-in for now (as an scss variable).

Print styles

As seen in:

• HTML5 Boilerplate
• Bootstrap

Include _reboot.scss and other styles

See

• https://github.com/twbs/bootstrap/blob/v4-dev/scss/_reboot.scss
• https://github.com/suitcss/base/blob/master/lib/base.css

Test

Release 2.0

• Release 2.0 to npm
• Publicise / bring some attention to the library

Demo page / comparison with normalize

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.

Better docs on using the SCSS imports

Sample the selection color from the new MacOS

Potentially also Windows 10.

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

Update README

Need to inherit fonts on form controls, because Windows

MS Windows browser styles are trash garbage:

• textarea uses monospace
• button uses arial

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.)

Merge sanitize.css

See https://github.com/jonathantneal/sanitize.css/blob/master/sanitize.css