Feo CSS v3.0.1
  • Introduction
  • What is Feo CSS?
  • Getting started
  • Design tokens
  • Themes
  • Credits
  • Layout
  • Center
  • Cluster
  • Dialog
  • Holy grail
  • Masonry
  • Pancake
  • Sidebar
  • Stack
  • Switcher
  • Tiles
  • Utilities
  • Token-based
  • Flexbox, grid and gap
  • Others
  • Position
  • Typography
  • Made with ♥️ by Crinkles

Layout > Stack

The .stack applies vertical rhythm for elements. Based on the Owl selector, spacing between the elements is arranged. There are various reasons this pattern does not use the gap property. The most common reason is that this implementation allows for more control on exceptions (e.g. have a smaller gap on h2 + p).

Utility classes

The way .stack behaves can be controlled with several utility classes.

  • .stack-g-<name>: set the gap between the elements, based on $feo-sizes. Note, this setting works with orientation and writing-direction CSS properties.
  • .stack-grow: sets the margin of the element to margin-<top/left>: auto. This allows the element to grow and take the available space (similar to flex-grow: 1).
Outline: Utility classes
Category:
Layout
Source:
https://github.com
Last modified:
1/18/2023, 7:08:12 AM