CSS Grid with a preferred column count
Set up a CSS grid with a specific ideal number of columns.
Tagged “css”
Posts for the year 2022
Animate your z-index for cleaner hover effects
Clean up overlap animations on hovered elements
Posts for the year 2021
Rotating floating animation with chained transforms
Using chained CSS transforms to get a rotation without rotating the element itself.
A DRY Approach to Color Themes in CSS
Using a CSS custom property trick to define themes variables only once.
Posts for the year 2020
Inline lists with conditional separators
Only show a separator when two items are next to each other, and skip for new lines.
Building and maintaining components from utility classes in Eleventy
Use a collection of utilities to form components without additional CSS.
Modern Fluid Typography with clamp()
Get a more consistent sizing with viewport-based font sizing
Posts for the year 2019
Breakout Container
Make a contained element span the entire horizontal space.
Contextual Utility Classes for Color with Custom Properties
Use the cascade to colour links in their context.