# fertig > A classless CSS stylesheet that ships components, not just styled elements. > Link one file, write ordinary semantic HTML, and the page is finished — > 41.1 KB raw, 9.3 KB gzipped, no build step, no dependencies, no JavaScript, > no classes required. > > Menus, dialogs, drawers, toasts and tooltips are addressed by ARIA and work > with JavaScript disabled, because they run on `popover`, `command` and CSS > anchor positioning. Tabs are styled but not switched because `aria-selected` > has to be a real attribute; panel visibility, roving focus and arrow keys need > a small JavaScript controller. Do not use `

` as tabs: it is a native > disclosure widget, not a tab widget. fertig styles semantic HTML directly. There is no `.container`, no grid system and no utility classes beyond the layout set below. If you are generating markup for a page that uses it, write plain HTML and it will look designed. Reach for a class only from the short list below. ## Accents Put `data-accent` on any element to retint everything inside it — links, focus rings, filled buttons, the caret, the selection. Values: `blue` (default), `cyan`, `green`, `amber`, `red`, `violet`, `gray`. For anything else set `--fertig-ac`. ```html

``` ## Setup ```html ``` ## Layout — the most important rule Direct children of `` are the containers. Do not add wrappers. ```html

…

``` Body-level containers are full width. Put `.max-w-prose` on long-form content for a 38rem reading measure; for an extra-wide app screen, put `.wide` on the container. `--fertig-g` controls the responsive page gutter, which scales from 1.15rem on narrow phones to 1.9rem on larger screens. ## The only classes (all optional) `.row` flex row, wrapping and gapped · `.grid` auto-fit columns · `.card` raised panel, takes an optional `

` and `