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 utilities apply the mixins that implement Every Layout primitives.
Related
@mixin box.layout()
Related
@mixin center.layout()
.lyo-center.+intrinsic
scss
.lyo-center.#{$mod-prefix}intrinsic {
@include center.modifier-intrinsic;
}Intrinsic center layout.
Related
@mixin center.modifier-intrinsic()
Related
@mixin cluster.layout()
.lyo-cluster.+center
scss
.lyo-cluster.#{$mod-prefix}center {
@include cluster.modifier-center;
}Related
@mixin cluster.modifier-center()
.lyo-cluster.+end
scss
.lyo-cluster.#{$mod-prefix}end {
@include cluster.modifier-end;
}Related
@mixin cluster.modifier-end()
.lyo-cluster.+justified
scss
.lyo-cluster.#{$mod-prefix}justified {
@include cluster.modifier-justified;
}Related
@mixin cluster.modifier-justified()
Related
@mixin columns.layout()
Related
@mixin cover.layout()
Related
@mixin frame.layout()
Related
@mixin grid.layout()
.lyo-grid.+fit
scss
.lyo-grid.#{$mod-prefix}fit {
@include grid.modifier-fit;
}Related
@mixin grid.modifier-fit()
Related
@mixin grid.layout-flex()
Related
@mixin reel.layout()
.lyo-reel.+no-bar
scss
.lyo-reel.#{$mod-prefix}no-bar {
@include reel.modifier-no-bar;
}Reel layout without scrollbar.
Related
@mixin reel.modifier-no-bar()
.lyo-reel.+overflowing
scss
.lyo-reel.#{$mod-prefix}overflowing {
@include reel.modifier-overflowing;
}Reel layout with padding between content and scrollbar.
Related
@mixin reel.modifier-overflowing()
Related
@mixin sidebar.layout()
.lyo-sidebar.+end
scss
.lyo-sidebar.#{$mod-prefix}end {
@include sidebar.modifier-end;
}Sidebar layout with the last child as sidebar.
Related
@mixin sidebar.modifier-end()
.lyo-sidebar.+reverse
scss
.lyo-sidebar.#{$mod-prefix}reverse {
@include sidebar.modifier-reverse;
}Sidebar layout with the order of children reversed.
Related
@mixin sidebar.modifier-reverse()
Related
@mixin stack.layout()
Related
@mixin switcher.layout()
.lyo-reset-wrap
scss
.lyo-reset-wrap {
@include wrap.layout-reset;
}Reset wrapping: Let this item claim the space of the whole row.