Wellcome Web Components

Grid

This document defines the Wellcome Web Grid, as implemented in grid.scss.

Table of Contents

Columns

A $column is the atomic unit of horizontal layout. It consists of three measures:

  • Inner width ($column-inner-width): 25px
  • Padding ($column-padding): 13px
  • Spacing ($column-spacing): 25px

We calculate the column width as follows: $column: $column-spacing + $column-padding * 2 + $column-inner-width

The full column is therefore 76px wide

Breakpoints

  • Small phone ($grid-breakpoint-xs): 500px
  • Large phone / small tablet ($grid-breakpoint-s): 768px
  • Large tablet ($grid-breakpoint-m): 1024px
  • Small laptop ($grid-breakpoint-ml): 1200px
  • Large laptop ($grid-breakpoint-l): 1280px
  • Large screen ($grid-breakpoint-xl): 1440px

Grid width

This is the width of any wt-grid-main wrapper, which always spans full grid width.

There is also a wt-grid-full class which always spans 100% of its container’s width. A common pattern is to use a main wrapped in a full, so that a background can be applied to the whole page width while limiting the layout to the grid width.

Each of the following values corresponds to its respective breakpoint.

  • Small phone ($grid-width-xs): 100% - 20px padding
  • Large phone / small tablet ($grid-width-s): 100% - 20px padding
  • Large tablet ($grid-width-m): 890px - 12 columns (minus spacing)
  • Small laptop ($grid-width-ml): 1200px - 16 columns (minus spacing)
  • Large laptop ($grid-width-l): 1200px - 16 columns (minus spacing)
  • Large screen ($grid-width-xl): 1353px - 18 columns (minus spacing)

Content containers

The Grid uses a three-container layout to display content. The containers change width and display in different ways at different breakpoints. The width of the container is always bound to the wt-grid-<container_name> class, while the positioning is bound to wt-grid-section-<container_name>. This is because we often use

Center container - wt-grid-center

This container should be used for main page content and is optimized for text readability.

  • <=s: 100% - 20px padding
  • m: 531px
  • >=l: 586px - 8 columns (minus spacing)

Left container - wt-grid-left

This container is for breadcrumbs, navigation elements or context cues. It must not be used to display sentences or image content.

  • <=s: 100% - 20px padding
  • m: 586px - 8 columns (minus spacing)
  • >=l: 127px - 2 columns (minus spacing)

Right container - wt-grid-right

This container can be used for promos, navigation links and auxiliary images/text. It should not surpass the height of the center container (although the site can deal with such a situation).

  • <=s: 100% - 20px paddinh
  • m, l: 281px
  • >=xl: 302px

Typesetting

This set of values is used for establishing the vertical rhythm of the page. They are mostly derived from the horizontal atomic columns. They should be used for paragraph spacings, container paddings, fixed margins and vertical offsets. There are separate measurements for font sizes and line heights.

Other values may be composed by adding these values, but ideally not subtracting.

  • $grid-typo-spacing-xxl: 127px
  • $grid-typo-spacing-xl: 76px
  • $grid-typo-spacing-l: 51px
  • $grid-typo-spacing-m: 31px
  • $grid-typo-spacing-s: 25px
  • $grid-typo-spacing-xs: 20px
  • $grid-typo-spacing-xxs: 10px
  • $grid-typo-spacing-xxxs: 5px