You are in my Digital Garden.

Web

Last modified: Apr 21st, 2025

Resources

SVG loaders - 12 SVG loading animations
websites for beginners
web audio

Frameworks

Accessibility

Contrast Ratio
Contrast Checker
WhoCanUse - the best one, shows WCAG score but also how your colour combos look under different vision conditions, like colour blindness or cataracts

CSS

CSS Bed - collection of classless CSS themes with links and live demo
- simple.css is a nice brutal one and quite comprehensive (figcaption support, for example)
On my website I use new.css
classless-css - list of classless CSS themes on GitHub
Pico CSS is nice for something super modern looking
GD.CSS - alternative to CSS resets, classless CSS from UK gov
List of CSS resets/normalizers/etc
element.css - has built-in columns
ungrid - simplest responsive CSS grid (97 bytes minified!)
100 Bytes of CSS to look great everywhere - the starter CSS I use for text heavy pages. Pasted:

html {
  max-width: 70ch;
  padding: 3em 1em;
  margin: auto;
  line-height: 1.75;
  font-size: 1.25em;
}
h1,h2,h3,h4,h5,h6 {
  margin: 3em 0 1em;
}
p,ul,ol {
  margin-bottom: 2em;
  color: #1d1d1d;
  font-family: sans-serif;
}

My favourite 3 lines of CSS - manage vertical spacing with “the stack” or “the flow”
System Font Stack - good local fonts. Pasted:

/* sans-serif */
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;

/* serif */
font-family: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;

/* monospace */
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;