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:
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)
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.