Grids
The standard FT grid system is designed to be flexible, responsive, and adaptable. It caters to a wide range of devices and screen sizes, ensuring consistency and harmony across all digital products.
This page covers the design and behaviour of grids. For technical details, please see the technical documentation in Storybook. Note that the previous version of Origami (o2) uses a different grid system, for this see o-grid. We recommend following the below design guidelines for any new projects.
Grid Anatomy
- Grid Columns
- Gutter
- Margin
Dimensions
| Breakpoint | Range (px) | columns | Gutter | Margin |
|---|---|---|---|---|
| XS | 320-489 | 4 | 16px | 16px |
| S | 490-739 | 4 | 16px | 16px |
| M | 740-979 | 8 | 16px | 24px |
| L | 980-1219 | 12 | 24px | 24px |
| XL | 1220+ | 12 | 24px | 24px – auto |
Baseline
We use a 4px baseline which the grid, spacing, and typography is based on.
Breakpoints
Our grid adapts to the following breakpoints to accommodate various screen sizes:
- Default (XS): 320px-489px. Default/smallest screen.
- Small (S): 490-739px. For larger mobile & small tablets.
- Medium (M): 740-979px. For tablets.
- Large (L): 980-1219px. For large tablets and small desktops.
- Extra Large (XL): 1220px and above. For desktop screens.
However, you could define custom settings to set specific page size/or view type to use a design outside it’s breakpoint. For instance, the landscape width of the iPad pro is 1366px, which falls within the XL breakpoint. You can set this to maintain the X breakpoint design instead by indicating to your engineer.
Columns
Column widths are fluid and change with the size of the grid.
Contained Width Behaviour
Our grid is fluid, it uses 100% of the screen’s width until the max width of 1220px is reached. After this, the margins grow to fill the screen. This allows for maximum use of screen real estate, in complex screens and readability of page content in large and high-definition screens.
Exceptions can be made for contents, e.g full-bleed banners and graphics, to break out of the contained grid.
Column Spanning
Layout regions can span any number of columns, separated by the grid gutter. You have the flexibility to set the number to reflect the responsive nature of your design.
Layout Responsiveness
Responsive layout design adapts content layout to various screen types using a fluid layout. This ensures that features built once will display evenly across all screen sizes.
Column Offset
Page content does not always need to span across 12 columns; it can occupy a smaller region of the page.
Chrome Extension for Grid Overlay
To aid in implementing and visualising the Origami grid system in your projects, we offer a Chrome extension that provides a customisable grid overlay for your web pages. This helps you understand how your website aligns to Origami’s grid system.
Key features:
- Enable/disable grid overlay with a single click
- Customize column, gutter, and margin colors
- Adjust grid opacity
- Quick reset to default settings
Install Origami Chrome Extension
Usage Guidelines
Use gutter width as a basis for vertical rhythm
Use the gutter width to help determine the space between layout regions. This space can be larger or smaller to help group regions hierarchically on the page.
Align irregular or fixed sized content using invisible regions
Sometimes content cannot align to the grid. For example, we do not always control the dimensions of an ad banner. In this scenario, imagine an invisible element around the content which does align to the grid. Ensure no other content overlaps this grid area.
