Preflight

An opinionated set of base styles for Sprig projects.

Overview

Built on top of a modern CSS reset, Preflight is a set of base styles for Sprig projects designed to smooth over cross-browser inconsistencies and make it easier for you to work within the constraints of your design system.

@layer theme, base, components, utilities;

@import "sprigcss/theme.css" layer(theme);
@import "sprigcss/preflight.css" layer(base);
@import "sprigcss/utilities.css" layer(utilities);

Margins are removed

Preflight removes all of the default margins from all elements including headings, blockquotes, paragraphs and more:

*,
::after,
::before,
::backdrop,
::file-selector-button {
  margin: 0;
  padding: 0;
}

Headings are unstyled

All heading elements are completely unstyled by default, and have the same font size and weight as normal text.

Lists are unstyled

Ordered and unordered lists are unstyled by default, with no bullets or numbers. If you'd like to style a list, you can do so using the list-style-type and list-style-position utilities.

Images are block-level

Images and other replaced elements (like svg, video and canvas) are display: block by default.