PageSourceSearch

https://www.uptowncss.com/

html uptowncss.com collected 2026-09-28 06:08:02 UTC 67,195 bytes, 1,924 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4
5    <!-- Basic Page Needs
6    –––––––––––––––––––––––––––––––––––––––––––––––––– -->
7    <meta charset="utf-8">
8    <title>Uptown CSS: a SASS framework for Shopify app development</title>
9    <meta name="description"
10          content="A mobile first, responsive framework for Shopify app developers. Drop in the CSS or compile your own SASS for your next EASDK Shopify app project.">
11    <meta name="keywords" content="CSS, SASS, framework, shopify, frontend, web development, EASDK">
12    <meta name="author" content="Ryan ODonnell, ShopPad">
13
14    <meta property="og:url" content="http://www.uptowncss.com"/>
15    <meta property="og:title" content="Uptown CSS: a SASS framework for Shopify app development"/>
16    <meta property="og:site_name" content="Uptown CSS"/>
17    <meta property="og:description" content="A mobile first, responsive framework for Shopify app developers. Drop in the CSS or compile your own SASS for your EASDK Shopify app project."/>
18    <meta property="og:type" content="website"/>
19    <meta property="og:image" content="http://www.uptowncss.com/images/feature-3.jpg"/>
20    <meta property="og:locale" content="en_us"/>
21
22    <!-- Mobile Specific Metas
23    –––––––––––––––––––––––––––––––––––––––––––––––––– -->
24    <meta name="viewport" content="width=device-width, initial-scale=1">
25
26    <!-- CSS
27    –––––––––––––––––––––––––––––––––––––––––––––––––– -->
28    <link rel="stylesheet" href="css/uptown.css">
29    <link rel="stylesheet" href="css/demo.css">
30
31    <!-- Favicon
32    –––––––––––––––––––––––––––––––––––––––––––––––––– -->
33    <link rel="icon" type="image/png" href="images/favicon.png">
34
35    
35<script async defer src="https://buttons.github.io/buttons.js"></script>
35
36
37    <!-- Scripts
38    –––––––––––––––––––––––––––––––––––––––––––––––––– -->
39    
39<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
39
40    
40<script src="js/jquery-ui.js" type="text/javascript"></script>
40
41    
41<script src="js/prettify.js"></script>
41
42    
42<script>
43        $(document).ready(function () {
44            $(document).on("scroll", onScroll);
45
46            //smoothscroll
47            $('a[href^="#"]').on('click', function (e) {
48                e.preventDefault();
49                $(document).off("scroll");
50
51                $('a').each(function () {
52                    $(this).removeClass('active');
53                })
54                $(this).addClass('active');
55
56                var target = this.hash,
57                    menu = target;
58                $target = $(target);
59                $('html, body').stop().animate({
60                    'scrollTop': $target.offset().top+2
61                }, 500, 'swing', function () {
62                    window.location.hash = target;
63                    $(document).on("scroll", onScroll);
64                });
65            });
66        });
67
68        function onScroll(event){
69            var scrollPos = $(document).scrollTop();
70            $('nav a').each(function () {
71                var currLink = $(this);
72                var refElement = $(currLink.attr("href"));
73                if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
74                    $('nav ul li a').removeClass("active");
75                    currLink.addClass("active");
76                }
77                else{
78                    currLink.removeClass("active");
79                }
80            });
81        }
vendor: 377 bytes, lines 81-87
81
82
83        (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
84            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
85          j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
86          'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
87        })(window,document,'script','dataLayer','
87GTM-5QQXJ22
vendor: 9 bytes, lines 87-89
87');
88
89    
89</script>
89
90</head>
91<body>
92<a name="top"></a>
93<div id="container">
94<div class="menu">
95  <nav>
96      <a href="#home" class="active">Home</a>
97      <a href="#overview">Overview</a>
98      <a href="#gettingstarted">Getting Started</a>
99      <a href="#grid">Grid Structure</a>
100      <a href="#cards">Cards</a>
101      <a href="#layouts">Layouts</a>
102      <a href="#typography">Typography</a>
103      <a href="#icons">Icons</a>
104      <a href="#buttons">Buttons</a>
105      <a href="#formfields">Form Fields</a>
106      <a href="#hovertips">Hover Tips</a>
107      <a href="#alerts">Alerts</a>
108      <a href="#table">Tables</a>
109      <a href="#tags">Tags</a>
110      <a href="#tabs">Tabs</a>
111      <a href="#utilities">Utilities</a>
112      <a href="#header">Header</a>
113      <a href="#zerostate">Zero State</a>
114      <a href="#footer">Footer</a>
115  </nav>
116  <a id="poweredby" href="http://www.theshoppad.com" target="_blank">Developed By <span>ShopPad</span></a>
117</div>
118
119<div id="toolbar">
120  <button class="secondary" data-effect="reveal"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" enable-background="new 0 0 16 16"><path d="M7 9H1c-.552 0-1-.114-1-.667v-.666C0 7.114.448 7 1 7h14c.552 0 1 .114 1 .667v.667c0 .552-.448.666-1 .666H7zM7 4H1c-.552 0-1-.114-1-.667v-.666C0 2.114.448 2 1 2h14c.552 0 1 .114 1 .667v.667c0 .552-.448.666-1 .666H7zM7 14H1c-.552 0-1-.114-1-.667v-.667C0 12.114.448 12 1 12h14c.552 0 1 .114 1 .667v.667c0 .552-.448.666-1 .666H7z"/></svg></button>
121  <h2>Lovingly Built By ShopPad</h2>
122</div>
123
124<div id="page">
125
126    <!-- Primary Page Layout
127    –––––––––––––––––––––––––––––––––––––––––––––––––– -->
128
129    <main>
130
131<span class="toc-block" id="home">
132      <header>
133          <h1>Uptown CSS</h1>
134      </header>
135
136      <section>
137          <div class="column">
138              <article>
139                  <div class="card columns twelve">
140                      <h2>The Beautiful Framework for Shopify Application Development</h2>
141                      <p>A semantic toolkit designed to help developers create responsive <a
142                              href="https://docs.shopify.com/api" target="_blank">Shopify apps</a> utilizing the <a
143                              href="https://docs.shopify.com/api/sdks/embedded-app-sdk" target="_blank">Embedded App
144                          SDK</a>.</p>
145                  </div>
146              </article>
147          </div>
148      </section>
149
150      <section>
151          <div class="column">
152              <article>
153                  <div class="card columns four">
154                      <img src="images/css.svg"/>
155                      <h5>Download CSS</h5>
156
157                      <p>Get just the stylesheet to quickly add within your project.</p>
158
159                      <p><a href="css/uptown.css" class="button download" target="_blank">Download CSS</a></p>
160                  </div>
161                  <div class="card columns four">
162                      <img src="images/source.svg"/>
163                      <h5>Download Source</h5>
164
165                      <p>Get the SASS files to customize the stylesheet.</p>
166
167                      <p><a href="https://github.com/shoppad/uptowncss/archive/master.zip" class="button download" target="_blank">Download Source</a></p>
168                  </div>
169                  <div class="card columns four">
170                      <img src="images/github.svg"/>
171                      <h5>View on Github</h5>
172
173                      <p>Learn more about Uptown CSS or help contribute to the cause.</p>
174
175                      <p><a href="https://github.com/shoppad/uptowncss/" class="button secondary" target="_blank">View Project</a></p>
176                  </div>
177              </article>
178          </div>
179      </section>
180</span>
181
182
183<span class="toc-block" id="overview">
184  <h1 class="toc-title">Overview</h1>
185  <section>
186      <div class="full-width">
187          <article>
188              <div class="columns card has-sections six">
189                  <div class="card-section">
190                      <h4>How to Use</h4>
191
192                      <p>Add the stylesheet to your project and begin writing the HTML for your app.</p>
193
194                      <p><pre><code>&lt;link rel="stylesheet" href="uptown.css"&gt;</code></pre></p>
195                  </div>
196                  <hr/>
197                  <div class="card-section">
198                      <h4>Source Dependencies</h4>
199
200                      <p>The framework is a single file that imports <code>.scss</code> files for each component.</p>
201                      <h5>SASS + Autoprefixer</h5>
202
203                      <p>
203Uptown CSS is built using <a href="http://sass-lang.com/" target="_blank">SASS</a> and the <a
204                              href="https://github.com/postcss/autoprefixer" target="_blank">Autoprefixer</a> plugin for powerful
205                          vendor prefixing.</p>
206
207                      <p><a href="https://github.com/postcss/autoprefixer" target="_blank">Autoprefixer</a> is awesome and eliminates the need for
208                          constantly checking <a href="http://caniuse.com/">Can I Use</a> for cross-browser compatibility.</p>
209                      <h5>No JavaScript. None. Zero. Zilch.</h5>
210
211                      <p>There are no JavaScript dependencies. You're free to use any library since Uptown CSS is JS agnostic.</p>
212                  </div>
213              </div>
214              <div class="columns card has-sections six">
215                  <header id="shoppad">
216                    <h2>Developed By</h2>
217                    <h1><a href="http://www.theshoppad.com" target="_blank"><img src="images/shoppad-white.svg" width="374" height="100" /></a></h1>
218                  </header>
219                  <div class="card-section">
220                      <h4>Author</h4>
221
222                      <p><a id="ryan" href="http://twitter.com/ryanodesign" target="_blank"></a>I'm <a
223                              href="http://twitter.com/ryanodesign" target="_blank">Ryan O'Donnell</a>, co-founder over at <a href="http://www.theshoppad.com" target="_blank">ShopPad</a> and <a href="http://www.getmesa.com" target="_blank">Mesa</a>.
224                          Thousands of Shopify stores use <a href="https://apps.shopify.com/partners/shoppad?ref=shoppad" target="_blank">apps from ShopPad</a>
225                          and many of them are powered by Uptown CSS. Uptown is a framework has been battle-tested and is 100% production ready. Now we've open sourced it to share with Shopify's awesome developer community.</p>
226
227                      <h5>Love Uptown? Spread the word!</h5>
228                      <p>Sharing is caring.</p>
229
230                      <p><a href="https://twitter.com/share" class="twitter-share-button" data-text="SAFE CSS - a simple frontend for developing Shopify Apps. http://safecss.theshoppad.com" data-via="shoppad">Tweet</a>
231                      
231<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
231
232
233                      <a class="github-button" href="https://github.com/shoppad/uptowncss" data-icon="octicon-star" data-count-href="/shoppad/uptowncss/stargazers" data-count-api="/repos/shoppad/uptowncss#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star shoppad/uptowncss on GitHub">Star</a>
234
235                      <a class="github-button" href="https://github.com/shoppad/uptowncss/fork" data-icon="octicon-repo-forked" data-count-href="/shoppad/uptowncss/network" data-count-api="/repos/shoppad/uptowncss#forks_count" data-count-aria-label="# forks on GitHub" aria-label="Fork shoppad/uptowncss on GitHub">Fork</a>
236                      </p>
237                  </div>
238              </div>
239          </article>
240      </div>
241  </section>
242</span>
243
244
245<span class="toc-block" id="gettingstarted">
246  <h1 class="toc-title">Getting Started</h1>
247  <p class="toc-description">Your markup should follow this basic structure. What you put inside each section, will depend on your app. </p>
248  <h1 class="toc-title source">Source</h1>
249  <section>
250    <article>
251      <xmp class="columns card prettyprint"><main>
252  <header>
253    ...
254  </header>
255  <section>
256    ...
257  </section>
258  <footer>
259    ...
260  </footer>
261</main></xmp>
262    </article>
263  </section>
264</span>
265
266<span class="toc-block" id="grid">
267  <h1 class="toc-title">Grid Structure</h1>
268  <p class="toc-description">The grid is a 12-column fluid grid with a max width of 1036px, that shrinks with the browser/device at smaller sizes. </p>
269
270
271      <section>
272        <div class="full-width">
273        <article>
274          <div class="column twelve">
275            <p>twelve</p>
276          </div>
277        </article>
278        <article>
279          <div class="columns one">
280            <p>one</p>
281          </div>
282          <div class="columns eleven">
283            <p>eleven</p>
284          </div>
285        </article>
286        <article>
287          <div class="columns two">
288            <p>two</p>
289          </div>
290          <div class="columns ten">
291            <p>ten</p>
292          </div>
293        </article>
294        <article>
295          <div class="columns three">
296            <p>three</p>
297          </div>
298          <div class="columns nine">
299            <p>nine</p>
300          </div>
301        </article>
302        <article>
303          <div class="columns four">
304            <p>four</p>
305          </div>
306          <div class="columns eight">
307            <p>eight</p>
308          </div>
309        </article>
310        <article>
311          <div class="columns five">
312            <p>five</p>
313          </div>
314          <div class="columns seven">
315            <p>seven</p>
316          </div>
317        </article>
318        <article>
319          <div class="columns six">
320            <p>six</p>
321          </div>
322          <div class="columns six">
323            <p>six</p>
324          </div>
325        </article>
326        <article>
327          <div class="column one-half">
328            <p>one-half</p>
329          </div>
330          <div class="column one-half">
331            <p>one-half</p>
332          </div>
333        </article>
334        <article>
335          <div class="column two-thirds">
336            <p>two-thirds</p>
337          </div>
338          <div class="column one-third">
339            <p>one-third</p>
340          </div>
341        </article>
342        </div>
343      </section>
344<h1 class="toc-title source">Source</h1>
345<section>
346  <article>
347<xmp class="prettyprint"><!-- This is a single, full-width element -->
348<article>
349  <div class="column twelve">
350    <p>twelve</p>
351  </div>
352</article>
353<!-- Just use a number and class 'column' or 'columns' -->
354<article>
355  <div class="columns two">
356    <p>two</p>
357  </div>
358  <div class="columns ten">
359    <p>ten</p>
360  </div>
361</article>
362<!-- There are a few shorthand classes available too -->
363<article>
364  <div class="column one-half">
365    <p>one-half</p>
366  </div>
367  <div class="column one-half">
368    <p>one-half</p>
369  </div>
370</article>
371<article>
372  <div class="column two-thirds">
373    <p>two-thirds</p>
374  </div>
375  <div class="column one-third">
376    <p>one-third</p>
377  </div>
378</article></xmp>
379</article></section>
380</span>
381
382
383<span class="toc-block" id="cards">
384  <h1 class="toc-title">Cards</h1>
385  <p class="toc-description">This element is the canvas to put your app content within.</p>
386
387      <section>
388        <article>
389          <div class="card">
390            Card
391          </div>
392        </article>
393      </section>
394
395<h1 class="toc-title source">Source</h1>
396<section><article>
397<xmp class="prettyprint"><article>
398  <div class="card">
399    Card
400  </div>
401</article></xmp>
402</article></section>
403
404
405  <h1 class="toc-title">Cards with sections</h1>
406  <p class="toc-description">Add the class <code>.has-sections</code> to the <code>.card</code> element then just add <code>.card-section</code> elements with dividing <code>&lt;hr&gt;</code> tags.</p>
407      <section>
408        <article>
409          <div class="card has-sections">
410            <div class="card-section">
411              Card Section
412            </div>
413            <hr/>
414            <div class="card-section">
415              Card Section
416            </div>
417            <hr/>
418            <div class="card-section">
419              Card Section
420            </div>
421          </div>
422        </article>
423      </section>
424
425<h1 class="toc-title source">Source</h1>
426<section><article>
427<xmp class="prettyprint"><article>
428  <div class="card has-sections">
429    <div class="card-section">
430      Card Section
431    </div>
432    <hr/>
433    <div class="card-section">
434      Card Section
435    </div>
436    <hr/>
437    <div class="card-section">
438      Card Section
439    </div>
440  </div>
441</article></xmp>
442</article></section>
443</span>
444
445
446<span class="toc-block" id="layouts">
447  <h1 class="toc-title">Layouts</h1>
448  <p class="toc-description">Below are common layouts so you can quickly develop a familiar user experience.</p>
449
450      <section>
451        <aside>
452          <h2>Aside Heading</h2>
453          <p>content</p>
454        </aside>
455        <article>
456          <div class="card">
457            <h5>Section Heading</h5>
458            <p>content</p>
459          </div>
460        </article>
461      </section>
462
463<h1 class="toc-title source">Source</h1>
464<section><article>
465<xmp class="prettyprint"><aside>
466  <h2>Aside Heading</h2>
467  <p>content</p>
468</aside>
469<article>
470  <div class="card">
471    <h5>Section Heading</h5>
472    <p>content</p>
473  </div>
474</article></xmp>
475</article></section>
476
477
478  <h1 class="toc-title">Full-width layout</h1>
479  <p class="toc-description">Add the class <code>.full-width</code> to any element.</p>
480      <section class="full-width">
481        <article>
482          <div class="card">
483            Card
484          </div>
485        </article>
486      </section>
487
488<h1 class="toc-title source">Source</h1>
489<section><article>
490<xmp class="prettyprint"><section class="full-width">
491  <article>
492    <div class="card">
493      Card
494    </div>
495  </article>
496</section></xmp>
497</article></section>
498
499
500  <h1 class="toc-title">Layout with side column</h1>
501  <p class="toc-description">A layout to show a main and side column.</p>
502      <section>
503        <article>
504          <div class="card columns eight">
505            <p>Card</p>
506          </div>
507          <div class="card columns four">
508            <p>Card</p>
509          </div>
510        </article>
511      </section>
512
513<h1 class="toc-title source">Source</h1>
514<section><article>
515<xmp class="prettyprint"><article>
516  <div class="card columns eight">
517    <p>Card</p>
518  </div>
519  <div class="card columns four">
520    <p>Card</p>
521  </div>
522</article></xmp>
523</article></section>
524
525
526  <h1 class="toc-title">Layout with secondary column</h1>
527  <p class="toc-description">The class <code>.secondary</code> can be added to any <code>.card</code> to visually dimm that element.</p>
528      <section>
529        <article>
530          <div class="columns eight card">
531            <p>Card</p>
532          </div>
533          <div class="columns four card secondary">
534            <p>This card is slightly dimmed to give the primary card more visual importance</p>
535          </div>
536        </article>
537      </section>
538
539<h1 class="toc-title source">Source</h1>
540<section><article>
541<xmp class="prettyprint"><article>
542  <div class="columns eight card">
543    <p>Card</p>
544  </div>
545  <div class="columns four card secondary">
546    <p>This card is slightly dimmed to give the primary card more visual importance</p>
547  </div>
548</article></xmp>
549</article></section>
550</span>
551
552
553
554<span class="toc-block" id="typography">
555  <h1 class="toc-title">Typography</h1>
556  <p class="toc-description">Type is defined with rems, so font-sizes and spacial relationships can be responsively sized based on a single <html>
556 font-size property. All measurements are base 10 so an H1 with 4.0rem font-size just means 40px. The typography base is device driven; "San Francisco" for Apple devices and "Roboto", "Segoe UI" for Android device. "Helvetica Neue" is the fallback. Size is set at 1.4rem (14px). Other type basics like anchors, strong, emphasis, and underline are all included.</p>
557
558      <section>
559        <article>
560          <div class="columns six card">
561            <h1>h1 Heading</h1>
562            <h2>h2 Heading</h2>
563            <h3>h3 Heading</h3>
564            <h4>h4 Heading</h4>
565            <h5>h5 Heading</h5>
566            <h6>h6 Heading</h6>
567            <p>Paragraph text</p>
568            <a>Anchor</a>
569            <strong>Bold</strong>
570            <u>Underline</u>
571            <pre>Preformatted text</pre>
572            <code>Code</code>
573            <ul>
574              <li>Unordered list item</li>
575              <li>Unordered list item
576                <ul>
577                  <li>Unordered list item</li>
578                  <li>Unordered list item</li>
579                  <li>Unordered list item</li>
580                </ul>
581              </li>
582              <li>Unordered list item</li>
583            </ul>
584            <ol>
585              <li>Ordered list item</li>
586              <li>Ordered list item
587                <ol>
588                  <li>Ordered list item</li>
589                  <li>Ordered list item</li>
590                  <li>Ordered list item</li>
591                </ol>
592              </li>
593              <li>Ordered list item</li>
594            </ol>
595          </div>
596          <xmp class="columns six card prettyprint"><h1>h1 Heading</h1>
597<h2>h2 Heading</h2>
598<h3>h3 Heading</h3>
599<h4>h4 Heading</h4>
600<h5>h5 Heading</h5>
601<h6>h6 Heading</h6>
602<p>Paragraph text</p>
603<a>Anchor</a>
604<strong>Bold</strong>
605<u>Underline</u>
606<pre>Preformatted text</pre>
607<code>Code</code>
608<ul>
609  <li>Unordered list item</li>
610  <li>Unordered list item
611    <ul>
612      <li>Unordered list item</li>
613      <li>Unordered list item</li>
614      <li>Unordered list item</li>
615    </ul>
616  </li>
617  <li>Unordered list item</li>
618</ul>
619<ol>
620  <li>Ordered list item</li>
621  <li>Unordered list item
622    <ol>
623      <li>Unordered list item</li>
624      <li>Unordered list item</li>
625      <li>Unordered list item</li>
626    </ol>
627  </li>
628  <li>Ordered list item</li>
629</ol></xmp>
630        </article>
631      </section>
632</span>
633
634
635<span class="toc-block" id="icons">
636  <h1 class="toc-title">Icons</h1>
637  <p class="toc-description">Familiar icons are available and can be used on their own or within other elements.</p>
638
639      <section>
640        <article>
641          <div class="columns six card">
642            <div class="row">
643              <div><i class="icon-prev"></i>Prev</div>
644              <div><i class="icon-next"></i>Next</div>
645              <div><i class="icon-trash"></i>Trash</div>
646              <div><i class="icon-clock"></i>Clock</div>
647              <div><i class="icon-close"></i>Close</div>
648              <div><i class="icon-checkmark"></i>Checkmark</div>
649              <div><i class="icon-search"></i>Search</div>
650              <div><i class="icon-flag"></i>Flag</div>
651              <div><i class="icon-bell"></i>Bell</div>
652              <div><i class="icon-exclamation"></i>Exclamation</div>
653              <div><i class="icon-question"></i>Question</div>
654              <div><i class="icon-prohibit"></i>Prohibit</div>
655              <div><i class="icon-product"></i>Product</div>
656              <div><i class="icon-collection"></i>Collection</div>
657              <div><i class="icon-preview"></i>Preview</div>
658              <div><i class="icon-edit"></i>Edit</div>
659              <div><i class="icon-addition"></i>Addition</div>
660              <div><i class="icon-subtraction"></i>Subtraction</div>
661              <div><i class="icon-calendar"></i>Calendar</div>
662              <div><i class="icon-addcircle"></i>Add Circle</div>
663              <div><i class="icon-orders"></i>Orders</div>
664              <div><i class="icon-globe"></i>Globe</div>
665              <div><i class="icon-funnel"></i>Funnel</div>
666              <div><i class="icon-percent"></i>Percent</div>
667              <div><i class="icon-payment"></i>Payment</div>
668              <div><i class="icon-discount"></i>Discount</div>
669              <div><i class="icon-report"></i>Report</div>
670              <div><i class="icon-customers"></i>Customer</div>
671              <div><i class="icon-gear"></i>Gear</div>
672              <div><i class="icon-apps"></i>Apps</div>
673              <div><i class="icon-themes"></i>Themes</div>
674              <div><i class="icon-post"></i>Post</div>
675              <div><i class="icon-pages"></i>Pages</div>
676              <div><i class="icon-navigation"></i>Navigation</div>
677              <div><i class="icon-account"></i>Account</div>
678              <div><i class="icon-folder"></i>Folder</div>
679              <div><i class="icon-giftcards"></i>Gift Cards</div>
680              <div><i class="icon-cart"></i>Cart</div>
681              <div><i class="icon-inventory"></i>Inventory</div>
682              <div><i class="icon-home"></i>Home</div>
683              <div><i class="icon-image"></i>Image</div>
684              <div><i class="icon-download"></i>Download</div>
685              <div><i class="icon-upload"></i>Upload</div>
686              <div><i class="icon-paperclip"></i>Paperclip</div>
687              <div><i class="icon-undo"></i>Undo</div>
688              <div><i class="icon-redo"></i>Redo</div>
689              <div><i class="icon-arrow-left"></i>Arrow Left</div>
690              <div><i class="icon-arrow-right"></i>Arrow Right</div>
691              <div><i class="icon-close-circle"></i>
691Close Circle</div>
692              <div><i class="icon-email"></i>Email</div>
693              <div><i class="icon-refresh"></i>Refresh</div>
694              <div><i class="icon-locked"></i>Locked</div>
695              <div><i class="icon-print"></i>Print</div>
696              <div><i class="icon-import"></i>Import</div>
697              <div><i class="icon-export"></i>Export</div>
698              <div><i class="icon-duplicate"></i>Duplicate</div>
699              <div><i class="icon-share"></i>Share</div>
700              <div><i class="icon-shipping"></i>Shipping</div>
701              <div><i class="icon-taxes"></i>Taxes</div>
702              <div><i class="icon-channels"></i>Channels</div>
703              <div><i class="icon-credit-card"></i>Credit Card</div>
704              <div><i class="icon-currency"></i>Currency</div>
705              <div><i class="icon-social"></i>Social</div>
706              <div><i class="icon-wide"></i>Wide</div>
707              <div><i class="icon-narrow"></i>Narrow</div>
708              <div><i class="icon-move-vertical"></i>Move Vertical</div>
709              <div><i class="icon-move-horizontal"></i>Move Horizontal</div>
710              <div><i class="icon-typography"></i>Typography</div>
711              <div><i class="icon-color"></i>Color</div>
712              <div><i class="icon-add-section"></i>Add Section</div>
713              <div><i class="icon-drag-handle"></i>Drag Handle</div>
714              <div><i class="icon-offsite"></i>Offsite</div>
715            </div>
716          </div>
717          <xmp class="columns six card prettyprint"><i class="icon-prev"></i>
718<i class="icon-next"></i>
719<i class="icon-trash"></i>
720<i class="icon-clock"></i>
721<i class="icon-close"></i>
722<i class="icon-checkmark"></i>
723<i class="icon-search"></i>
724<i class="icon-flag"></i>
725<i class="icon-bell"></i>
726<i class="icon-exclamation"></i>
727<i class="icon-question"></i>
728<i class="icon-prohibit"></i>
729<i class="icon-product"></i>
730<i class="icon-collection"></i>
731<i class="icon-preview"></i>
732<i class="icon-edit"></i>
733<i class="icon-addition"></i>
734<i class="icon-subtraction"></i>
735<i class="icon-calendar"></i>
736<i class="icon-addcircle"></i>
737<i class="icon-orders"></i>
738<i class="icon-globe"></i>
739<i class="icon-funnel"></i>
740<i class="icon-percent"></i>
741<i class="icon-payment"></i>
742<i class="icon-discount"></i>
743<i class="icon-report"></i>
744<i class="icon-customers"></i>
745<i class="icon-gear"></i>
746<i class="icon-apps"></i>
747<i class="icon-themes"></i>
748<i class="icon-post"></i>
749<i class="icon-pages"></i>
750<i class="icon-navigation"></i>
751<i class="icon-account"></i>
752<i class="icon-folder"></i>
753<i class="icon-giftcards"></i>
754<i class="icon-cart"></i>
755<i class="icon-inventory"></i>
756<i class="icon-home"></i>
757<i class="icon-image"></i>
758<i class="icon-download"></i>
759<i class="icon-paperclip"></i>
760<i class="icon-undo"></i>
761<i class="icon-redo"></i>
762<i class="icon-arrow-left"></i>
763<i class="icon-arrow-right"></i>
764<i class="icon-close-circle"></i>
765<i class="icon-email"></i>
766<i class="icon-refresh"></i>
767<i class="icon-locked"></i>
768<i class="icon-print"></i>
769<i class="icon-import"></i>
770<i class="icon-export"></i>
771<i class="icon-duplicate"></i>
772<i class="icon-share"></i>
773<i class="icon-shipping"></i>
774<i class="icon-taxes"></i>
775<i class="icon-channels"></i>
776<i class="icon-credit-card"></i>
777<i class="icon-currency"></i></xmp>
778        </article>
779      </section>
780
781</span>
782
783<span class="toc-block" id="buttons">
784  <h1 class="toc-title">Buttons</h1>
785  <p class="toc-description">Buttons support both the <code>&lt;button&gt;</code>  and the <code>&lt;a&gt;</code> element. Only the <code>&lt;a&gt;</code> element requires a <code>.button</code> class to be appended. The button type is not a factor.</p>
786
787
788      <section>
789        <article>
790          <div class="columns six card">
791            <div class="row">
792              <label>Button Elements</label>
793              <button>Default</button>
794              <button class="secondary">Secondary</button>
795              <button class="warning">Warning</button>
796              <button disabled="disabled">Disabled</button>
797              <button class="link">Link</button>
798            </div>
799            <div class="row">
800              <label>Anchor Elements</label>
801              <a href="#" class="button">Default</a>
802              <a href="#" class="button secondary">Secondary</a>
803              <a href="#" class="button warning">Warning</a>
804              <a href="#" class="button disabled">Disabled</a>
805            </div>
806          </div>
807          <xmp class="columns six card prettyprint"><button>
807Default</button>
808<button class="secondary">Secondary</button>
809<button class="warning">Warning</button>
810<button disabled="disabled">Disabled</button>
811<button class="link">Link</button>
812
813<a href="#" class="button">Default</a>
814<a href="#" class="button secondary">Secondary</a>
815<a href="#" class="button warning">Warning</a>
816<a href="#" class="button disabled">Disabled</a></xmp>
817        </article>
818      </section>
819
820
821  <h1 class="toc-title">Button Groups</h1>
822  <p class="toc-description">Wrap any set of buttons within an element having a class of <code>.button-group</code>.</p>
823      <section>
824        <article>
825          <div class="columns six card">
826            <div class="row">
827              <span class="button-group">
828                <button class="secondary">Left</button>
829                <button class="secondary">Middle</button>
830                <button class="secondary">Right</button>
831              </span>
832            </div>
833            <div class="row">
834              <span class="button-group">
835                <button class="secondary">Import</button>
836                <button class="secondary">Export</button>
837              </span>
838            </div>
839          </div>
840          <xmp class="columns six card prettyprint"><span class="button-group">
841  <button class="secondary">Left</button>
842  <button class="secondary">Middle</button>
843  <button class="secondary">Right</button>
844</span></xmp>
845        </article>
846      </section>
847
848
849  <h1 class="toc-title">Icon Buttons</h1>
850  <p class="toc-description">Add any supported icon without text. Disabled state is also supported to dim the icon color.</p>
851      <section>
852        <article>
853          <div class="columns six card">
854            <div class="row">
855              <button class="secondary icon-arrow-left"></button>
856              <button class="secondary icon-arrow-right"></button>
857              <button class="secondary icon-trash"></button>
858              <button class="secondary icon-calendar"></button>
859            </div>
860            <div class="row">
861              <button class="secondary icon-arrow-left" disabled="disabled"></button>
862              <button class="secondary icon-arrow-right" disabled="disabled"></button>
863              <button class="secondary icon-trash" disabled="disabled"></button>
864              <button class="secondary icon-calendar" disabled="disabled"></button>
865            </div>
866          </div>
867          <xmp class="columns six card prettyprint"><button class="secondary icon-arrow-left"></button>
868<button class="secondary icon-arrow-right"></button>
869<button class="secondary icon-trash"></button>
870<button class="secondary icon-calendar"></button>
871
872<!-- Icon button can also be disabled -->
873<button class="secondary icon-arrow-left" disabled="disabled"></button>
874<button class="secondary icon-arrow-right" disabled="disabled"></button>
875<button class="secondary icon-trash" disabled="disabled"></button>
876<button class="secondary icon-calendar" disabled="disabled"></button> </xmp>
877        </article>
878      </section>
879</span>
880
881
882<span class="toc-block" id="formfields">
883  <h1 class="toc-title">Form Fields</h1>
884  <p class="toc-description">Standard form fields. Wrap radio and checkbox elements with a <code>label</code> element.</p>
885
886
887      <section>
888        <article>
889          <div class="columns six card">
890            <div class="row">
891              <label>Label</label>
892              <input type="text" />
893            </div>
894            <div class="row">
895              <label><input type="radio" name="option1" checked="checked">Option</label>
896              <label><input type="radio" name="option1">Option</label>
897            </div>
898            <div class="row">
899              <select><option>Select</option></select>
900            </div>
901            <div class="row">
902              <label><input type="checkbox" name="option2" checked="checked">Option</label>
903              <label><input type="checkbox" name="option2">Option</label>
904            </div>
905            <div class="row">
906              <textarea></textarea>
907            </div>
908            <div class="row">
909              <input type="text" placeholder="Type something already..." />
910            </div>
911          </div>
912          <xmp class="columns six card prettyprint"><div class="row">
913  <label>Label</label>
914  <input type="text" />
915</div>
916<div class="row">
917  <label><input type="radio" name="option1a" checked="checked">Option</label>
918  <label><input type="radio" name="option1a">Option</label>
919</div>
920<div class="row">
921  <select><option>Select</option></select>
922</div>
923<div class="row">
924  <label><input type="checkbox" name="option2a" checked="checked">Option</label>
925  <label><input type="checkbox" name="option2a">Option</label>
926</div>
927<div class="row">
928  <textarea></textarea>
929</div></xmp>
930        </article>
931      </section>
932
933
934  <h1 class="toc-title">Form Fields: Disabled</h1>
935  <p class="toc-description">Disabled form field states are supported too. Add a <code>disabled="disabled"</code> attribute to any form field.</p>
936      <section>
937        <article>
938          <div class="columns six card">
939            <div class="row">
940              <label>Label</label>
941              <input type="text" disabled="disabled" />
942            </div>
943            <div class="row">
944              <label><input type="radio" name="option3" checked="checked" disabled="disabled">Option</label>
945              <label><input type="radio" name="option3" disabled="disabled">Option</label>
946            </div>
947            <div class="row">
948              <select disabled="disabled"><option>Select</option></select>
949            </div>
950            <div class="row">
951              <label><input type="checkbox" name="option4" checked="checked" disabled="disabled">Option</label>
952              <label><input type="checkbox" name="option4" disabled="disabled">Option</label>
953            </div>
954            <div class="row">
955              <textarea disabled="disabled"></textarea>
956            </div>
957          </div>
958          <xmp class="columns six card prettyprint"><div class="row">
959  <label>Label</label>
960  <input type="text" disabled="disabled" />
961</div>
962<div class="row">
963  <label><input type="radio" name="option3a" checked="checked" disabled="disabled">Option</label>
964  <label><input type="radio" name="option3a" disabled="disabled">Option</label>
965</div>
966<div class="row">
967  <select disabled="disabled"><option>Select</option></select>
968</div>
969<div class="row">
970  <label><input type="checkbox" name="option4a" checked="checked" disabled="disabled">Option</label>
971  <label><input type="checkbox" name="option4a" disabled="disabled">Option</label>
972</div>
973<div class="row">
974  <textarea disabled="disabled"></textarea>
975</div></xmp>
976        </article>
977      </section>
978
979
980  <h1 class="toc-title">Form Fields: Errors</h1>
981  <p class="toc-description">Add <code>.error</code> class to the parent <code>.row</code> or to the <code>&lt;label&gt;</code> for checkboxes and radio elements.</p>
982      <section>
983        <article>
984          <div class="columns six card">
985            <div class="row error">
986              <label>Label</label>
987              <input type="text" />
988            </div>
989            <div class="row">
990              <label><input type="radio" name="option5" checked="checked">Option</label>
991              <label class="error"><input type="radio" name="option5">Option</label>
992            </div>
993            <div class="row error">
994              <select><option>Select</option></select>
995            </div>
996            <div class="row">
997              <label><input type="checkbox" name="option6" checked="checked">Option</label>
998              <label class="error"><input type="checkbox" name="option6">Option</label>
999            </div>
1000            <div class="row error">
1001              <textarea></textarea>
1002            </div>
1003          </div>
1004          <xmp class="columns six card prettyprint"><div class="row error">
1005  <label>Label</label>
1006  <input type="text" />
1007</div>
1008<div class="row">
1009  <label><input type="radio" name="option5a" checked="checked">Option</label>
1010  <label class="error"><input type="radio" name="option5a">Option</label>
1011</div>
1012<div class="row error">
1013  <select><option>Select</option></select>
1014</div>
1015<div class="row">
1016  <label><input type="checkbox" name="option6a" checked="checked">Option</label>
1017  <label class="error"><input type="checkbox" name="option6a">Option</label>
1018</div>
1019<div class="row error">
1020  <textarea></textarea>
1021</div></xmp>
1022        </article>
1023      </section>
1024
1025
1026  <h1 class="toc-title">Search</h1>
1027  <p class="toc-description">Use the input type <code>search</code>. No extra classes required.</p>
1028      <section>
1029        <article>
1030          <div class="columns six card">
1031            <input type="search" />
1032          </div>
1033          <xmp class="columns six card prettyprint"><input type="search" /></xmp>
1034        </article>
1035      </section>
1036
1037
1038  <h1 class="toc-title">Side Elements</h1>
1039  <p class="toc-description">Add <code>.side-elements</code> to the parent <code>.row</code> element. All elements within will stretch automatically to be on a single line.</p>
1040      <section>
1041        <article>
1042          <div class="columns six card">
1043            <div class="row side-elements">
1044              <label>Label</label>
1045              <input type="text" />
1046              <button>Action</button>
1047            </div>
1048          </div>
1049          <xmp class="columns six card prettyprint"><div class="row side-elements">
1050  <label>Label</label>
1051  <input type="text" />
1052  <button>Action</button>
1053</div></xmp>
1054        </article>
1055      </section>
1056
1057
1058  <h1 class="toc-title">Advanced Form Element</h1>
1059  <p class="toc-description">The <code>.label-cta</code> class will pull any element to the right.</p>
1060      <section>
1061        <article>
1062          <div class="columns six card">
1063            <label>Label <a href="#" class="label-cta">Link</a></label>
1064            <input type="text" />
1065            <em>Context help text</em>
1066          </div>
1067          <xmp class="columns six card prettyprint"><label>Label <a href="#" class="label-cta">Link</a></label>
1068<input type="text" />
1069<em>Context help text</em></xmp>
1070        </article>
1071      </section>
1072
1073
1074  <h1 class="toc-title">Append Field Elements</h1>
1075  <p class="toc-description">Use an element with a class <code>.input-group</code>. Add elements with <code>.append</code> class. Place them before or after the form field.</p>
1076      <section>
1077        <article>
1078          <div class="columns six card">
1079            <div class="row">
1080              <div class="input-group">
1081                <span class="append">Prefix</span>
1082                <input type="text" />
1083              </div>
1084            </div>
1085            <div class="row">
1086              <div class="input-group">
1087                <input type="text" />
1088                <span class="append">Suffix</span>
1089              </div>
1090            </div>
1091            <div class="row">
1092              <div class="input-group">
1093                <span class="append">$</span>
1094                <input type="text" />
1095                <span class="append">.00</span>
1096              </div>
1097            </div>
1098          </div>
1099          <xmp class="columns six card prettyprint"><div class="input-group">
1100  <span class="append">Prefix</span>
1101  <input type="text" />
1102</div>
1103<div class="input-group">
1104  <input type="text" />
1105  <span class="append">Suffix</span>
1106</div>
1107<div class="input-group">
1108  <span class="append">$</span>
1109  <input type="text" />
1110  <span class="append">.00</span>
1111</div>
1112</xmp>
1113        </article>
1114      </section>
1115
1116
1117  <h1 class="toc-title">Append Field Buttons</h1>
1118  <p class="toc-description">Use an element with a class <code>.input-group</code>. Add <code>&lt;button&gt;</code> or <code>.button</code> elements. Place them before or after the form field.</p>
1119      <section>
1120        <article>
1121          <div class="columns six card">
1122            <div class="row">
1123              <div class="input-group">
1124                <input type="text" />
1125                <button class="secondary">Button</button>
1126              </div>
1127            </div>
1128            <div class="row">
1129              <div class="input-group">
1130                <button class="secondary">Filter</button>
1131                <input type="text" />
1132                <button class="secondary">Save</button>
1133                <button class="secondary icon-trash"></button>
1134              </div>
1135            </div>
1136          </div>
1137          <xmp class="columns six card prettyprint"><div class="input-group">
1138  <input type="text" />
1139  <button class="secondary">Button</button>
1140</div>
1141
1142<div class="input-group">
1143  <button class="secondary">Filter</button>
1144  <input type="text" />
1145  <button class="secondary">Save</button>
1146  <button class="secondary icon-trash"></button>
1147</div></xmp>
1148        </article>
1149      </section>
1150</span>
1151
1152
1153<span class="toc-block" id="hovertips">
1154  <h1 class="toc-title">Hover Tips</h1>
1155  <p class="toc-description">Add a class <code>.tip</code> to any element. Add the tip's text as a <code>data-hover</code> attribute. The hover event will automatically pull the text without any JavaScript needed.</p>
1156      <section>
1157        <article>
1158          <div class="columns six card">
1159            <h4>Paragraph Text</h4>
1160            <p>Lorem ipsum dolor <a class="tip" href="#" data-hover="You found me!"> consectetur</a> adipiscing elit.</p>
1161
1162            <h4>Links</h4>
1163            <p><a class="tip" href="#" data-hover="Don't eat yellow snow">Hover for a tip</a></p>
1164
1165            <h4>Buttons</h4>
1166            <p><button class="tip" data-hover="You rebel">Hover Me</button></p>
1167          </div>
1168          <xmp class="columns six card prettyprint"><a class="tip" href="#" data-hover="You found me!">
1169
1170<button class="tip" data-hover="You rebel">Hover Me</button></xmp>
1171        </article>
1172      </section>
1173</span>
1174
1175
1176<span class="toc-block" id="alerts">
1177  <h1 class="toc-title">Alerts</h1>
1178  <p class="toc-description">The container element needs a class <code>.alert</code>. Add <code>.notice</code>, <code>.success</code>, <code>.warning</code>, <code>.notification</code> or <code>.error</code> for the desired icon and color. The <code>&lt;dl&gt;</code> element is for the title and description text. Adding a <code>.close</code> element or <code>&lt;button&gt;</code> elements are optional.</p>
1179      <section>
1180        <article>
1181          <div class="columns six card">
1182            <div class="alert">
1183              <dl>
1184                <dt>General Alert</dt>
1185              </dl>
1186            </div>
1187            <div class="alert">
1188              <a class="close" href="#"></a>
1189              <dl>
1190                <dt>General Alert with Close</dt>
1191                <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis leo purus, rhoncus id ultrices vitae, feugiat non neque.</dd>
1192              </dl>
1193            </div>
1194            <div class="alert">
1195              <dl>
1196                <dt>General Alert with Button</dt>
1197                <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis leo purus, rhoncus id ultrices vitae. <a href="#">Learn More</a></dd>
1198              </dl>
1199              <button>Change</button>
1200            </div>
1201            <div class="alert notice">
1202              <dl>
1203                <dt>Notice Alert</dt>
1204                <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit leo purus, rhoncus id ultrices vitae.</dd>
1205              </dl>
1206            </div>
1207            <div class="alert success">
1208              <dl>
1209                <dt>Success Alert</dt>
1210                <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit leo purus, rhoncus id ultrices vitae.</dd>
1211              </dl>
1212            </div>
1213            <div class="alert warning">
1214              <dl>
1215                <dt>Warning Alert</dt>
1216                <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit leo purus, rhoncus id ultrices vitae.</dd>
1217              </dl>
1218            </div>
1219            <div class="alert notification">
1220              <dl>
1221                <dt>Notification Alert</dt>
1222                <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit leo purus, rhoncus id ultrices vitae.</dd>
1223              </dl>
1224            </div>
1225            <div class="alert error">
1226              <dl>
1227                <dt>Error Alert</dt>
1228                <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit leo purus, rhoncus id ultrices vitae.</dd>
1229              </dl>
1230            </div>
1231          </div>
1232          <xmp class="columns six card prettyprint"><div class="alert">
1233  <dl>
1234    <dt>General Alert</dt>
1235  </dl>
1236</div>
1237<div class="alert">
1238  <a class="close" href="#"></a>
1239  <dl>
1240    <dt>General Alert with Close</dt>
1241    <dd>...</dd>
1242  </dl>
1243</div>
1244<div class="alert">
1245  <dl>
1246    <dt>General Alert with Button</dt>
1247    <dd>... <a href="#">Learn More</a></dd>
1248  </dl>
1249  <button>Change</button>
1250</div>
1251<div class="alert notice">
1252  <dl>
1253    <dt>Notice Alert</dt>
1254    <dd>...</dd>
1255  </dl>
1256</div>
1257<div class="alert success">
1258  <dl>
1259    <dt>Success Alert</dt>
1260    <dd>...</dd>
1261  </dl>
1262</div>
1263<div class="alert warning">
1264  <dl>
1265    <dt>Warning Alert</dt>
1266    <dd>...</dd>
1267  </dl>
1268</div>
1269<div class="alert notification">
1270  <dl>
1271    <dt>Notification Alert</dt>
1272    <dd>...</dd>
1273  </dl>
1274</div>
1275<div class="alert error">
1276  <dl>
1277    <dt>Error Alert</dt>
1278    <dd>...</dd>
1279  </dl>
1280</div></xmp>
1281        </article>
1282      </section>
1283</span>
1284
1285
1286<span class="toc-block" id="table">
1287  <h1 class="toc-title">Tables</h1>
1288  <p class="toc-description">Default <code>&lt;table&gt;</code> containing various types of content. Add a container wrapper with a class <code>.overflow-container</code> if the table needs to be scrollable on smaller screens.</p>
1289      <section>
1290        <article>
1291          <div class="card">
1292            <div class="overflow-container">
1293              <table>
1294                <thead>
1295                  <tr>
1296                    <th colspan="2">Product</th>
1297                    <th>Status</th>
1298                    <th>Action</th>
1299                  </tr>
1300                </thead>
1301                <tbody>
1302                  <tr>
1303                    <td><a href="#"><i class="icon-image"></i></a></td>
1304                    <td><a href="#">Some Product</a></td>
1305                    <td></td>
1306                    <td><button class="secondary icon-trash"></button></td>
1307                  </tr>
1308                  <tr>
1309                    <td><a href="#"><i class="icon-image"></i></a></td>
1310                    <td><a href="#">Another Product</a></td>
1311                    <td><ul>
1312                          <li>This product has no images.</li>
1313                          <li>This product has no description.</li>
1314                          <li>This product must be at least $0.01.</li>
1315                      </ul></td>
1316                    <td></td>
1317                  </tr>
1318                  <tr>
1319                    <td><a href="#"><i class="icon-image"></i></a></td>
1320                    <td><a href="#">One More Product</a></td>
1321                    <td><ul>
1322                          <li>This product must be at least $0.01.</li>
1323                      </ul></td>
1324                    <td></td>
1325                  </tr>
1326                </tbody>
1327              </table>
1328            </div>
1329          </div>
1330        </article>
1331      </section>
1332      <h1 class="toc-title source">Source</h1>
1333      <section>
1334        <article>
1335          <xmp class="card prettyprint"><table>
1336  <thead>
1337    <tr>
1338      <th colspan="2">Product</th>
1339      <th>Status</th>
1340      <th>Action</th>
1341    </tr>
1342  </thead>
1343  <tbody>
1344    <tr>
1345      <td><a href="#"><img width="35" height="35" alt="" src="images/image-none.svg"></a></td>
1346      <td><a href="#">Some Product</a></td>
1347      <td></td>
1348      <td><button class="secondary icon-trash"></button></td>
1349    </tr>
1350    <tr>
1351      <td><a href="#"><img width="35" height="35" alt="" src="images/image-none.svg"></a></td>
1352      <td><a href="#">Another Product</a></td>
1353      <td><ul>
1354            <li>This product has no images.</li>
1355            <li>This product has no description.</li>
1356            <li>This product must be at least $0.01.</li>
1357        </ul></td>
1358      <td></td>
1359    </tr>
1360    <tr>
1361      <td><a href="#"><img width="35" height="35" alt="" src="images/image-none.svg"></a></td>
1362      <td><a href="#">One More Product</a></td>
1363      <td><ul>
1364            <li>This product must be at least $0.01.</li>
1365        </ul></td>
1366      <td></td>
1367    </tr>
1368  </tbody>
1369</table></xmp>
1370        </article>
1371      </section>
1372
1373  <h1 class="toc-title">Table with tags &amp; buttons</h1>
1374  <p class="toc-description">Default <code>&lt;table&gt;</code> element showing buttons and tags elements.</p>
1375      <section>
1376        <article>
1377          <div class="card">
1378            <div class="overflow-container">
1379              <table>
1380                <thead>
1381                  <tr>
1382                    <th></th>
1383                    <th>Product</th>
1384                    <th>Status</th>
1385                    <th>Action</th>
1386                  </tr>
1387                </thead>
1388                <tbody>
1389                  <tr>
1390                    <td>Text</td>
1391                    <td><a href="#">Some Product</a></td>
1392                    <td><span class="tag yellow">Approved</span></td>
1393                    <td><button class="secondary">Button</button></td>
1394                  </tr>
1395                  <tr>
1396                    <td>Text</td>
1397                    <td><a href="#">Some Product</a></td>
1398                    <td><span class="tag orange">Pending</span></td>
1399                    <td><button class="secondary">Button</button></td>
1400                  </tr>
1401                  <tr>
1402                    <td>Text</td>
1403                    <td><a href="#">Some Product</a></td>
1404                    <td><span class="tag grey">Paid</span></td>
1405                    <td><button class="secondary">Button</button></td>
1406                  </tr>
1407                </tbody>
1408              </table>
1409            </div>
1410          </div>
1411        </article>
1412      </section>
1413      <h1 class="toc-title source">Source</h1>
1414      <section>
1415        <article>
1416          <xmp class="card prettyprint"><table>
1417  <thead>
1418    <tr>
1419      <th></th>
1420      <th>Product</th>
1421      <th>Status</th>
1422      <th>Action</th>
1423    </tr>
1424  </thead>
1425  <tbody>
1426    <tr>
1427      <td>Text</td>
1428      <td><a href="#">Some Product</a></td>
1429      <td><span class="tag yellow">Approved</span></td>
1430      <td><button class="secondary">Button</button></td>
1431    </tr>
1432    <tr>
1433      <td>Text</td>
1434      <td><a href="#">Some Product</a></td>
1435      <td><span class="tag orange">Pending</span></td>
1436      <td><button class="secondary">Button</button></td>
1437    </tr>
1438    <tr>
1439      <td>Text</td>
1440      <td><a href="#">Some Product</a></td>
1441      <td><span class="tag grey">Paid</span></td>
1442      <td><button class="secondary">Button</button></td>
1443    </tr>
1444  </tbody>
1445</table></xmp>
1446        </article>
1447      </section>
1448
1449  <h1 class="toc-title">Results Table</h1>
1450  <p class="toc-description">A <code>&lt;table&gt;</code> showing a list of results. Use the <code>.pagination</code> container around the <code>.button-group</code>.</p>
1451      <section>
1452        <article>
1453          <div class="card">
1454            <div class="overflow-container">
1455              <table class="results">
1456                <thead>
1457                  <tr>
1458                    <th>
1458Name</th>
1459                    <th>Location</th>
1460                    <th>Orders</th>
1461                    <th>Last Order</th>
1462                    <th class="align-right">Total Spent</th>
1463                  </tr>
1464                </thead>
1465                <tbody>
1466                  <tr>
1467                    <td>John Doe</td>
1468                    <td>Oakland, CA</td>
1469                    <td>1</td>
1470                    <td><a href="#">#1001</a></td>
1471                    <td class="align-right">$125.00</td>
1472                  </tr>
1473                  <tr>
1474                    <td>Jane Doe</td>
1475                    <td>Oakland, CA</td>
1476                    <td>0</td>
1477                    <td>&mdash;</td>
1478                    <td class="align-right">$0.00</td>
1479                  </tr>
1480                  <tr>
1481                    <td>Mike Smith</td>
1482                    <td>San Francisco, CA</td>
1483                    <td>1</td>
1484                    <td><a href="#">#1002</a></td>
1485                    <td class="align-right">$100.00</td>
1486                  </tr>
1487                </tbody>
1488              </table>
1489            </div>
1490            <div class="pagination">
1491              <span class="button-group">
1492                <button class="secondary icon-arrow-left"></button>
1493                <button class="secondary icon-arrow-right"></button>
1494              </span>
1495            </div>
1496          </div>
1497        </article>
1498      </section>
1499      <h1 class="toc-title source">Source</h1>
1500      <section>
1501        <article>
1502          <xmp class="card prettyprint"><table class="results">
1503  <thead>
1504    <tr>
1505      <th>Name</th>
1506      <th>Location</th>
1507      <th>Orders</th>
1508      <th>Last Order</th>
1509      <th class="align-right">Total Spent</th>
1510    </tr>
1511  </thead>
1512  <tbody>
1513    <tr>
1514      <td>John Doe</td>
1515      <td>Oakland, CA</td>
1516      <td>1</td>
1517      <td><a href="#">#1001</a></td>
1518      <td class="align-right">$125.00</td>
1519    </tr>
1520    <tr>
1521      <td>Jane Doe</td>
1522      <td>Oakland, CA</td>
1523      <td>0</td>
1524      <td>&mdash;</td>
1525      <td class="align-right">$0.00</td>
1526    </tr>
1527    <tr>
1528      <td>Mike Smith</td>
1529      <td>San Francisco, CA</td>
1530      <td>1</td>
1531      <td><a href="#">#1002</a></td>
1532      <td class="align-right">$100.00</td>
1533    </tr>
1534  </tbody>
1535</table>
1536<div class="pagination">
1537  <span class="button-group">
1538    <button class="secondary icon-prev"></button>
1539    <button class="secondary icon-next"></button>
1540  </span>
1541</div></xmp>
1542        </article>
1543      </section>
1544
1545  <h1 class="toc-title">Text Highlight</h1>
1546  <p class="toc-description">Use <code>.highlight-warning</code> to highlight any text.</p>
1547      <section>
1548        <article>
1549          <div class="card">
1550            <table class="results">
1551              <thead>
1552                <tr>
1553                  <th>Product</th>
1554                  <th>Inventory</th>
1555                  <th>Type</th>
1556                </tr>
1557              </thead>
1558              <tbody>
1559                <tr>
1560                  <td>Adidas Running Show</td>
1561                  <td><span class="highlight-warning">5</span> in stock</td>
1562                  <td>Shoe</td>
1563                </tr>
1564                <tr>
1565                  <td>New Balance Running Show</td>
1566                  <td><span class="highlight-warning">12</span> in stock</td>
1567                  <td>Shoe</td>
1568                </tr>
1569                <tr>
1570                  <td>New Balance Running Show</td>
1571                  <td>60 in stock for 5 variants</td>
1572                  <td>Shoe</td>
1573                </tr>
1574              </tbody>
1575            </table>
1576          </div>
1577        </article>
1578      </section>
1579      <h1 class="toc-title source">Source</h1>
1580      <section>
1581        <article>
1582          <xmp class="card prettyprint"><table class="results">
1583  <thead>
1584    <tr>
1585      <th>Product</th>
1586      <th>Inventory</th>
1587      <th>Type</th>
1588    </tr>
1589  </thead>
1590  <tbody>
1591    <tr>
1592      <td>Adidas Running Show</td>
1593      <td><span class="highlight-warning">5</span> in stock</td>
1594      <td>Shoe</td>
1595    </tr>
1596    <tr>
1597      <td>New Balance Running Show</td>
1598      <td><span class="highlight-warning">12</span> in stock</td>
1599      <td>Shoe</td>
1600    </tr>
1601    <tr>
1602      <td>New Balance Running Show</td>
1603      <td>60 in stock for 5 variants</td>
1604      <td>Shoe</td>
1605    </tr>
1606  </tbody>
1607</table></xmp>
1608        </article>
1609      </section>
1610
1611  <h1 class="toc-title">Summary Report</h1>
1612  <p class="toc-description">Add <code>.summary</code> to a <code>&lt;table&gt;</code> element for this specific layout.</p>
1613      <section>
1614        <article>
1615          <div class="columns six card">
1616            <table class="summary">
1617              <thead>
1618                <th colspan="3">Heading <span>Last 7 Days</span></th>
1619              </thead>
1620              <tbody>
1621                <tr>
1622                  <td>Direct</td>
1623                  <td>67%</td>
1624                  <td>2</td>
1625                </tr>
1626                <tr>
1627                  <td>Search</td>
1628                  <td>33%</td>
1629                  <td>1</td>
1630                </tr>
1631              </tbody>
1632            </table>
1633          </div>
1634          <xmp class="columns six card prettyprint"><table class="summary">
1635  <thead>
1636    <th colspan="3">Heading <span>Last 7 Days</span></th>
1637  </thead>
1638  <tbody>
1639    <tr>
1640      <td>Direct</td>
1641      <td>67%</td>
1642      <td>2</td>
1643    </tr>
1644    <tr>
1645      <td>Search</td>
1646      <td>33%</td>
1647      <td>1</td>
1648    </tr>
1649  </tbody>
1650</table></xmp>
1651        </article>
1652      </section>
1653</span>
1654
1655
1656
1657<span class="toc-block" id="tags">
1658  <h1 class="toc-title">Tags</h1>
1659  <p class="toc-description">Any element with <code>.tag</code>
1659 and any supporting color.</p>
1660      <section>
1661        <article>
1662          <div class="columns six card">
1663            <span class="tag green">green</span>
1664            <span class="tag yellow">yellow</span>
1665            <span class="tag red">red</span>
1666            <span class="tag grey">grey</span>
1667            <span class="tag orange">orange</span>
1668            <span class="tag blue">blue</span>
1669          </div>
1670          <xmp class="columns six card prettyprint"><span class="tag green">green</span>
1671<span class="tag yellow">yellow</span>
1672<span class="tag red">red</span>
1673<span class="tag grey">grey</span>
1674<span class="tag orange">orange</span>
1675<span class="tag blue">blue</span>
1676</xmp>
1677        </article>
1678      </section>
1679
1680  <h1 class="toc-title">Pending Tags</h1>
1681  <p class="toc-description">Add the class <code>.pending</code> to display a clock icon to represent a "pending" state.</p>
1682      <section>
1683        <article>
1684          <div class="columns six card">
1685            <span class="tag green pending">green</span>
1686            <span class="tag yellow pending">yellow</span>
1687            <span class="tag red pending">red</span>
1688            <span class="tag grey pending">grey</span>
1689            <span class="tag orange pending">orange</span>
1690            <span class="tag blue pending">blue</span>
1691          </div>
1692          <xmp class="columns six card prettyprint"><span class="tag green pending">green</span>
1693<span class="tag yellow pending">yellow</span>
1694<span class="tag red pending">red</span>
1695<span class="tag grey pending">grey</span>
1696<span class="tag orange pending">orange</span>
1697<span class="tag blue pending">blue</span> </xmp>
1698        </article>
1699      </section>
1700
1701  <h1 class="toc-title">Removable Tags</h1>
1702  <p class="toc-description">Primarily used with content not associated with forms.</p>
1703      <section>
1704        <article>
1705          <div class="columns six card">
1706            <span class="tag green remove">green <a href="#"></a></span>
1707            <span class="tag yellow remove">yellow <a href="#"></a></span>
1708            <span class="tag red remove">red <a href="#"></a></span>
1709            <span class="tag grey remove">grey <a href="#"></a></span>
1710            <span class="tag orange remove">orange <a href="#"></a></span>
1711            <span class="tag blue remove">blue <a href="#"></a></span>
1712          </div>
1713          <xmp class="columns six card prettyprint"><span class="tag green remove">green <a href="#"></a></span>
1714<span class="tag yellow remove">yellow <a href="#"></a></span>
1715<span class="tag red remove">red <a href="#"></a></span>
1716<span class="tag grey remove">grey <a href="#"></a></span>
1717<span class="tag orange remove">orange <a href="#"></a></span>
1718<span class="tag blue remove">blue <a href="#"></a></span> </xmp>
1719        </article>
1720      </section>
1721
1722
1723<span class="toc-block" id="tabs">
1724  <h1 class="toc-title">Tabs</h1>
1725  <p class="toc-description">Use a <code>&lt;ul&gt;</code> with the class <code>.tabs</code> directly after an element with the <code>.has-sections</code> class.</p>
1726      <section>
1727        <article>
1728          <div class="columns six card has-sections">
1729            <ul class="tabs">
1730              <li class="active"><a href="#">Tab 1</a></li>
1731              <li><a href="#">Tab 2</a></li>
1732              <li><a href="#">Tab 3</a></li>
1733            </ul>
1734            <div class="card-section">
1735              <p>Content</p>
1736            </div>
1737          </div>
1738          <xmp class="columns six card prettyprint"><div class="columns has-sections card">
1739  <ul class="tabs">
1740    <li class="active"><a href="#">Tab 1</a></li>
1741    <li><a href="#">Tab 2</a></li>
1742    <li><a href="#">Tab 3</a></li>
1743  </ul>
1744  <div class="card-section">
1745    <p>Content</p>
1746  </div>
1747</div></xmp>
1748        </article>
1749      </section>
1750</span>
1751
1752
1753<span class="toc-block" id="utilities">
1754  <h1 class="toc-title">Utilities</h1>
1755  <p class="toc-description">Sometimes it's better to use a utility class than create a whole new class just to do something simple.</p>
1756      <section>
1757        <article>
1758          <xmp class="column card prettyprint">.full-width {
1759  width: 100%;
1760  max-width: 100%;
1761  box-sizing: border-box;
1762}
1763.max-full-width {
1764  max-width: 100%;
1765  box-sizing: border-box;
1766}
1767.align-center {
1768  text-align: center;
1769}
1770.align-left {
1771  text-align: left;
1772}
1773.align-right {
1774  text-align: right;
1775}
1776.highlight-warning {
1777  background: #FCF1CD;
1778  color: #ED6347;
1779}
1780.blue {
1781  color: #007ACE;
1782}
1783.green {
1784  color: #50B83C;
1785}
1786.yellow {
1787  color: #EEC200;
1788}
1789.red {
1790  color: #ED6347;
1791}
1792.grey {
1793  color: #DFE4E8;
1794}
1795.orange {
1796  color: #F49342;
1797}
1798.emphasis {
1799  font-weight: 600;
1800  color: hsl(0,0%,10%);
1801}
1802.subdued {
1803  font-weight: normal;
1804  color: hsl(0,0%,44%);
1805}
1806.hide-scrollbars {
1807
1808  ::-webkit-scrollbar {
1809    display: none !important;
1810    width: 10px !important;
1811    height: 0 !important;
1812  }
1813  ::-webkit-scrollbar-thumb {
1814      background-color: rgba(0,0,0,0);
1815  }
1816}
1817.overflow-container {
1818  overflow: auto;
1819  -webkit-overflow-scrolling: touch;
1820  -ms-overflow-style: -ms-autohiding-scrollbar;
1821}
1822</xmp>
1823        </article>
1824      </section>
1825</span>
1826
1827
1828
1829<span class="toc-block" id="header">
1830  <h1 class="toc-title">Header</h1>
1831  <p class="toc-description">Using the <code>&lt;header&gt;</code> is great opportunity to showcase the app's branding.</p>
1832
1833      <header>
1834        <h1>App Name</h1>
1835        <h2>Headline text over your own background</h2>
1836      </header>
1837      <section>
1838        <div class="column">
1839          <article>
1840            <div class="card">
1841              <p>A simple <code>&lt;header&gt;</code> element with an <code>h1</code> and/or <code>h2</code> element. The <code>&lt;article&gt;</code> directly after will automatically be pulled up</p>
1842            </div>
1843          </article>
1844        </div>
1845      </section>
1846      <h1 class="toc-title source">Source</h1>
1847      <section>
1848        <article>
1849          <xmp class="card prettyprint"><header>
1850  <h1>App Name</h1>
1851  <h2>Headline text over your own background</h2>
1852</header>
1853<article>
1854  ...
1855</article></xmp>
1856        </article>
1857      </section>
1858</span>
1859
1860
1861<span class="toc-block" id="zerostate">
1862  <h1 class="toc-title">Zero-state</h1>
1863  <p class="toc-description">Preferred layout option when you have nothing to show.</p>
1864      <section class="zero-state full-width">
1865        <article>
1866          <h1>Heading</h1>
1867          <p>Some explanatory text</p>
1868          <button>Action</button>
1869        </article>
1870      </section>
1871      <h1 class="toc-title source">Source</h1>
1872      <section>
1873        <article>
1874          <xmp class="card prettyprint"><section class="zero-state full-width">
1875  <article>
1876    <h1>Heading</h1>
1877    <p>Some explanatory text</p>
1878    <button>Action</button>
1879  </article>
1880</section></xmp>
1881        </article>
1882      </section>
1883</span>
1884
1885
1886    </main>
1887    <footer id="footer">
1888      <h1 class="toc-title">Footer</h1>
1889      <p class="toc-description">Standard elements for help links to app-related questions.</p>
1890      <div class="row">
1891        <article class="help">
1892          <span></span>
1893          <p>Learn more about <a href="#">%screen%</a> at the <a href="#">%company%</a> Help Center.</p>
1894        </article>
1895      </div>
1896      <h1 class="toc-title source">Source</h1>
1897      <section>
1898        <article>
1899          <xmp class="card prettyprint"><footer>
1900  <article class="help">
1901    <span></span>
1902    <p>Learn more about <a href="#">%screen%</a> at the <a href="#">%company%</a> Help Center.</p>
1903  </article>
1904</footer></xmp>
1905        </article>
1906      </section>
1907    </footer>
1908
1909    <div id="copyright">
1910      <p>Thanks for reading this far. Your commitment to the details is commendable.</p>
1911      <p>&copy; 2026 <a href="http://www.theshoppad.com" target="_blank">ShopPad, Inc.</a></p>
1912    </div>
1913  </div>
1914
1915  </div> <!-- End #container -->
1916
1917
1918 <!-- End Document
1919  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
1920
1921<script src="js/classie.js"></script>
vendor: 1 bytes, line 1921
1921
1922<script src="js/sidebarEffects.js"></script>
1922
1923</body>
1924</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.