Layout Composition

This section defines the foundational layout rules—structural patterns and spacing—that ensure consistency and visual rhythm across the UI.
Important: Desktop classes define the base layout. Tablet and mobile classes are intended as overrides, not replacements.

Page & Content Wrappers

A versatile and consistent foundation for building most, if not all, pages.
Page Wrapper
The outermost layout wrapper that contains the page content and helps protect the layout from unnecessary overflow.
page-wrapper
Section Wrapper
Unstyled section wrapper designed to work with Layout Composition classes for custom alignment, direction, spacing, and sizing based on the needs of each section.
All-sections
Content Wrapper
Constrains inner content width while allowing flexible section layouts. Adjust the Max W value to match your desired content width.
content-wrapper
All Tags
Base styling applied to HTML tag types, providing consistent default behavior and appearance for elements used throughout page and content structures.
Div
All-Divs
Header
All-Headers
Footer
All-Footers
Navigation
All-Navigation
Main
All-Mains
Article
All-Articles
Aside
All-Asides
Address
All-Addresses
Figure
All-Figures

Block

Elements stack vertically and occupy the full available width by default.
Desktop
Tablet
Mobile
Mobile Portrait
block
tablet-block
mobile-block
mobile-portrait-block

Inline Block

Inline-block elements with configurable vertical alignment relative to surrounding content.
Desktop
Baseline
inline-block-baseline
Aa
Sub
inline-block-sub
Aa
Super
inline-block-super
Aa
Top
inline-block-top
Aa
Text Top
inline-block-text-top
Aa
Middle
inline-block-middle
Aa
Bottom
inline-block-bottom
Aa
Text Bottom
inline-block-text-bottom
Aa
Tablet
Mobile
Mobile Portrait
Baseline
tablet-inline-block
Aa
-
mobile-inline-block
Aa
-
mobile-portrait-inline-block
Aa

Inline

Inline elements that flow with text and align relative to the text baseline.
Desktop
Baseline
inline-baseline
Aa
Bb
Sub
inline-sub
Aa
Bb
Super
inline-super
Aa
Bb
Top
inline-top
Aa
Bb
Text Top
inline-text-top
Aa
Bb
Middle
inline-middle
Aa
Bb
Bottom
inline-bottom
Aa
Bb
Text Bottom
inline-text-bottom
Aa
Bb
Tablet
Mobile
Mobile Portrait
Baseline
tablet-inline
Aa
Bb
-
mobile-inline
Aa
Bb
-
mobile-portrait-inline
Aa
Bb

Stretch

Stretches the element and its child elements to fully occupy the available width and height.
Desktop
Tablet
Mobile
Mobile Portrait
stretch
tablet-stretch
mobile-stretch
mobile-portrait-stretch

Flex

