Structure

The basic grid

Lens is built on the Foundation grid.

We are currently using Foundation version 6.3.1.

Lens page layouts combine elements of the Foundation grid and our own custom flexbox-based styles.

Core breakpoints

  • Large (1025px and up) — Desktop/laptop computers
  • Medium (641px to 1024px) — Tablet devices and larger 'mobile' devices
  • Small (0 to 640px) — Mobile devices

Grid examples

THE GRID STRUCTURE

Our default grid consists of 24 columns separated with fixed gutters 18px wide.

SINGLE ITEM (OFF GRID)

We use the Foundation grid to scaffold the main page structure. Content items are layered on top of the grid along a central ‘spine’.

THREE-UP (OFF GRID)

A row containing either 1, 2 or 3 items in a line.