Getting started · Baselayer CSS

Introduction

Designed as a good place to start, Baselayer may be all you need for small projects such as static websites and blogs. Or you may use it as a baselayer to quick-start your mega project.

Ready to use as-is, Baselayer’s 27 KB (minified) stylesheet gives you all this:

A modern CSS reset
Minimalist styled classless typography and form elements
Reliable accessibility features for assistive technology users
A lightweight system of utility classes for controlling dimensions, positioning, spacing, borders, text, and images
@container query responsive layout utilities using CSS grid and flexbox
Responsive typography, layout, and spacing using clamp() ramps
A compact color lightness system based on oklch() for text, borders, and backgrounds
Built-in dark mode using light-dark()
Theming control using CSS variables
And more

Download baselayer.min.css

Modern CSS technologies

Baselayer supports only up-to-date (2023 forward) baseline compatibility web browsers (Safari, Firefox, Chrome, Edge, etc.). Such as:

Baselayer’s design philosophy

The design philosophy behind the Baselayer CSS project is as follows:

Aim at being a good place to start — a baselayer for a web design project.
Do “most things most people want” out of the box.
Most things in Baselayer can be restyled by CSS variables.
Being so small (27 KB), there’s no need for a purge process to remove unused styles.
No CSS preprocessing.

Built using PostCSS

Baselayer is built using PostCSS and some plugins. The plugins used by Baselayer are:

postcss-import — so that Baselayer could be built from separate CSS files
cssnano — to remove comments and minify the output baselayer.min.css

Note: neither postcss-preset-env nor autoprefixer have been used in Baselayer. And preprocessors such as Sass, Less, Stylus etc. are not required.

A modern CSS reset

The Baselayer reset is a combination of modern CSS resets by Josh W Comeau, Andy Bell, and Declan Chidlow (Vale).

From that basis, Baselayer then takes care of the basics by setting some minimalist, easy-to-read typography, and styles for buttons and forms.

Baselayer’s built-in accessibility features

Baselayer has two “must have” accessibility features built-in.

(1.) Focus states

Baselayer uses the browser’s built-in focus ring styles, slightly improved by a thickening the ring and moving it out a little to improve legibility of link text. In modern browsers the focus ring is clearly visible in a range of contexts, and in both light and dark themes. A z-index raise has been added to prevent the focus ring tucking under a neighbouring item, e.g. in input/button groups.

See also colors and accessibility.

:focus-visible {
  outline: 0.125rem solid -webkit-focus-ring-color;
  outline-offset: 0.125rem;
}

Examples:

Keyboard-tab through these links and buttons to see the focus rings:

Link

The visually-hidden is used to provide additional content for screen-readers, for improved accessibility. For example, it is best practice to have “skip link” above the top navigation bar on your website, but have it (visually) hidden for ably sighted users.

<a href="#main-content"
  tabindex="1"
  class="block p-2 visually-hidden"
>
  Skip to page content
</a>

<!-- Logo and site navigation menu here -->

<div id="main-content">
  ...
</div>