Layr is a live ITCSS reference implementation for teams.

Layr is the renamed continuation of the old Obsidian.css project. It is not currently intended for npm republishing; the goal is to keep a working, inspectable implementation of layered CSS architecture that teams can study, adapt, and run locally.

The documentation site is published from this repository to GitHub Pages.

This project works under the belief that when abstracted most CSS is shockingly similar across projects. More than likely you’ll need a type scale, a grid system, spacing utilities, media blocks, sensible default styling for elements (forms, tables, buttons), and a small set of predictable components.

Styles are written in an adapted BEM naming convention and organized in an ITCSS-like methodology. It uses PostCSS plugins to resolve imports, process custom properties, add vendor prefixes, generate stylesheet metrics, and minify production CSS.

Modular

When you use Layr you can remove and swap out any of the modules or layers you don’t want or need. The docs import the local workspace package, so the examples stay tied to the actual CSS source instead of a published artifact.

Built to Perform

• 7.3kbGzip Size
• 912Selectors
• 838Rules