A lean foundation for
the modern web.
Semantic HTML, CSS Cascade Layers, a three-tier design token system, dark mode without the complexity, and container queries. No framework. No build step required for development.
Four core ideas
Each solves a distinct problem that has frustrated CSS developers for years. They compose — you can adopt any one independently, but together they form a coherent architecture.
Declare priority order once. Layer order beats specificity between layers — no more !important arms races.
Primitives → semantic → component. A three-tier hierarchy that separates what a value is from what it means.
Dark mode is a token concern, not a component concern. Redefine semantic tokens in one place — every component updates automatically.
Respond to the container, not the viewport. The same component adapts to wherever it's placed — sidebar, grid, or full-width.
Quick start
No build step required to get started. Open the HTML files directly in a browser, or use any local server.
# Clone the repo git clone https://github.com/your-handle/web-starter.git cd web-starter # Open directly — no install needed open index.html # Or use a local server for better dev experience npx serve .
For production, add PostCSS to inline the CSS @import chain:
npm install -D vite postcss postcss-import postcss-nesting npx vite build
File structure
/ ├── index.html # Home / component showcase ├── pages/ │ ├── landing.html # Marketing landing page │ ├── article.html # Long-form prose + TOC │ ├── sidebar.html # Content listing + filter sidebar │ └── full-width.html # Dashboard / app shell ├── css/ │ ├── main.css # Entry point — @layer order + @imports │ ├── tokens.css # All design tokens (T1 → T2 → T3) │ ├── reset.css # Browser normalisation │ ├── base.css # Element-level defaults │ ├── components.css # Reusable UI patterns │ └── utilities.css # Single-purpose helpers └── js/ └── main.js # Theme toggle, mobile nav, reveal
The entry point is css/main.css
This file declares the @layer order and imports all partials. It's the only stylesheet you reference in HTML. Everything else flows from it.
Browser support
All features used in this starter have broad modern browser support.
| Feature | Chrome | Firefox | Safari | Baseline |
|---|---|---|---|---|
| CSS Cascade Layers | 99 | 97 | 15.4 | March 2022 |
| CSS Custom Properties | 49 | 31 | 9.1 | March 2016 |
| Container Queries | 105 | 110 | 16 | February 2023 |
color-mix() | 111 | 113 | 16.2 | May 2023 |
clamp() | 79 | 75 | 13.1 | July 2020 |