Skip to content

Commit

Permalink
Use column amounts to refer to grid variants
Browse files Browse the repository at this point in the history
  • Loading branch information
@VincentSmedinga
VincentSmedinga committed Feb 21, 2024
1 parent 51a2772 commit 918fe7f
Showing 1 changed file with 12 additions and 14 deletions.
26 changes: 12 additions & 14 deletions storybook/storybook-docs/src/grid.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,6 @@ In windows up to 576 pixels wide, the grid has 4 columns.
Up to a width of 1088 pixels, it has 8 columns.
At that point and beyond, it has 12 columns.

We refer to these three variants as the narrow, medium, and wide grid.

The breakpoints are based on steps of 256 pixels, starting with a base of 64 pixels.
So, 576 = 64 + 2 × 256 and 1088 = 64 + 4 × 256.

Expand Down Expand Up @@ -82,7 +80,7 @@ No elements are placed over these margins.
In the wide grid, applications have a vertical menu bar on the left side.
This is next to the grid, not inside, and has a fixed width of 112 pixels.

The menu is placed horizontally below the header in the medium and narrow grids.
The menu is placed horizontally below the header in the 4- and 8-column grids.
In this context, the grid takes up the entire width of the window.

### Maximum width
Expand All @@ -96,7 +94,7 @@ The grid has this width in windows of at least 1600 pixels wide – the margins
Applications often use the entire width of the window.

There is no explicit minimum width.
Even in windows narrower than 320 pixels, to the extent that they occur in practice,
Even in windows narrower than 320 pixels, as far as they occur in practice,
the grid continues to scale to the available width.
For convenience, the width of 320 plays a role in the documentation.

Expand All @@ -111,19 +109,19 @@ Again, between these widths, the widths grow continuously.

#### Spacious

| Breakpoint | From window width | Number of columns | Column width | Gap width | Margin width | Grid width |
| :--------- | ----------------: | ----------------: | -----------: | --------: | -----------: | ---------: |
| narrow | 320 | 4 | 56 | 16 | 24 | 272 |
| medium | 576 | 8 | 42 | 24 | 36 | 504 |
| wide | 1088 | 12 | 44 | 40 | 60 | 968 |
| Grid | Window width | Number of columns | Column width | White space width | Margin width | Grid width |
| :--------- | -----------: | ----------------: | -----------: | ----------------: | -----------: | ---------: |
| 4 columns | 320 | 4 | 56 | 16 | 24 | 272 |
| 8 columns | 576 | 8 | 42 | 24 | 36 | 504 |
| 12 columns | 1088 | 12 | 44 | 40 | 60 | 968 |

#### Compact

| Breakpoint | From window width | Number of columns | Menu bar width | Column width | Gap width | Margin width | Grid width |
| :--------- | ----------------: | ----------------: | -------------: | -----------: | --------: | -----------: | ---------: |
| narrow | 320 | 4 | 0 | 60 | 16 | 16 | 288 |
| medium | 576 | 8 | 0 | 54 | 16 | 16 | 544 |
| wide | 1088 | 12 | 112 | 64 | 16 | 16 | 944 |
| Grid | Window width | Number of columns | Menu bar width | Column width | White space width | Margin width | Grid width |
| :--------- | -----------: | ----------------: | -------------: | -----------: | ----------------: | -----------: | ---------: |
| 4 columns | 320 | 4 | 0 | 60 | 16 | 16 | 288 |
| 8 columns | 576 | 8 | 0 | 54 | 16 | 16 | 544 |
| 12 columns | 1088 | 12 | 112 | 64 | 16 | 16 | 944 |

### Not tied to devices

Expand Down

0 comments on commit 918fe7f

Please sign in to comment.