2-column grid layout
A responsive two-column layout using CSS Grid with sidebar and main content area. Copy the CSS, tweak the ratio, ship it.
Aspect-ratio card
Media card with consistent ratio and object-fit.
Aspect ratio utility
Lock elements to a fixed aspect ratio — 1:1, 16:9, 4:3 and more — using the CSS aspect-ratio property. No padding hacks required. Copy and go.
Auto-responsive card grid
The RAM pattern: repeat(auto-fill, minmax()) for grids that adapt without media queries.
Base layer
Register @layer base to house element-level reset and default styles at the lowest cascade priority — any component or utility automatically wins without needing !important.
Basic @layer setup
Declare CSS cascade layers with @layer to control specificity by order, not selector weight. Define reset, base, and components layers in one line.
Basic subgrid
A child grid that inherits its parent's track sizing using subgrid — perfect for aligned card grids and form layouts.
Brand tokens
A brand token layer — primary color, font stack, border radius, and shadow — as CSS custom properties that override the base design system for white-label or multi-brand projects.
Breakpoint tokens
Named breakpoint reference values and modern media query range syntax — write @media (width >= 768px) instead of min-width and keep all breakpoints in one place.
Button reset
Strip a button of all browser default styles to get a clean, unstyled element ready for custom CSS. Uses appearance: none, all: unset, or individual property resets.
Card row with flexbox
A horizontal row of cards using flexbox with wrapping. Equal-height cards that reflow gracefully on narrow viewports.
Card that adapts to container width
A card component that switches between vertical and horizontal layout using CSS container queries — no media queries needed.
Center horizontally with margin: auto
Center any block element horizontally using margin-inline: auto. The simplest CSS centering technique — no flexbox or grid required. Copy and go.
Center in the Viewport
Center an element in the full viewport using position: fixed and CSS transforms — the classic modal/overlay centering technique.
Center inline elements with text-align
Use text-align: center on a block container to center inline and inline-block children — the original CSS centering technique, still useful today.
Center with place-items
The simplest CSS centering technique: one line of grid + place-items.
Center sticky element
Keep an element centered in the viewport while scrolling using position: sticky with top and transform — the sticky centering technique.
Center unknown-size element
Center an element of unknown dimensions both horizontally and vertically using CSS grid and place-items: center. Works for any content size. Copy and go.
Center utility
A reusable center utility using max-width and margin-inline: auto to constrain content to a readable width with consistent padding.
Center Vertically with Flexbox
The simplest way to center content vertically and horizontally — display: flex with align-items and justify-content.
Center with absolute + translate
Center any element with position: absolute and transform: translate(-50%, -50%). Works for unknown-size elements — the classic centering trick.
Center with container-query-aware technique
Use container queries to switch between block centering and flex centering depending on available space — a responsive centering pattern that adapts to its context.
Center with flexbox + margin: auto
Use margin: auto on a flex item to push it to the center — the cleanest way to center a single item inside a flex container without aligning properties.
Center with grid + place-items
The simplest way to center anything: two lines of CSS using display: grid and place-items: center.
Center with inline-block + vertical-align
Vertically center an element inside its container using inline-block display and vertical-align: middle — a pre-flexbox technique still useful for specific inline contexts.
Center with table-cell (legacy)
The classic pre-flexbox centering technique using display: table-cell and vertical-align: middle — still useful for supporting older email clients.
Center with writing-mode trick
Use writing-mode: vertical-lr and text-align: center to center elements — a lesser-known CSS trick that works without flexbox or grid.
Clearfix legacy
The classic clearfix hack for float-based layouts — a ::after pseudo-element that forces a container to wrap its floated children. Included for legacy codebases.
Cluster utility
A cluster layout utility using flexbox wrap and gap for horizontal groupings of tags, buttons, and icons.
Color scale tokens
Component layer
Declare @layer components to contain reusable UI patterns. Component styles override the base layer automatically, and utility classes in a higher layer still win without specificity hacks.
Component tokens
Scope component-level design tokens with CSS custom properties. Build variants without extra classes by overriding variables at the component boundary.
Container query cards
Cards that respond to container width with @container.
Cover utility
A cover layout utility that vertically centers a principal element within a minimum-height container.
Dark mode tokens
Implement dark mode with CSS custom properties and prefers-color-scheme — redefine semantic tokens in the dark media query, add a data-theme toggle for user override.
Dashboard widget with CQ
A dashboard stat widget that adapts its layout from compact (icon + number stacked) to expanded (icon left, stats right) using CSS container queries.
Debug grid overlay
A CSS-only layout grid overlay using a fixed position element with repeating-linear-gradient columns — toggle with a body class to visualize alignment during development.
Duotone image with background-blend
Create a duotone image effect using CSS background-blend-mode — replace the image's colors with two custom hues using only CSS, no image editing required.
Background blend layers
Stack multiple background layers with blend modes to create rich, complex backgrounds using only CSS — no images needed.
Color-burn effect
Apply the color-burn blend mode to intensify contrast and saturation, creating rich, saturated color blends between overlapping elements.
Exclusion blend mode
Create high-contrast, inverted color effects using the exclusion blend mode — unique color inversion when overlapping elements blend.
Luminosity blend
Combine the luminance of one layer with the hue and saturation of another using the luminosity blend mode — preserve lightness while changing colors.
Duration and motion tokens
CSS custom property animation tokens — duration scale from instant to slow, easing curve tokens, and a prefers-reduced-motion override that sets all durations to 0.
Fade-in on scroll
Elements fade in and slide up as they enter the viewport using CSS scroll-driven animations. No JavaScript, no Intersection Observer.
Flow utility
A flow utility class that adds consistent vertical spacing between child elements using the lobotomized owl selector.
Form reset
Reset form element styles so inputs, selects, textareas, and buttons inherit your font and color — eliminating cross-browser styling inconsistencies.
Framework override layer
Use CSS @layer to override framework styles cleanly — no !important required. Your override layer always wins because it's declared last.
Full-bleed grid layout
A CSS Grid layout where content stays centered but full-bleed elements span the entire viewport width.
Full-bleed utility
Break an element out of a constrained content area to span the full viewport width using the CSS full-bleed technique with 100vw and calc(). Copy and go.
Full-height section with dvh
Use 100dvh for mobile-friendly full-viewport sections that account for browser chrome. The modern replacement for 100vh.
Holy grail layout
The classic holy grail layout with header, two sidebars, content, and footer using CSS Grid template areas.
Image reset
Three-line image reset that fixes the inline-block gap, prevents overflow, and makes responsive images the default — display block, max-width 100%, height auto.
Layer ordering strategy
Define cascade layer order with @layer to control CSS priority across resets, components, themes, and utilities.
Line clamp
Truncate text to a fixed number of lines with an ellipsis using -webkit-line-clamp. Works in all modern browsers. Copy and go.
List reset
Remove default list styling (bullets, numbers, padding, margin) with a reusable utility class — semantic HTML preserved, visual reset applied only where needed.
Media object
The classic media object pattern with image on the left and text on the right using flexbox and object-fit.
Minimal CSS reset
A minimal modern CSS reset — box-sizing border-box, margin collapse fix, and sensible body defaults in under 20 lines. No browser quirks, no opinionated base styles.
Modern CSS reset
A minimal modern CSS reset that removes inconsistent browser defaults, sets box-sizing, inherits fonts on form elements, and prevents media overflow.
Typography reset
A side-by-side comparison showing browser default typography vs. a modern CSS reset with box-sizing, font-family, line-height, and margins.
Multi-brand tokens
A CSS custom property architecture for multi-brand design systems. Switch themes with a single data attribute. Copy and go.
Multiply overlay effect
Use mix-blend-mode: multiply to layer a brand color over a grayscale photo — the image shows through while being tinted to any hue, with no image editing required.
Nav collapse by container width
A navigation bar that collapses its links into a scrollable row or a compact stack based on the container width, using only CSS container queries.
Nested container queries
Use container queries inside other container queries to create components that respond independently to their own local context at every nesting level.
Object-fit utility
Utility classes for object-fit values (cover, contain, fill, none) to control how images fill their containers.
Page override layer
The @layer page layer sits at the top of the cascade — ideal for one-off layout adjustments on specific pages without creating specificity wars or scattering !important.
Radius Token Scale
CSS custom property border-radius scale — --radius-none through --radius-full for consistent rounding across a design system.
Reset in a layer
Place your CSS reset inside a cascade layer so component styles always override reset defaults without specificity wars.
Responsive table with container queries
A data table that collapses into a card-stack layout at narrow container widths using CSS container queries, keeping data readable at any size.
Responsive table
A table that stacks into card-like rows on small screens using container queries and data-label attributes.
Text on dark image
Make text legible over any photo using a linear-gradient scrim — a CSS-only technique that darkens the image locally without covering the entire background.
Scroll reset
Smooth scroll behavior, scroll-margin-top for fixed header offset, and overscroll-behavior to prevent the pull-to-refresh bounce on mobile web apps.
Scroll snap image gallery
A horizontal scrolling gallery that snaps to each image using scroll-snap.
Semantic tokens
Semantic CSS custom properties that describe purpose rather than value — --color-surface, --color-on-surface, --color-border — making dark mode and theming a one-token swap.
Shadow Tokens
A CSS custom property shadow scale using layered box-shadows for consistent depth in design systems.
Sidebar-aware layout
A layout that uses CSS container queries to reflow its content based on the container width, not the viewport — perfect for reusable components.
Sidebar + content layout
A sidebar alongside main content using CSS Grid fit-content.
Sidebar utility
A sidebar layout utility using CSS flexbox that stacks at narrow widths and sits beside content at wide widths.
Spacing Scale Tokens
A CSS custom property spacing scale using a 1.25 ratio for consistent design system padding and gaps.
Spacing scale
A numeric spacing scale as CSS custom properties — --space-1 through --space-24 using a 4px base unit — giving consistent rhythm across all margins, padding, and gaps.
Split navigation
A flexbox navigation bar with logo on the left and links pushed to the right. Responsive, accessible, zero JavaScript.
Stack utility
A vertical stack layout utility using flexbox and gap for consistent spacing between child elements. One class, zero layout math.
Stat card with container queries
A stats card that adapts from a compact vertical stack to a horizontal row using container queries — no media queries needed.
Sticky footer with flex
Push the footer to the bottom of the viewport when content is short using flexbox. Three lines of CSS, no hacks.
Sticky footer
A sticky footer that stays at the bottom of the viewport even with short content.
Subgrid layout
Aligned grid children with CSS subgrid — no fixed heights.
Switcher utility
A switcher layout utility that flips between horizontal and vertical arrangement based on container width.
Table reset
Normalize HTML table layout with border-collapse, table-layout fixed, and consistent cell padding — removes double borders and makes column widths predictable.
Theme layer
Use a dedicated @layer for theme overrides to swap design tokens without touching component specificity.
Theming System
A CSS custom property theming system — switch between light, dark, and brand themes by toggling a data-theme attribute on any element.
Type scale tokens
Font size tokens from --text-xs to --text-6xl using a Major Third ratio (1.25×), plus fluid heading tokens using clamp() for responsive typography without breakpoints.
Utility layer
Place utility classes in the highest cascade layer so they always override component styles without !important.
Vendor layer
Wrap third-party CSS in @layer vendor so your own styles always win — no !important, no specificity battles with library class names.
Visually hidden utility
A CSS utility class that hides content visually while keeping it accessible to screen readers. The sr-only pattern every project needs.
z-index token scale
Create a z-index token scale (base, dropdown, modal, toast) to avoid "random 9999". A small, documented system prevents stacking-context chaos.
Typography reset
A side-by-side comparison showing browser default typography vs. a modern CSS reset with box-sizing, font-family, line-height, and margins.
Color-burn effect
Intensify contrast and saturation with CSS mix-blend-mode: color-burn — create rich, vivid overlays that punch up colors without image editing.
Exclusion blend mode
Use mix-blend-mode: exclusion to create a high-contrast, inverted color effect — overlapping elements produce a unique color inversion that shifts hues and intensifies contrast.
Luminosity blend
Use mix-blend-mode: luminosity to preserve lightness while changing color relationships — the hue and saturation come from the blend layer while luminance stays intact.
Background blend layers
Stack multiple background layers with blend modes to create complex, layered effects — combine gradients, images, and solid colors with CSS background-blend-mode.
Text over image with blend
Place text over images with CSS blend modes for stunning overlays — combine mix-blend-mode with text-shadow for readable, visually striking captions.
Decorative blend effect
Create decorative overlays using CSS blend modes — add artistic flourishes and visual interest without images or JavaScript.
Filter chain effect
Stack multiple CSS filters (blur, brightness, contrast, hue-rotate) to create complex visual effects — chain filters for unique styling without images.
The ultimate centering decision tree
A decision tree for choosing the right centering technique — flexbox, grid, absolute positioning, or transform. Know when to use each method.
Typography adapts to container
Use container queries to make typography respond to its container — fluid fonts that scale based on available space, not just viewport width.
Spacing adapts to container
Use container queries to make spacing adapt to available space — gap, padding, and margins that respond to container size for truly fluid layouts.
Image layout adapts to container
Make image layouts respond to container size using container queries — switch between grid, flex, and stacked layouts based on available space.
Icon + text adapts to container
Use container queries to adapt icon + text layouts — switch between horizontal and vertical arrangements based on available space.
Media card with CQ
Create responsive media cards using container queries — image and content layouts that adapt to container size, not just viewport.
Profile card with CQ
Build profile cards with container queries — avatar, name, and bio layouts that adapt to available space for reusable components.
Pricing card with CQ
Create responsive pricing cards with container queries — feature lists, prices, and CTAs that adapt to container size.
Feature card with CQ
Build feature cards using container queries — icons, headings, and descriptions that reflow based on available space.
Testimonial card with CQ
Use container queries for testimonial cards — quotes, avatars, and names that adapt to container width for reusable components.
CTA block with CQ
Create CTA blocks with container queries — headings, text, and buttons that adapt layout based on container size.
Hero section with CQ
Build hero sections with container queries — headlines, subheads, and CTAs that adapt to container width for flexible layouts.
Layout shift prevention with CQ
Prevent layout shifts using container queries — stable dimensions and responsive containers that adapt without reflow.