Work in progress

Templates

A series of CSS templates that are free to use and help you get started. Each category of templates helps you get started with a sane set of defaults, but addresses different use cases and needs.

Basic Goodness

Inspired from a gist by JoeyBurzynski, this is a simple, reasonable way to get started with a website that renders well on most displays:

CSS

html {
  font-family: system-ui;
  font-size: clamp(1em, 0.909em + 0.45vmin, 1.25em);
  line-height: 1.75;
  margin: auto;
  max-width: 70ch;
  padding: 3em 1em;
}

Sane Defaults

This stylesheet takes regular HTML elements and apply what I call "sane defaults" to them, so they make more sense. This is basically:

Making keyboard input clearly in a visual way
Making the u element appear as a red, wavy underlined word (as a spellchecked word)

CSS

kbd {
  border-radius: 3px;
  padding: 1px 2px 0;
  border: 1px solid black;
}
  
u {
  text-decoration: red wavy underline;
}

Layout using CSS Grid

This layout resizes with the viewport using CSS grid. It's more verbose than using clamp(), but it also allows you finer control over breakpoints.

HTML

        <header>
          <p>This is your header</p>
        </header>
        <main>
          <h1>This is Your H1</h1>
        </main>
        <footer>
          <p>This is your footer</p>
        </footer>

CSS