Predefined flex patterns for arranging elements horizontally, vertically, or with wrapping behavior.
Direction
Desktop
Tablet
Mobile
Mobile Portrait
Horizontal
flex-horizontal
-
tablet-flex-horizontal
-
mobile-flex-horizontal
-
mobile-portrait-flex-horizontal
Horizontal Reverse
flex-horizontal-reverse
-
tablet-flex-horizontal-reverse
-
mobile-flex-horizontal-reverse
-
mobile-portrait-flex-horizontal-reverse
Wrapping
flex-wrapping
-
tablet-flex-wrapping
-
mobile-flex-wrapping
-
mobile-portrait-flex-wrapping
Wrapping Reverse
flex-wrapping-reverse
-
tablet-flex-wrapping-reverse
-
mobile-flex-wrapping-reverse
-
mobile-portrait-flex-wrapping-reverse
Vertical
flex-vertical
-
tablet-flex-vertical
-
mobile-flex-vertical
-
mobile-portrait-flex-vertical
Vertical Reverse
flex-vertical-reverse
-
tablet-flex-vertical-reverse
-
mobile-flex-vertical-reverse
-
mobile-portrait-flex-vertical-reverse
Alignment
Desktop
flex-align-start-stretch
Horizontal
Vertical
flex-align-center-stretch
Horizontal
Vertical
flex-align-end-stretch
Horizontal
Vertical
flex-align-between-stretch
Horizontal
Vertical
flex-align-around-stretch
Horizontal
Vertical
flex-align-start-start
Horizontal
Vertical
flex-align-center-start
Horizontal
Vertical
flex-align-end-start
Horizontal
Vertical
flex-align-between-start
Horizontal
Vertical
flex-align-around-start
Horizontal
Vertical
flex-align-start-center
Horizontal
Vertical
flex-align-center-center
Horizontal
Vertical
flex-align-end-center
Horizontal
Vertical
flex-align-between-center
Horizontal
Vertical
flex-align-around-center
Horizontal
Vertical
flex-align-start-end
Horizontal
Vertical
flex-align-center-end
Horizontal
Vertical
flex-align-end-end
Horizontal
Vertical
flex-align-between-end
Horizontal
Vertical
flex-align-around-end
Horizontal
Vertical
Tablet
Start / Stretch
tablet-flex-align-start-stretch
Center / Stretch
tablet-flex-align-center-stretch
End / Stretch
tablet-flex-align-end-stretch
Between / Stretch
tablet-flex-align-between-stretch
Around / Stretch
tablet-flex-align-around-stretch
Start / Start
tablet-flex-align-start-start
Center / Start
tablet-flex-align-center-start
End / Start
tablet-flex-align-end-start
Between / Start
tablet-flex-align-between-start
Around / Start
tablet-flex-align-around-start
Start / Center
tablet-flex-align-start-center
Center / Center
tablet-flex-align-center-center
End / Center
tablet-flex-align-end-center
Between / Center
tablet-flex-align-between-center
Around / Center
tablet-flex-align-around-center
Start / End
tablet-flex-align-start-end
Center / End
tablet-flex-align-center-end
End / End
tablet-flex-align-end-end
Between / End
tablet-flex-align-between-end
Around / End
tablet-flex-align-around-end
Mobile
Start / Stretch
mobile-flex-align-start-stretch
Center / Stretch
mobile-flex-align-center-stretch
End / Stretch
mobile-flex-align-end-stretch
Between / Stretch
mobile-flex-align-between-stretch
Around / Stretch
mobile-flex-align-around-stretch
Start / Start
mobile-flex-align-start-start
Center / Start
mobile-flex-align-center-start
End / Start
mobile-flex-align-end-start
Between / Start
mobile-flex-align-between-start
Around / Start
mobile-flex-align-around-start
Start / Center
mobile-flex-align-start-center
Center / Center
mobile-flex-align-center-center
End / Center
mobile-flex-align-end-center
Between / Center
mobile-flex-align-between-center
Around / Center
mobile-flex-align-around-center
Start / End
mobile-flex-align-start-end
Center / End
mobile-flex-align-center-end
End / End
mobile-flex-align-end-end
Between / End
mobile-flex-align-between-end
Around / End
mobile-flex-align-around-end
Mobile Portrait
Start / Stretch
mobile-portrait-flex-align-start-stretch
Center / Stretch
mobile-portrait-flex-align-center-stretch
End / Stretch
mobile-portrait-flex-align-end-stretch
Between / Stretch
mobile-portrait-flex-align-between-stretch
Around / Stretch
mobile-portrait-flex-align-around-stretch
Start / Start
mobile-portrait-flex-align-start-start
Center / Start
mobile-portrait-flex-align-center-start
End / Start
mobile-portrait-flex-align-end-start
Between / Start
mobile-portrait-flex-align-between-start
Around / Start
mobile-portrait-flex-align-around-start
Start / Center
mobile-portrait-flex-align-start-center
Center / Center
mobile-portrait-flex-align-center-center
End / Center
mobile-portrait-flex-align-end-center
Between / Center
mobile-portrait-flex-align-between-center
Around / Center
mobile-portrait-flex-align-around-center
Start / End
mobile-portrait-flex-align-start-end
Center / End
mobile-portrait-flex-align-center-end
End / End
mobile-portrait-flex-align-end-end
Between / End
mobile-portrait-flex-align-between-end
Around / End
mobile-portrait-flex-align-around-end
Gap
Gap settings define consistent spacing directly within the layout, allowing elements to remain aligned and responsive while maintaining even distribution of space as the layout changes. They are intended to be used as combo classes alongside the main layout structure.
Desktop
Tablet
Mobile
Mobile Portrait
Tiny
flex-gap-tiny
XXS
flex-gap-xxs
XS
flex-gap-xs
S
flex-gap-s
-
tablet-flex-gap-s
-
mobile-flex-gap-s
-
mobile-portrait-flex-gap-s
M
flex-gap-m
-
tablet-flex-gap-m
-
mobile-flex-gap-m
-
mobile-portrait-flex-gap-m
L
flex-gap-l
-
tablet-flex-gap-l
-
mobile-flex-gap-l
-
mobile-portrait-flex-gap-l
XL
flex-gap-xl
-
tablet-flex-gap-xl
-
mobile-flex-gap-xl
-
mobile-portrait-flex-gap-xl
XXL
flex-gap-xxl
-
tablet-flex-gap-xxl
-
mobile-flex-gap-xxl
-
mobile-portrait-flex-gap-xxl
Huge
flex-gap-huge
X Huge
flex-gap-xhuge
XX Huge
flex-gap-xxhuge
Flex Child
Controls how flex child elements grow, shrink, or remain fixed within horizontal and vertical flex layouts.
Desktop
Tablet
Mobile
Mobile Portrait
Auto
flex-auto
-
tablet-flex-auto
-
mobile-flex-auto
-
mobile-portrait-flex-auto
Grow
flex-grow
-
tablet-flex-grow
-
mobile-flex-grow
-
mobile-portrait-flex-grow
Fixed
flex-fixed
-
tablet-flex-fixed
-
mobile-flex-fixed
-
mobile-portrait-flex-fixed

