Layout
Feo.css offers classes for standardized layout patterns that you see on almost every website or application. Many layouts are based on Every Layout by Heydon Pickering and Andy Bell. But the implementation differs. In addition, more layout patterns are added to Feo.css as well.
Configuring layouts
Every layout exposes its configuration through --layout-* custom properties (see each layout's Custom Properties table). Feo.css does not ship a preset size scale, so values like --layout-gap and --layout-threshold are set directly to whatever value you need — a raw length or, preferably, one of your own project's tokens:
<div class="switcher" style="--layout-gap: 1rem; --layout-threshold: 20rem">
<!-- ... -->
</div>A layout only positions its direct children, so wrap content that should move as one unit in a single element. The properties are shared between layouts: once you know them for one layout, you know them for all.
| Property | Controls | Used by |
|---|---|---|
--layout-gap |
Space between the children | All layouts, except center, pile, ratio, and scroll |
--layout-threshold |
A switch point, a column width, or a maximum width | Center, sidebar, switcher, and tiles |
--layout-direction |
flex-direction |
Equal, flex, repel, and switcher |
--layout-items |
Alignment on the cross axis | Cluster, equal, flex, pile, repel, scroll, sidebar, and switcher |
--layout-justify |
Alignment on the main axis | Cluster, equal, flex, sidebar, and switcher |
--layout-amount |
The number of columns | Grid |
--layout-inline-size |
The minimum size of the flexible column before it wraps | Sidebar |
--ratio |
The aspect ratio | Ratio |
Alignment, direction, column count, and aspect ratio are also available as class utilities. Modifiers that only apply to one layout, like .--left on the sidebar, are documented on that layout's page.
| Class utilities | Sets |
|---|---|
.--row, .--column |
--layout-direction |
.--start, .--center, .--end, .--stretch |
--layout-items |
.--justify-start, .--justify-center, .--justify-end, .--justify-between, .--justify-around |
--layout-justify |
.--amount-2 … .--amount-6 |
--layout-amount |
.--ratio-1x1, .--ratio-16x9, .--ratio-2x1, .--ratio-3x2 |
--ratio |
Centered and end alignment is safe where the browser supports it: .--center, .--end, .--justify-center, .--justify-end, and the centered defaults of cluster and pile fall back to start when items would otherwise overflow out of reach. Scroll keeps the plain values, as snapping has no safe variant.
Choosing a layout
| You need | Use |
|---|---|
| Content centered with a maximum width | Center |
| Vertical rhythm between flowing content, like prose | Flow |
| A row or column of items with a gap | Flex |
| Items that wrap onto new lines, like tags | Cluster |
| Items pushed to opposite ends, like a header bar | Repel |
| Children of equal size in one row | Equal |
| A fixed-width side column next to a flexible column | Sidebar |
| A row that stacks all at once below a width | Switcher |
| A responsive grid of cards with a minimum width | Tiles |
| A fixed number of columns | Grid |
| A header, footer, and a main area that fills the rest | Pancake |
| Children stacked on top of each other | Pile |
| A fixed aspect ratio | Aspect Ratio |
| Horizontal scrolling | Scroll |