v.3.3.0 • 22.5 KB (minified) • MIT licence.
A modern starter CSS library with container queries, a real CSS grid system, clamp() powered typography and spacing sizes, color-mix() color utilities, and custom properties.
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
- A lightweight system of utility classes for controlling dimensions, positioning, spacing, borders, text, images, and colors
- Container-responsive typography and spacing
- Container query responsive layouts using grid and flexbox
- Styled form elements and buttons
- A color system based on
color-mix()shades for for text, borders, and backgrounds - Built-in dark mode (requires a simple JavaScript theme toggler — example provided)
- Control of many of these things using CSS variables (custom properties)
Baselayer uses some modern web technologies such as CSS Grid, CSS math functions (e.g. clamp), CSS variables, CSS cascade layers, and the color-mix function. Therefore it supports only up-to-date (2023 forward) evergreen web browsers (Safari, Firefox, Chrome, Edge, etc.).
(If you would rather use media queries instead of media queries, or if you need to support older browsers a while longer, all you need to do is search-and-replace @container → @media.)
Documentation: https://simonpadbury.github.io/baselayer-3/
Changelog: https://github.com/SimonPadbury/baselayer-3/blob/main/README.md