Getting started with Baselayer

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 22 KB (minified) stylesheet gives you all this:

A modern CSS reset
Minimalist styled classless typographic, and form elements
Reliable accessibility features for assistive technology users
A lightweight system of utility classes for controlling dimensions, positioning, flexbox, spacing, borders, text, images, and colors
Container query responsive layouts using CSS grid
Responsive typography, layout, and spacing
A compact color lightness system for text, borders, and backgrounds
Built-in dark mode
Theming control using CSS variables
And more

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.
Being so small (22 KB), there’s less you need to overwrite in order to style it your own way (and most things in Baselayer can be restyles by CSS variables). So, there’s no need for a purge process to remove a heavy payload of unused Baselayer styles.
PostCSS only — no need for Sass, Less, Stylus etc.

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, linked together in an index.css using the @import rule, and then inlined
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 are not required.

A modern CSS reset

The Baselayer reset is a “best of both” combination of Josh W Comeau’s custom CSS reset and Andy Bell’s (more) modern CSS reset”.

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

After experimenting and testing various focus state styles, I have decided to base Baselayer’s on the ones in the design systems of the UK National Health Service NHS.uk design system and the UK Government GOV.UK design system.

Links receive an amber background, black text and a thick black underline on :focus-visible — so that the element is clearly visible in a wide range of contexts.
Interacive elements such as form inputs, form buttons*, collapsible details, and elements with overflowing content[^1] have what looks like a yellow and black “double border” that appears on :focus (actually its created by an outline and a box shadow).

*Note: A <button> that is not within a <form>, and a <button type="button"> will not receive the :focus ring (but it will receive the ring on :focus-visible). Ths is true for most browsers except Safari: Safari does not show :focus rings on buttons, and it does not place tabbing focus on overflowing elements, or on the color-picker input.

These focus states are visible on a wide range of colored backgrounds, in both light and dark themes. (See also colors and accessibility.) A z-index raise has been added to prevent the focus ring tucking under a neighbouring item, e.g. in input/button groups.

Examples:

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

Link

(2.) The `visually-hidden` class

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>