UNPKG

eight.css

Version:

A micro (and modular) CSS framework based on 8pt grid

github.com/zuck/eight.css

zuck/eight.css

144 lines (105 loc) • 2.39 kB
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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
@require 'eight.theme' @require 'eight.mixins' /* Mixins */ makeStackable() flex-flow column wrap &.reverse flex-direction column-reverse > .col flex-basis 100% max-width 100% /* Rules */ html min-width 320px body overflow-x hidden .container box-sizing border-box max-width 100% margin 0 auto padding 0 $container-gutter @media screen and (min-width: $md) width $sm @media screen and (min-width: $lg) width $md @media screen and (min-width: $xl) width $lg &.sm @media screen and (min-width: $md) max-width $sm &.md @media screen and (min-width: $lg) max-width $md .row, .col display flex flex 1 box-sizing border-box .row flex-wrap wrap margin-left - $grid-col-gutter * 1 margin-right - $grid-col-gutter * 1 .col flex-direction column padding-left $grid-col-gutter * 1 padding-right $grid-col-gutter * 1 max-width 100% &.twelfth flex-basis 8.333333333% max-width 8.333333333% &.tenth flex-basis 10% max-width 10% &.eighth flex-basis 12.5% max-width 12.5% &.sixth flex-basis 16.666666667% max-width 16.666666667% &.fifth flex-basis 20% max-width 20% &.fourth flex-basis 25% max-width 25% &.third flex-basis 33.33% max-width 33.33% &.half flex-basis 50% max-width 50% &.golden flex-basis 61.803398875% max-width 61.803398875% &.compact margin-left - $grid-col-gutter * 0 margin-right - $grid-col-gutter * 0 .col padding-left $grid-col-gutter * 0 padding-right $grid-col-gutter * 0 &.tiny margin-left - $grid-col-gutter * .5 margin-right - $grid-col-gutter * .5 .col padding-left $grid-col-gutter * .5 padding-right $grid-col-gutter * .5 &.expanded margin-left - $grid-col-gutter * 2 margin-right - $grid-col-gutter * 2 .col padding-left $grid-col-gutter * 2 padding-right $grid-col-gutter * 2 &.reverse flex-direction row-reverse &.stackable @media screen and (max-width: $xs) makeStackable() &.sm @media screen and (max-width: $sm) makeStackable() &.md @media screen and (max-width: $md) makeStackable() &.lg @media screen and (max-width: $lg) makeStackable()