/baselayer-3

A modern starter CSS library with container queries, a real CSS grid system, clamp() powered typography and spacing sizes, color-mix() shade utilities, and custom properties.

Primary LanguageCSSMIT LicenseMIT

Baselayer 3

v.3.4.1 • 24 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:

  • 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, spacing, borders, text, and images
  • @container query responsive layout utilities using CSS grid and flexbox
  • Responsive typography, layout, and spacing using clamp() ramps
  • A compact color lightnesssystem based on color-mix(in OKLCH) for text, borders, and backgrounds
  • Built-in dark mode using light-dark()
  • Theming control using CSS variables
  • And more

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/