1 | <!DOCTYPE html>
|
2 | <html dir="ltr" lang="en" class="no-js">
|
3 | <head>
|
4 | <meta charset="UTF-8">
|
5 | <meta name="viewport" content="width=device-width">
|
6 |
|
7 | <title>AREA 17</title>
|
8 |
|
9 |
|
10 | <script type="module">
|
11 | (function(d) {
|
12 | var de = d.documentElement,
|
13 | db = d.body;
|
14 | de.classList.remove('no-js');
|
15 | de.classList.add('js');
|
16 |
|
17 | fetch('/dist/icons/icons.svg').then(function (response) {
|
18 | return response.text();
|
19 | }).then(function (html) {
|
20 | const s = d.createElement('div');
|
21 | s.className = 'svg-sprite';
|
22 | s.innerHTML = html;
|
23 | db.insertBefore(s, db.childNodes[0]);
|
24 | });
|
25 | window.A17 = {};
|
26 | })(document);
|
27 | </script>
|
28 |
|
29 |
|
30 | <link href="/dist/style.css" rel="stylesheet" />
|
31 |
|
32 |
|
33 | <link rel="icon" href="/dist/images/favicons/favicon.ico">
|
34 | <link rel="icon" href="/dist/images/favicons/favicon.svg" type="image/svg+xml">
|
35 | <link rel="apple-touch-icon" href="/dist/images/favicons/apple-touch-icon.png">
|
36 | <link rel="manifest" href="/dist/images/site.webmanifest">
|
37 |
|
38 |
|
39 | <meta property="og:title" content="AREA 17" />
|
40 | <meta name="twitter:title" content="AREA 17" />
|
41 | <meta itemprop="name" content="AREA 17">
|
42 |
|
43 | <meta name="description" content="AREA 17 is a digital product agency with studios in Paris and New York. We plan, create and grow digital products for clients of all sizes.">
|
44 | <meta property="og:description" content="AREA 17 is a digital product agency with studios in Paris and New York. We plan, create and grow digital products for clients of all sizes." />
|
45 | <meta name="twitter:description" content="AREA 17 is a digital product agency with studios in Paris and New York. We plan, create and grow digital products for clients of all sizes." />
|
46 | <meta itemprop="description" content="AREA 17 is a digital product agency with studios in Paris and New York. We plan, create and grow digital products for clients of all sizes.">
|
47 |
|
48 | <meta property="og:url" content="https://www.area17.com/" />
|
49 | <link rel="canonical" href="https://www.area17.com/" />
|
50 | <meta name="twitter:url" content="https://www.area17.com/" />
|
51 |
|
52 | <meta property="og:image" content="https://area17.imgix.net/e66bf921-d741-4350-a2ea-733fcb940e38/A17_social.png?auto=compress%2Cformat&fit=min&fm=jpg&q=80&rect=275%2C0%2C630%2C630" />
|
53 | <meta property="og:image:width" content="900" />
|
54 | <meta property="og:image:height" content="470" />
|
55 | <meta name="twitter:image" content="https://area17.imgix.net/e66bf921-d741-4350-a2ea-733fcb940e38/A17_social.png?auto=compress%2Cformat&fit=min&fm=jpg&q=80&rect=275%2C0%2C630%2C630">
|
56 | <meta itemprop="image" content="https://area17.imgix.net/e66bf921-d741-4350-a2ea-733fcb940e38/A17_social.png?auto=compress%2Cformat&fit=min&fm=jpg&q=80&rect=275%2C0%2C630%2C630">
|
57 |
|
58 | <meta name="copyright" content="2020 AREA 17, LLC" />
|
59 |
|
60 | <meta property="og:type" content="website" />
|
61 | <meta property="og:site_name" content="AREA 17" />
|
62 | <meta property="og:author" content="https://www.facebook.com/area17" />
|
63 |
|
64 | <meta name="twitter:card" content="summary_large_image" />
|
65 | <meta name="twitter:site" content="@opticalcortex" />
|
66 | <meta name="twitter:domain" content="area17.com" />
|
67 | <meta name="twitter:creator" content="@opticalcortex" />
|
68 |
|
69 |
|
70 | <meta name="theme-color" content="#000">
|
71 | </head>
|
72 |
|
73 | <body>
|
74 | <div id="a17" data-dummybehavior-a17>
|
75 |
|
76 | <style>
|
77 |
|
78 | .grid-demo .col,
|
79 | .grid-demo [class*=col-],
|
80 | .colspan-demo [class*=colspan-] {
|
81 | position: relative;
|
82 | min-height: 30px;
|
83 | background: #ccc;
|
84 | }
|
85 | .grid-demo .col::before,
|
86 | .grid-demo [class*=col-]::before,
|
87 | .colspan-demo [class*=colspan-]::before {
|
88 | content: attr(class);
|
89 | position: absolute;
|
90 | left: 0;
|
91 | top: 0;
|
92 | padding: 0 5px;
|
93 | font: 12px/30px monospace;
|
94 | white-space: nowrap;
|
95 | }
|
96 | .grid-demo .col .grid-demo .col,
|
97 | .grid-demo .col [class*=colspan-],
|
98 | .grid-demo .col .grid-demo [class*=col-],
|
99 | .grid-demo [class*=col-] [class*=colspan-],
|
100 | .grid-demo .col .colspan-demo [class*=colspan-],
|
101 | .colspan-demo [class*=colspan-] [class*=colspan-],
|
102 | .grid-demo [class*=col-] .grid-demo .col,
|
103 | .grid-demo [class*=col-] .grid-demo [class*=col-],
|
104 | .grid-demo [class*=col-] .colspan-demo [class*=colspan-],
|
105 | .colspan-demo [class*=colspan-] .grid-demo .col,
|
106 | .colspan-demo [class*=colspan-] .grid-demo [class*=col-],
|
107 | .colspan-demo [class*=colspan-] .colspan-demo [class*=colspan-] {
|
108 | background: #f2f2f2;
|
109 | }
|
110 | .grid-demo .col + [class*=colspan-]:not([class*=col-]),
|
111 | .grid-demo [class*=col-] + [class*=colspan-]:not([class*=col-]),
|
112 | .colspan-demo [class*=colspan-] + [class*=colspan-]:not([class*=col-]) {
|
113 | margin-top: 30px;
|
114 | }
|
115 | .grid-demo .col .grid-demo .col .grid-demo .col,
|
116 | .grid-demo .col .grid-demo .col .grid-demo [class*=col-],
|
117 | .grid-demo .col .grid-demo .col .colspan-demo [class*=colspan-],
|
118 | .grid-demo .col .grid-demo [class*=col-] .grid-demo .col,
|
119 | .grid-demo .col .grid-demo [class*=col-] .grid-demo [class*=col-],
|
120 | .grid-demo .col .grid-demo [class*=col-] .colspan-demo [class*=colspan-],
|
121 | .grid-demo .col .colspan-demo [class*=colspan-] .grid-demo .col,
|
122 | .grid-demo .col .colspan-demo [class*=colspan-] .grid-demo [class*=col-],
|
123 | .grid-demo .col .colspan-demo [class*=colspan-] .colspan-demo [class*=colspan-],
|
124 | .grid-demo [class*=col-] .grid-demo .col .grid-demo .col,
|
125 | .grid-demo [class*=col-] .grid-demo .col .grid-demo [class*=col-],
|
126 | .grid-demo [class*=col-] .grid-demo .col .colspan-demo [class*=colspan-],
|
127 | .grid-demo [class*=col-] .grid-demo [class*=col-] .grid-demo .col,
|
128 | .grid-demo [class*=col-] .grid-demo [class*=col-] .grid-demo [class*=col-],
|
129 | .grid-demo [class*=col-] .grid-demo [class*=col-] .colspan-demo [class*=colspan-],
|
130 | .grid-demo [class*=col-] .colspan-demo [class*=colspan-] .grid-demo .col,
|
131 | .grid-demo [class*=col-] .colspan-demo [class*=colspan-] .grid-demo [class*=col-],
|
132 | .grid-demo [class*=col-] .colspan-demo [class*=colspan-] .colspan-demo [class*=colspan-],
|
133 | .colspan-demo [class*=colspan-] .grid-demo .col .grid-demo .col,
|
134 | .colspan-demo [class*=colspan-] .grid-demo .col .grid-demo [class*=col-],
|
135 | .colspan-demo [class*=colspan-] .grid-demo .col .colspan-demo [class*=colspan-],
|
136 | .colspan-demo [class*=colspan-] .grid-demo [class*=col-] .grid-demo .col,
|
137 | .colspan-demo [class*=colspan-] .grid-demo [class*=col-] .grid-demo [class*=col-],
|
138 | .colspan-demo [class*=colspan-] .grid-demo [class*=col-] .colspan-demo [class*=colspan-],
|
139 | .colspan-demo [class*=colspan-] .colspan-demo [class*=colspan-] .grid-demo .col,
|
140 | .colspan-demo [class*=colspan-] .colspan-demo [class*=colspan-] .grid-demo [class*=col-],
|
141 | .colspan-demo [class*=colspan-] .colspan-demo [class*=colspan-] .colspan-demo [class*=colspan-] {
|
142 | border: 1px solid #333;
|
143 | }
|
144 |
|
145 | .grid-demo,
|
146 | .colspan-demo {
|
147 | padding-top: 30px;
|
148 | }
|
149 |
|
150 | .colspan-demo--flex {
|
151 | display: flex;
|
152 | flex-flow: row wrap;
|
153 | justify-content: space-between;
|
154 | align-items: flex-start;
|
155 | }
|
156 | .colspan-demo--flex [class*=colspan-] + [class*=colspan-]:not([class*=col-]) {
|
157 | margin-top: 0;
|
158 | }
|
159 | .colspan-demo--flex .colspan-demo--flex {
|
160 | padding-top: 30px;
|
161 | }
|
162 | .colspan-demo--flex .colspan-demo--flex .colspan-demo--flex [class*=colspan-] {
|
163 | border: 1px solid #333;
|
164 | background-color: transparent;
|
165 | }
|
166 |
|
167 | .grid-demo .colspan-demo [class*=colspan-] {
|
168 | padding-top: 30px;
|
169 | }
|
170 |
|
171 | .grid-demo .colspan-demo [class*=col-] {
|
172 | border: 1px solid #333;
|
173 | background-color: transparent;
|
174 | }
|
175 |
|
176 | .grid-demo--10,
|
177 | .colspan-demo--10 {
|
178 | --grid-columns: 10;
|
179 | }
|
180 |
|
181 | .grid-demo--24,
|
182 | .colspan-demo--24 {
|
183 | --grid-columns: 24;
|
184 | }
|
185 |
|
186 | .colspan-demo--nested {
|
187 | display: flex;
|
188 | flex-flow: row wrap;
|
189 | justify-content: space-between;
|
190 | }
|
191 | .colspan-demo--nested > [class*=colspan-], .colspan-demo--nested > [class*=colspan-] > [class*=colspan-] {
|
192 | display: flex;
|
193 | flex-flow: row wrap;
|
194 | justify-content: space-between;
|
195 | padding-top: 30px;
|
196 | }
|
197 | .colspan-demo--nested [class*=colspan-] + [class*=colspan-]:not([class*=col-]) {
|
198 | margin-top: 0;
|
199 | }
|
200 | .colspan-demo--nested [class*=colspan-] [class*=colspan-] [class*=colspan-] {
|
201 | border: 1px solid #333;
|
202 | }
|
203 |
|
204 | .swatches {
|
205 | display: flex;
|
206 | }
|
207 |
|
208 | .swatches div {
|
209 | flex: 0 0 auto;
|
210 | width: 50px;
|
211 | height: 50px;
|
212 | margin-right: 30px;
|
213 | margin-top: 30px;
|
214 | border-width: 1px;
|
215 | border-style: solid;
|
216 | }
|
217 |
|
218 | .swatches:not(.swatches--no-border) div {
|
219 | border-color: rgba(0, 0, 0, 0.8);
|
220 | }
|
221 |
|
222 | pre, code {
|
223 | background: #f2f2f2;
|
224 | font-family: Courier, monospace;
|
225 | margin-top: 30px;
|
226 | padding: 10px;
|
227 | }
|
228 |
|
229 | dl pre, p pre, li pre,
|
230 | dl code, p code, li code {
|
231 | display: inline;
|
232 | margin-top: 0;
|
233 | padding: 0;
|
234 | }
|
235 |
|
236 | dl {
|
237 | overflow: hidden;
|
238 | }
|
239 |
|
240 | dt {
|
241 | clear: left;
|
242 | float: left;
|
243 | width: 200px;
|
244 | margin-right: 20px;
|
245 | }
|
246 |
|
247 | dd {
|
248 | float: left;
|
249 | width: calc(100% - 220px);
|
250 | }
|
251 |
|
252 | .nav {
|
253 | position: sticky;
|
254 | z-index: 2;
|
255 | top: 0;
|
256 | display: flex;
|
257 | flex-flow: row wrap;
|
258 | background: rgba(255,255,255,.8);
|
259 | padding: 10px 0;
|
260 | }
|
261 |
|
262 | .nav > li {
|
263 | flex: 0 0 auto;
|
264 | margin-right: 2em;
|
265 | }
|
266 |
|
267 | .nav ul {
|
268 | padding-left: 1em;
|
269 | }
|
270 |
|
271 | .nav > li li {
|
272 | list-style-type: disc;
|
273 | }
|
274 | </style>
|
275 |
|
276 | <header>
|
277 | <h1 class="f-h1">A17 / Boilerplate 7</h1>
|
278 | </header>
|
279 |
|
280 | <main id="content">
|
281 |
|
282 | <p class="f-body mt-small">On this page:</p>
|
283 | <ul class="f-body nav">
|
284 | <li><a href="#font">Font</a></li>
|
285 | <li><a href="#color">Color</a></li>
|
286 | <li>
|
287 | <a href="#grid">Grid</a>
|
288 | <ul>
|
289 | <li><a href="#grid">with CSS Grid</a></li>
|
290 | <li><a href="#colspan">Colspan</a></li>
|
291 | <li><a href="#nesting">Nesting</a></li>
|
292 | </ul>
|
293 | </li>
|
294 | <li>
|
295 | <a href="#spacing">Spacing</a>
|
296 | <ul>
|
297 | <li><a href="#spacing">Horizontal</a></li>
|
298 | <li><a href="#vertical">Vertical</a></li>
|
299 | </ul>
|
300 | </li>
|
301 | <li><a href="#other">Other Utilities</a></li>
|
302 | <li><a href="#behavior">JS behavior</a></li>
|
303 | </ul>
|
304 |
|
305 | <p class="f-body mt-small"><strong>NB.</strong> this HTML file has inline styles for styling items relevant to this page (the lists, the code samples, definition lists etc.) but most things are straight Boilerplate utility classes. Inspecting this page will make it clear which is which.</p>
|
306 |
|
307 | <h2 class="f-h2 mt-large" id="font">Generated Font classes:</h2>
|
308 | <p class="f-h1">f-h1</p>
|
309 | <p class="f-h2">f-h2</p>
|
310 | <p class="f-body">f-body</p>
|
311 | <pre><p class="f-h1">f-h1</p>
|
312 | <p class="f-h2">f-h2</p>
|
313 | <p class="f-body">f-body</p></pre>
|
314 | <p class="f-body mt-small">As defined in <code>frontend.config.json</code>:</p>
|
315 | <pre>"typography": {
|
316 | "families": {
|
317 | "serif-font": "\"Copernicus, serif\"",
|
318 | "sans-serif-font": "\"Helvetica Neue, Helvetica, Arial, sans-serif\""
|
319 | },
|
320 | "faces": [
|
321 | {
|
322 | "family": "Copernicus",
|
323 | "weight": "normal",
|
324 | "style": "normal",
|
325 | "src": {
|
326 | "woff2": "\"GalaxieCopernicus-Book.woff2\"",
|
327 | "woff": "\"GalaxieCopernicus-Book.woff\""
|
328 | }
|
329 | }
|
330 | ],
|
331 | "typesets": {
|
332 | "h1": [
|
333 | {
|
334 | "xs": {
|
335 | "font-family": "var(--serif-font)",
|
336 | "bold-weight": "500",
|
337 | "font-size": "38",
|
338 | "line-height": "1.2",
|
339 | "letter-spacing": "-0.02em",
|
340 | "font-smoothing": "true"
|
341 | },
|
342 | "lg": {
|
343 | "font-size": "60"
|
344 | }
|
345 | }
|
346 | ],
|
347 | "h2": [
|
348 | {
|
349 | "xs": {
|
350 | "font-family": "var(--serif-font)",
|
351 | "bold-weight": "500",
|
352 | "font-size": "20",
|
353 | "line-height": "1.2",
|
354 | "letter-spacing": "-0.02em",
|
355 | "font-smoothing": "true"
|
356 | },
|
357 | "lg": {
|
358 | "font-size": "32"
|
359 | }
|
360 | }
|
361 | ],
|
362 | "body": [
|
363 | {
|
364 | "xs": {
|
365 | "font-family": "var(--sans-serif-font)",
|
366 | "bold-weight": "600",
|
367 | "font-size": "16",
|
368 | "line-height": "1.7",
|
369 | "font-smoothing": "true"
|
370 | },
|
371 | "lg": {
|
372 | "font-size": "17"
|
373 | }
|
374 | }
|
375 | ]
|
376 | }
|
377 | }</pre>
|
378 | <p class="f-body mt-small">Can also be defined in the SCSS:</p>
|
379 | <pre>$font_families: (
|
380 | serif-font: 'serif',
|
381 | sans-serif-font: 'sans-serif'
|
382 | );
|
383 |
|
384 | $font_faces: (
|
385 | (
|
386 | family: 'Copernicus',
|
387 | weight: 'normal',
|
388 | style: 'normal',
|
389 | src: (
|
390 | woff2: 'GalaxieCopernicus-Book.woff2',
|
391 | woff: 'GalaxieCopernicus-Book.woff'
|
392 | )
|
393 | )
|
394 | );
|
395 |
|
396 | $font_typesets: (
|
397 | (
|
398 | 'sample': (
|
399 | (
|
400 | 'xs': (
|
401 | font-family: var(--serif-font),
|
402 | bold-weight: 400,
|
403 | font-size: 10,
|
404 | line-height: 1.7,
|
405 | font-smoothing: true
|
406 | ),
|
407 | 'lg': (
|
408 | font-size: 12
|
409 | )
|
410 | )
|
411 | )
|
412 | )
|
413 | );</pre>
|
414 | <p class="f-body mt-small">NB: Place <strong>before</strong> <code>@import '~@area17/a17-boilerplate/scss/a17-boilerplate';</code></p>
|
415 | <p class="f-body">NB: JSON values will override these <strong>if</strong> both JSON setup and SCSS set up are used.</p>
|
416 |
|
417 | <h2 class="f-h2 mt-large" id="color">Colors</h2>
|
418 | <p class="f-body mt-small">Root CSS variables and helper classes will be made out of objects passed through, these examples assume the following config.</p>
|
419 | <p class="f-body mt-small"><strong>Generated root variables:</strong></p>
|
420 | <pre>:root {
|
421 | --COLOR-TOKENS: "↓";
|
422 | --white: #fff;
|
423 | --grey-5: #f2f2f2;
|
424 | --grey-10: #e6e6e6;
|
425 | --grey-15: #d9d9d9;
|
426 | --grey-54: #757575;
|
427 | --grey-90: #1a1a1a;
|
428 | --black: #000;
|
429 | --purple-600: #6621d9;
|
430 | --purple-900: #5319ba;
|
431 | }
|
432 |
|
433 | :root {
|
434 | --COLOR-TEXT: "for usage ↓";
|
435 | --text-title: var(--black);
|
436 | --text-primary: var(--grey-90);
|
437 | --text-secondary: var(--grey-54);
|
438 | --text-accent: var(--purple-900);
|
439 | }
|
440 |
|
441 | :root {
|
442 | --COLOR-BACKGROUND: "for usage ↓";
|
443 | --bg-design-grid: rgba(127, 255, 255, 0.25);
|
444 | --bg-primary: var(--white);
|
445 | --bg-banner: #3d4892;
|
446 | --bg-accent: var(--purple-600);
|
447 | }
|
448 |
|
449 | :root {
|
450 | --COLOR-BORDER: "for usage ↓";
|
451 | --border-primary: var(--grey-10);
|
452 | --border-secondary: var(--grey-15);
|
453 | --border-tertiary: var(--grey-5);
|
454 | }</pre>
|
455 | <p class="f-body mt-small"><strong>Generated text color utilities:</strong></p>
|
456 | <p class="f-body text-title">text-title</p>
|
457 | <p class="f-body text-primary">text-primary</p>
|
458 | <p class="f-body text-secondary">text-secondary</p>
|
459 | <p class="f-body text-accent">text-accent</p>
|
460 | <pre><p class="f-body text-title">text-title</p>
|
461 | <p class="f-body text-primary">text-primary</p>
|
462 | <p class="f-body text-secondary">text-secondary</p>
|
463 | <p class="f-body text-accent">text-accent</p></pre>
|
464 | <p class="f-body mt-small"><strong>Generated background color utilities:</strong></p>
|
465 | <div class="swatches">
|
466 | <div class="bg-primary"></div>
|
467 | <div class="bg-banner"></div>
|
468 | <div class="bg-accent"></div>
|
469 | </div>
|
470 | <pre><div class="bg-primary"></div>
|
471 | <div class="bg-banner"></div>
|
472 | <div class="bg-accent"></div></pre>
|
473 | <p class="f-body mt-small"><strong>Generated border color utilities:</strong></p>
|
474 | <div class="swatches swatches--no-border">
|
475 | <div class="border-primary"></div>
|
476 | <div class="border-secondary"></div>
|
477 | <div class="border-tertiary"></div>
|
478 | </div>
|
479 | <pre><div class="swatches swatches--no-border">
|
480 | <div class="border-primary"></div>
|
481 | <div class="border-secondary"></div>
|
482 | <div class="border-tertiary"></div>
|
483 | </div></pre>
|
484 | <p class="f-body mt-small"><strong>Generated CSS variables:</strong></p>
|
485 | <p class="f-body mt-small">As defined in <code>frontend.config.json</code>:</p>
|
486 | <pre>"color": {
|
487 | "tokens": {
|
488 | "white": "#fff",
|
489 | "grey-5": "#f2f2f2",
|
490 | "grey-10": "#e6e6e6",
|
491 | "grey-15": "#d9d9d9",
|
492 | "grey-54": "#757575",
|
493 | "grey-90": "#1a1a1a",
|
494 | "black": "#000",
|
495 | "purple-600": "#6621d9",
|
496 | "purple-900": "#5319ba"
|
497 | },
|
498 | "borderColor": {
|
499 | "primary": "grey-10",
|
500 | "secondary": "grey-15",
|
501 | "tertiary": "grey-5"
|
502 | },
|
503 | "textColor": {
|
504 | "title": "black",
|
505 | "primary": "grey-90",
|
506 | "secondary": "grey-54",
|
507 | "accent": "purple-900"
|
508 | },
|
509 | "backgroundColor": {
|
510 | "primary": "white",
|
511 | "banner": "#3d4892",
|
512 | "accent": "purple-600"
|
513 | }
|
514 | }</pre>
|
515 | <p class="f-body mt-small">Can also be defined in the SCSS:</p>
|
516 | <pre>$color_tokens: (
|
517 | 'red-900': '#900'
|
518 | );
|
519 |
|
520 | $color_textColor: (
|
521 | 'error': 'red-900',
|
522 | 'highlight': '#ff0'
|
523 | );</pre>
|
524 | <p class="f-body mt-small">NB: you can specify hex, rgb, rgba, hsl, <code>transparent</code>, <code>currentColor</code> or a token name in your <code>textColor</code>, <code>backgroundColo</code> or <code>borderColor</code> defs.</p>
|
525 | <p class="f-body">NB: Place <strong>before</strong> <code>@import '~@area17/a17-boilerplate/scss/a17-boilerplate';</code></p>
|
526 | <p class="f-body">NB: JSON values will override these <strong>if</strong> both JSON setup and SCSS set up are used.</p>
|
527 |
|
528 | <h2 class="f-h2 mt-large" id="grid">Grid Utilities</h2>
|
529 | <p class="f-body mt-small"><strong>Using <code>.grid</code> and <code>.col-x</code> classes</strong></h2>
|
530 | <pre><ul class="grid grid-demo">
|
531 | <li class="col-1"></li>
|
532 | <li class="col-2"></li>
|
533 | <li class="col-3"></li>
|
534 | ....
|
535 | </ul></pre>
|
536 | <p class="f-body mt-small">One col class per item:</p>
|
537 | <ul class="grid grid-demo">
|
538 | <li class="col-1"></li>
|
539 | <li class="col-2"></li>
|
540 | <li class="col-3"></li>
|
541 | <li class="col-4"></li>
|
542 | <li class="col-5"></li>
|
543 | <li class="col-6"></li>
|
544 | <li class="col-7"></li>
|
545 | <li class="col-8"></li>
|
546 | <li class="col-9"></li>
|
547 | <li class="col-10"></li>
|
548 | <li class="col-11"></li>
|
549 | <li class="col-12"></li>
|
550 | </ul>
|
551 | <p class="f-body mt-small">Same col class on every item, wrapping:</p>
|
552 | <ul class="grid grid-demo">
|
553 | <li class="col-3"></li>
|
554 | <li class="col-3"></li>
|
555 | <li class="col-3"></li>
|
556 | <li class="col-3"></li>
|
557 | <li class="col-3"></li>
|
558 | <li class="col-3"></li>
|
559 | </ul>
|
560 | <p class="f-body mt-small">Different sizes per breakpoint:</p>
|
561 | <ul class="grid grid-demo">
|
562 | <li class="col-1 col-3@md col-4@lg col-5@xl col-6@xxlarge"></li>
|
563 | </ul>
|
564 | <p class="f-body mt-small">Different sizes per breakpoint, nothing defined at xs:</p>
|
565 | <ul class="grid grid-demo">
|
566 | <li class="col-2@sm col-3@md col-4@lg col-5@xl col-6@xxlarge"></li>
|
567 | </ul>
|
568 | <p class="f-body mt-small">Indenting a col:</p>
|
569 | <ul class="grid grid-demo">
|
570 | <li class="col-2@sm col-start-2@sm"></li>
|
571 | </ul>
|
572 | <p class="f-body mt-small">Indenting a col (alt):</p>
|
573 | <ul class="grid grid-demo">
|
574 | <li class="col-2@sm col-end-4@sm"></li>
|
575 | </ul>
|
576 | <p class="f-body mt-small">Not setting a col width, just start and ends:</p>
|
577 | <ul class="grid grid-demo">
|
578 | <li class="col-start-2@sm col-end-4@sm col-start-3@md col-end-6@md"></li>
|
579 | </ul>
|
580 | <p class="f-body mt-small">Nested:</p>
|
581 | <ul class="grid grid-demo">
|
582 | <li class="col-3@md col-6@lg col-9@xl">
|
583 | <ul class="grid grid-demo">
|
584 | <li class="col-2@lg col-3@xl"></li>
|
585 | <li class="col-2@lg col-3@xl"></li>
|
586 | <li class="col-2@lg col-3@xl"></li>
|
587 | <li class="col-2@lg col-3@xl"></li>
|
588 | <li class="col-2@lg col-3@xl"></li>
|
589 | <li class="col-2@lg col-3@xl"></li>
|
590 | <li class="col-2@lg col-3@xl">
|
591 | <ul class="grid grid-demo">
|
592 | <li class="col-1"></li>
|
593 | <li class="col-1 col-2@lg col-2@xl"></li>
|
594 | <li class="col-1"></li>
|
595 | <li class="col-1"></li>
|
596 | </ul>
|
597 | </li>
|
598 | <li class="col-6@xl">
|
599 | <ul class="grid grid-demo">
|
600 | <li class="col-1 col-3@xl"></li>
|
601 | <li class="col-1 col-2@lg col-3@xl"></li>
|
602 | <li class="col-1 col-3@xl"></li>
|
603 | <li class="col-1 col-3@xl"></li>
|
604 | </ul>
|
605 | </li>
|
606 | </ul>
|
607 | </li>
|
608 | <li class="col-3@md col-4@lg col-3@xl"></li>
|
609 | </ul>
|
610 |
|
611 | <p class="f-body mt-small">Need a random 10 column grid?</p>
|
612 | <pre>.grid-demo--10 {
|
613 | --grid-columns: 10;
|
614 | }</pre>
|
615 | <pre class="mt-small"><ul class="grid grid-demo grid-demo--10"></pre>
|
616 | <ul class="grid grid-demo grid-demo--10">
|
617 | <li class="col-2">
|
618 | <ul class="grid grid-demo">
|
619 | <li class="col-1"></li>
|
620 | <li class="col-1"></li>
|
621 | </ul>
|
622 | </li>
|
623 | <li class="col-2">
|
624 | <ul class="grid grid-demo">
|
625 | <li class="col-1"></li>
|
626 | <li class="col-1"></li>
|
627 | </ul>
|
628 | </li>
|
629 | <li class="col-2">
|
630 | <ul class="grid grid-demo">
|
631 | <li class="col-1"></li>
|
632 | <li class="col-1"></li>
|
633 | </ul>
|
634 | </li>
|
635 | <li class="col-4">
|
636 | <ul class="grid grid-demo">
|
637 | <li class="col-2">
|
638 | <ul class="grid grid-demo">
|
639 | <li class="col-1"></li>
|
640 | <li class="col-1"></li>
|
641 | </ul>
|
642 | </li>
|
643 | <li class="col-1"></li>
|
644 | <li class="col-1"></li>
|
645 | </ul>
|
646 | </li>
|
647 | </ul>
|
648 |
|
649 | <p class="f-body mt-small">Need a random 24 column grid?</p>
|
650 | <pre>.grid-demo--24 {
|
651 | --grid-columns: 24;
|
652 | }</pre>
|
653 | <pre class="mt-small"><ul class="grid grid-demo grid-demo--24"></pre>
|
654 | <ul class="grid grid-demo grid-demo--24">
|
655 | <li class="col-1"></li>
|
656 | <li class="col-1"></li>
|
657 | <li class="col-1"></li>
|
658 | <li class="col-9"></li>
|
659 | <li class="col-12"></li>
|
660 | </ul>
|
661 |
|
662 | <p class="f-body mt-large" id="colspan"><strong>Using <code>.colspan</code></strong></h2>
|
663 | <pre><div class="colspan-1"></div>
|
664 | <div class="colspan-2"></div>
|
665 | <div class="colspan-3"></div></pre>
|
666 |
|
667 | <div class="colspan-demo">
|
668 | <div class="colspan-1"></div>
|
669 | <div class="colspan-2"></div>
|
670 | <div class="colspan-3"></div>
|
671 | <div class="colspan-4"></div>
|
672 | <div class="colspan-5"></div>
|
673 | <div class="colspan-6"></div>
|
674 | <div class="colspan-7"></div>
|
675 | <div class="colspan-8"></div>
|
676 | <div class="colspan-9"></div>
|
677 | <div class="colspan-10"></div>
|
678 | <div class="colspan-11"></div>
|
679 | <div class="colspan-12"></div>
|
680 | </div>
|
681 |
|
682 | <p class="f-body mt-small">Nesting:</p>
|
683 | <div class="colspan-demo colspan-demo--nested">
|
684 | <div class="colspan-9">
|
685 | <div class="colspan-3">
|
686 | <div class="colspan-1"></div>
|
687 | <div class="colspan-2"></div>
|
688 | </div>
|
689 | <div class="colspan-6">
|
690 | <div class="colspan-3"></div>
|
691 | <div class="colspan-2"></div>
|
692 | <div class="colspan-1"></div>
|
693 | </div>
|
694 | </div>
|
695 | <div class="colspan-3">
|
696 | <div class="colspan-2">
|
697 | <div class="colspan-1"></div>
|
698 | <div class="colspan-1"></div>
|
699 | </div>
|
700 | <div class="colspan-1">
|
701 | <div class="colspan-1"></div>
|
702 | </div>
|
703 | </div>
|
704 | </div>
|
705 |
|
706 | <p class="f-body mt-small">Different sizes per breakpoint:</p>
|
707 |
|
708 | <div class="colspan-demo">
|
709 | <div class="colspan-6 colspan-8@md colspan-6@lg colspan-5@xl"></div>
|
710 | </div>
|
711 |
|
712 | <p class="f-body mt-small">Need a random 10 column grid?</p>
|
713 | <pre>.colspan-demo--10 {
|
714 | --grid-columns: 10;
|
715 | }</pre>
|
716 | <pre class="mt-small"><div class="colspan-demo colspan-demo--flex colspan-demo--10"></pre>
|
717 | <div class="colspan-demo colspan-demo--flex colspan-demo--10">
|
718 | <div class="colspan-2 colspan-demo--flex">
|
719 | <div class="colspan-1"></div>
|
720 | <div class="colspan-1"></div>
|
721 | </div>
|
722 | <div class="colspan-2 colspan-demo--flex">
|
723 | <div class="colspan-1"></div>
|
724 | <div class="colspan-1"></div>
|
725 | </div>
|
726 | <div class="colspan-2 colspan-demo--flex">
|
727 | <div class="colspan-1"></div>
|
728 | <div class="colspan-1"></div>
|
729 | </div>
|
730 | <div class="colspan-4 colspan-demo--flex">
|
731 | <div class="colspan-2 colspan-demo--flex">
|
732 | <div class="colspan-1"></div>
|
733 | <div class="colspan-1"></div>
|
734 | </div>
|
735 | <div class="colspan-2 colspan-demo--flex">
|
736 | <div class="colspan-1"></div>
|
737 | <div class="colspan-1"></div>
|
738 | </div>
|
739 | </div>
|
740 | </div>
|
741 |
|
742 | <p class="f-body mt-small">Need a random 24 column grid?</p>
|
743 | <pre>.colspan-demo--24 {
|
744 | --grid-columns: 24;
|
745 | }</pre>
|
746 | <pre class="mt-small"><div class="colspan-demo colspan-demo--flex colspan-demo--24"></pre>
|
747 | <div class="colspan-demo colspan-demo--flex colspan-demo--24">
|
748 | <div class="colspan-1"></div>
|
749 | <div class="colspan-1"></div>
|
750 | <div class="colspan-1"></div>
|
751 | <div class="colspan-9"></div>
|
752 | <div class="colspan-12"></div>
|
753 | </div>
|
754 |
|
755 | <p class="f-body mt-large" id="nesting"><strong>Nesting <code>.grid/.col-x</code> and <code>.colspan</code></strong></p>
|
756 |
|
757 | <ul class="grid grid-demo">
|
758 | <li class="col-3 colspan-demo colspan-demo--flex">
|
759 | <div class="colspan-2">
|
760 | <ul class="grid">
|
761 | <li class="col-1"></li>
|
762 | <li class="col-1"></li>
|
763 | </ul>
|
764 | </div>
|
765 | <div class="colspan-1">
|
766 | <ul class="grid">
|
767 | <li class="col-1"></li>
|
768 | </ul>
|
769 | </div>
|
770 | </li>
|
771 | <li class="col-9 colspan-demo colspan-demo--flex">
|
772 | <div class="colspan-6">
|
773 | <ul class="grid">
|
774 | <li class="col-3"></li>
|
775 | <li class="col-2"></li>
|
776 | <li class="col-1"></li>
|
777 | </ul>
|
778 | </div>
|
779 | <div class="colspan-3">
|
780 | <ul class="grid">
|
781 | <li class="col-2"></li>
|
782 | <li class="col-1"></li>
|
783 | </ul>
|
784 | </div>
|
785 | </li>
|
786 | </ul>
|
787 |
|
788 | <div class="colspan-demo colspan-demo--flex">
|
789 | <div class="colspan-9">
|
790 | <ul class="grid grid-demo">
|
791 | <li class="col-3"></li>
|
792 | <li class="col-2"></li>
|
793 | <li class="col-1"></li>
|
794 | </ul>
|
795 | </div>
|
796 | <div class="colspan-3">
|
797 | <ul class="grid grid-demo">
|
798 | <li class="col-2"></li>
|
799 | <li class="col-1"></li>
|
800 | </ul>
|
801 | </div>
|
802 | </div>
|
803 |
|
804 | <p class="f-body mt-large" id="nesting">As defined in <code>frontend.config.json</code>:</p>
|
805 | <pre>"structure": {
|
806 | "breakpoints": {
|
807 | "xs": "0",
|
808 | "sm": "544px",
|
809 | "md": "650px",
|
810 | "lg": "990px",
|
811 | "xl": "1300px",
|
812 | "xxl": "1520px"
|
813 | },
|
814 | "columns": {
|
815 | "xs": "6",
|
816 | "sm": "6",
|
817 | "md": "10",
|
818 | "lg": "12",
|
819 | "xl": "12",
|
820 | "xxl": "12"
|
821 | },
|
822 | "container": {
|
823 | "xs": "auto",
|
824 | "sm": "auto",
|
825 | "md": "auto",
|
826 | "lg": "auto",
|
827 | "xl": "auto",
|
828 | "xxl": "1440px"
|
829 | },
|
830 | "gutters": {
|
831 | "inner": {
|
832 | "xs": "10px",
|
833 | "sm": "15px",
|
834 | "md": "20px",
|
835 | "lg": "30px",
|
836 | "xl": "40px",
|
837 | "xxl": "40px"
|
838 | },
|
839 | "outer": {
|
840 | "xs": "20px",
|
841 | "sm": "30px",
|
842 | "md": "40px",
|
843 | "lg": "40px",
|
844 | "xl": "40px",
|
845 | "xxl": "auto"
|
846 | }
|
847 | }
|
848 | }</pre>
|
849 | <p class="f-body mt-small">Can also be defined in the SCSS:</p>
|
850 | <pre>// where each breakpoint ends
|
851 | $structure_breakpoints: (
|
852 | xs: 0,
|
853 | sm: 544px,
|
854 | md: 650px,
|
855 | lg: 990px,
|
856 | xl: 1300px,
|
857 | xxl: 1520px
|
858 | );
|
859 | // fluid or fixed value (px, rem, em, vw) per breakpoint
|
860 | $structure_container-type: (
|
861 | xs: 'auto',
|
862 | sm: 'auto',
|
863 | md: 'auto',
|
864 | lg: 'auto',
|
865 | xl: 'auto',
|
866 | xxl: 1440px
|
867 | );
|
868 | // columns are in each breakpoint
|
869 | $structure_column-count: (
|
870 | xs: 6,
|
871 | sm: 6,
|
872 | md: 8,
|
873 | lg: 12,
|
874 | xl: 12,
|
875 | xxl: 12
|
876 | );
|
877 | // in px or vw, of each breakpoint
|
878 | $structure_gutters: (
|
879 | inner: (
|
880 | xs: 10px,
|
881 | sm: 10px,
|
882 | md: 10px,
|
883 | lg: 10px,
|
884 | xl: 10px,
|
885 | xxl: 10px
|
886 | ),
|
887 | outer: (
|
888 | xs: 10px,
|
889 | sm: 10px,
|
890 | md: 10px,
|
891 | lg: 10px,
|
892 | xl: 10px,
|
893 | xxl: 'auto'
|
894 | )
|
895 | );</pre>
|
896 | <p class="f-body mt-small">NB: Place <strong>before</strong> <code>@import '~@area17/a17-boilerplate/scss/a17-boilerplate';</code></p>
|
897 | <p class="f-body">NB: JSON values will override these <strong>if</strong> both JSON setup and SCSS set up are used.</p>
|
898 |
|
899 | <h2 class="f-h1 mt-large" id="spacing">Spacing</h2>
|
900 | <p class="f-body mt-small"><strong>Horizontal spacings:</strong></p>
|
901 | <div class="colspan-demo">
|
902 | <div class="colspan-2 ml-g"></div>
|
903 | <div class="colspan-2 mlr-a"></div>
|
904 | </div>
|
905 | <p class="f-body mt-medium" id="vertical"><strong>Vertical spacings</strong></p>
|
906 | <div class="colspan-demo">
|
907 | <div class="colspan-2"></div>
|
908 | <div class="colspan-2 mt-large"></div>
|
909 | </div>
|
910 |
|
911 |
|
912 | <dl class="f-body mt-small">
|
913 | <dt><code>.ml-g, .ml-gutter</code></dt>
|
914 | <dd>margin left inner gutter</dd>
|
915 | <dt><code>.mr-g, .mr-gutter</code></dt>
|
916 | <dd>margin right inner gutter</dd>
|
917 | <dt><code>.mt-g, .mt-gutter</code></dt>
|
918 | <dd>margin top inner gutter</dd>
|
919 | <dt><code>.mb-g, .mb-gutter</code></dt>
|
920 | <dd>margin bottom inner gutter</dd>
|
921 | <dt><code>.m-g, .m-gutter</code></dt>
|
922 | <dd>margin all inner gutter</dd>
|
923 | <dt><code>.mx-g, .mx-gutter</code></dt>
|
924 | <dd>margin left and right inner gutter</dd>
|
925 | <dt><code>.my-g, .my-gutter</code></dt>
|
926 | <dd>margin top and bottom inner gutter</dd>
|
927 |
|
928 | <dt><code>.-ml-g, .-ml-gutter</code></dt>
|
929 | <dd>negative margin left inner gutter</dd>
|
930 | <dt><code>.-mr-g, .-mr-gutter</code></dt>
|
931 | <dd>negative margin right inner gutter</dd>
|
932 | <dt><code>.-mt-g, .-mt-gutter</code></dt>
|
933 | <dd>negative margin top inner gutter</dd>
|
934 | <dt><code>.-mb-g, .-mb-gutter</code></dt>
|
935 | <dd>negative margin bottom inner gutter</dd>
|
936 | <dt><code>.-m-g, .-m-gutter</code></dt>
|
937 | <dd>negative margin all inner gutter</dd>
|
938 | <dt><code>.-mx-g, .-mx-gutter</code></dt>
|
939 | <dd>negative margin left and right inner gutter</dd>
|
940 | <dt><code>.-my-g, .-my-gutter</code></dt>
|
941 | <dd>negative margin top and bottom inner gutter</dd>
|
942 |
|
943 | <dt><code>.ml-og, .ml-outer-gutter</code></dt>
|
944 | <dd>margin left outer gutter</dd>
|
945 | <dt><code>.mr-og, .mr-outer-gutter</code></dt>
|
946 | <dd>margin right outer gutter</dd>
|
947 | <dt><code>.mt-og, .mt-outer-gutter</code></dt>
|
948 | <dd>margin top outer gutter</dd>
|
949 | <dt><code>.mb-og, .mb-outer-gutter</code></dt>
|
950 | <dd>margin bottom outer gutter</dd>
|
951 | <dt><code>.m-og, .m-outer-gutter</code></dt>
|
952 | <dd>margin all outer gutter</dd>
|
953 | <dt><code>.mx-og, .mx-outer-gutter</code></dt>
|
954 | <dd>margin left and right outer gutter</dd>
|
955 | <dt><code>.my-og, .my-outer-gutter</code></dt>
|
956 | <dd>margin top and bottom outer gutter</dd>
|
957 |
|
958 | <dt><code>.-ml-og, .-ml-outer-gutter</code></dt>
|
959 | <dd>negative margin left outer gutter</dd>
|
960 | <dt><code>.-mr-og, .-mr-outer-gutter</code></dt>
|
961 | <dd>negative margin right outer gutter</dd>
|
962 | <dt><code>.-mt-og, .-mt-outer-gutter</code></dt>
|
963 | <dd>negative margin top outer gutter</dd>
|
964 | <dt><code>.-mb-og, .-mb-outer-gutter</code></dt>
|
965 | <dd>negative margin bottom outer gutter</dd>
|
966 | <dt><code>.-m-og, .-m-outer-gutter</code></dt>
|
967 | <dd>negative margin all outer gutter</dd>
|
968 | <dt><code>.-mx-og, .-mx-outer-gutter</code></dt>
|
969 | <dd>negative margin left and right outer gutter</dd>
|
970 | <dt><code>.-my-og, .-my-outer-gutter</code></dt>
|
971 | <dd>negative margin top and bottom outer gutter</dd>
|
972 |
|
973 | <dt><code>.ml-a, .ml-auto</code></dt>
|
974 | <dd>margin left auto</dd>
|
975 | <dt><code>.mr-a, .mr-auto</code></dt>
|
976 | <dd>margin right auto</dd>
|
977 | <dt><code>.m-a, .m-auto</code></dt>
|
978 | <dd>margin all auto</dd>
|
979 | <dt><code>.mx-a, .mx-auto</code></dt>
|
980 | <dd>margin left and right auto</dd>
|
981 | <dt><code>.my-a, .my-auto</code></dt>
|
982 | <dd>margin left and right auto</dd>
|
983 |
|
984 | <dt><code>.pl-g, .pl-gutter</code></dt>
|
985 | <dd>padding left inner gutter</dd>
|
986 | <dt><code>.pr-g, .pr-gutter</code></dt>
|
987 | <dd>padding right inner gutter</dd>
|
988 | <dt><code>.pt-g, .pt-gutter</code></dt>
|
989 | <dd>padding top inner gutter</dd>
|
990 | <dt><code>.pb-g, .pb-gutter</code></dt>
|
991 | <dd>padding bottom inner gutter</dd>
|
992 | <dt><code>.p-g, .p-gutter</code></dt>
|
993 | <dd>padding all inner gutter</dd>
|
994 | <dt><code>.px-g, .px-gutter</code></dt>
|
995 | <dd>padding left and right inner gutter</dd>
|
996 | <dt><code>.py-g, .py-gutter</code></dt>
|
997 | <dd>padding top and bottom inner gutter</dd>
|
998 |
|
999 | <dt><code>.pl-og, .pl-outer-gutter</code></dt>
|
1000 | <dd>padding left outer gutter</dd>
|
1001 | <dt><code>.pr-og, .pr-outer-gutter</code></dt>
|
1002 | <dd>padding right outer gutter</dd>
|
1003 | <dt><code>.pt-og, .pt-outer-gutter</code></dt>
|
1004 | <dd>padding top outer gutter</dd>
|
1005 | <dt><code>.pb-og, .pb-outer-gutter</code></dt>
|
1006 | <dd>padding bottom outer gutter</dd>
|
1007 | <dt><code>.p-og, .p-outer-gutter</code></dt>
|
1008 | <dd>padding all outer gutter</dd>
|
1009 | <dt><code>.px-og, .px-outer-gutter</code></dt>
|
1010 | <dd>padding left and right outer gutter</dd>
|
1011 | <dt><code>.py-og, .py-outer-gutter</code></dt>
|
1012 | <dd>padding top and bottom outer gutter</dd>
|
1013 | </dl>
|
1014 | <p class="f-body mt-medium" id="vertical"><strong>Responsive spacing classes</strong></p>
|
1015 | <p class="f-body mt-small">Responsive spacing classes:</p>
|
1016 | <dl class="f-body mt-small">
|
1017 | <dt><code>.mt-small</code></dt>
|
1018 | <dd>margin top "small" for this breakpoint</dd>
|
1019 | <dt><code>.mb-small</code></dt>
|
1020 | <dd>margin bottom "small" for this breakpoint</dd>
|
1021 | <dt><code>.pt-small</code></dt>
|
1022 | <dd>padding top "small" for this breakpoint</dd>
|
1023 | <dt><code>.pb-small</code></dt>
|
1024 | <dd>padding bottom "small" for this breakpoint</dd>
|
1025 | <dt><code>.mt-medium</code></dt>
|
1026 | <dd>margin top "medium" for this breakpoint</dd>
|
1027 | <dt><code>.mb-medium</code></dt>
|
1028 | <dd>margin bottom "medium" for this breakpoint</dd>
|
1029 | <dt>...</dt>
|
1030 | <dd>...</dd>
|
1031 | <dt><code>.mr-, .ml-, .mt-, .mb-, .m-, .mx-, .my-, .-mr-, .-ml-, .-mt-, .-mb-, .-m-, .-mx-, .-my-, .pr-, .pl-, .pt-, .pb-, .p-, .px-, .py-</code></dt>
|
1032 | <dd>Variations for each of your responsive spacing rules</dd>
|
1033 | </dl>
|
1034 | <p class="f-body mt-small">Where "small" and "medium" relates to the spacing group name in the supplied object, not a breakpoint name. Maybe you called yours "inner-1" and "outer-2" etc.</p>
|
1035 | <p class="f-body">Each of these points to a CSS variable and so you can override per element if required (will affect all its children)</p>
|
1036 |
|
1037 | <p class="f-body mt-medium">As defined in <code>frontend.config.json</code>. The sets are named and then a distance for each breakpoint is specified:</p>
|
1038 | <pre>"spacing": {
|
1039 | "small": {
|
1040 | "xs": "28px"
|
1041 | },
|
1042 | "medium": {
|
1043 | "xs": "32px",
|
1044 | "md": "40px"
|
1045 | },
|
1046 | "large": {
|
1047 | "xs": "48px",
|
1048 | "md": "60px",
|
1049 | "lg": "80px"
|
1050 | },
|
1051 | "xlarge": {
|
1052 | "xs": "72px",
|
1053 | "md": "100px",
|
1054 | "lg": "120px"
|
1055 | }
|
1056 | }</pre>
|
1057 | <p class="f-body mt-small">Can also be defined in the SCSS:</p>
|
1058 | <pre>$spacing_sets: (
|
1059 | 'tiny': (
|
1060 | 'xs': '4px',
|
1061 | 'md': '8px'
|
1062 | )
|
1063 | );</pre>
|
1064 | <p class="f-body mt-small">NB: Place <strong>before</strong> <code>@import '~@area17/a17-boilerplate/scss/a17-boilerplate';</code></p>
|
1065 | <p class="f-body">NB: JSON values will override these <strong>if</strong> both JSON setup and SCSS set up are used.</p>
|
1066 |
|
1067 | <h2 class="f-h2 mt-xlarge" id="other">Other Utilities:</h2>
|
1068 | <dl class="f-body mt-small">
|
1069 | <dt><code>.visually-hidden</code></dt>
|
1070 | <dt><code>.vh</code></dt>
|
1071 | <dt><code>.sr</code></dt>
|
1072 | <dd>Screen reader text</dd>
|
1073 | </dl>
|
1074 | <pre><p class="sr">Screen reader only text</p></pre>
|
1075 | <p class="sr">Screen ready only text</p>
|
1076 |
|
1077 | <dl class="f-body mt-medium">
|
1078 | <dt><code>.float-clear</code></dt>
|
1079 | <dt><code>.fc</code></dt>
|
1080 | <dd>Float clear</dd>
|
1081 | </dl>
|
1082 |
|
1083 | <dl class="f-body mt-medium">
|
1084 | <dt><code>.background-fill</code></dt>
|
1085 | <dt><code>.bgf</code></dt>
|
1086 | <dd>Background fill</dd>
|
1087 | </dl>
|
1088 | <pre><div style="height: 10px;" class="bg-banner mt-small bgf"></div></pre>
|
1089 | <div style="height: 10px;" class="bg-banner mt-small bgf"></div>
|
1090 |
|
1091 | <dl class="f-body mt-medium">
|
1092 | <dt><code>.keyline-full</code></dt>
|
1093 | <dt><code>.klf</code></dt>
|
1094 | <dd>Keyline full</dd>
|
1095 | </dl>
|
1096 | <pre><div style="height: 10px;" class="mt-small klf"></div></pre>
|
1097 | <div style="height: 10px;" class="mt-small klf"></div>
|
1098 |
|
1099 | <h2 class="f-h2 mt-xlarge" id="behavior">data-behavior example:</h2>
|
1100 | <p class="f-body mt-small"><strong>DummyBehavior:</strong></p>
|
1101 | <div data-behavior="DummyBehavior" data-dummybehavior-start="100" data-dummybehavior-media="large+">
|
1102 | <p class="f-body">
|
1103 | Counter: <span data-dummybehavior-counter></span>
|
1104 | <br>
|
1105 | <button data-dummybehavior-reset>Reset</button>
|
1106 | </p>
|
1107 | <ul class="f-body">
|
1108 | <li data-dummybehavior-li> </li>
|
1109 | <li data-dummybehavior-li> </li>
|
1110 | <li data-dummybehavior-li> </li>
|
1111 | </ul>
|
1112 | <p class="f-body"><button data-dummybehavior-delete>Delete counter</button></p>
|
1113 | <p class="f-body" data-dummybehavior-bindel="foo" data-dummybehavior-bindattr="bar:disabled,baz:class"></p>
|
1114 | <p class="f-body" data-dummybehavior-bindel="count"></p>
|
1115 | </div>
|
1116 | </main>
|
1117 |
|
1118 | <footer class="mt-xlarge pb-medium">
|
1119 | <p class="f-body"><a href="https://area17.com/?utm_source=www.CLIENT_URL.com&utm_medium=referral&utm_campaign=footer-credit-2020" target="_blank" rel="noopener">Site by AREA 17</a></p>
|
1120 | </footer>
|
1121 |
|
1122 |
|
1123 | <div class="design-grid-toggles" data-env="local">
|
1124 | <span class="design-grid-toggle design-grid-toggle--columns" onClick="document.querySelector('.design-grid--columns').classList.toggle('s-hide'); this.classList.toggle('s-active');" title="Toggle Grid Columns">
|
1125 | <svg enable-background="new 0 0 10 10" version="1.1" viewBox="0 0 10 10" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
|
1126 | <rect fill="currentColor" x="0" y="0" width="1" height="18"/>
|
1127 | <rect fill="currentColor" x="3" y="0" width="1" height="18"/>
|
1128 | <rect fill="currentColor" x="6" y="0" width="1" height="18"/>
|
1129 | <rect fill="currentColor" x="9" y="0" width="1" height="18"/>
|
1130 | </svg>
|
1131 | </span>
|
1132 | </div>
|
1133 | <span class="design-grid design-grid--columns s-hide"></span>
|
1134 |
|
1135 |
|
1136 | </div>
|
1137 |
|
1138 | <script src="/dist/app.js" type="module"></script>
|
1139 |
|
1140 |
|
1141 | <script nomodule>
|
1142 | (function(d) {
|
1143 | var h = d.head,
|
1144 | s;
|
1145 |
|
1146 |
|
1147 | for(var i = 0; i < d.styleSheets.length; i++){
|
1148 | d.styleSheets[i].disabled = true;
|
1149 | }
|
1150 |
|
1151 |
|
1152 | s = d.createElement('link');
|
1153 | s.rel = 'stylesheet';
|
1154 | s.title = 'html4css';
|
1155 | s.href = '/dist/html4css.css';
|
1156 | h.appendChild(s);
|
1157 |
|
1158 |
|
1159 | if (!w.HTMLPictureElement || !("sizes" in d.createElement('img'))) {
|
1160 | d.createElement('picture');
|
1161 | s = d.createElement('script');
|
1162 | s.async = true;
|
1163 | s.src = '//cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.2/picturefill.min.js';
|
1164 | h.appendChild(s);
|
1165 | }
|
1166 | })(document);
|
1167 | </script>
|
1168 | </body>
|
1169 | </html>
|