Themes & plugins Intro
Mobile-first is a question of order, not taste
Starting narrow leaves you fewer decisions. Starting wide means deciding what to throw away at every step — and that decision never ends.
Technote
Layouts that hold up on mobile
Why desktop-built layouts break on phones, and the structural fixes — building layouts that do not break instead of adding more breakpoints.
8 articles
Themes & plugins Intro
Content decides your breakpoints, not device names
Breakpoints named after devices go stale every year. Widen a component slowly, note where it stops working, and that width is your breakpoint.
Themes & plugins Practical
One clamp() instead of re-declaring sizes at every step
Re-declaring heading sizes at every breakpoint only adds maintenance. clamp() puts the minimum, the fluid middle and the maximum on one line and removes it.
Themes & plugins Practical
When a grid track swells to fit its content — minmax(0, 1fr)
repeat(3, 1fr) does not promise three equal columns. One code block or unbroken string inside pushes its track wider, and the whole layout leaves the screen.
Themes & plugins Practical
Hunting horizontal overflow — the number will not find it
scrollWidth matches the viewport and yet the screen is visibly clipped. An ancestor absorbed the overflow — so measure element rectangles instead.
Themes & plugins Practical
Tap targets — minimum size and spacing for fingers
A cursor is one pixel; a fingertip is not. How to grow the hit area without growing the visuals — and why hover-only affordances simply do not exist…
Themes & plugins Practical
Mobile navigation beyond the hamburger
The hamburger is the answer when there are many destinations. If three or four carry the traffic, showing them always beats hiding them.
Themes & plugins Advanced
Why sticky quietly dies — one overflow line on an ancestor
position: sticky throws no error when it fails. Check three things in order — a threshold, room in the parent, an ancestor's overflow — and the cause is…