Programmer’s Reference
Build readable layouts that work on small screens and keyboards.
CSS goes in a stylesheet or style block. Examples require the corresponding HTML classes.
Select a term for its definition, syntax, example, and common mistakes.
Set reusable colors and style elements with a class.
:root { --accent: #3fe6d0; --ink: #f3f8ff; }
.demo-link { color: var(--accent); }
body { color: var(--ink); background: #050b14; }Practical useKeep a demo interface aligned with your project’s colors.
Common mistakesSpecificity and source order affect which rule wins. Variables are inherited unless overridden.
Include padding and borders in declared widths using border-box.
*, *::before, *::after { box-sizing: border-box; }
.demo-card { width: 100%; padding: 1rem; border: 1px solid #40566b; }Practical useFit an inventory card inside a narrow application.
Common mistakesMargins remain outside the box. Fixed widths can overflow a mobile viewport.
Lay out items in a row that wraps when space runs out.
.demo-nav { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }Practical useLet a demo navigation bar wrap on mobile.
Common mistakesFlex children may shrink. Avoid visual ordering that conflicts with keyboard reading order.
Source: www.w3.org documentation
Create as many columns as fit, while keeping cards within a small container.
.demo-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
gap: 1rem;
}Practical useDisplay a demo site inventory as responsive cards.
Common mistakesA minmax minimum larger than the viewport causes overflow. Test actual content and long labels.
Change a two-column layout to one column at a narrow viewport width.
.demo-layout { display: grid; grid-template-columns: 14rem minmax(0, 1fr); }
@media (max-width: 48rem) {
.demo-layout { grid-template-columns: 1fr; }
}Practical useMove guide navigation above the content on a phone.
Common mistakesChoose breakpoints based on content. Include the HTML viewport meta tag.
Allow a long command to scroll inside its own block instead of widening the page.
pre { max-width: 100%; overflow-x: auto; padding: 1rem; }
code { font-family: ui-monospace, monospace; }
.demo-content { min-width: 0; }Practical useShow configuration examples on small screens.
Common mistakesA grid/flex child may need min-width: 0. Keep commands on their intended lines when copying.
Show an outline when an interactive control receives keyboard focus.
a:focus-visible, button:focus-visible, input:focus-visible {
outline: 3px solid #3fe6d0;
outline-offset: 4px;
}Practical useMake demo navigation and copy buttons usable from a keyboard.
Common mistakesDo not remove focus outlines without an equally visible replacement. Color alone should not convey service state.
Disable a decorative animation for users who request reduced motion.
@media (prefers-reduced-motion: reduce) {
.demo-decoration { animation: none; }
html { scroll-behavior: auto; }
}Practical useKeep a decorative decorative background comfortable to read.
Common mistakesDo not hide important status changes. Avoid flashing or continuous motion behind reading content.