@microflash/preset

preset

A modern CSS preset

• What's this?
• Install
• Use
• Browser support
• Credits
• License

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.

Credits

• Jeremy Thomas: minireset.css
• Josh Comeau: My Custom CSS Reset
• Jesús Ricarte: Using calc to figure out optimal line-height
• Adam Argyle: normalize.src.css
• Elly Loel: reset.css

License

MIT

Changelog

[1.0.0] - 2023-07-27

Added

• display: none for undefined custom elements to prevent rendering them prematurely.
• text-wrap: balance for headings for more elegant handling of widows; see https://ishadeed.com/article/css-text-wrap-balance/
• display: list-item for summary element
• Default backdrop blur on dialog element
• Document overflow is now hidden when dialog is open (experimental)
• Table captions are now positioned at bottom by default

Changed

• box-sizing for every element is set to border-box; earlier it was inheriting from parent (leading to unintended behavior in children due to cascade)
• Stroke customization is applied only on SVGs without fill; earlier it was being applied to all SVGs.

Removed

• font-smoothing has been removed; see https://www.zachleat.com/web/font-smooth/
• list-style: none for lists with [role=list]

API

Some of the properties in the reset are now customizable through CSS properties. You can define these properties in :root or html scope.

• --preset-line-height to override the line-height (fallback value: calc(0.3rem + 2ex + 0.3rem))
• --preset-tab-size to control the indentation width of code block tabs (fallback value: 2)
• --preset-stroke-color to override the stroke color of SVG with no fill (fallback value: currentColor)
• --preset-dialog-backdrop-filter to override the backdrop filter of the dialog (fallback value: blur(25px))
• --preset-table-caption-side to customize caption position of a table caption (fallback value: bottom)