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.
For simple 2/3/4 column layouts we provide utility classes.
- For columns to apply only on screens larger than 500px, use the
- For columns to apply only on screens larger than 720px, use the
- For columns to apply only on screens larger than 1000px, use the
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.
To make use of our spacing scale for
grid-gap, we have utility classes that make use of the same
.gg-u-@l:col-gap-large will apply a small gap for any screen larger than 1000px.