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><link rel="stylesheet" href="uptown.css"></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><hr></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><button></code> and the <code><a></code> element. Only the <code><a></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><label></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><button></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><dl></code> element is for the title and description text. Adding a <code>.close</code> element or <code><button></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><table></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 & buttons</h1> 1374 <p class="toc-description">Default <code><table></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><table></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>—</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>—</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><table></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><ul></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><header></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><header></code> element with an <code>h1</code> and/or <code>h2</code> element. The <code><article></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>© 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.