@substrate-system/css-normalize NPM

CSS normalize

Reset/normalize styles for a nice blank slate.

These days, browsers don't have massive discrepancies when it comes to layout or spacing. By and large, browsers implement the CSS specification faithfully, and things behave as you'd expect.

Featuring:

box-sizing: border-box; -- Sizes based on border-box, not content-box.
margin: 0 -- Remove default margin. Add margins as needed in application CSS.
line-height: calc(2px + 2ex + 2px); -- Dyslexia friendly line height.
!NOTE
You may want to override the line-height for headings in your application CSS. See this article for more info about line-height.
-webkit-font-smoothing: antialiased; -- Chrome and Safari still use subpixel antialiasing by default, which is bad on high DPI screens.
Use block display by default for media tags, like img and video.
Inherit fonts for form controls
font is a rarely-used shorthand that sets a bunch of font-related properties, like font-size, font-weight, and font-family.
Avoid text overflows -- Permission to use hard wraps when no soft wrap opportunties can be found
Improve line wrapping -- widows and orphans
Root stacking context -- OPTIONAL -- Create a new stacking context without needing to set a z-index. See What The Heck, z-index??

bonus

scrolling with reduced motion media query

Install

npm i -S @substrate-system/css-normalize

Use

Reset

import '@substrate-system/css-normalize'

bundler

If you are a bundling your CSS, e.g. with vite, just import from this module in your javascript:

import '@susbtrate-system/css-normalize'
import '@substrate-system/css-normalize/stack'

Or import the minified CSS:

import '@substrate-system/css-normalize/min'

pre-bundled

This package includes minified CSS also.

Copy the CSS so it is accessible to your web server. The minified file is at dist/index.min.css.

cp node_modules/@substrate-system/css-normalize/dist/index.min.css ./public/normalize.css

Add a link in your HTML.

<head>
  <link rel="stylesheet" href="/normalize.css">
</head>

<!-- ... -->

CSS import

Import from this module in CSS:

@import url("../node_modules/@substrate-system/css-normalize/dist/index.min.css");

@substrate-system/css-normalize v0.0.13