boot.gl

Style Reset

---

boot.gl is the style reset of the Stylescape suite. It ships three independent baselines, so you can pick the one that fits. If you are unsure, use the reboot.

Stylesheet	Source	What it does
reboot.css	scss/reboot.scss	Recommended. Readable typography, dark mode, logical properties; every value is a setting
boot.gl.css	scss/index.scss	Hard reset: strips margins, padding, borders, list markers and quotes from every element
normalize.css	scss/normalize.scss	modern-normalize: keeps browser defaults, fixes inconsistencies
print.css	scss/print.scss	Opt-in print styles; works next to any of the above

Each file ships expanded and minified (*.min.css). See the comparison with Meyer's reset, normalize.css, sanitize.css, Bootstrap Reboot and Tailwind Preflight.

Installation

npm install boot.gl

Usage

CSS

<link rel="stylesheet" href="node_modules/boot.gl/css/boot.gl.min.css">

from a CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boot.gl@0.1/css/boot.gl.min.css">

or, through a bundler:

import "boot.gl/css/boot.gl.css";

Sass

// Hard reset, in a cascade layer so every unlayered style wins
@use "pkg:boot.gl" with ($layer: base);

// Or the configurable reboot
@use "pkg:boot.gl/scss/reboot" with (
    $body-bg: #fafafa,
    $link-color: teal,
);

// Mixins only (`reset-bleed`, `layer`), no CSS emitted
@use "pkg:boot.gl/scss/mixins" as boot;

pkg: URLs need Sass's Node package importer (--pkg-importer=node, or importers: [new NodePackageImporter()] in the JS API).

Development

npm install
npm run lint           # stylelint
npm test               # compile and check every stylesheet
npm run test:browser   # computed styles in Chromium, Firefox and WebKit
npm run build          # build dist/
npm run test:package   # pack dist/ and load it as a dependency (after build)
npm run dev            # dev server with a demo page on http://localhost:3000