The standard
S.I.T.E.S is a specification, not a library. These are the rules a compliant site follows — everything on this site obeys them.
The hard rules
No build step
Plain .html, .css and .js. No bundler, no package manager, nothing to compile — the source is the site.
Tokens, never literals
Every colour, space, radius and shadow comes from a CSS custom property. That is what makes re-theming instant.
Breakpoint-free layout
One auto-fit grid handles the macro layout; container queries let a tile adapt to its own width, not the window.
Copy is data
Editable words live in the content file and bind into slots. The HTML owns structure only.
Progressive by default
The page reads correctly with JavaScript disabled; behaviour is layered on top.
Services, not vendors
Forms, maps, payments and AI are swappable adapters selected by configuration — never hard-coded into a tile.
The whole responsive system
/* macro layout — no media queries */
.sites-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
/* micro layout — a tile that knows its own width */
.tile { container-type: inline-size; }
@container (min-width: 720px) { .tile-hero:has(.media) { grid-template-columns: 1.1fr .9fr; } }Conformance
L1 Structural
The plate and tiles model, with tiles built to the naming and data contract.
L2 Presentation
Full tokenization, breakpoint-free layout, accessible and progressive.
L3 Content-managed
Copy externalised to a schema-valid content file, editable from the admin.
L4 Managed and sovereign
L3 plus a portable storage adapter and no third-party trackers. This site targets L4.
Questions
Do I have to use the content file?
Can I add my own CSS?
Is there a JavaScript framework?
Go deeper
The repository holds the architecture, module spec, content model, theme engine, assets and integration specs.