Normalize

Normalize is a simple CSS library made to provide good-looking yet simple HTML element styles.

It supports theming, natural HTML semantics, document width limiting, and more, all while trying to stay true to the HTML spec.

If you're interested, feel free to import it or download it for your site.

Usage

To get started, it's recommended to use this boilerplate:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My Site</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="normal.css" />
  </head>
  <body>
    <!-- Website content goes here. -->
  </body>
</html>

This is a good start for all Normalize-based pages. Make sure to use good HTML practices.

Theming

If you want a custom style for your page, you can use a stylesheet definition at the top of your page or in a stylesheet file.

In Normalize, the unit em is used for most values. You should also use this unit when defining your custom styles.

Normalize supports the following properties in :root:

--base-scale - The defining em-size of the document, in rem.
Format: [size]rem
--document-width - The width of the document.
Format: [size]em.
--base-color - The basic color of the page, used for all values below. You can use this for a quick, single-color theme.
Format: [hue]deg, [saturation]%. Lightness is handled by Normalize.
--font-family - The font used in the document.
--font-weight - The weight of the font used in the document.

Advanced Theming

--underlay-color - The underlay color of the document.
--background-color - The page color.
--color - The foreground color of the page.
--accent-color - The accent color of the page.
--accent-color-bg - The background-adjacent accent color of the page.
--accent-color-fg - The foreground accent color of the page.
--border-width - The width of the borders used on certain elements. Format: [width]em
--border-style - The style of the borders used on certain elements. Format: [border-style]
--border-color - The color of the borders used on certain elements. Format: [color]
--border-radius - The radius of the borders used on certain elements.
Format: [radius]em

Extra Theming

Some more things you can do to style Normalize.

Background Image

:root {
  background: url("/assets/image.jpg") repeat;
}

Transparent (or translucent) background

:root {
  --background-color: hsla(var(--base-color), 15%, 0.25);
}

Good Pairings

Just like a fine wine, Normalize can also be paired with different libraries to make amazingly functional (yet lightweight!) webpages.

htmx

htmx is an HTML hypertext enhancer. It can be used to create powerful websites, and replace JavaScript scripts with simple functions, all in HTML.

It's an amazing Normalize pairing because it aims to improve the spirit of HTML - just keeping it vanilla, but extending it in a way that is infinitely useful.