Grid examples

Grid example 1

This 3 column layout stacks on xs* (each column takes up full width) but on the other breakpoints it adapts to different widths.

Grid example 2

This 3 column layout stacks on xs* (each column takes up full width) but on the other breakpoints it adapts to different widths.

Grid example 3

Columns can be nested inside columns to achieve greater complexity and structure the page. In effect, each column can be sub-divided into further 12 columns. The nested columns align to their own 12 col grid based on the width of the parent column.

Grid example 4

If a pull-right class is added to the first column it will be the top most column when stacked but displays at the far right on larger views. On xs the source order is honoured.

Grid example 5

Columns can be offset to create empty space.

User experience

The grid is the core ingredient for developing consistent, robust, responsive applications. It’s designed to work seamlessly on the ever-increasing plethora of screen sizes and resolutions.

All projects should be designed and built using the 12 column grid. Responsive content, ie the same content re-organised to be usable on all screen sizes, is important for user engagement. Having a consistent experience across all devices, being able to start a process on one device and complete it on another with consistent and reliable content keeps users confident, engaged and builds trust.

Visual design

The grid uses a 12 column structure. 12 is a versatile composite number not least because it has 6 divisors - 1, 2, 3, 4 and 6. This versatility offers designers much more flexibility for layout options which is particularly useful when designing responsive applications. Predefined margins and breakpoints have been implemented and are available in the templates. A maximum width has also been created to avoid line widths becoming too wide on large, high definition monitors. This also enables us to create smaller hero images which increases download speeds and reduces bandwidth.

Responsive margins / Spacing system

For various reasons the Design System does not currently use a baseline grid for vertical spacing. Instead it uses a responsive vertical spacing system that uses tokens which offer a series of pre-defined values. This system is more flexible than a baseline grid as it can be applied to a much wider variety of contents from small components to long-form editorial. The spacing system is based on units of 6px. This reflects the 12 column grid system and all the predefined sizes used in GEL elements such as buttons, form inputs etc. From a visual design perspective, using these values will inherently create a consistent scale and rhythm across all our digital touch points which will, in turn, provide a more consistent customer journey. This system is also extremely useful in the design hand over and build phase. For example; If the spacing in a design is slightly off the developer will know instantly that this is an error and he or she will round to nearest unit of 6px. This self policing system will help to maintain consistency of our applications.

Dos and don’ts

• Do use the grid for all your applications (responsive or not).
• Avoid changing the styles in the grid (columns, widths, margins etc).