• 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.

View the live library

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.

Architecture

SCSS partials organised by concern, variables, mixins, resets, then components. A single entry point compiles everything. Naming follows BEM throughout.

Customisation

All colours, spacing, and component defaults are defined as SCSS variables. Theming a project means updating one variables file, no hunting through component styles.

Self-documenting

The library ships with a live docs site showing every component with code examples. It's always up to date because it uses the library itself.

Zero lock-in

No framework dependency. No opinionated grid. Take the components you need, leave the ones you don't. It compiles to standard CSS.

What's In It

Components

  • Buttons, primary, secondary, alternative, error, plain, edit, delete
  • Form elements, text inputs, selects, checkboxes, radios, with animated focus states
  • Panels, white content containers with consistent padding and radius
  • Alerts, info, success, warning, error variants
  • Navigation, header, sidebar, breadcrumbs, dropdown menus
  • Datepicker, jQuery UI integration, single and range variants
  • Tables, semantic styling with status colours
  • Banners, hero image containers

Foundations

  • Semantic colour variables across all UI states, warning, error, info, success, brand
  • Mixins for transitions, shadows, flexbox helpers, and vendor prefixing
  • SVG icon sprite with CSS generation via mixins
  • CSS reset with sensible defaults for typography hierarchy
  • Clearfix, utility classes, and print styles included

Developer Experience

  • Live docs site with every component shown in context
  • Inline code examples, copy-to-clipboard for every snippet
  • How-to guide covering adoption, customisation, and extension
  • 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