Layouts

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

Basic Grids

link Basic Grids

Description	CSS Variable	Utility Class
1 column grid.	--o-grid-columns-1	o-grid-1
1 column grid at xxs breakpoint and below.		o-xxs-grid-1
1 column grid at xs breakpoint and below.		o-xs-grid-1
1 column grid at sm breakpoint and below.		o-sm-grid-1
1 column grid at md breakpoint and below.		o-md-grid-1
1 column grid at lg breakpoint and below.		o-lg-grid-1
1 column grid at xl breakpoint and below.		o-xl-grid-1
1 column grid at xxl breakpoint and below.		o-xxl-grid-1
2 column grid.	--o-grid-columns-2	o-grid-2
2 column grid at xxs breakpoint and below.		o-xxs-grid-2
2 column grid at xs breakpoint and below.		o-xs-grid-2
2 column grid at sm breakpoint and below.		o-sm-grid-2
2 column grid at md breakpoint and below.		o-md-grid-2
2 column grid at lg breakpoint and below.		o-lg-grid-2
2 column grid at xl breakpoint and below.		o-xl-grid-2
2 column grid at xxl breakpoint and below.		o-xxl-grid-2
3 column grid.	--o-grid-columns-3	o-grid-3
3 column grid at xxs breakpoint and below.		o-xxs-grid-3
3 column grid at xs breakpoint and below.		o-xs-grid-3
3 column grid at sm breakpoint and below.		o-sm-grid-3
3 column grid at md breakpoint and below.		o-md-grid-3
3 column grid at lg breakpoint and below.		o-lg-grid-3
3 column grid at xl breakpoint and below.		o-xl-grid-3
3 column grid at xxl breakpoint and below.		o-xxl-grid-3
4 column grid.	--o-grid-columns-4	o-grid-4
4 column grid at xxs breakpoint and below.		o-xxs-grid-4
4 column grid at xs breakpoint and below.		o-xs-grid-4
4 column grid at sm breakpoint and below.		o-sm-grid-4
4 column grid at md breakpoint and below.		o-md-grid-4
4 column grid at lg breakpoint and below.		o-lg-grid-4
4 column grid at xl breakpoint and below.		o-xl-grid-4
4 column grid at xxl breakpoint and below.		o-xxl-grid-4
5 column grid.	--o-grid-columns-5	o-grid-5
5 column grid at xxs breakpoint and below.		o-xxs-grid-5
5 column grid at xs breakpoint and below.		o-xs-grid-5
5 column grid at sm breakpoint and below.		o-sm-grid-5
5 column grid at md breakpoint and below.		o-md-grid-5
5 column grid at lg breakpoint and below.		o-lg-grid-5
5 column grid at xl breakpoint and below.		o-xl-grid-5
5 column grid at xxl breakpoint and below.		o-xxl-grid-5
6 column grid.	--o-grid-columns-6	o-grid-6
6 column grid at xxs breakpoint and below.		o-xxs-grid-6
6 column grid at xs breakpoint and below.		o-xs-grid-6
6 column grid at sm breakpoint and below.		o-sm-grid-6
6 column grid at md breakpoint and below.		o-md-grid-6
6 column grid at lg breakpoint and below.		o-lg-grid-6
6 column grid at xl breakpoint and below.		o-xl-grid-6
6 column grid at xxl breakpoint and below.		o-xxl-grid-6
7 column grid.	--o-grid-columns-7	o-grid-7
7 column grid at xxs breakpoint and below.		o-xxs-grid-7
7 column grid at xs breakpoint and below.		o-xs-grid-7
7 column grid at sm breakpoint and below.		o-sm-grid-7
7 column grid at md breakpoint and below.		o-md-grid-7
7 column grid at lg breakpoint and below.		o-lg-grid-7
7 column grid at xl breakpoint and below.		o-xl-grid-7
7 column grid at xxl breakpoint and below.		o-xxl-grid-7
8 column grid.	--o-grid-columns-8	o-grid-8
8 column grid at xxs breakpoint and below.		o-xxs-grid-8
8 column grid at xs breakpoint and below.		o-xs-grid-8
8 column grid at sm breakpoint and below.		o-sm-grid-8
8 column grid at md breakpoint and below.		o-md-grid-8
8 column grid at lg breakpoint and below.		o-lg-grid-8
8 column grid at xl breakpoint and below.		o-xl-grid-8
8 column grid at xxl breakpoint and below.		o-xxl-grid-8
9 column grid.	--o-grid-columns-9	o-grid-9
9 column grid at xxs breakpoint and below.		o-xxs-grid-9
9 column grid at xs breakpoint and below.		o-xs-grid-9
9 column grid at sm breakpoint and below.		o-sm-grid-9
9 column grid at md breakpoint and below.		o-md-grid-9
9 column grid at lg breakpoint and below.		o-lg-grid-9
9 column grid at xl breakpoint and below.		o-xl-grid-9
9 column grid at xxl breakpoint and below.		o-xxl-grid-9
10 column grid.	--o-grid-columns-10	o-grid-10
10 column grid at xxs breakpoint and below.		o-xxs-grid-10
10 column grid at xs breakpoint and below.		o-xs-grid-10
10 column grid at sm breakpoint and below.		o-sm-grid-10
10 column grid at md breakpoint and below.		o-md-grid-10
10 column grid at lg breakpoint and below.		o-lg-grid-10
10 column grid at xl breakpoint and below.		o-xl-grid-10
10 column grid at xxl breakpoint and below.		o-xxl-grid-10
11 column grid.	--o-grid-columns-11	o-grid-11
11 column grid at xxs breakpoint and below.		o-xxs-grid-11
11 column grid at xs breakpoint and below.		o-xs-grid-11
11 column grid at sm breakpoint and below.		o-sm-grid-11
11 column grid at md breakpoint and below.		o-md-grid-11
11 column grid at lg breakpoint and below.		o-lg-grid-11
11 column grid at xl breakpoint and below.		o-xl-grid-11
11 column grid at xxl breakpoint and below.		o-xxl-grid-11
12 column grid.	--o-grid-columns-12	o-grid-12
12 column grid at xxs breakpoint and below.		o-xxs-grid-12
12 column grid at xs breakpoint and below.		o-xs-grid-12
12 column grid at sm breakpoint and below.		o-sm-grid-12
12 column grid at md breakpoint and below.		o-md-grid-12
12 column grid at lg breakpoint and below.		o-lg-grid-12
12 column grid at xl breakpoint and below.		o-xl-grid-12
12 column grid at xxl breakpoint and below.		o-xxl-grid-12

