feat(ui-toolkit): update spacing guidelines

This commit is contained in:
Fábio Moreira 2018-05-14 16:50:00 +01:00 committed by Sérgio Ramos
parent f388e52549
commit 155a065281
13 changed files with 1144 additions and 14 deletions

View File

@ -1,13 +0,0 @@
### Baseline & Spacing
Most of the horizontal spacing between different elements and components is derived from 6 px. For example, the most common horizontal distance between elements of a component or components is 18 px. Another, less frequent, measurement is 12 px. The choice between 6, 12 or 18 px is based on visual and functional proximity of objects.
```jsx noeditor
const baseline = require('./baseline.svg');
<img style={{
maxWidth: '100%',
marginTop: 22,
marginBottom: 40
}} src={baseline} />
```

View File

@ -33,3 +33,17 @@ const small = require('./small.svg');
marginBottom: 40 marginBottom: 40
}} src={small} /> }} src={small} />
``` ```
### Baseline & Spacing
Most of the horizontal spacing between different elements and components is derived from 6 px. For example, the most common horizontal distance between elements of a component or components is 18 px. Another, less frequent, measurement is 12 px. The choice between 6, 12 or 18 px is based on visual and functional proximity of objects.
```jsx noeditor
const baseline = require('./baseline.svg');
<img style={{
maxWidth: '100%',
marginTop: 22,
marginBottom: 40
}} src={baseline} />
```

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 112 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 60 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 313 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 298 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 55 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 412 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 150 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 294 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 83 KiB

View File

@ -0,0 +1,121 @@
### Spacing
In order to mainitain visual consistency and to make building as painless as possible, Triton employs a series of pre-defined spacing values and a variety of ways to implement those values.
### Spacing values
When defining the space necessary between and within components, alway use one of these pre-defined values. By using only 5 preset values, we can minimize inconsistency and ensure meaningful use of whitespace.
```jsx noeditor
const spacing = require('./spacing.svg');
<img style={{
maxWidth: '100%',
marginTop: 22,
marginBottom: 40
}} src={spacing} />
```
### Stack - Vertical spacing
Stack, or the vertical spacing between elements, uses all of the values provided above and is the most common form of spacing used in Triton. Stack is used to seperate components from one another, but is not used for internal padding of cards.
```jsx noeditor
const stack = require('./stack.svg');
<img style={{
maxWidth: '100%',
marginTop: 22,
marginBottom: 40
}} src={stack} />
```
<h4>Stack example</h4>
```jsx noeditor
const stackExample = require('./stack-example.svg');
<img style={{
maxWidth: '100%',
marginTop: 22,
marginBottom: 40
}} src={stackExample} />
```
### Inline - Horizontal spacing
Inline, or the horizontal spacing between elements, is used to provide additional horizontal spacing when an element is not attached directly to the grid. Inline uses all the spacing values, except for the Giant size, as when inline gets to that size, designers should aim to attach components to the underlying grid instead of using spacing values.
```jsx noeditor
const inline = require('./inline.svg');
<img style={{
maxWidth: '100%',
marginTop: 22,
marginBottom: 40
}} src={inline} />
```
<h4>Inline example</h4>
```jsx noeditor
const inlineExample = require('./inline-example.svg');
<img style={{
maxWidth: '100%',
marginTop: 22,
marginBottom: 40
}} src={inlineExample} />
```
### Uniform Inset — Interior padding
Uniform Inset, or the equal padding on the interior of a component, takes the place of stack and inline when attempting to correctly space the contents of a card or component. Uniform inset adopts all but the Giant spacing value to avoid an overwhelming amount of white-space in the card designs.
```jsx noeditor
const inset = require('./inset.svg');
<img style={{
maxWidth: '100%',
marginTop: 22,
marginBottom: 40
}} src={inset} />
```
<h4>Uniform Inset example</h4>
```jsx noeditor
const insetExample = require('./inset-example.svg');
<img style={{
maxWidth: '100%',
marginTop: 22,
marginBottom: 40
}} src={insetExample} />
```
### Squish Inset — Irregular interior padding
Squish inset, or irregular interior padding, adopts similar patterns of use to the Uniform inset except has a different application of the spacing values. The Squish inset has less padding on the top and bottom compared to left and right.
```jsx noeditor
const squishInset = require('./squish-inset.svg');
<img style={{
maxWidth: '100%',
marginTop: 22,
marginBottom: 40
}} src={squishInset} />
```
<h4>Squish Inset example</h4>
```jsx noeditor
const squishInsetExample = require('./squish-inset-example.svg');
<img style={{
maxWidth: '100%',
marginTop: 22,
marginBottom: 40
}} src={squishInsetExample} />
```

View File

@ -60,7 +60,17 @@ module.exports = {
name: 'Grids', name: 'Grids',
content: 'src/grids/Readme.md', content: 'src/grids/Readme.md',
description: description:
'Tritons grid aims to have maximum coverage over a wide range of devices. With a maximum container width of 964px, we are able to display the main desktop experience all the way down to a tradional landscape tablet device.' 'Tritons grid aims to have maximum coverage over a wide range of devices. With a maximum container width of 964px, we are able to display the main desktop experience all the way down to a tradional landscape tablet device.',
sections: [
{
name: 'Horizontal',
content: 'src/grids/Readme.md'
},
{
name: 'Vertical',
content: 'src/grids/vertical.md'
}
]
}, },
{ {
name: 'Superscript', name: 'Superscript',