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 - should be a px or pt value. This is the em-scale for the entire page. Therefore, you should not use em for this property!
--document-width - The width of the whole document.
--background-color - The background color of the page.
--color - The text color of the page. Should contrast well with --background-color.
--accent-color - The main color of interactive elements, such as <button> or <input type="checkbox" />.
--accent-color-fg - The secondary color of interactive elements. Should contrast well with --accent-color.
--font-family - The font that the document will use.
--font-weight - The font weight that the document will use.
--border-style - The border style of special elements, such as <fieldset> or <input>.
--border-radius - The roundness of special elements.

Example styles

<style>
  :root {
    --base-scale: 14px;
    --document-width: 40em;

    --background-color: #111;
    --color: #0F0;

    --accent-color: #0f0;
    --accent-color-fg: #111;

    --font-family: monospace;

    --border-style: 0.0625em solid var(--color);
    --border-radius: 0 0 0.5em 0;
  }
</style>

<style>
  :root {
    --base-scale: 18px;
    --document-width: 40em;

    --background-color: #fed;
    --color: #000;

    --accent-color: transparent;
    --accent-color-fg: #000;

    --font-family: cursive;

    --border-style: 0.1em solid var(--color);
    --border-radius: 2em;
  }
</style>

<style>
  :root {
    --base-scale: 1rem;
    --document-width: 100%;

    --background-color: #fff;
    --color: #000;

    --accent-color: #808080;
    --accent-color-fg: #fff;

    --font-family: serif;

    --border-style: 0.125em solid var(--color);
    --border-radius: 0.25em;
  }
</style>

<style>
  @import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap");
  :root {
    --base-scale: 32px;
    --document-width: 100%;

    --background-color: #fff;
    --color: #000;

    --accent-color: #000;
    --accent-color-fg: #fff;

    --font-family: "Lexend Deca";

    --border-style: 0.25em solid var(--accent-color);
    --border-radius: 2em;
  }
</style>

Keeping it Simple

If you want to keep it simple, simply apply the .base class to html.

This will override all custom styles, making it great for accessibility.