The framework is based on a 12-columns grid for easier scaffolding. Each major block/row in the grid is defined using the g-row class. Individual divisions inside a block/row are then defined using the g-span-* classes.

Grid horizontal classes

Cell width

The width of a cell in the grid is defined using the following classes:

Cell horizontal offset

If for some reason, a cell needs to be offset from its original horizontal position, you can use:

Convenience classes

Some additional classes have been added for easier structuring. They respectively allow to create cells that span 1/12, 1/6, 1/4, 1/3, 1/2, 2/3, 3/4, 5/6, 11/12 or the full width of a row:
g-span-1_12, g-span-1_6, g-span-1_4, g-span-1_3, g-span-1_2, g-span-2_3, g-span-3_4, g-span-5_6, g-span-11_12 and g-span-1_1.

The same has been done for the cell offset g-offset-….

There is also a g-fill-cell class to have an element take up all the cell space.

Grid vertical classes

Cell height

The height of a cell in the grid can be fixed using the following classes:

Cell vertical offset

If for some reason, a cell needs to be offset from its original vertical position, you can use:

Nested grids

Grids can easily be nested to offer infinite scaffolding possibilities.

Overwrite grid in tablet layout

All grid-span-… and grid-offset-… classes also exist in a grid-span-s-… and grid-offset-s-… version to overwrite the layout for tablets (s-layout).
See homepage-faculty.en.html and homepage-global.html for an example.

Fixed vs fluid layout

By default the width of the layout is constrained by the .site element, but it can be set to fluid by simply adding the site-fluid class to it.

Font size adjustments

By default, the grid will adapt to larger screens and increase the font-size for easier reading when the space allows it. This feature can be disabled by adding the site-no-sizeadjust class to the .site element.