[WIP] Spacing doc draft #103
Conversation
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/primer/design/epws2f2c7 |
docs/spacing.md
Outdated
|
|
||
| Icons | ||
|
|
||
| Inline spacing |
There was a problem hiding this comment.
Need examples for this type of adjustment
@ashygee can you think of an example where inline spacing is important?
Can we write down how we usually handle inset spacing? For example, is it usually the same vertically and horizontally? Or is vertical padding usually smaller than horizontal?
docs/spacing.md
Outdated
|
|
||
| ## Density | ||
|
|
||
| `[Examples: ]` |
There was a problem hiding this comment.
@vdepizzol can you think of one example of high density components (or areas of a page) and one of low density?
|
|
||
| You can define different spacing values for different breakpoints, so the interface can better adapt to the available space. | ||
|
|
||
| `[Example: component with larger margin around it in large screen, vs smaller margin in small screen]` |
There was a problem hiding this comment.
TODO: Find example component
There was a problem hiding this comment.
You could reference the general spacing of the entire page? Padding/margin around most pages reduces at smaller screen sizes. I can try to think of some other examples, too.
There was a problem hiding this comment.
thanks @colinkeany that's a good idea for now, do you know a page that would be better to use as an example? maybe something with not too much going on? 🤔
There was a problem hiding this comment.
The issues page might be a good option? https://github.com/issues
|
|
||
| In some cases, for very small components and in denser areas of the UI, you can use 4 pixels. | ||
|
|
||
| `[Example: text and icon button]` |
There was a problem hiding this comment.
TODO: image of text + icon button with redlines to indicate 4px space.
|
|
||
| In some cases, the spacing values inside components don't follow the values in the scale, but the total size of the component should always follow the scale. | ||
|
|
||
| `[Example: the padding inside a button may be 3px or 5px but the total height is 32px]` |
There was a problem hiding this comment.
TODO: add image of a component with irregular padding values where total height follows the scale.
There was a problem hiding this comment.
@ashygee use large button as example
|
|
||
| Elements that are close together are perceived as being related or part of the same group, while elements that are far apart from each other feel unrelated. | ||
|
|
||
| `[Examples: cancel, save buttons; repo top nav buttons]` |
There was a problem hiding this comment.
TODO: Find an example of together and distant
There was a problem hiding this comment.
We can use the header and indicate repo name / social buttons / tabs as 3 different groups.
|
|
||
| As a general rule, elements should align to other elements' outer box, and not try to align to the content within a box. | ||
|
|
||
| `[Example: text outside and above a table/list should align to the edge of the table (and not to the content within the rows]` |
There was a problem hiding this comment.
TODO: Add image of text above a list, and redline the alignment.
There was a problem hiding this comment.
Use packages page, example https://github.com/github/combobox-nav/packages/18808
|
|
||
| Do: Add more white space around components that are more important. | ||
|
|
||
| `[Examples: titles]` |
There was a problem hiding this comment.
TODO: Add image of page titles.
|
|
||
| Note: Editorial content can have more generous spacing. | ||
|
|
||
| `[Examples: first use cards, new features cards]` |
There was a problem hiding this comment.
TODO: example of editorial card.
There was a problem hiding this comment.
|
|
||
| Do: Apply the same spacing values to similar components. | ||
|
|
||
| `[Example: all items in the sidebar have the same vertical distance]` |
There was a problem hiding this comment.
TODO: redline vertical spacing between repo homepage sidebar elements.
|
|
||
| In some cases, optical adjustments may break from the scale. | ||
|
|
||
| `[Example: avatar on commits in repo landing page align optically with file icons below]` |
There was a problem hiding this comment.
TODO: image of avatar + file icons alignment with redlines to show how it breaks
|
|
||
| Small components usually have 8px between them. In some cases, for very small buttons, you can use 4px. | ||
|
|
||
| `[Example: buttons side by side, labels, icon+text]` |
There was a problem hiding this comment.
TODO: image of buttons side by side, and of icon+text button, redlines with values.
There was a problem hiding this comment.
Examples: side by side (separate) buttons it's 8px, and select field with save/delete button it's 4px (example in user settings)
|
|
||
| The most common value when stacking components vertically is 16px. | ||
|
|
||
| `[Example: issue header above first comment, sidebar, stacked boxes]` |
There was a problem hiding this comment.
TODO: Image of stacked boxes at the bottom of pull requests comments tab.
|
|
||
| Generally, Primer elements have "squished" padding, where the vertical padding is smaller than the horizontal padding. | ||
|
|
||
| `[Example: squished padding element, like a button.]` |
There was a problem hiding this comment.
TODO: Image of a representative squished element, ideally something else than a button so it's not always the same example. Ideas: a row, or tabs.
|
|
||
| Some screens and flows require a denser layout, with smaller elements and less space between components, depending on the type of action users most often take. In these cases, use the smaller values of the spacing scale. | ||
|
|
||
| `[Examples: high density screen, or part of screen]` |
There was a problem hiding this comment.
TODO: Find image of high density part of a screen with redlines of spacing
Initial draft for spacing guidelines.
Original Google Doc draft (behind SSO).
Closes #102