ITCSS (Inverted Triangle CSS) from Harry Roberts, is a way of structuring CSS in such a way that the most general selectors to trickle down to the most specific selectors, as if they’re moving from the top of an bottom of a triangle to the pinnacle of it.

In this implementation there are a few differences. Normally in ITCSS, you could have a tools like Sass functions, but most of the tools we’d need are coming in CSS and transpiled by PostCSS plugins.

Objects have minimal visual styling in Layr. This is a set between the reset styling and the component level styling because it’s beyond an element.

Settings contain base styles but often module variables are only contained in that module; there are a few exceptions (like shadow values).

Settings

Settings should contain global and base settings, project media queries, mixins, custom selectors.

Generic

The generic layer is for reset styles, document wide selectors.

Elements

Elements are for styling specific HTML elements and extending responsive styling for elements. They're a base style for elements meant to be extended by other styles down the triangle.

Objects

Objects define common reusable patterns. They are have more structure than skin, usually have no visual style applied; it's the bare minimum UI.

Components

Components are visual pieces of UI. They're more complex than objects, often containing many elements.

Utilities

Utilities are helper classes meant to override any default or that extend specific styling.

npm install
npm run dev --workspace layr-documentation