https://github.com/simonpadbury/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.
https://github.com/simonpadbury/baselayer-3

accessibility cascade-layers color-mix container-queries css cssgrid cssvariables eleventy-site oklch-color postcss responsive-layout

Last synced: 8 months ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/simonpadbury/baselayer-3
• Owner: SimonPadbury
• License: mit
• Created: 2023-10-09T06:15:29.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2025-01-11T19:02:40.000Z (9 months ago)
• Last Synced: 2025-02-02T01:11:28.653Z (8 months ago)
• Topics: accessibility, cascade-layers, color-mix, container-queries, css, cssgrid, cssvariables, eleventy-site, oklch-color, postcss, responsive-layout
• Language: CSS
• Homepage: https://simonpadbury.github.io/baselayer-3/
• Size: 537 KB
• Stars: 3
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
## Baselayer 3

v.3.4.3 • 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](https://developer.mozilla.org/en-US/docs/Glossary/Baseline/Compatibility) (mid-2023 forward) web browsers such as Safari, Firefox, Chrome, Edge, etc.

**Documentation:** [https://simonpadbury.github.io/baselayer-3/](https://simonpadbury.github.io/baselayer-3/)

**Changelog:** [https://github.com/SimonPadbury/baselayer-3/blob/main/README.md](https://github.com/baselayer/blob/main/CHANGELOG.md)