v.2.0.0

Baselayer is a super tiny, super powerful CSS library.

Three options:

• Core (with a few HEX colors) baselayer.css = 12kb
• Core + OKLCH utilities baselayer-oklch.css = 17kb
• Core + HSL utilities baselayer-hsl.css = 16kb

git clone https://github.com/SimonPadbury/baselayer.git

Designed as a good place to start, Baselayer may be all you need — for small web projects. 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:
  • baselayer.css — has only a few # (hex) colors (Baselayer 2.x only)
  • baselayer-oklch.css — Baselayer 2.x plus a toolkit of utility classes for backgrounds, text, and borders using oklch()
  • baselayer-hsl.css — Baselayer 2.x plus a toolkit of utility classes for backgrounds, text, and borders using hsl()
• Simple dark theme(s) built-in, controlled by a vanilla JS toggle
• Control of many of these things using CSS variables (a.k.a. custom properties)

Baselayer uses several modern web technologies such as CSS Grid, CSS variables (and OKLCH color model), so it supports only modern web browsers (Safari, Firefox, Chrome, Edge, etc.). Sorry, it does not support Internet Explorer.

Documentation: https://simonpadbury.github.io/baselayer/

Changelog: https://github.com/baselayer/blob/main/CHANGELOG.md