Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: Clarify spacious and compact values for Grid Space #1215

Merged
merged 4 commits into from
May 6, 2024
Merged

chore: Clarify spacious and compact values for Grid Space #1215

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d09cca5
Use the same screen widths to show spacious and compact grid space
VincentSmedinga Apr 19, 2024
853ca24
Add columns for consistent rhythm
VincentSmedinga Apr 25, 2024
ebda1a8
Remove large widths for Spacious again
VincentSmedinga Apr 25, 2024
9684e8e
Add 256-step widths for Compact for consistency
VincentSmedinga Apr 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
122 changes: 108 additions & 14 deletions storybook/src/docs/space.docs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,25 +22,119 @@ The tables below show the resulting pixel widths at some reference widths.

In Spacious Mode, the medium grid space grows from 16 to 56 pixels between window widths of 320 and 1600.

| | 320 | 576 | 1088 | 1600 |
| --------------: | :----: | :----: | :----: | :----: |
| **Extra small** | 4 | 6 | 10 | 14 |
| **Small** | 8 | 12 | 20 | 28 |
| **Medium** | **16** | **24** | **40** | **56** |
| **Large** | 24 | 36 | 60 | 84 |
| **Extra large** | 32 | 48 | 80 | 102 |
| | 320 | 576 | 832 | 1088 | 1344 | 1600 |
| --------------: | :----: | :----: | :----: | :----: | :----: | :----: |
| **Extra small** | 4 | 6 | 8 | 10 | 12 | 14 |
| **Small** | 8 | 12 | 16 | 20 | 24 | 28 |
| **Medium** | **16** | **24** | **32** | **40** | **48** | **56** |
| **Large** | 24 | 36 | 48 | 60 | 72 | 84 |
| **Extra large** | 32 | 48 | 64 | 80 | 96 | 102 |

#### Compact

In Compact Mode, the medium grid space grows from 16 to 40 pixels between window widths of 1088 and 2624.

| | 1088 | 1600 | 2112 | 2624 |
| --------------: | -----: | -----: | -----: | -----: |
| **Extra small** | 4 | 6 | 8 | 10 |
| **Small** | 8 | 12 | 16 | 20 |
| **Medium** | **16** | **24** | **32** | **40** |
| **Large** | 24 | 36 | 48 | 60 |
| **Extra large** | 32 | 48 | 64 | 80 |
<table>
<thead>
<tr>
<th style={{ textAlign: "right" }}></th>
<th style={{ textAlign: "center" }}>320</th>
<th style={{ textAlign: "center" }}>576</th>
<th style={{ textAlign: "center" }}>832</th>
<th style={{ textAlign: "center" }}>1088</th>
<th style={{ textAlign: "center" }}>1344</th>
<th style={{ textAlign: "center" }}>1600</th>
<th style={{ textAlign: "center" }}>1856</th>
<th style={{ textAlign: "center" }}>2112</th>
<th style={{ textAlign: "center" }}>2368</th>
<th style={{ textAlign: "center" }}>2624</th>
</tr>
</thead>
<tbody>
<tr>
<td style={{ textAlign: "right" }}>
<strong>Extra small</strong>
</td>
<td colspan={4} style={{ textAlign: "center" }}>
4
</td>
<td style={{ textAlign: "center" }}>5</td>
<td style={{ textAlign: "center" }}>6</td>
<td style={{ textAlign: "center" }}>7</td>
<td style={{ textAlign: "center" }}>8</td>
<td style={{ textAlign: "center" }}>9</td>
<td style={{ textAlign: "center" }}>10</td>
</tr>
<tr>
<td style={{ textAlign: "right" }}>
<strong>Small</strong>
</td>
<td colspan={4} style={{ textAlign: "center" }}>
8
</td>
<td style={{ textAlign: "center" }}>10</td>
<td style={{ textAlign: "center" }}>12</td>
<td style={{ textAlign: "center" }}>14</td>
<td style={{ textAlign: "center" }}>16</td>
<td style={{ textAlign: "center" }}>18</td>
<td style={{ textAlign: "center" }}>20</td>
</tr>
<tr>
<td style={{ textAlign: "right" }}>
<strong>Medium</strong>
</td>
<td colspan={4} style={{ textAlign: "center" }}>
<strong>16</strong>
</td>
<td style={{ textAlign: "center" }}>
<strong>20</strong>
</td>
<td style={{ textAlign: "center" }}>
<strong>24</strong>
</td>
<td style={{ textAlign: "center" }}>
<strong>28</strong>
</td>
<td style={{ textAlign: "center" }}>
<strong>32</strong>
</td>
<td style={{ textAlign: "center" }}>
<strong>36</strong>
</td>
<td style={{ textAlign: "center" }}>
<strong>40</strong>
</td>
</tr>
<tr>
<td style={{ textAlign: "right" }}>
<strong>Large</strong>
</td>
<td colspan={4} style={{ textAlign: "center" }}>
24
</td>
<td style={{ textAlign: "center" }}>30</td>
<td style={{ textAlign: "center" }}>36</td>
<td style={{ textAlign: "center" }}>42</td>
<td style={{ textAlign: "center" }}>48</td>
<td style={{ textAlign: "center" }}>54</td>
<td style={{ textAlign: "center" }}>60</td>
</tr>
<tr>
<td style={{ textAlign: "right" }}>
<strong>Extra large</strong>
</td>
<td colspan={4} style={{ textAlign: "center" }}>
32
</td>
<td style={{ textAlign: "center" }}>40</td>
<td style={{ textAlign: "center" }}>48</td>
<td style={{ textAlign: "center" }}>56</td>
<td style={{ textAlign: "center" }}>64</td>
<td style={{ textAlign: "center" }}>72</td>
<td style={{ textAlign: "center" }}>80</td>
</tr>
</tbody>
</table>

## Stack Space

Expand Down
Loading