← log

Replacing a CSS framework with 55 lines

This site was built in 2015 with Skeleton, a CSS boilerplate that was itself already minimal — 419 lines, compared to Bootstrap's thousands. A decade later, Skeleton is unmaintained and the web has better primitives.

Before removing it, I audited what the site actually used. Out of 419 lines, four things were referenced in any HTML file: the float-based 12-column grid, the font-size: 62.5% trick that makes 1rem equal 10px, the Raleway font stack with font-weight 300 on headings, and one utility class — .u-max-full-width on images. Everything else — buttons, forms, tables, code blocks, fieldsets — was dead weight loaded on every page.

The replacement is css/base.css: 55 lines that provide exactly those four things, with one upgrade. Skeleton's grid was built with float: left and clearfix hacks, the standard technique from 2014. The new grid uses display: flex; flex-wrap: wrap instead. Fewer lines, no clearfixes, columns stack naturally on mobile without additional selectors.

The typography is identical to Skeleton's: same rem scale, same font-weight 300, same letter-spacing values. The goal was not to change how anything looks — just to own what produces that look.