The foundational layer
Small Medium Large is built on a structured CSS foundation. The implementation has evolved, but the thinking behind it hasn’t changed. And when you need more direct control, the original class framework is still there.
When components are not the right tool, such as in complex layout structures or CMS lists, you can fall back on the core of Small Medium Large: a clean class framework that gives you full control.
It follows a consistent naming structure based on XL, L, M, S, and XS, applied across layout, typography, spacing, and responsive modifiers. The logic is simple and easy to follow, with classes that describe behaviour clearly and predictably.
The layout system is built around rows with 12 columns, and responsive adjustments are handled through prefixed modifiers.
Nothing happens automatically. Behaviour is defined by stacking the appropriate predefined classes, making layout decisions explicit and visible in the Navigator.
As a result, projects remain readable over time, with no hidden rules — only clear structure and deliberate control.