Stylament 0.23.2

Layout Utilities

These are classes for layout purposes. Since all layout aspects are presentational Stylament considers these classes utilities.

Naming Convention

Layout utilities carry the lyo- prefix, e. g. lyo-box.

Complex Layouts

These are layouts that affect wider parts of the document.

Layout Primitives

These are layout primitives greatly inspired by Every Layout.

.lyo-box

scss 
.lyo-box {
  display: block;
  padding: var(---box-space, svar(spacing-block));
  border: var(
    ---box-border,
    var(---box-border-width, svar(stroke-width-default))
      var(---box-border-style, svar(stroke-style-default))
      var(---box-border-color, svar(stroke-color-default))
  );
  border-radius: var(---box-radius, svar(radius-default));
}

Box layout.

.lyo-center

scss 
.lyo-center {
  display: block;
  box-sizing: content-box;
  max-inline-size: var(---container-size);
  padding-inline: var(---container-gutter);
  margin-inline: auto;
}

Center layout.

.lyo-center.\+intrinsic, %lyo-center--intrinsic

scss 
.lyo-center.\+intrinsic,
%lyo-center--intrinsic {
  > * {
    text-align: center;
    margin-inline: auto;
  }
}

Center layout with intrinsic centering.

.lyo-cover

scss 
.lyo-cover {
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
  padding: var(---cover-space, svar(spacing-block));

  & > * {
    margin-block: auto;
  }
}

Cover layout.

.lyo-switcher

scss 
.lyo-switcher {
  display: flex;
  flex-wrap: wrap;

  & > * {
    flex-basis: calc((var(---threshold) - 100%) * 999);
    flex-grow: 1;
  }
}

Switcher layout.

Related

The Flexbox Holy Albatross [external]

Wrap

Layout utilities to control how successive elements are wrapped in lines.

Default Wrap Space Definition

scss 
* {
  ---wrap-space: #{svar(spacing-wrap-default)};
}

Wrap Space Definition for Sections

scss 
:is(#{el.$sections}) {
  ---wrap-space: #{svar(spacing-wrap-sectioning)};
}

All wrap layouts

scss 
[class^="lyo-wrap-"],
[class*=" lyo-wrap-"] {
  ---min-column-size: calc(0.7 * var(---measure));
  gap: var(---wrap-space, var(---flow-space));
}

General sizing and spacing for wrap layouts.

All wrap layout children

scss 
:is([class^="lyo-wrap-"], [class*=" lyo-wrap-"]) > * {
  margin-block: 0;
}

Do not apply flow space in flex or grid layout. Note: Once container style queries have sufficient browser support this can be done as a generic flow rule.

.lyo-wrap-grid

scss 
.lyo-wrap-grid {
  ---fill-method: auto-fill;
  display: grid;
  grid-template-columns: repeat(
    var(---fill-method),
    minmax(min(100%, var(---min-column-size)), 1fr)
  );
}

Wrap in a grid: Get equal columns over all rows.

Custom properties:

  • ---min-column-size {number} [70% of current measure]: The minimum size of columns.
  • ---fill-method {auto-fill|auto-fit}: Use auto-fill to get empty filler columns if there are too few grid items for one row. Use auto-fit to prevent that behaviour and give all space to the filled columns.

Modifier: +fit

scss 
.lyo-wrap-grid.\+fit,
%lyo-wrap-grid--fit {
  ---fill-method: auto-fit;
}

Grid layout with fitting under-full grids.

.lyo-wrap-flex

scss 
.lyo-wrap-flex {
  display: flex;
  flex-wrap: wrap;

  & > * {
    flex-basis: var(---min-column-size);
    flex-grow: 1;
  }
}

Wrap in flexible rows: Similar to the grid, but with the width of columns determined individually based on the number of columns in each row. Example: Given five items and a container that can take three of them in a row, the second row will made up of the two remaininng items taking up one half of the space each, instead of leaving the last third empty.

Custom properties:

  • ---min-column-size {number} [70% of current measure]: The minimum size of columns.

.lyo-wrap-cluster

scss 
.lyo-wrap-cluster {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-items: start;
}

Wrap as cluster (densely packed).

Modifier: +center

scss 
.lyo-wrap-cluster.\+center,
%lyo-wrap-cluster--center {
  justify-content: center;
}

Cluster layout with centered alignment.

Modifier: +end

scss 
.lyo-wrap-cluster.\+end,
%lyo-wrap-cluster--end {
  justify-content: end;
}

Cluster layout with alignment to the end.

Modifier: +justified

scss 
.lyo-wrap-cluster.\+justified,
%lyo-wrap-cluster--justified {
  justify-content: space-between;
}

Cluster layout with justified alignment.

.lyo-reset-wrap

scss 
.lyo-reset-wrap {
  grid-column: 1 / -1 !important;
  max-inline-size: unset !important;
  flex: 100% !important;
}

Reset wrapping: Let this item claim the space of the whole row.