Admin login

  • SCSS
  • Design Systems
  • Component Library
  • BEM
  • jQuery

Commons: A Design System Built Before Design Systems Were Mainstream

A brand-agnostic, fully customisable front-end component library I built as a Bootstrap replacement, designed to be adopted, themed, and extended across any project without being tied to someone else's assumptions.

The Problem With Bootstrap

Every project I worked on used Bootstrap as a starting point. It solved layout and component problems quickly, but it introduced a different set of problems: opinionated styles that were hard to override, unused code that couldn't easily be stripped out, and a naming system that didn't match how the projects were actually structured.

The deeper issue was that Bootstrap shaped how the products looked and felt, not the other way around. Customising it was slower than just building from scratch, and the output rarely felt truly branded.

Build exactly what you need. Nothing more, nothing less. Make it easy to customise, easier to understand, and impossible to get wrong.

What Commons Is

Commons is a self-documenting SCSS component library - a structured, scalable foundation that can be dropped into any project, customised through variables, and extended without touching the core. It covers every component a product UI typically needs, with sensible defaults that are meant to be overridden.

It ships with a live documentation site that shows every component in context, with usage examples, so any developer picking it up can get productive immediately.

Core characteristics

  • Architecture — SCSS partials organised by concern, variables, mixins, resets, then components. BEM naming throughout.
  • Customisation — All colours, spacing, and component defaults are defined as SCSS variables. Theming means updating one variables file.
  • Self-documenting — Ships with a live docs site using the library itself. Always up to date.
  • Zero lock-in — No framework dependency. Take the components you need, leave the ones you don't.

What's In It

Components

Buttons (primary, secondary, alternative, error, plain, edit, delete), form elements with animated focus states, panels, alerts, navigation, datepicker, tables, and banners.

Foundations

Semantic colour variables across all UI states, mixins for transitions and flexbox helpers, SVG icon sprite, CSS reset, clearfix, utility classes, and print styles.

Developer Experience

Live docs site with every component in context. Inline code examples, copy-to-clipboard for every snippet. BEM naming throughout — consistent, predictable, debuggable.

Why It Matters Now

Commons predates the mainstream adoption of design systems thinking in most product teams. At the time, the common pattern was to start every project from Bootstrap and fight it into shape. Building a reusable, documented, brand-agnostic foundation was a systems instinct before it had a formal name.

The same thinking — defining standards once, applying them everywhere, making them easy to adopt and hard to break — is what drives the design systems work I do today at scale. Commons was where that thinking started.

The question I always asked was: will this be used constantly? If yes, it belongs in the common library.

Design principle behind Commons

My Role

  • Designed and built the entire component library from scratch
  • Defined the SCSS architecture and BEM naming system
  • Built the live documentation site using the library itself
  • Used and customised it across multiple client projects
  • Maintained both SCSS and LESS versions for compatibility

What It Became

  • Used as the front-end foundation for client builds at Reed & Mackay
  • Proved the value of a documented, reusable component system
  • Foundation for the design systems thinking I apply at Stepstone today
  • Still live and navigable as a working reference
The full library is live and navigable.Explore the library
Edit block