@microflash/preset NPM

preset

A modern CSS preset

What's this?

preset is a CSS reset to baseline the browser styles to give you a uniform foundation for building your custom styles on top of it.

Install

In Node.js, install with npm:

npm install @microflash/preset

In Deno, with unpkg.com:

import "https://unpkg.com/@microflash/preset";

In browsers, with unpkg.com or jsdelivr.net:

<link rel="stylesheet" href="https://unpkg.com/@microflash/preset">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@microflash/preset">

Use

In Node.js or Deno, import the CSS in the entrypoint file of your application.

import "@microflash/preset";
// or using URL import
import "https://unpkg.com/@microflash/preset";

Make sure that this is the first CSS import before including any other CSS files.

If you're using Sass, you can import Sass file instead of the compiled version. This is useful if you want to compile the CSS for custom browser targets.

You can import the Sass file in the entrypoint of your application as follows.

import "@microflash/preset/scss";
// or using URL import
import "https://unpkg.com/@microflash/preset/src/preset.scss";

Alternatively, you can import it in your main Sass file before any other rules.

@use "@microflash/preset/scss";
// rest of the Sass imports

In browser, including the <link> before any other stylesheet should do the trick.

Browser support

preset supports modern browsers.

API

You can customize some aspects of preset through CSS properties. You can define these properties in :root or html scope.

--preset-line-height (default: calc(0.3rem + 2ex + 0.3rem)) to override the line-height
--preset-tab-size (default: 2) to control the width of code block indentation
--preset-dialog-backdrop-filter (default: blur(25px)) to override the backdrop filter of the dialog
--preset-table-caption-side (default: bottom) to customize caption position of a table caption
--preset-scroll-padding (default: 3rem) to set scroll-padding-block-start for an element