Stylesheet.css
A standards-compliant CSS framework built around semantic HTML, an intuitive layout system and a minimal set of classes, with pure CSS doing all the work.
About
Write a normal page and it looks right; reach for a class only where HTML has no element for the job.
Instead of a wall of utility classes on every element, a panel with a title and a Save button is a
row panel, a heading, a stretch and a bare <button>.
A single theme layer of design tokens keeps the look consistent across a whole site, and swapping that layer re-themes everything at once. This site is built on it.
Features
Standards compliant and accessible
Semantic elements and proper landmarks, equally readable to browsers and screen readers.
Intuitive layout
Rows, columns, grids and flow, spaced by the container, with a single stretch for the rest.
Minimal classes
Everything else is a bare tag, which makes for much smaller downloads.
Design system friendly
Because elements are never styled one by one, the look is specified in one place and stays consistent.
HTML first
Each component uses the plainest thing that works: a bare element, then an attribute HTML needs anyway, such as ARIA, then a class, and JavaScript only where HTML and CSS can't do the job.
Native interactivity
Dialogs, popovers, accordions and tab sets are built on the browser's own elements and attributes rather than scripted versions.
Over a hundred components
In eight sections, Structure, Navigation, Content, Container, Overlay, Data, Form and Feedback, each saying whether it needs a class or JavaScript.
3D in plain CSS
A scene graph in nested divs: scenes, nodes and faces built on CSS 3D transforms, so depth composes like everything else.
Screenshots
stylesheet.org shows every component working with the markup beside it, and has a complete reference to CSS itself.
Plain HTML instead of class soup
The same panel written with a wall of utility classes, and with Stylesheet.css. Visit stylesheet.org ↗
Components
The building blocks in eight sections, from the page shell and layout to forms, overlays and feedback. Browse the components ↗
Nav bar
A nav with a title and a list of links: no classes, no IDs and no JavaScript, with the markup shown beside the result. See the nav bar ↗
Content in space
A face's content is ordinary markup. This sign-in form is angled in space, and you can still tab into it and type. See the 3D scenes ↗
A floor and a reflection
The reflection is the same geometry mirrored through the floor plane, with the floor laid over it as a translucent plane. See the 3D scenes ↗
CSS reference
Every property, selector, at-rule, function and value type that ships in browsers, searchable, by theme or A to Z. Open the reference ↗
Contents
The sections of stylesheet.org, and the pages in each.
Download ↗
The single stylesheet and a starter template.
Examples ↗
Complete pages built with the framework, coming soon.
Editor ↗
A live playground for the framework, coming soon.
Technologies
- HTML/CSS - The framework itself: semantic elements, layout and design tokens in pure CSS
- JavaScript - The live in-browser editor
More development
- Frontend Development - A studio for fast, accessible, standards-based frontends
- PHP Framework - A PHP framework assembled from around 130 small modules
- Localhoster - Build a website as a local folder named after its domain
- Datahoster - Drop a folder, get an API
- Sitehoster - Static hosting that serves every site over HTTPS automatically