I never bothered to document how I do sidenotes because they’re basically a simplified version of other implementations. But several people have asked about them, so in the spirit of sharing, here are my Super Simple Sidenotes. No javascript, just html and css.
We can nest media queries, container queries and other @-rules too…
Doh, I could have used this on Friday at IndieWeb Create Day😂 I was using media queries to set up responsive sidenotes, which I’ve been wanting for *reads publish date* eleven months 🦾
(Via Robin Rendle’s The Cascade email newsletter, which I now notice is on Buttondown so I might resubscribe by RSS instead of email 🤔)
Sidenotes can make a plain text richer. Here’s how you can implement them with HTML and CSS alone.
It was surprisingly difficult to find info about implementing sidenotes rather than endnotes. This page lists a lot more implementation options.
CSS scroll snapping allows you to lock the viewport to certain elements or locations after a user has finished scrolling.
CSS has come a long way since I learned it twenty years ago 😂
This seems like it would be useful for a one-page how-to website with multiple steps.
Learn to Code — For Free
A friend recently shared his frustration with CSS development. I responded to him with a high-level overview of the current state of CSS. If you’re feeling a bit out of touch with modern CSS development, I hope this helps. You’d be surprised how much you can do with vanilla CSS nowadays!
This is me — feeling totally out of the loop on CSS these days after knowing a fair bit ten years ago.
He recommends learning:
Accessible Palette – Create color systems with consistent lightness and contrast
Accessible Color Generator – Show me the closest variations of COLOR that contrast against BACKGROUND COLOR enough to meet ACCESSIBILITY GUIDELINES
Contrast Grid – Test many foreground and background color combos for compliance with WCAG 2.0 minimum contrast.
Coolers – color palette generator
Optimal Overlay Finder – For Readable Text on a Background Image
Vivid Gradient Generator – “we interpolate the gradient in a hue-based color system, such as HCL, HSB, or HCL (not RGB) 🤓. This avoids the line of gray that goes through the center of every color space.”
Gradient Easing Generator – Create and preview your own easing gradients in CSS.
OKLCH – OKLCH Color Picker & Converter
0 to 255 – hex gradient scale
The Good Line-Height – the good line-height calculates the exact number so it always fits the baseline grid!
Clippy – The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source.
Flexbox Patterns – Flexbox is awesome, but it introduces many new concepts that can make it difficult to use. These interactive examples will show you practical ways to use it to build UI components.
Tiny Helpers – single task tools
Omatsuri – Open source browser tools for everyday use
Web Skills – reference deck with links to explain a variety of web elements