1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
/**
* NOTE TO DEVS:
*
* Spacing should be consistent and whitespace thought of as a first class technique up
* there with color and typefaces.
*
* Which type of scale you use is based on the design.
*
* If you've got simpler app, you may only need 6 items. Or maybe you want a spacing scale
* to be named:
*
* export const spacing = {
* tiny: 4,
* small: 8,
* medium: 12,
* large: 24,
* huge: 64
* }
*
* Whatever you choose, try to stick with these, and not freestyle it everywhere.
*
* Feel free to delete this block.
*/
/**
* The available spacing.
*
* Here's the rough guideline. Customize this for you usage. It's ok to put exceptions
* within the components themselves if they are truly exceptions.
*
* 0 = none - nothing. only here to bust out of a zero-based array.
* 1 = tiny - elements contextually close to each other
* 2 = smaller - for groups of closely related items or perhaps borders
* 3 = small - ?
* 4 = medium - ?
* 5 = medium+ - ?
* 6 = large - between groups of content that aren't related?
* 7 = huge - ?
* 8 = massive - an uncomfortable amount of whitespace
*/
export const spacing = [0, 4, 8, 12, 16, 24, 32, 48, 64]
|
