3 * Block grid based on Foundation 5.
5 * This is a modified version to be re-usable for divities, not only UL/OL list,
6 * as long as the list item has class "grid".
9 [class*="block-grid-"],
10 [class*="block-grid-"] * {
11 -webkit-box-sizing: border-box;
12 box-sizing: border-box;
15 [class*="block-grid-"],
16 .block [class*="block-grid-"],
17 .item-list > [class*="block-grid-"] {
24 [class*="block-grid-"]::before,
25 [class*="block-grid-"]::after {
30 [class*="block-grid-"]::after {
34 [class*="block-grid-"] > .grid {
40 padding: 0 0.625rem 1.25rem;
43 .block-grid--centered[class*="block-grid"],
44 .item-list > .block-grid--centered[class*="block-grid"] {
48 .block-grid--centered[class*="block-grid"] > .grid,
49 .item-list > .block-grid--centered[class*="block-grid"] > .grid {
51 display: inline-block;
57 .small-block-grid-1 > .grid {
61 .small-block-grid-2 > .grid {
65 .small-block-grid-3 > .grid {
69 .small-block-grid-4 > .grid {
73 .small-block-grid-5 > .grid {
77 .small-block-grid-6 > .grid {
81 .small-block-grid-7 > .grid {
85 .small-block-grid-8 > .grid {
89 .small-block-grid-9 > .grid {
93 .small-block-grid-10 > .grid {
97 .small-block-grid-11 > .grid {
101 .small-block-grid-12 > .grid {
105 .small-block-grid-1 > .grid:nth-of-type(1n),
106 .small-block-grid-2 > .grid:nth-of-type(1n),
107 .small-block-grid-3 > .grid:nth-of-type(1n),
108 .small-block-grid-4 > .grid:nth-of-type(1n),
109 .small-block-grid-5 > .grid:nth-of-type(1n),
110 .small-block-grid-6 > .grid:nth-of-type(1n),
111 .small-block-grid-8 > .grid:nth-of-type(1n),
112 .small-block-grid-7 > .grid:nth-of-type(1n),
113 .small-block-grid-9 > .grid:nth-of-type(1n),
114 .small-block-grid-10 > .grid:nth-of-type(1n),
115 .small-block-grid-11 > .grid:nth-of-type(1n),
116 .small-block-grid-12 > .grid:nth-of-type(1n) {
120 .small-block-grid-1 > .grid:nth-of-type(1n+1),
121 .small-block-grid-2 > .grid:nth-of-type(2n+1),
122 .small-block-grid-3 > .grid:nth-of-type(3n+1),
123 .small-block-grid-4 > .grid:nth-of-type(4n+1),
124 .small-block-grid-5 > .grid:nth-of-type(5n+1),
125 .small-block-grid-6 > .grid:nth-of-type(6n+1),
126 .small-block-grid-7 > .grid:nth-of-type(7n+1),
127 .small-block-grid-8 > .grid:nth-of-type(8n+1),
128 .small-block-grid-9 > .grid:nth-of-type(9n+1),
129 .small-block-grid-10 > .grid:nth-of-type(10n+1),
130 .small-block-grid-11 > .grid:nth-of-type(11n+1),
131 .small-block-grid-12 > .grid:nth-of-type(12n+1) {
136 /** 641px with 16px base font. */
137 @media only screen and (min-width: 40.063em) {
138 .medium-block-grid-1 > .grid {
142 .medium-block-grid-2 > .grid {
146 .medium-block-grid-3 > .grid {
150 .medium-block-grid-4 > .grid {
154 .medium-block-grid-5 > .grid {
158 .medium-block-grid-6 > .grid {
162 .medium-block-grid-7 > .grid {
166 .medium-block-grid-8 > .grid {
170 .medium-block-grid-9 > .grid {
174 .medium-block-grid-10 > .grid {
178 .medium-block-grid-11 > .grid {
182 .medium-block-grid-12 > .grid {
186 .medium-block-grid-1 > .grid:nth-of-type(1n),
187 .medium-block-grid-2 > .grid:nth-of-type(1n),
188 .medium-block-grid-3 > .grid:nth-of-type(1n),
189 .medium-block-grid-4 > .grid:nth-of-type(1n),
190 .medium-block-grid-5 > .grid:nth-of-type(1n),
191 .medium-block-grid-6 > .grid:nth-of-type(1n),
192 .medium-block-grid-7 > .grid:nth-of-type(1n),
193 .medium-block-grid-8 > .grid:nth-of-type(1n),
194 .medium-block-grid-9 > .grid:nth-of-type(1n),
195 .medium-block-grid-10 > .grid:nth-of-type(1n),
196 .medium-block-grid-11 > .grid:nth-of-type(1n),
197 .medium-block-grid-12 > .grid:nth-of-type(1n) {
201 .medium-block-grid-1 > .grid:nth-of-type(1n+1),
202 .medium-block-grid-2 > .grid:nth-of-type(2n+1),
203 .medium-block-grid-3 > .grid:nth-of-type(3n+1),
204 .medium-block-grid-4 > .grid:nth-of-type(4n+1),
205 .medium-block-grid-5 > .grid:nth-of-type(5n+1),
206 .medium-block-grid-6 > .grid:nth-of-type(6n+1),
207 .medium-block-grid-7 > .grid:nth-of-type(7n+1),
208 .medium-block-grid-8 > .grid:nth-of-type(8n+1),
209 .medium-block-grid-9 > .grid:nth-of-type(9n+1),
210 .medium-block-grid-10 > .grid:nth-of-type(10n+1),
211 .medium-block-grid-11 > .grid:nth-of-type(11n+1),
212 .medium-block-grid-12 > .grid:nth-of-type(12n+1) {
217 /** 1025px with 16px base font. */
218 @media only screen and (min-width: 64.063em) {
219 .large-block-grid-1 > .grid {
223 .large-block-grid-2 > .grid {
227 .large-block-grid-3 > .grid {
231 .large-block-grid-4 > .grid {
235 .large-block-grid-5 > .grid {
239 .large-block-grid-6 > .grid {
243 .large-block-grid-7 > .grid {
247 .large-block-grid-8 > .grid {
251 .large-block-grid-9 > .grid {
255 .large-block-grid-10 > .grid {
259 .large-block-grid-11 > .grid {
263 .large-block-grid-12 > .grid {
267 .large-block-grid-1 > .grid:nth-of-type(1n),
268 .large-block-grid-2 > .grid:nth-of-type(1n),
269 .large-block-grid-3 > .grid:nth-of-type(1n),
270 .large-block-grid-4 > .grid:nth-of-type(1n),
271 .large-block-grid-5 > .grid:nth-of-type(1n),
272 .large-block-grid-6 > .grid:nth-of-type(1n),
273 .large-block-grid-7 > .grid:nth-of-type(1n),
274 .large-block-grid-8 > .grid:nth-of-type(1n),
275 .large-block-grid-9 > .grid:nth-of-type(1n),
276 .large-block-grid-10 > .grid:nth-of-type(1n),
277 .large-block-grid-11 > .grid:nth-of-type(1n),
278 .large-block-grid-12 > .grid:nth-of-type(1n) {
282 .large-block-grid-1 > .grid:nth-of-type(1n+1),
283 .large-block-grid-2 > .grid:nth-of-type(2n+1),
284 .large-block-grid-3 > .grid:nth-of-type(3n+1),
285 .large-block-grid-4 > .grid:nth-of-type(4n+1),
286 .large-block-grid-5 > .grid:nth-of-type(5n+1),
287 .large-block-grid-6 > .grid:nth-of-type(6n+1),
288 .large-block-grid-7 > .grid:nth-of-type(7n+1),
289 .large-block-grid-8 > .grid:nth-of-type(8n+1),
290 .large-block-grid-9 > .grid:nth-of-type(9n+1),
291 .large-block-grid-10 > .grid:nth-of-type(10n+1),
292 .large-block-grid-11 > .grid:nth-of-type(11n+1),
293 .large-block-grid-12 > .grid:nth-of-type(12n+1) {