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:

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
CSS