-
Notifications
You must be signed in to change notification settings - Fork 30
/
grid.css
118 lines (97 loc) · 2.48 KB
/
grid.css
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
/** @define Grid; use strict */
:root {
--Grid-font-size: 1rem;
--Grid-gutter-size: 20px;
}
/**
* Core grid component
*
* DO NOT apply dimension or offset utilities to the `Grid` element. All cell
* widths and offsets should be applied to child grid cells.
*/
/* Grid container
========================================================================== */
/**
* All content must be contained within child `Grid-cell` elements.
*
* 1. Account for browser defaults of elements that might be the root node of
* the component.
* 2. Remove inter-cell whitespace that appears between `inline-block` child
* elements.
* 3. Ensure consistent default alignment.
*/
.Grid {
display: block; /* 1 */
font-size: 0; /* 2 */
margin: 0; /* 1 */
padding: 0; /* 1 */
text-align: left; /* 3 */
}
/**
* Modifier: center align all grid cells
*/
.Grid--alignCenter {
text-align: center;
}
/**
* Modifier: right align all grid cells
*/
.Grid--alignRight {
text-align: right;
}
/**
* Modifier: middle-align grid cells
*/
.Grid--alignMiddle > .Grid-cell {
vertical-align: middle;
}
/**
* Modifier: bottom-align grid cells
*/
.Grid--alignBottom > .Grid-cell {
vertical-align: bottom;
}
/**
* Modifier: gutters
*
* NOTE: this can trigger a horizontal scrollbar if the component is as wide as
* the viewport. Use padding on a container, or `overflow-x:hidden` to protect
* against it.
*/
.Grid--withGutter {
margin: 0 calc(-0.5 * var(--Grid-gutter-size));
}
.Grid--withGutter > .Grid-cell {
padding: 0 calc(0.5 * var(--Grid-gutter-size));
}
/* Grid cell
========================================================================== */
/**
* No explicit width by default. Rely on combining `Grid-cell` with a dimension
* utility or a component class that extends 'grid'.
*
* 1. Fundamentals of the non-float grid layout.
* 2. Reset font size change made in `Grid`.
* 3. Keeps content correctly aligned with the grid direction.
* 4. Controls vertical positioning of units.
* 5. Make cells full-width by default.
*/
.Grid-cell {
box-sizing: border-box;
display: inline-block; /* 1 */
font-size: var(--Grid-font-size); /* 2 */
margin: 0;
padding: 0;
text-align: left; /* 3 */
vertical-align: top; /* 4 */
width: 100%; /* 5 */
}
/**
* Modifier: horizontally center one unit
* Set a specific unit to be horizontally centered. Doesn't affect
* any other units. Can still contain a child `Grid` object.
*/
.Grid-cell--center {
display: block;
margin: 0 auto;
}