Baselayer is a super tiny, super powerful CSS library

Introduction

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

Ready to use as-is, Baselayer gives you all this and more:

• A modern CSS reset
• Foundational accessibility features
• Responsive typography
• Styled form elements and buttons
• Simple responsive layouts using positioning, dimensions, flexbox, and grid
• A lightweight system of utility classes for controlling spacing, borders (and colors)
• Three color options for you to choose from
• Built-in dark theme(s) — controllable by a JS toggle.
• Control of many of these things using CSS variables (a.k.a. custom properties)

Baselayer uses some modern web technologies such as CSS Grid, CSS variables, container queries, and the OKLCH color model, therefore it supports only up-to-date (2023 forward) evergreen web browsers — Safari, Firefox, Chrome, Edge, etc. Sorry, it does not support Internet Explorer.

Baselayer comes in three flavours

From Baselayer v.2.0.0, the color utilities have been provided in separate streams. You only need to choose one of these stylesheets:

These three download options can be found in the source output folder.

For more information on the OKLCH and HSL color systems in Baselayer, see colors.

Built using PostCSS

Baselayer is built using PostCSS and a few plugins. The PostCSS 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.css

Notes:

• Neither postcss-preset-env nor autoprefixer have been used in Baselayer.
• postcss-custom-media has not been used (was used in Baselayer 1 but it has been dropped for v.2), because Baselayer 2 also supports container queries that aren’t handled by postcss-custom-media. When this or another module comes along that does support container queries, let me know.
• Preprocessors such as Sass are not required.

Modern CSS reset

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

Baselayer takes care of classless HTML from here by setting some minimalist, easy-to-read typography, and styles for buttons and forms.

Basic accessibility features

Baselayer has two basic accessibility features built-in.

(1.) Focus rings

(a.) Form focus ring:

For form inputs and buttons on :focus, there’s a 4px light blue ring (see colors). Example:

The zero outline resets the browser defaults, while the box shadow provides the same style across browsers. Box-shadow has been used so that the focus ring curves around the corners of inputs and buttons following their border-radius (if you add one).

(b.) Button focus ring:

Buttons (<button>, <input type="button">, etc.) get the same focus ring as for other form inputs, but only for :focus-visible.

(c.) Link focus ring:

For links, collapsible <details>, pseudo-buttons (i.e. links styled with the btn class), and anything else that is not a form input or button, the focus ring is a 2px dotted black outline supported by a 2px solid white box shadow. This white will appear between the outline dots, looking like a dotted white line. Keyboard-tab through these links and buttons to see the accessibility rings:

(2.) The visually-hidden class

The visuallyhidden is used for “skip links”, such as the visually-hidden link above the top navigation bar on this website.

<a  class="tblue t600 h:t700"
  href="#main-content"
  tabindex="1"
  class="inlineblock m1 visuallyhidden"
>Skip to main content</a>

<!-- Logo and menu go in here -->

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

Adding your own styles

The design philosophy behind the Baselayer project is:

• Make a stylesheet that does most things most people want
• With much less CSS that is mostly never used (e.g. rarely used grid column classes or color shade classes)
• Using modern CSS technologies such CSS variables, CSS functions, CSS grid, container queries, and a modern color system, that enable a lot of code reuse (reducing duplication)
• All without a preprocessor (no Sass, Less, Stylus etc.)
• Aim at being a “good place to start” — a baselayer for a web design project, closer to being a more powerful replacement for Normalize than an entire design system like the much bigger CSS frameworks out there (we could name more than several).

The Baselayer core stylesheet, baselayer.css (filesize: 12 kb) includes dozens of CSS variables (custom properties), most of which are in the :root {} that you can utilize in your own CSS rules. For example, you can change and/or reuse the variables for fonts, sizes, layout widths, decoration (margins, paddings, borders, rounded corners), and colors.

Baselayer’s color systems — choose either baselayer-oklch.css (17 kb) or baselayer-hcl.css (16 kb) — each contain the Baselayer core.

Whichever version you choose, Baselayer is tiny so don’t expect it to do all that you want, unless you are only working on a simple project. But it will probably do most of what you want. This documentation gives you a thorough tour of the HTML styling and CSS classes available in Baselayer.