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
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.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.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.)
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.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 withsystemize
using webpack+sass-loaderAny suggestion? I'm pretty new on this world.
Code style
'
, or always"
) in generated CSS}
on its own line in generated CSS