Scaffolding CSS for Scale
summary
Grandstand is a lightweight CSS scaffold (~10kb) that BBC News & Sport reuses across 29 sites to serve almost 60 million monthly visitors, supporting layouts in 10 scripts for 20+ languages. It supplies objects and utilities (namespaced class prefixes), Gel typography, grid and SVG iconography, Sass tools for variables and mixins, and an RTL-aware split function that flips properties and values. Examples show fewer overrides, predictable specificity, and how to start a small bespoke scaffold while keeping the system reusable and lightweight.
AI-written summary · about
chapters (29)
- 0:00Intro
- 0:45Welcome
- 1:24BBC News
- 4:00Reusing
- 5:01Relevant to you
- 6:14BBC Grandstand
- 6:58Agenda
- 7:32Topics
- 8:16Page Layout
- 8:49Comparison
- 9:42Extract Pattern
- 10:24Objects
- 11:15Namespace
- 12:39Utility
- 14:32Tools
- 15:11Global Experience Language
- 16:03Typography
- 16:43Columns
- 17:06SVG Icons
- 18:34Build Components
- 19:25Example Headline
- 20:26Localization
- 21:53Result
- 22:40Examples
- 23:39Latin Arabic
- 26:02Margin
- 28:41Spacing
- 29:44Localisation
- 30:50Communicating