Grid

This section defines reusable grid patterns designed to organize content clearly and responsively across breakpoints.
Layouts by Column (Left to Right) Stack Down
Desktop
2 Columns
grid-2-column
2 Columns (1x2)
grid-2-column-1x2
2 Columns (2x1)
grid-2-column-2x1
3 Columns
grid-3-column
3 Columns (1x1x2)
grid-3-column-1x1x2
3 Columns (2x1x1)
grid-3-column-2x1x1
4 Columns
grid-4-column
5 Columns
grid-5-column
6 Columns
grid-6-column
7 Columns
grid-7-column
8 Columns
grid-8-column
9 Columns
grid-9-column
10 Columns
grid-10-column
Tablet
Mobile
Mobile Portrait
2 Columns
tablet-grid-2-column
-
mobile-grid-2-column
-
mobile-portrait-grid-2-column
3 Columns
tablet-grid-3-column
-
mobile-grid-3-column
-
mobile-portrait-grid-3-column
4 Columns
tablet-grid-4-column
-
mobile-grid-4-column
-
mobile-portrait-grid-4-column
Gap Locked
Gap settings define consistent spacing directly within the layout, allowing elements to remain aligned and responsive while maintaining even distribution of space as the layout changes. They are intended to be used as combo classes alongside the main layout structure.
Desktop
Tablet
Mobile
Mobile Portrait
Tiny
grid-gap-tiny
XXS
grid-gap-xxs
XS
grid-gap-xs
S
grid-gap-s
-
tablet-grid-gap-s
-
mobile-grid-gap-s
-
mobile-portrait-grid-gap-s
M
grid-gap-m
-
tablet-grid-gap-m
-
mobile-grid-gap-m
-
mobile-portrait-grid-gap-m
L
grid-gap-l
-
tablet-grid-gap-l
-
mobile-grid-gap-l
-
mobile-portrait-grid-gap-l
XL
grid-gap-xl
-
tablet-grid-gap-xl
-
mobile-grid-gap-xl
-
mobile-portrait-grid-gap-xl
XXL
grid-gap-xxl
-
tablet-grid-gap-xxl
-
mobile-grid-gap-xxl
-
mobile-portrait-grid-gap-xxl
Huge
grid-gap-huge
X Huge
grid-gap-xhuge
XX Huge
grid-gap-xxhuge
Gap Columns
Column gap settings define consistent horizontal spacing between layout columns, helping maintain clear separation and alignment as the layout adjusts across different widths. They are intended to be used as combo classes alongside the main layout structure.
Desktop
Tablet
Mobile
Mobile Portrait
Tiny
grid-gap-column-tiny
XXS
grid-gap-column-xxs
XS
grid-gap-column-xs
S
grid-gap-column-s
-
tablet-grid-gap-column-s
-
mobile-grid-gap-column-s
-
mobile-portrait-grid-gap-column-s
M
grid-gap-column-m
-
tablet-grid-gap-column-m
-
mobile-grid-gap-column-m
-
mobile-portrait-grid-gap-column-m
L
grid-gap-column-l
-
tablet-grid-gap-column-l
-
mobile-grid-gap-column-l
-
mobile-portrait-grid-gap-column-l
XL
grid-gap-column-xl
-
tablet-grid-gap-column-xl
-
mobile-grid-gap-column-xl
-
mobile-portrait-grid-gap-column-xl
XXL
grid-gap-column-xxl
-
tablet-grid-gap-column-xxl
-
mobile-grid-gap-column-xxl
-
mobile-portrait-grid-gap-column-xxl
Huge
grid-gap-column-huge
X Huge
grid-gap-column-xhuge
XX Huge
grid-gap-column-xxhuge
Gap Rows
Row gap settings define consistent vertical spacing between layout rows, helping maintain clear separation and alignment as the layout adjusts across different heights and content structures. They are intended to be used as combo classes alongside the main layout structure.
Desktop
Tablet
Mobile
Mobile Portrait
Tiny
grid-gap-row-tiny
XXS
grid-gap-row-xxs
XS
grid-gap-row-xs
S
grid-gap-row-s
-
tablet-grid-gap-row-s
-
mobile-grid-gap-row-s
-
mobile-portrait-grid-gap-row-s
M
grid-gap-row-m
-
tablet-grid-gap-row-m
-
mobile-grid-gap-row-m
-
mobile-portrait-grid-gap-row-m
L
grid-gap-row-l
-
tablet-grid-gap-row-l
-
mobile-grid-gap-row-l
-
mobile-portrait-grid-gap-row-l
XL
grid-gap-row-xl
-
tablet-grid-gap-row-xl
-
mobile-grid-gap-row-xl
-
mobile-portrait-grid-gap-row-xl
XXL
grid-gap-row-xxl
-
tablet-grid-gap-row-xxl
-
mobile-grid-gap-row-xxl
-
mobile-portrait-grid-gap-row-xxl
Huge
grid-gap-row-huge
X Huge
grid-gap-row-xhuge
XX Huge
grid-gap-row-xxhuge

