Styleguide FOR mind.org.uk

Layout

Overview

All pages on the Mind site are laid out using the same grid of columns and rows to provide harmony and consistency in the layouts, and therefore in people’s understanding and familiarity.

We have a defined horizontal grid and vertical spacing for content and UI elements to align to, creating a visual structure with content. This is used particularly in text-heavy pages - such as information pages - rather than over-reliance on colour blocks, boxes, and lines around content. It helps to reduce the number of elements a user needs to scan in order to digest what they see, making or a calmer experience.

We believe that the content should be the main focus, so we should work to reduce all unnecessary distractions.

 

Columns and Rows

The image above shows the different column layouts the grid allows for each row. Pages are constructed row by row using these column layouts.

Depending upon the nature of the content you are creating, you may choose one or several variations of layout when putting a page together. Always refer to previously approved page templates to see how column layouts are being used elsewhere on the site. It's better to replicate than to reinvent.

 

Screen sizes

The Mind site has been built to be responsive, so the pages render well on a variety of devices and screen sizes. This doesn't always work smoothly however, so sometimes the content and layouts need to be tweaked in order to work as intended. This is done using media queries and breakpoints.

A breakpoint is a boundary of screen width at which the layout should change to adapt to the screen size. There are a lot of screens and devices, all with different screen heights and widths, so it is hard to create an exact breakpoint for every device.

To keep things simple we target four common groups:

  • Desktop - screens equal to or greater than 1200px wide
  • Laptop - screens equal to or greater than 992px wide
  • Tablet - screens equal to or greater than 768px wide
  • Mobile - screens less than 768px wide