Grid Preset Layouts

This page lists all Grid Preset Layouts CSS custom properties and utility classes available in the OxyProps Framework

The Stack

link The Stack

Note

The --o-stack-template CSS variable applies to the grid-remplate-rows property.

Description	CSS Variable	Utility Class
Creates a vertical sandwich layout.	--o-stack-template	o-stack

The Sidebars

link The Sidebars

Note

The --o-<side>-sidebar-<min-size> CSS variable applies to the grid-remplate-columns property.

Description	CSS Variable	Utility Class
Creates a 25% wide left sidebar with a header 1 minimum width.	--o-left-sidebar-1	o-left-sidebar-1
Creates a 25% wide left sidebar with a header 2 minimum width.	--o-left-sidebar-2	o-left-sidebar-2
Creates a 25% wide left sidebar with a header 3 minimum width.	--o-left-sidebar-3	o-left-sidebar-3
Creates a 25% wide right sidebar with a header 1 minimum width.	--o-right-sidebar-1	o-right-sidebar-1
Creates a 25% wide right sidebar with a header 2 minimum width.	--o-right-sidebar-2	o-right-sidebar-2
Creates a 25% wide right sidebar with a header 3 minimum width.	--o-right-sidebar-3	o-right-sidebar-3

The Holy Grail

link The Holy Grail

Note

The --o-holy-grail-template CSS variable applies to the grid-template property.
The --o-holy-grail-template-areas CSS variable applies to the grid-template-areas property.

Description	CSS Variable	Utility Class
Creates a vertical sandwich layout with	--o-holy-grail-template	o-holy-grail
left and right sidebars in the middle area.	--o-holy-grail-template-areas