The framework is based on a 12-columns grid for easier scaffolding.
Each major block/row in the grid is defined using the
Individual divisions inside a block/row are then defined using the
Grid horizontal classes
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:
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:
The same has been done for the cell offset
There is also a
g-fill-cell class to have an element take up all the cell space.
Grid vertical classes
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:
Grids can easily be nested to offer infinite scaffolding possibilities.
Overwrite grid in tablet layout
grid-offset-… classes also exist in a
grid-offset-s-… version to overwrite the layout for tablets (
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