Asymetrical Grids

link Asymetrical Grids

Description	CSS Variable	Utility Class
1-2 asymetrical 2 columns grid.	--o-grid-columns-1-2	o-grid-1-2
1-3 asymetrical 2 columns grid.	--o-grid-columns-1-3	o-grid-1-3
1-4 asymetrical 2 columns grid.	--o-grid-columns-1-4	o-grid-1-4
1-5 asymetrical 2 columns grid.	--o-grid-columns-1-5	o-grid-1-5
2-1 asymetrical 2 columns grid.	--o-grid-columns-2-1	o-grid-2-1
2-3 asymetrical 2 columns grid.	--o-grid-columns-2-3	o-grid-2-3
2-4 asymetrical 2 columns grid.	--o-grid-columns-2-4	o-grid-2-4
2-5 asymetrical 2 columns grid.	--o-grid-columns-2-5	o-grid-2-5
3-1 asymetrical 2 columns grid.	--o-grid-columns-3-1	o-grid-3-1
3-2 asymetrical 2 columns grid.	--o-grid-columns-3-2	o-grid-3-2
3-4 asymetrical 2 columns grid.	--o-grid-columns-3-4	o-grid-3-4
3-5 asymetrical 2 columns grid.	--o-grid-columns-3-5	o-grid-3-5
4-1 asymetrical 2 columns grid.	--o-grid-columns-4-1	o-grid-4-1
4-2 asymetrical 2 columns grid.	--o-grid-columns-4-2	o-grid-4-2
4-3 asymetrical 2 columns grid.	--o-grid-columns-4-3	o-grid-4-3
4-5 asymetrical 2 columns grid.	--o-grid-columns-4-5	o-grid-4-5
5-1 asymetrical 2 columns grid.	--o-grid-columns-5-1	o-grid-5-1
5-2 asymetrical 2 columns grid.	--o-grid-columns-5-2	o-grid-5-2
5-3 asymetrical 2 columns grid.	--o-grid-columns-5-3	o-grid-5-3
5-4 asymetrical 2 columns grid.	--o-grid-columns-5-4	o-grid-5-4

RAM

link RAM

Description	CSS Variable	Utility Class
Auto responsive 2 columns grid.	--o-ram-2	o-ram-2
Auto responsive 3 columns grid.	--o-ram-3	o-ram-3
Auto responsive 4 columns grid.	--o-ram-4	o-ram-4
Auto responsive 5 columns grid.	--o-ram-5	o-ram-5
Auto responsive 6 columns grid.	--o-ram-6	o-ram-6
Auto responsive 7 columns grid.	--o-ram-7	o-ram-7
Auto responsive 8 columns grid.	--o-ram-8	o-ram-8
Auto responsive 9 columns grid.	--o-ram-9	o-ram-9
Auto responsive 10 columns grid.	--o-ram-10	o-ram-10
Auto responsive 11 columns grid.	--o-ram-11	o-ram-11
Auto responsive 12 columns grid.	--o-ram-12	o-ram-12

Holy Grail

link Holy Grail

Apply to the grid-template property

  --o-holy-grail-template

Apply to the grid-template-areas property

  --o-holy-grail-template-areas

Flex Cards

link Flex Cards

Apply to the flex property

  --o-flex-card-1
  --o-flex-card-2
  --o-flex-card-3

  --o-flex-card-stretch-1
  --o-flex-card-stretch-2
  --o-flex-card-stretch-3

Object Position

link Object Position

Apply to the object-position property

  --o-object-top-left
  --o-object-top-center
  --o-object-top-right
  --o-object-center-left
  --o-object-center
  --o-object-center-right
  --o-object-bottom-left
  --o-object-bottom-center
  --o-object-bottom-right