Modules

Two bundles for getting started, single files for when you want exactly what you use and nothing else.

The bundles

Bundle	What you get	Size
`havelcss`	Every element, plus the handful of classes that vary one. Makes no decision about your page layout.	~6 KB
`layout`	The decisions about the page: reading width, navigation lists, form labels, card grid.	~0.6 KB

Sizes are gzipped. The two are independent, layout is not a superset. Take havelcss alone when the page layout is yours, take both to get going quickly.

@import 'havelcss';
@import 'havelcss/bundles/layout.css';

Picking single modules

Every file in styles/ stands on its own and can be imported by itself, in any order, because each one carries the layer order with it.

@import 'havelcss/styles/properties.css';
@import 'havelcss/styles/variables.css';
@import 'havelcss/styles/base.css';

@import 'havelcss/styles/headline.css';
@import 'havelcss/styles/inline-text.css';
@import 'havelcss/styles/table.css';

properties.css and variables.css are what every other module reads from, and properties.css carries the actual default values. Without it every token is empty, every declaration reading one becomes invalid and falls back to what it would have inherited. Layout and behavior survive that, color does not.

Foundation

`properties.css`	The `@property` registrations — the defaults live here
`variables.css`	The tokens, built from the registered ones
`base.css`	`box-sizing`, focus ring, `::selection`, responsive media, `inert`

Elements

In the havelcss bundle.

`headline.css`	`h1`–`h6`, `hgroup`
`horizontal-rule.css`	`hr`
`inline-text.css`	`a`, `em`, `strong`, `small`, `abbr`, `ins`, `del`, `sub`, `sup`, `mark`, `::target-text`
`quotation-citation.css`	`blockquote`, also inside a `figure` with its caption
`list.css`	`ul`, `ol`, `menu`, `dl`
`figure.css`	`figure`, `figcaption` above or below
`table.css`	`table`, striped rows, row hover, `thead`, `tfoot`, `caption`
`code.css`	`code`, `pre`, `kbd`, `samp`
`details.css`	`details`, `summary`, animated open and close
`media.css`	`audio`, `video`
`iframe.css`	`iframe`
`dialog.css`	`dialog`, its backdrop, scroll lock while modal
`popover.css`	`[popover]`
`scrollbar.css`	`scrollbar-color` and `scrollbar-width` for everything
`form.css`	`input`, `select` and its option picker, `textarea`, `button`, `output`, autofill, `:user-invalid`
`fieldset.css`	`fieldset`, `legend`
`input-checkbox-radio.css`	Check box and radio
`input-file.css`	`input[type=file]` and its button
`input-search.css`	`input[type=search]`
`input-datetime.css`	The segments of date and time fields
`input-color.css`	`input[type=color]`
`input-range.css`	`input[type=range]`, track fill and tick marks
`input-datalist.css`	`input[list]`
`progress.css`	`progress`, determinate and indeterminate
`meter.css`	`meter`, colored by its value range
`button-svg.css`	Icons inside buttons
`utils.css`	`[hidden]`, `.sr-only`, `.ellipsis`, `.skip-link`

Class-based variants

Also in the havelcss bundle.

`button-primary.css`	`.primary`
`button-outline.css`	`.outline`
`input-toggle.css`	`.toggle`
`field-group.css`	`.field-group`

The layout bundle

`layout.css`	Reading width and page padding on `body`, `text-wrap: pretty` for prose
`nav.css`	Lists inside `nav` as a row, `aria-current`
`form-layout.css`	Labels above their control, full-width fields
`article.css`	Margins inside `article`, `aside` as a note
`cards.css`	A `section` of nothing but `aside` elements becomes a card grid

Opt-in, in no bundle

These ship separately, because they need markup that bare HTML does not have, or because they undo a deliberate default. Import them one by one. Each file opens with a comment explaining what it expects and what it cannot do, worth reading before you use it.

`tooltip.css`	Needs a wrapper, a trigger and `role="tooltip"`
`tooltip-description.css`	Claims `aria-description` for presentation, and that attribute is still a draft
`cursor-convention.css`	Undoes a deliberate default: Havelcss leaves the cursor alone
`print.css`	Link it with `media="print"`, or import it for a bundled build

Classes and attributes

The classless part carries the design. This is the complete list of what Havelcss looks at beyond bare elements.

Hook	Effect
`button.primary`	Filled with the brand color, label contrast picked automatically
`button.outline`	Outlined, brand-colored on hover
`input[type=checkbox].toggle`	Switch instead of a check box
`.field-group`	Joins adjacent controls into one visual field
`.sr-only`	Visually hidden, still announced, comes back on focus
`.ellipsis`	Truncates one line with an ellipsis
`.skip-link`	Jump to the content, visible once it takes focus
`[aria-current]`	Marks the current link in a nav
`[aria-pressed="true"]`	A button that stays pressed
`[aria-invalid="true"]`	Same treatment as `:user-invalid`
`[aria-disabled="true"]`, `[inert]`	Dimmed
`[aria-busy="true"]`	Progress cursor
`[aria-description]`	Tooltip without an element of its own
`[role="tooltip"]`	Tooltip with its own element
`[hidden]`, `[popover]`	Honoured as the platform defines them

Browser support

Targets the two most recent versions of Gecko, Blink and WebKit. Features that are not there yet in all three are used progressively, so nothing breaks in the meantime.

Feature	Used for	Fallback
`appearance: base-select`	Fully styleable select and option picker	`@supports`, native select with a background chevron
`field-sizing: content`	Textarea grows with its content	`@supports not`, `resize: vertical`
`:autofill`	Override the forced autofill background	Ignored where unknown
`interpolate-size`	Height transition of `::details-content`	Snaps open instead of animating
`text-wrap: pretty`	Prose rag	Ignored where unknown
`anchor-scope`	Tooltips that flip at the viewport edge	Absolute positioning next to the trigger
`subgrid`, `::target-text`	Cards, fragment highlight	Ignored where unknown