Layout and grids

Keeping our content tidy and organised.

Readable body text

The max-width for page content on giffgaff.com is 1140px, which can be used with the class .gg-o-page-section. This is too wide for paragraph text to be readable.

You can keep text at a readable width either by splitting the page into multiple columns or by using the class .gg-o-page-section--readable-width which will constrain it to a maximum width of 680px.

Grids

For simple 2/3/4 column layouts we provide utility classes.

• For columns to apply only on screens larger than 500px, use the gg-u-@s: prefix.
• For columns to apply only on screens larger than 720px, use the gg-u-@m: prefix.
• For columns to apply only on screens larger than 1000px, use the gg-u-@l: prefix.

e.g.: Applying the classes.gg-u-grid .gg-u-@m:grid--3-col will create three columns, but only for screens larger than 720px.

Classes without an @ prefix will apply to all screen sizes.

For more custom and boutique layouts you may still need to write your own CSS.

Grid gap

To make use of our spacing scale for grid-gap, we have utility classes that make use of the same @ prefix.

e.g. .gg-u-@l:col-gap-large will apply a small gap for any screen larger than 1000px.