Getting started

Havelcss is one stylesheet. No build step, no JavaScript, nothing to configure before it works, and no class to add to your markup.

Install

npm install havelcss

Then import it wherever your bundler collects CSS:

@import 'havelcss';

Or build your own from individual source files.

@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/form.css';

Or skip the tooling and link a prebuilt file. 

<link rel="stylesheet" href="/havelcss.min.css"/>

A complete page

This is everything Havelcss needs. The markup below carries no classes, and it looks the same whether the visitor is in dark or light mode. 

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		<meta name="color-scheme" content="dark light"/>

		<link rel="stylesheet" href="/havelcss.min.css"/>
		<link rel="stylesheet" href="/layout.min.css"/>
	</head>
	<body>
		<main>
			<h1>Hello</h1>
			<p>Nothing here needs a class.</p>
		</main>
	</body>
</html>

Why the color-scheme meta tag matters

It tells the browser which schemes the page supports, and that decides what the browser paints on its own: the canvas behind your background, the scrollbars, the form controls it has not been asked to restyle. Leave it out and a dark page keeps a white canvas underneath, which shows up as a flash while loading and as white bars when the page is shorter than the window.

Why two stylesheets

havelcss styles the elements themselves and makes no decision about your page layout. layout adds the decisions: a reading width, spacing on the body, navigation lists as a row, form labels above their fields. Take both to get going quickly, or take the first alone once the layout is yours.

What you get for free