Easy-to-understand layout classes for css, inspired by Figma's Auto Layout and repeatedly having to figure out common website layouts. Implemented in several popular paradigms.

Sleep like a baby and kiss those flexbox & CSS grid nightmares goodbye! Rest well, as you effortlessly create HTML layouts without a worry!

Yes - you can center a div with ease 😌

layouts-css makes it a breeze to layout HTML with it's easy-to-understand CSS layout classes implmented in the following paradigms below.

• @layouts-css/tailwindcss-plugin

🚧 Coming soon

• @layouts-css/plain-css
• @layouts-css/vanilla-extract (CSS in JS/TS)

Note: docs will differ for each implemention, continue reading for the key concepts or navigate to your implementation of choice to get started.

layouts-css builds on the idea of utility-first classes popularised by Tailwind CSS and introduces the concept of layout classes. The diference is that utility-first clasess wrap a single concept in css where as the a layout class wraps multiple to achive an intent.

Sizing layout classes describe the desired behavior of the dimensions (width & hieght) of an element regardsless of the parent layout class:

• fill: width and/or height in parent
• hug: the contents of the child content along the width add/or heigh
• fixed: the size of the element along the width and/or height

Single-panel layout clasess decribe how the child elements behave in the container bases on the following properties:

💡 TIP single axis layouts map directly to the Auto-Layout features in the popular design tool and is the inspiration for this library. For each implementation of layouts-css the docs will specify how the class maps to Figma Auto-Layout controls.

• spacing: packed together or spaced apart
• horizontal-alignment: of child elements in the parent container
  (left, center, or right)
• vertical-alignment: of child elements in the parent container
  (top, middle, bottom)
• axis: x or y the child elments are layed out along.

• horizontal-alignment: of child elements within the cells of the grid
  (left, center, or right)
• vertical-alignment: of child elements within the cells of the grid
  (top, middle, bottom)

Coming soon Responsisve-mulit-panel layout classes describe the behaviours commonly seen on websites across the web and how they behave across the different form factors.

• headers & navigation
• content, columns and side bars
• footers