v.3.4.0 • 22 KB (minified) • MIT licence.
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
- Container-responsive typography and spacing
- Container query responsive layouts using grid and flexbox
- Styled form elements and buttons
- A lightweight system of utility classes for controlling dimensions, positioning, spacing, borders, text, images, and colors
- A color system based on
color-mix( in OKLCH)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 modern CSS technologies such as grid, functions (e.g. clamp(), color-mix(), light-dark()), var() custom properties, and CSS class nesting. Therefore it supports only Basline: widely available (mid-2023 forward) web browsers such as Safari, Firefox, Chrome, Edge, etc.
Documentation: https://simonpadbury.github.io/baselayer-3/
Changelog: https://github.com/SimonPadbury/baselayer-3/blob/main/README.md
Documentation: https://simonpadbury.github.io/baselayer-3/