Skip to content

Commit

Permalink
docs: move grid under guidelines
Browse files Browse the repository at this point in the history 
It is a design foundation, not a component
  • Loading branch information
@notlee
notlee committed Jun 12, 2024
1 parent 00bf1bb commit 36a3f4f
Showing 1 changed file with 64 additions and 60 deletions.
124 changes: 64 additions & 60 deletions ...site/src/content/docs/components/grid.mdx → ...-website/src/content/docs/guides/grid.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
---
title: Grid
description: grids
title: Grids
description: Grid guidelines.
sidebar:
order: 3
---

import {default as Guideline} from '../../../components/Guideline.astro';

The standard FT grid system is designed to be flexible, responsive, and adaptable, catering to a wide range of devices and screen sizes, ensuring consistency and harmony across all digital products.
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.

## Grid Anatomy

Expand All @@ -18,64 +21,66 @@ The standard FT grid system is designed to be flexible, responsive, and adaptabl

<table>
<thead>
<tr>
<th>Breakpoint</th>
<th>Range (px)</th>
<th>columns</th>
<th>Gutter</th>
<th>Margin</th>
</tr>
<tr>
<th>Breakpoint</th>
<th>Range (px)</th>
<th>columns</th>
<th>Gutter</th>
<th>Margin</th>
</tr>
</thead>
<tbody>
<tr>
<td>XS</td>
<td>320-489</td>
<td>4</td>
<td>16px</td>
<td>16px</td>
</tr>
<tr>
<td>S</td>
<td>490-739</td>
<td>4</td>
<td>16px</td>
<td>16px</td>
</tr>
<tr>
<td>M</td>
<td>740-979</td>
<td>8</td>
<td>16px</td>
<td>24px</td>
</tr>
<tr>
<td>L</td>
<td>980-1219</td>
<td>12</td>
<td>24px</td>
<td>24px</td>
</tr>
<tr>
<td>XL</td>
<td>1220+</td>
<td>12</td>
<td>24px</td>
<td>24px – auto</td>
</tr>
<tr>
<td>XS</td>
<td>320-489</td>
<td>4</td>
<td>16px</td>
<td>16px</td>
</tr>
<tr>
<td>S</td>
<td>490-739</td>
<td>4</td>
<td>16px</td>
<td>16px</td>
</tr>
<tr>
<td>M</td>
<td>740-979</td>
<td>8</td>
<td>16px</td>
<td>24px</td>
</tr>
<tr>
<td>L</td>
<td>980-1219</td>
<td>12</td>
<td>24px</td>
<td>24px</td>
</tr>
<tr>
<td>XL</td>
<td>1220+</td>
<td>12</td>
<td>24px</td>
<td>24px – auto</td>
</tr>
</tbody>
</table>

### Breakpoints
### Baseline

We use a 4px baseline which the grid, spacing, and typography is based on.

Our grid adapts to the following breakpoints to accommodate various screen sizes:
### Breakpoints

* **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.
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.

Expand All @@ -85,10 +90,6 @@ However, you could define custom settings to set specific page size/or view type

Column widths are fluid and change with the size of the grid.

### Baseline Grid

We have a 4px baseline which the grid, spacing, and typography is based on.

## 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.
Expand Down Expand Up @@ -119,14 +120,17 @@ Page content does not always need to span across 12 columns; it can occupy a sma

<Guideline summary="Content Layout regions" do={true}>
<p slot="description">
![](/assets/images/components/grid/usage-best-practise.svg)
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.
![](/assets/images/components/grid/usage-best-practise.svg) 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.
</p>
</Guideline>

<Guideline summary="Aligning content to grid" do={true}>
<p slot="description">
Sometimes content cannot align to the grid. For example, we do not always control the dimentions 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.
Sometimes content cannot align to the grid. For example, we do not always
control the dimentions 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.
</p>
</Guideline>

0 comments on commit 36a3f4f

Please sign in to comment.