Element Order (Flex & Grid)

Reorder elements in flex or grid containers using combo classes that adjust position responsively across screen sizes.
Desktop
Tablet
Mobile
Mobile Portrait
First
order-1
-
tablet-order-1
-
mobile-order-1
-
mobile-portrait-order-1
2nd
order-2
-
tablet-order-2
-
mobile-order-2
-
mobile-portrait-order-2
3rd
order-3
-
tablet-order-3
-
mobile-order-3
-
mobile-portrait-order-3
4th
order-4
-
tablet-order-4
-
mobile-order-4
-
mobile-portrait-order-4
5th
order-5
-
tablet-order-5
-
mobile-order-5
-
mobile-portrait-order-5
Last
order-last
-
tablet-order-last
-
mobile-order-last
-
mobile-portrait-order-last

Masonry

A masonry layout arranges elements like a wall of bricks—stacking them vertically within columns while minimizing vertical gaps. Items flow naturally based on their height, creating a staggered, organic look without forcing uniform rows. Perfect for image galleries, portfolios, or dynamic content blocks with varying sizes.
Layouts by Column (Left to Right) Stack Down
Desktop
Tablet
Mobile
Mobile Portrait
2 Columns
masonry-2-column
-
tablet-masonry-2-column
-
mobile-masonry-2-column
-
mobile-portrait-masonry-2-column
3 Columns
masonry-3-column
-
tablet-masonry-3-column
-
mobile-masonry-3-column
-
mobile-portrait-masonry-3-column
4 Columns
masonry-4-column
-
tablet-masonry-4-column
-
mobile-masonry-4-column
-
mobile-portrait-masonry-4-column
5 Columns
masonry-5-column
6 Columns
masonry-6-column
Gap
Gap settings define consistent spacing directly within the layout, allowing elements to remain aligned and responsive while maintaining even distribution of space as the layout changes. They are intended to be used as combo classes alongside the main layout structure.
Desktop
Tablet
Mobile
Mobile Portrait
Tiny
masonry-gap-tiny
XXS
masonry-gap-xxs
XS
masonry-gap-xs
S
masonry-gap-s
-
tablet-masonry-gap-s
-
mobile-masonry-gap-s
-
mobile-portrait-masonry-gap-s
M
masonry-gap-m
-
tablet-masonry-gap-m
-
mobile-masonry-gap-m
-
mobile-portrait-masonry-gap-m
L
masonry-gap-l
-
tablet-masonry-gap-l
-
mobile-masonry-gap-l
-
mobile-portrait-masonry-gap-l
XL
masonry-gap-xl
-
tablet-masonry-gap-xl
-
mobile-masonry-gap-xl
-
mobile-portrait-masonry-gap-xl
XXL
masonry-gap-xxl
-
tablet-masonry-gap-xxl
-
mobile-masonry-gap-xxl
-
mobile-portrait-masonry-gap-xxl
Huge
masonry-gap-huge
X Huge
masonry-gap-xhuge
XX Huge
masonry-gap-xxhuge