CSS

CSS normalize, some variables, and the Stack.

Contents

• Install
• Use
  • Bundler
  • CSS import
  • Variables
  • normalize
  • The Stack
• see also

Install

npm i -S @substrate-system/css

Use

Bundler

In a bundler (esbuild), import from this package.

import '@substrate-system/css'

Or minified:

import '@substrate-system/css/min'

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

CSS import

Import from this package via CSS:

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

Variables

This package exposes CSS variables, used by substrate web components.

import '@substrate-system/css'

:root {
    --substrate-background: #f4f7f9;
    --substrate-accent: #38b9ff;
    --substrate-primary: #36393d;
    --substrate-secondary: #e8e8e4;
    --substrate-light: #999da0;
    --substrate-medium: #999da0;
    --substrate-dark: #5a6571;
    --substrate-shadow: #96969640;
    --substrate-disabled: #98a1af;
    --substrate-button-text: #36393d;
    --substrate-button-shadow: #00000054;
    --substrate-button-background: #f5f5f5;
    --substrate-button-background-hover: #e6e6e6;
    --substrate-button-background-focus: #ededed;
    --substrate-input-text: #36393d;
    --substrate-input-text-hover: #e4e4e4;
    --substrate-input-border: #c9c9c9;
    --substrate-input-border-hover: #36393d;
    --substrate-input-background-focus: #eee;
    --substrate-border: #e7edf1;
    --substrate-error: #f06653;
    --substrate-notification: #f06653;
    --substrate-danger: #f06653;
    --substrate-success: #85b274;
    --substrate-warning: #f9a967;
    --substrate-info: #999da0;
    --substrate-overlay: #fff66;
}

normalize

Reset/normalize styles for a nice blank slate.

See joshcomeau.com/css/custom-css-reset

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:

1. box-sizing: border-box; -- Sizes based on border-box, not content-box.
2. margin: 0 -- Remove default margin. Add margins as needed in application CSS.
3. 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.

4. -webkit-font-smoothing: antialiased; -- Chrome and Safari still use subpixel antialiasing by default, which is bad on high DPI screens.
5. Use block display by default for media tags, like img and video.
6. 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.

7. Avoid text overflows -- Permission to use hard wraps when no soft wrap opportunties can be found
8. Improve line wrapping -- widows and orphans
9. Root stacking context -- OPTIONAL -- Create a new stacking context without needing to set a z-index. See What The Heck, z-index??

The Stack

import '@substrate-system/css/stack'

// minified
import '@substrate-system/css/min/stack'

It's Andy Bell's favorite 3 lines.

In its entirety:

.stack > * + * {
    margin-block-start: 1.5rem;
}

---

see also

• scrolling with reduced motion media query