Quickly add basic styles to HTML to get a responsive & pretty page.

<!DOCTYPE html>
<title>Peculiar Page</title>
<meta charset="utf8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="" />
<link rel="stylesheet" href="" />
<header>Peculiar Page</header>
<article class="flow">
<h1>Hello, World!</h1>
Arcu porttitor elit bibendum lacus libero velit labore dolor
pharetra diam. Quam non dictum non laoreet scelerisque fringilla
auctor aliqua hac aenean elementum.


  • A HTML reset
  • Setup with all Layout elements
  • Form patterns are available too
  • A full height <body> tag
  • A <main> element that fills the full-height <body> when directly nested
  • A custom <header> at the top when no class is applied to it
  • A custom <footer> at the bottom when no class is applied to it
  • Light + dark themes based on user's OS preference
  • Styled HTML elements (see below)
  • A .flow class to make HTML content flow nicely down the page
  • Hide anything with aria-hidden="true"

Styled elements

  • <a>
  • <blockquote>
  • <code>
  • <details> + <summary>
  • <h1> ... </h6>
  • <pre>
  • <table>
  • <dl> + <dt> + <dd>
  • <figure> + <figcaption>

Any styled elements will be reset if you add a class to them, to make the styles easy to override.