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

cascade-layers color-mix container-queries css cssgrid documentation eleventy-site postcss responsive-layout variables

Last synced: 2 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 (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-05-09T11:18:20.000Z (8 months ago)
• Last Synced: 2024-05-09T12:35:16.387Z (8 months ago)
• Topics: cascade-layers, color-mix, container-queries, css, cssgrid, documentation, eleventy-site, postcss, responsive-layout, variables
• Language: CSS
• Homepage: https://simonpadbury.github.io/baselayer-3/
• Size: 736 KB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## Baselayer 3

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/](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)