UNPKG

39.4 kBHTMLView Raw
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 <!-- head js - if supports JS modules - mustard pass-->
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 // insert sprite SVG
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 <!-- site styles -->
30 <link href="/dist/style.css" rel="stylesheet" />
31
32 <!-- icons -->
33 <link rel="icon" href="/dist/images/favicons/favicon.ico">
34 <link rel="icon" href="/dist/images/favicons/favicon.svg" type="image/svg+xml"><!-- make sure you use `@media (prefers-color-scheme: dark) {}` -->
35 <link rel="apple-touch-icon" href="/dist/images/favicons/apple-touch-icon.png"><!-- make it 180x180 -->
36 <link rel="manifest" href="/dist/images/site.webmanifest">
37
38 <!-- meta info -->
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&amp;fit=min&amp;fm=jpg&amp;q=80&amp;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&amp;fit=min&amp;fm=jpg&amp;q=80&amp;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&amp;fit=min&amp;fm=jpg&amp;q=80&amp;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 <!-- color theme for browser chrome -->
70 <meta name="theme-color" content="#000">
71</head>
72
73<body>
74<div id="a17" data-dummybehavior-a17>
75
76 <style>
77 /* demo styles for this page only */
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>&lt;p class="f-h1">f-h1&lt;/p>
312&lt;p class="f-h2">f-h2&lt;/p>
313&lt;p class="f-body">f-body&lt;/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>&lt;p class="f-body text-title">text-title&lt;/p>
461&lt;p class="f-body text-primary">text-primary&lt;/p>
462&lt;p class="f-body text-secondary">text-secondary&lt;/p>
463&lt;p class="f-body text-accent">text-accent&lt;/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>&lt;div class="bg-primary">&lt;/div>
471&lt;div class="bg-banner">&lt;/div>
472&lt;div class="bg-accent">&lt;/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>&lt;div class="swatches swatches--no-border">
480 &lt;div class="border-primary">&lt;/div>
481 &lt;div class="border-secondary">&lt;/div>
482 &lt;div class="border-tertiary">&lt;/div>
483&lt;/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>&lt;ul class="grid grid-demo">
531 &lt;li class="col-1">&lt;/li>
532 &lt;li class="col-2">&lt;/li>
533 &lt;li class="col-3">&lt;/li>
534 ....
535&lt;/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">&lt;ul class="grid grid-demo grid-demo--10"&gt;</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">&lt;ul class="grid grid-demo grid-demo--24"&gt;</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>&lt;div class="colspan-1">&lt;/div>
664&lt;div class="colspan-2">&lt;/div>
665&lt;div class="colspan-3">&lt;/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">&lt;div class="colspan-demo colspan-demo--flex colspan-demo--10"&gt;</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">&lt;div class="colspan-demo colspan-demo--flex colspan-demo--24"&gt;</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>&lt;p class="sr">Screen reader only text&lt;/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>&lt;div style="height: 10px;" class="bg-banner mt-small bgf">&lt;/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>&lt;div style="height: 10px;" class="mt-small klf">&lt;/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>&nbsp;</li>
1109 <li data-dummybehavior-li>&nbsp;</li>
1110 <li data-dummybehavior-li>&nbsp;</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&nbsp;17</a></p>
1120 </footer>
1121
1122 <!-- DESIGN GRIDS -->
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 <!-- END DESIGN GRIDS -->
1135
1136</div>
1137<!-- site JS -->
1138<script src="/dist/app.js" type="module"></script>
1139
1140<!-- mustard test fail JS -->
1141<script nomodule>
1142 (function(d) {
1143 var h = d.head,
1144 s;
1145
1146 // disable style sheets
1147 for(var i = 0; i < d.styleSheets.length; i++){
1148 d.styleSheets[i].disabled = true;
1149 }
1150
1151 // insert HTML4 CSS
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 // bring in picture fill, if needed
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>