Documentation > Layouts

Layouts

The Sabali Co Layout system involves grids and blocks that are laid in based on fractions and percentages. This allows for very easy responsive code that also makes designing websites simple.

The layout system is broken into fractions between 1 (full) and 1/6. You can use the blocks within each fraction or you can feel free to lay it out however you feel like. This layout system works with both the Framework and the Content Management System.

Layout Chart

Block Type DIV Class Fraction Percentage Equivalent Block
Full .full 1/1 100%
One Half .one-half 1/2 50% 2/4 & 3/6
One Third .one-third 1/3 33.33% 2/6
Two Thirds .two-thirds 2/3 66.66% 4/6
One Fourth .two-thirds 2/3 25%
Two Fourths .two-fourths 2/4 50% 1/2 & 3/6
Three Fourths .three-fourths 3/4 75%
One Fifth .one-fifth 1/5 20%
Two Fifths .two-fifths 2/5 40%
Three Fifths .three-fifths 3/5 60%
Four Fifths .four-fifths 4/5 80%
One Sixth .one-sixth 1/6 16.66%
Two Sixths .two-sixths 2/6 33.33% 1/3
Three Sixths .three-sixths 3/6 50% 1/2 & 2/4
Four Sixths .four-sixths 4/6 66.66% 2/3
Five Sixths .five-sixths 5/6 82.33%

Block Layouts

Full

1/1

Halves

1/2

1/2

Thirds

2/3

Fourths

1/4

1/4

1/4

1/4

1/4

1/4

2/4

1/4

3/4

2/4

2/4

Fifths

1/5

1/5

1/5

1/5

1/5

1/5

1/5

1/5

2/5

1/5

1/5

3/5

1/5

2/5

2/5

1/5

4/5

2/5

3/5

Sixths

1/6

1/6

1/6

1/6

1/6

1/6

1/6

1/6

1/6

1/6

2/6

1/6

1/6

1/6

3/6

1/6

1/6

2/6

2/6

1/6

1/6

4/6

1/6

2/6

3/6

1/6

5/6

2/6

4/6

3/6

3/6

Custom Layouts

2/3

1/2

1/2

1/4

1/4

1/4

1/5

1/5

1/5

1/5

1/5

1/5

Comments

Sabali Co - CMS

CMS