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:

Advanced Theming

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.