Description

The page grid principle is based on splitting the content into a 1:7:1 grid (1:5:1 for screens widths of 1920px and above) by setting left and right margin to a floating column which holds the content. The margins are dependent on the "width" of the column itself following the golden ratio proportions (more here: dependencies/grid).

To ensure an element follows the 'page' grid, an utility class needs to be added (see below). If an element needs to fill the screen, that means it needs to break out of the grid, therefore the class is not needed.

The utility class makes use of the golden-ratio-padding mixin. The mixin is called with 3 parameters, first one representing the column width proportion related to the full width, next two setting the left, respectively the right margin (as proportions).

For the 'page' grid purposes these parameters are set to (7,1,1) for all screen widths up to 1920px and then (5,1,1) above this breakpoint.

If you don't want to apply the 1:7:1 grid on smaller screens, use .u-page-grid-responsive instead.