Grid

column in percentages

Columns in percentage

The grid is based on 24 columns. Most of layouting can be refered to the grid and sizes are specified in "grid". For example; a padding of 2 grid means ((100 / 24) * 2 ) = 8.333% from the

grid sizes

Grid sizes

Because the whole design is based on a full width, we can calculate in grid sizes. This means sizes can be set width the grid function: .element{ padding: grid(2); } In this case grid will be calculated to viewport widths and get compiled to: .element{ padding: 8.333vw; }

classes

Classes

The layout is simple. We build rows .row with children .column

responsive

Responsive

To create responsive widths on the columns, there are different classes to be used on the columns.

In an ideal world we start by declaring the small width. This is the width which will be set for everything from small.

breakpoint classes

Breakpoint classes

Extra classes can be added to change values on a breakpoint and up.

breakpoint only

Specific for Breakpoint classes

Adding -only to the class, will use this specified width only on that specific size.

This will make the column half the row size for all breakpoints exept for "medium"

Default Settings
variabledefault valuedescription
$grid-columns24

Amount of columns

$grid-design-width1920px

Base design width. Used for converting rem to grid size and min/max grid size

$grid-row-width4096px

Maximum row width, will be set as max-width for rows.

$grid-breakpoints
small750
medium960
large1280
xlarge1920
xxlarge9999

Breakpoints used for the grid. All classes will be automatically generated based on these names and sizes. Do not add classes, this can break many things, changing values is allowed.

$grid-parts
1/1full
1/2half
1/3third
2/3two-third
1/4quarter
3/4three-quarter
1/5 fifth
2/5two-fifth
3/5three-fifth
4/5four-fifth
1/6sixth
5/6 five-sixth

Extra breakpoints automatically generates percentages. More can be added easily.

Basic numeral columns

Using the numeral columns can be in two ways. The width of the columns can be specified in multiple ways;

class on row

On the Row

The column width can be specified directly on the row. This will set the width for all direct children with the class .column. This is done to simplify rows with equal columns.

class on column

On the column

The column width can be specified on each .column in a .row in order to create a layout with different widths.

class on both

On both

When the width is specified on the row. The widths of a specific .column can be overriden by setting the width on the column itself.

Standard columns (numeral)

1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
2
2
2
2
2
2
3
3
3
3
3
3
3
3
4
4
4
4
4
4
5
5
5
5
6
6
6
6
7
7
7
8
8
8
9
9
10
10
11
11
12
12
13
14
15
16
17
18
19
20
21
22
23
24

Combine columns

12
3
3
2
1

Partial columns

full
half
half
third
third
third
quarter
quarter
quarter
quarter
fifth
fifth
fifth
fifth
fifth
sixth
sixth
sixth
sixth
sixth
sixth

Combine partials

half
quarter
fifth