forked from atk4/agiletoolkit-css
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
15 lines (15 loc) · 64.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html><!--[if lt IE 7]<html lang="en" class="oldie lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html lang="en" class="oldie lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html lang="en" class="oldie lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html><!--<![endif]--><head><meta charset="utf-8"><!--[if IE]><!--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]--><title>Agile Toolkit CSS</title><meta name="description" content=""><link rel="stylesheet" href="css/playground-theme.css"><script src="../js/atk-helpers-min.js"></script></head><body><!--[if lt IE 8]><p class="browsehappy">You are using an <strong>outdated</strong> browser.
Please <a href="http://browsehappy.com/">upgrade your browser</a>
to improve your experience.</p><![endif]--><div class="atk-layout"><div class="atk-layout-row atk-swatch-ink"><div class="atk-layout-cell"><div class="atk-wrapper"><div class="atk-bar atk-cells atk-cells-gutter"><div class="atk-cell"><a href="/" class="atk-size-mega"><strong>Agile</strong> <span class="atk-label atk-swatch-yellow">CSS</span></a></div><div class="atk-cell atk-jackscrew"><ul class="atk-menu-horizontal"><li><a href="index.html" class="atk-swatch-ink atk-padding">Playground</a></li><li><a href="docs/icons.html" class="atk-swatch-ink atk-padding">Icons</a></li><li><a href="layouts.html" class="atk-swatch-ink atk-padding">Layouts</a></li><li><a href="examples.html" class="atk-swatch-ink atk-padding">Examples</a></li></ul></div><div class="atk-cell atk-text-right"><ul class="atk-menu-horizontal"><li><a href="https://github.com/atk4/agiletoolkit-css" class="atk-swatch-ink atk-padding"><span class="icon-github"></span> GitHub</a></li><li><a href="https://twitter.com/atk4" class="atk-swatch-ink atk-padding"><span class="icon-twitter"></span> Twitter</a></li></ul></div></div></div></div></div><div class="atk-layout-row atk-layout-expand"><div id="atk-layout-content" class="atk-layout atk-layout-cell"><div class="atk-layout-column atk-layout-expand"><div class="atk-wrapper atk-section-large"><section id="grid-system"><h2>Grid System</h2><p>Our responsive grid system.</p><div class="atk-row atk-push-small"><div class="atk-col-3"><div class="atk-box-small">.atk-col-3</div></div><div class="atk-col-3"><div class="atk-box-small">.atk-col-3</div></div><div class="atk-col-3"><div class="atk-box-small">.atk-col-3</div></div><div class="atk-col-3"><div class="atk-box-small">.atk-col-3</div></div></div><div class="atk-row atk-push-small"><div class="atk-col-4"><div class="atk-box-small">.atk-col-4</div></div><div class="atk-col-4"><div class="atk-box-small">.atk-col-4</div></div><div class="atk-col-4"><div class="atk-box-small">.atk-col-4</div></div></div><div class="atk-row atk-push-small"><div class="atk-col-6"><div class="atk-box-small">.atk-col-6</div></div><div class="atk-col-6"><div class="atk-box-small">.atk-col-6</div></div></div></section><section id="typography"><h2>Typography</h2><p>Few <span class="atk-label atk-effect-info"><p></span> paragraphs of text.</p><div class="atk-box"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel nisl sit amet nisi eleifend auctor. In consectetur leo ante, sed rutrum nulla pretium id. Vivamus porttitor convallis nisl non vulputate. Donec et tellus non ipsum consectetur rutrum in a quam.</p><p>Praesent ultricies magna et ultrices aliquet. Vivamus posuere sapien erat, at pretium nulla lacinia nec. Etiam eget mollis nisl, non lobortis ante. Nulla erat tortor, faucibus id vehicula in, adipiscing non nulla. Ut pharetra erat hendrerit odio consequat porta. Suspendisse tempus id mi non facilisis.</p></div><p><span class="atk-label atk-effect-warning"><span class="icon-attention"></span></span> Preformatted <span class="atk-label atk-effect-info"><pre></span> text.</p><div class="atk-box"><pre>body {
background:#fff;
}</pre></div><p><span class="atk-label atk-effect-warning"><span class="icon-attention"></span></span> <span class="atk-label atk-effect-info"><code></span></p><div class="atk-box"><code>body {
background: #ffffff;
}</code></div><p><span class="atk-label atk-effect-warning"><span class="icon-attention"></span></span> Use <span class="atk-label atk-effect-info"><blockquote></span> to indicate a block of quoted text.</p><div class="atk-box"><blockquote>“Nam quis bibendum erat, ut cursus leo.”</blockquote></div><div class="atk-row atk-push"><div class="atk-col-8 col"><h3>Font Scale</h3><p>Font scale classes <span class="atk-label atk-effect-info">.atk-size-*</span> can be assigned to any element. Use <span class="atk-label atk-effect-info">.atk-size-reset</span> to reset font size to the default body size if necessary.</p><div class="atk-box"><div class="atk-size-yotta">.atk-size-yotta</div><div class="atk-size-zetta">.atk-size-zetta</div><div class="atk-size-exa">.atk-size-exa</div><div class="atk-size-peta">.atk-size-peta</div><div class="atk-size-tera">.atk-size-tera</div><div class="atk-size-giga">.atk-size-giga</div><div class="atk-size-mega">.atk-size-mega</div><div class="atk-size-kilo">.atk-size-kilo</div><div class="atk-size-reset">.atk-size-reset</div><div class="atk-size-milli">.atk-size-milli</div><div class="atk-size-micro">.atk-size-micro</div></div></div><div class="atk-col-4 col"><h3>Headings</h3><p>Headings <span class="atk-label atk-effect-info"><h></span> are based on the font scale.</p><br><div class="atk-box"><h1>Heading h1</h1><h2>Heading h2</h2><h3>Heading h3</h3><h4>Heading h4</h4><h5>Heading h5</h5><h6>Heading h6</h6></div></div></div><h3>Undocumented classes</h3><p>.atk-text-lead, .atk-text-bold, .atk-text-normal, .atk-text-dimmed, .atk-text-nowrap, .atk-text-reset, .atk-text-baseline-reset, .atk-text-ellipsis</p><h4>Classes for HR</h4><p>.atk-hr-small, .atk-hr-large, .atk-hr-dotted, .atk-hr-reset</p></section><section id="helpers"><h2>Helpers</h2><p>.atk-clear-fix, .atk-jackscrew, .atk-move-left, .atk-move-right, .atk-move-center, .atk-block, .atk-inline, .atk-valign-left, .atk-valign-right, .atk-valign-middle, .atk-align-left, .atk-align-right, .atk-align-center</p></section><section id="components"><h2>Components</h2><h3>Swatches</h3><p><span class="atk-label atk-effect-info">.atk-swatch-*</span> component can be assigned to any element. Text color will adapt based on luma value (perceptual brightness) of the swatch. You can easily create as many swatches as you need using <span class="atk-label atk-effect-info">.createSwatch()</span> mixin (see variables.less).</p><div id="example-swatches" class="atk-box"><div class="atk-row atk-push-small"><div class="atk-col-4"><div class="atk-swatch-ink atk-box-small atk-align-center">.atk-swatch-ink</div></div><div class="atk-col-4"><div class="atk-swatch-blue atk-box-small atk-align-center">.atk-swatch-blue</div></div><div class="atk-col-4"><div class="atk-swatch-green atk-box-small atk-align-center">.atk-swatch-green</div></div></div><div class="atk-row"><div class="atk-col-4"><div class="atk-swatch-yellow atk-box-small atk-align-center">.atk-swatch-yellow</div></div><div class="atk-col-4"><div class="atk-swatch-red atk-box-small atk-align-center">.atk-swatch-red</div></div><div class="atk-col-4"><div class="atk-swatch-gray atk-box-small atk-align-center">.atk-swatch-gray</div></div></div></div><h3>Effects</h3><p><span class="atk-label atk-effect-info">.atk-effect-*</span> component is the best used for different kind of notifications.</p><div class="atk-box atk-inline"><span class="atk-effect-success">.atk-effect-success</span><span class="atk-sep"></span><span class="atk-effect-warning">.atk-effect-warning</span><span class="atk-sep"></span><span class="atk-effect-danger">.atk-effect-danger</span><span class="atk-sep"></span><span class="atk-effect-info">.atk-effect-info</span></div><p>Combination of <span class="atk-label atk-effect-info">.atk-effect-*</span> and <span class="atk-label atk-effect-info">.atk-label</span> components.</p><div class="atk-box atk-actions atk-inline"><span class="atk-label atk-effect-success">.atk-effect-success</span><span class="atk-label atk-effect-warning">.atk-effect-warning</span><span class="atk-label atk-effect-danger">.atk-effect-danger</span><span class="atk-label atk-effect-info">.atk-effect-info</span></div><p>Combination of <span class="atk-label atk-effect-info">.atk-effect-*</span> and <span class="atk-label atk-effect-info">.atk-button</span> components.</p><div class="atk-box atk-actions atk-inline"><a href="javascript:void(0)" class="atk-button atk-effect-success">.atk-effect-success</a><a href="javascript:void(0)" class="atk-button atk-effect-warning">.atk-effect-warning</a><a href="javascript:void(0)" class="atk-button atk-effect-danger">.atk-effect-danger</a><a href="javascript:void(0)" class="atk-button atk-effect-info">.atk-effect-info</a></div><p>Combination of <span class="atk-label atk-effect-info">.atk-effect-*</span> and <span class="atk-label atk-effect-info">.atk-box</span> components.</p><div id="example-effects-box" class="atk-box atk-actions atk-inline"><div class="atk-box-small atk-inline atk-effect-success">.atk-effect-success</div><div class="atk-box-small atk-inline atk-effect-warning">.atk-effect-warning</div><div class="atk-box-small atk-inline atk-effect-danger">.atk-effect-danger</div><div class="atk-box-small atk-inline atk-effect-info">.atk-effect-info</div></div><h3>Shapes</h3><div id="example-styling-shapes" class="atk-box atk-inline"><div class="atk-cells atk-cells-gutter-large atk-align-center"><div class="atk-cell"><p class="atk-padding atk-inline atk-swatch-ink atk-shape-rectangle"></p><div>.atk-shape-rectangle</div></div><div class="atk-cell"><p class="atk-padding atk-inline atk-swatch-ink atk-shape-circle"></p><div>.atk-shape-circle</div></div><div class="atk-cell"><p class="atk-padding atk-inline atk-swatch-ink atk-shape-rounded"></p><div>.atk-shape-rounded</div></div></div></div><h3>Blocks</h3><h4>Labels</h4><p><span class="atk-label atk-effect-info">.atk-label</span> component is used to highlight a piece of text. The best used with <span class="atk-label atk-effect-info">.atk-effect-*</span> and <span class="atk-label atk-effect-info">.atk-swatch-*</span>.</p><div class="atk-box">Lorem ipsum <span class="atk-label atk-effect-success">dolor</span> sit amet, consectetur adipiscing elit. Aliquam quam augue, placerat nec lacus nec, tristique sagittis lectus. Donec eu accumsan ipsum. Pellentesque at <span class="atk-label atk-effect-warning">fringilla</span> elit. Etiam auctor dui at consectetur blandit. Nulla <span class="atk-label atk-swatch-red">sagittis</span> neque nisi, eget ornare nunc fermentum eu. In ante justo, mollis vitae lectus vel, mollis dictum mauris.</div><h4>Boxes</h4><p><span class="atk-label atk-effect-info">.atk-box</span> is a component that creates paddings, rounds corners (value <span class="atk-label atk-effect-info">@cornerRadius</span> can be changed in variables.less) and sets bottom margins between boxes (when stacked). <strong>Options: </strong><span class="atk-label atk-effect-info">.atk-box-small</span>, <span class="atk-label atk-effect-info">.atk-box</span>, <span class="atk-label atk-effect-info">.atk-box-large</span>.</p><div class="atk-box atk-inline"><div class="atk-cells atk-cells-gutter atk-align-center"><div class="atk-cell"><div class="atk-box-small atk-swatch-ink atk-inline">.atk-box-small</div></div><div class="atk-cell"><div class="atk-box atk-swatch-ink atk-inline">.atk-box</div></div><div class="atk-cell"><div class="atk-box-large atk-swatch-ink atk-inline">.atk-box-large</div></div></div></div><h3>Buttons</h3><p><span class="atk-label atk-effect-info">.atk-button</span> component can be applied on any tag.</p><div class="atk-box atk-actions atk-inline"><button class="atk-button-small">.atk-button-small</button><button class="atk-button atk-swatch-yellow">.atk-button</button><button href="javascript:void(0)" class="atk-button-large atk-swatch-ink">.atk-button-large</button></div><p><span class="atk-label atk-effect-info">.atk-buttonset</span></p><div class="atk-box atk-inline"><div class="atk-buttonset atk-push"><a href="javascript:void(0)" class="atk-button-small"><span class="icon-angle-left"></span></a><a href="javascript:void(0)" class="atk-button-small"><span class="icon-calendar"></span></a><a href="javascript:void(0)" class="atk-button-small">1</a><a href="javascript:void(0)" class="atk-button-small">2</a><a href="javascript:void(0)" class="atk-button-small">3</a><a href="javascript:void(0)" class="atk-button-small">4</a><a href="javascript:void(0)" class="atk-button-small">5</a><a href="javascript:void(0)" class="atk-button-small"><span class="icon-angle-right"></span></a></div><div class="atk-buttonset"><button class="atk-button">Button</button><button class="atk-button">Button</button><button class="atk-button">Button</button></div></div><h3>Cells</h3><p>Component <span class="atk-label atk-effect-info">.atk-cells</span> is used for side by side positioning of several elements.<strong>Options:</strong><span class="atk-label atk-effect-info">.atk-cells-gutter-small</span>,<span class="atk-label atk-effect-info">.atk-cells-gutter</span>,<span class="atk-label atk-effect-info">.atk-cells-gutter-large</span>,<span class="atk-label atk-effect-info">.atk-cells-justified</span>.</p><div class="atk-box"><div class="atk-cells atk-align-center"><div class="atk-cell atk-padding-small atk-swatch-gray">Cell #1</div><div class="atk-cell atk-padding-small atk-swatch-white">Cell #2</div><div class="atk-cell atk-padding-small atk-swatch-gray">Cell #3</div><div class="atk-cell atk-padding-small atk-swatch-white">Cell #4</div><div class="atk-cell atk-padding-small atk-swatch-gray">Cell #5</div></div></div><p>Component <span class="atk-label atk-effect-info">.atk-cells</span> combined with <span class="atk-label atk-effect-info">.atk-cells-gutter-*</span> option.</p><div class="atk-box"><h5 class="atk-text-bold atk-text-dimmed">Regular Gutter</h5><div class="atk-cells atk-cells-gutter atk-push"><div class="atk-cell atk-jackscrew"><div class="atk-swatch-gray atk-box-small">Cell #1 with<strong>.atk-jackscrew</strong></div></div><div class="atk-cell"><div class="atk-swatch-gray atk-box-small atk-text-nowrap">Cell #2</div></div><div class="atk-cell"><div class="atk-swatch-gray atk-box-small atk-text-nowrap">Cell #3</div></div></div><h5 class="atk-text-bold atk-text-dimmed">Large Gutter</h5><div class="atk-cells atk-cells-gutter-large"><div class="atk-cell"><div class="atk-swatch-gray atk-box-small">Cell #1</div></div><div class="atk-cell"><div class="atk-swatch-gray atk-box-small">Cell #2</div></div><div class="atk-cell"><div class="atk-swatch-gray atk-box-small">Cell #3</div></div></div></div><p>Component <span class="atk-label atk-effect-info">.atk-cells</span> combined with <span class="atk-label atk-effect-info">.atk-cells-justfied</span>, <span class="atk-label atk-effect-info">.atk-cells-gutter</span> option.</p><p><div class="atk-label atk-effect-warning"><span class="icon-attention"></span> Width is distributed equally only for two cells when using combination of .atk-cells-justified and .atk-cells-gutter options.</div></p><div class="atk-box atk-col-6"><div class="atk-cells atk-cells-gutter-small atk-cells-justified"><div class="atk-cell"><button class="atk-button atk-jackscrew">Button</button></div><div class="atk-cell"><button class="atk-button atk-jackscrew">Button</button></div></div></div><h3>Menu</h3><p>Component <span class="atk-label atk-effect-info">.atk-menu-horizontal</span> combined with <span class="atk-label atk-effect-info">.atk-padding</span>.</p><div class="atk-box atk-inline"><ul class="atk-menu-horizontal"><li><a href="javascript:void(0)" class="atk-padding atk-swatch-ink">Item #1</a></li><li><a href="javascript:void(0)" class="atk-padding atk-swatch-ink">Item #2</a></li><li><a href="javascript:void(0)" class="atk-padding atk-swatch-ink">Item #3</a></li><li class="atk-swatch-gray"><a href="javascript:void(0)" class="atk-padding atk-swatch-ink">Item #4 <span class="icon-down-dir"></span></a><ul class="atk-menu-horizontal"><li><a href="javascript:void(0)" class="atk-padding-small atk-swatch-gray">Subitem #1</a></li><li><a href="javascript:void(0)" class="atk-padding-small atk-swatch-gray">Subitem #2</a></li><li><a href="javascript:void(0)" class="atk-padding-small atk-swatch-gray">Subitem #3</a></li><li><a href="javascript:void(0)" class="atk-padding-small atk-swatch-gray">Subitem #4</a></li><li><a href="javascript:void(0)" class="atk-padding-small atk-swatch-gray">Subitem #5</a></li></ul></li><li class="atk-swatch-blue"><a href="javascript:void(0)" class="atk-padding atk-swatch-ink">Item #5 <span class="icon-down-dir"></span></a><ul class="atk-menu-vertical"><li><a href="javascript:void(0)" class="atk-padding-small atk-swatch-blue">Subitem #1</a></li><li><a href="javascript:void(0)" class="atk-padding-small atk-swatch-blue">Subitem #2</a></li></ul></li><li><a href="javascript:void(0)" class="atk-padding atk-swatch-ink">Item #6 <span class="icon-down-dir"></span></a><ul class="atk-menu-vertical"><li><a href="javascript:void(0)" class="atk-padding-small atk-swatch-ink">Subitem #1</a></li><li><a href="javascript:void(0)" class="atk-padding-small atk-swatch-ink">Subitem #2</a></li></ul></li></ul></div><p>Component <span class="atk-label atk-effect-info">.atk-menu-vertical</span> combined with <span class="atk-label atk-effect-info">.atk-padding-small</span> and <span class="atk-label atk-effect-info">.atk-label</span>.</p><div class="atk-box atk-col-4"><ul class="atk-menu-vertical"><li class="atk-padding-small atk-swatch-ink atk-size-kilo">Navigation</li><li class="atk-menu-active"><a href="javascript:void(0)" class="atk-padding-small atk-swatch-ink atk-cells"><span class="atk-cell atk-jackscrew"><span class="icon-gauge-1"></span> <strong>Dashboard</strong></span><span class="atk-cell"><span class="atk-label atk-size-milli atk-swatch-red">253</span></span></a></li><li><a href="javascript:void(0)" class="atk-padding-small atk-swatch-ink atk-cells"><span class="atk-cell atk-jackscrew"><span class="icon-paper-plane"></span> <strong>Messages</strong></span><span class="atk-cell"><span class="atk-label atk-size-milli atk-shape-circle atk-swatch-green">1</span></span></a></li><li class="atk-swatch-green"><a href="javascript:void(0)" class="atk-padding-small atk-swatch-ink atk-cells"><span class="atk-cell atk-jackscrew"><span class="icon-chart-line"></span> <strong>Analytics</strong></span><span class="atk-cell"><span class="icon-right-dir"></span></span></a><ul class="atk-menu-horizontal"><li><a href="javascript:void(0)" class="atk-padding-small atk-swatch-green">Subitem #1</a></li><li><a href="javascript:void(0)" class="atk-padding-small atk-swatch-green">Subitem #2</a></li><li><a href="javascript:void(0)" class="atk-padding-small atk-swatch-green">Subitem #3</a></li><li><a href="javascript:void(0)" class="atk-padding-small atk-swatch-green">Subitem #4</a></li><li><a href="javascript:void(0)" class="atk-padding-small atk-swatch-green">Subitem #5</a></li></ul></li><li><a href="javascript:void(0)" class="atk-padding-small atk-swatch-ink atk-cells"><span class="atk-cell atk-jackscrew"><span class="icon-tools"></span> <strong>Settings</strong></span><span class="atk-cell"><span class="atk-size atk-swatch-yellow icon-attention"></span></span></a></li><li class="atk-swatch-blue"><a href="javascript:void(0)" class="atk-padding-small atk-swatch-ink atk-cells"><span class="atk-cell atk-jackscrew"><span class="icon-lifebuoy"></span> <strong>Support</strong></span><span class="atk-cell"><span class="icon-right-dir"></span></span></a><ul class="atk-menu-vertical"><li><a href="javascript:void(0)" class="atk-padding-small atk-swatch-blue">Subitem #1</a></li><li><a href="javascript:void(0)" class="atk-padding-small atk-swatch-blue">Subitem #2</a></li><li><a href="javascript:void(0)" class="atk-padding-small atk-swatch-blue">Subitem #3</a></li><li><a href="javascript:void(0)" class="atk-padding-small atk-swatch-blue">Subitem #4</a></li><li><a href="javascript:void(0)" class="atk-padding-small atk-swatch-blue">Subitem #5</a></li></ul></li><li class="atk-swatch-white"><a href="javascript:void(0)" class="atk-padding-small atk-swatch-ink atk-cells"><span class="atk-cell atk-jackscrew"><span class="icon-chat-empty"></span> <strong>Forums</strong></span><span class="atk-cell"><span class="icon-right-dir"></span></span></a><ul class="atk-menu-horizontal"><li><a href="javascript:void(0)" class="atk-padding-small atk-swatch-white">Subitem #1</a></li><li><a href="javascript:void(0)" class="atk-padding-small atk-swatch-white">Subitem #2</a></li><li><a href="javascript:void(0)" class="atk-padding-small atk-swatch-white">Subitem #3</a></li><li><a href="javascript:void(0)" class="atk-padding-small atk-swatch-white">Subitem #4</a></li><li><a href="javascript:void(0)" class="atk-padding-small atk-swatch-white">Subitem #5</a></li></ul></li></ul></div><h3>Paddings & Margins</h3><h4>Actions</h4><p><span class="atk-label atk-effect-info">.atk-actions</span> is a component that creates margins between its children. Make sure there are no spaces between your action buttons.</p><div class="atk-box atk-inline"><div class="atk-actions"><button class="atk-button">Add</button><button class="atk-button">Edit</button><button class="atk-button atk-effect-danger"><span class="icon-trash"></span> Delete</button></div></div><h4>Separator</h4><p><span class="atk-label atk-effect-info">.atk-sep</span> is a component that creates margins between its siblings. It is recommended to use it with <span class="atk-label atk-effect-info"><span></span> tag.</p><div class="atk-box atk-inline"><a href="javascript:void(0)">Sign In</a><span class="atk-sep">⋅</span><a href="javascript:void(0)">Sign Up</a></div><h4>Sections</h4><p><span class="atk-label atk-effect-warning"><span class="icon-attention"></span></span> <span class="atk-label atk-effect-info">.atk-section</span> component creates top and bottom margins. It is the best used for pages with fixed centered layout. <strong>Options: </strong><span class="atk-label atk-effect-info">.atk-section-small</span>, <span class="atk-label atk-effect-info">.atk-section</span>, <span class="atk-label atk-effect-info">.atk-section-large</span>.</p><div class="atk-box"><div class="atk-swatch-ink"><div class="atk-section-small atk-col-8 atk-move-center"><h5>.atk-section-small</h5><p>Curabitur eleifend metus nec eros scelerisque porta. Ut eget enim tortor. Integer vulputate scelerisque urna, nec rhoncus leo gravida at. Ut porta, lorem vel eleifend laoreet, nulla ante tempus mauris, in fermentum mi purus vitae nunc.</p></div></div><div class="atk-swatch-yellow"><div class="atk-section atk-col-8 atk-move-center"><h5>.atk-section</h5><p>Vestibulum nec turpis sit amet purus imperdiet ultrices mollis nec nibh. Phasellus viverra adipiscing diam sed venenatis. Mauris sagittis, sapien sed malesuada pharetra, dui nunc dignissim dolor, ultrices varius velit massa nec dolor.</p></div></div><div class="atk-swatch-gray"><div class="atk-section-large atk-col-8 atk-move-center"><h5>.atk-section-large</h5><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin est justo, bibendum quis ipsum placerat, accumsan vestibulum purus. Quisque leo nibh, laoreet non nibh non, accumsan tincidunt nunc. Morbi eget purus placerat lectus vulputate laoreet ut ac odio.</p></div></div></div><h4>Paddings</h4><p><span class="atk-label atk-effect-info">.atk-padding</span> component creates (consistent with the rest of the design) paddings in any element.<strong>Options:</strong><span class="atk-label atk-effect-info">.atk-padding-small</span>,<span class="atk-label atk-effect-info">.atk-padding</span>,<span class="atk-label atk-effect-info">.atk-padding-large</span>,<span class="atk-label atk-effect-info">.atk-padding-reset</span>.</p><div class="atk-box atk-inline"><div class="atk-cells atk-cells-gutter"><div class="atk-cell"><div class="atk-padding-small atk-swatch-ink atk-align-center atk-inline">.atk-padding-small</div></div><div class="atk-cell"><div class="atk-padding atk-swatch-ink atk-align-center atk-inline">.atk-padding</div></div><div class="atk-cell"><div class="atk-padding-large atk-swatch-ink atk-align-center atk-inline">.atk-padding-large</div></div></div></div><h4>Pushes</h4><p><span class="atk-label atk-effect-info">.atk-push</span> component creates a bottom margin for any element. <strong>Options: </strong><span class="atk-label atk-effect-info">.atk-push-small</span>, <span class="atk-label atk-effect-info">.atk-push</span>, <span class="atk-label atk-effect-info">.atk-push-large</span>.</p><div class="atk-box atk-inline"><div class="atk-cells atk-cells-gutter"><div class="atk-cell atk-valign-top atk-align-center"><div class="atk-padding-small atk-swatch-ink atk-push-small atk-inline">.atk-push-small</div><div class="atk-padding-small atk-swatch-yellow"></div></div><div class="atk-cell atk-valign-top atk-align-center"><div class="atk-padding-small atk-swatch-ink atk-push atk-inline">.atk-push</div><div class="atk-padding-small atk-swatch-yellow"></div></div><div class="atk-cell atk-valign-top atk-align-center"><div class="atk-padding-small atk-swatch-ink atk-push-large atk-inline">.atk-push-large</div><div class="atk-padding-small atk-swatch-yellow"></div></div></div></div></section><section id="forms"><h2>Forms</h2><h3>Regular Form</h3><div class="atk-box atk-col-6"><form class="atk-form atk-cells-group atk-cells-gutter-large atk-valign-top"><div class="atk-cells atk-push"><div class="atk-cell atk-text-nowrap"><label class="atk-input-label"> <strong>Input:</strong></label></div><div class="atk-cell atk-jackscrew"><input type="text" size="9" class="atk-push-xsmall"><div class="atk-text-dimmed atk-size-milli">Some Text</div></div></div><div class="atk-cells atk-push"><div class="atk-cell atk-text-nowrap"><label class="atk-input-label"> <strong>Password:</strong></label></div><div class="atk-cell atk-jackscrew"><input type="password" class="atk-jackscrew atk-push-xsmall"></div></div><div class="atk-cells atk-push"><div class="atk-cell atk-text-nowrap"><label class="atk-input-label"><strong>About:</strong></label></div><div class="atk-cell atk-jackscrew"><textarea class="atk-jackscrew"></textarea></div></div><div class="atk-cells atk-push"><div class="atk-cell"></div><div class="atk-cell atk-jackscrew"><div class="atk-input-radio atk-push-xsmall"><span><input type="checkbox"><label>Accept <a href="#">Terms & Conditions</a>.</label></span></div><p class="atk-effect-danger"><span class="icon-attention"></span> Please accept Terms & Conditions to continue.</p></div></div><div class="atk-cells"><div class="atk-cell"> </div><div class="atk-cell atk-actions atk-jackscrew"><button class="atk-button">Submit</button><button class="atk-button">Cancel</button></div></div></form></div><h3>Compact Form</h3><div class="atk-box atk-col-6"><form class="atk-form atk-cells-group atk-cells-gutter-large"><div class="atk-cells atk-push-small"><div class="atk-cell atk-text-nowrap"><label class="atk-input-label"><strong>Input:</strong></label></div><div class="atk-cell atk-jackscrew"><input type="text" size="9"></div></div><div class="atk-cells atk-push-small"><div class="atk-cell atk-text-nowrap"><label class="atk-input-label"><strong>Password:</strong></label></div><div class="atk-cell atk-jackscrew"><input type="password" class="atk-jackscrew"></div></div><div class="atk-cells"><div class="atk-cell"> </div><div class="atk-cell atk-actions atk-jackscrew"><button class="atk-button">Submit</button><button class="atk-button">Cancel</button></div></div></form></div><h3>Stacked Form</h3><div class="atk-box atk-col-6"><form class="atk-form"><div class="atk-push-xsmall"><label><strong>Input:</strong></label></div><div class="atk-push"><input type="text" class="atk-jackscrew"></div><div class="atk-push-xsmall"><label><strong>Password:</strong></label></div><div class="atk-push"><input type="password" class="atk-jackscrew"></div><div class="atk-actions"><button class="atk-button">Okay</button><button class="atk-button">Cancel</button></div></form></div><h3>Stacked Compact Form</h3><div class="atk-box atk-col-10"><form class="atk-form"><div class="atk-push-small"><div class="atk-push-small"><label><strong>Input:</strong></label></div><input type="text" class="atk-jackscrew"></div><div class="atk-push-small atk-effect-danger"><div class="atk-push-xsmall"><label><strong>Password:</strong></label></div><input type="password" class="atk-jackscrew atk-push-xsmall"><p><span class="icon-attention"></span> This is error</p></div><div class="atk-cells atk-push-small atk-cells-gutter-small atk-effect-danger"><div class="atk-cell"><input type="text"></div><div class="atk-cell"><select><option>Option #1</option><option>Option #2</option></select></div></div><div class="atk-actions"><button class="atk-button">Okay</button><button class="atk-button">Cancel</button></div></form></div><h3>Minimal Form</h3><div class="atk-box atk-col-3"><form class="atk-form"><div class="atk-push-xsmall"><input type="text" placeholder="Username" class="atk-jackscrew"></div><div class="atk-push-xsmall"><input type="password" placeholder="Password" class="atk-jackscrew"></div><button class="atk-button atk-swatch-green atk-jackscrew">Okay</button></form></div></section><section id="widgets"><h2>Widgets</h2><h3>Media Blocks</h3><p><span class="atk-label atk-effect-warning"><span class="icon-attention"></span></span> Combination of <a href="#colors" class="atk-label atk-effect-info">.atk-swatch-*</a>, <span class="atk-label atk-effect-info">.atk-box</span> and <span class="atk-label atk-effect-info">.atk-cells</span> components.</p><div id="example-widgets-mediablocks" class="atk-box"><div class="atk-row atk-push"><div class="atk-col-6"><div class="atk-cells atk-cells-gutter-large atk-box atk-swatch-green"><div class="atk-cell"><img src="temp/apples.jpg" alt="Apples"></div><div class="atk-cell atk-jackscrew"><h4>Apples</h4><p class="atk-push-small">Curabitur posuere vehicula scelerisque. Quisque vitae velit ante. Sed vel euismod est. Sed eu libero quis justo aliquet condimentum. Maecenas dictum, tortor vehicula.</p><div class="atk-actions-large"><a href="javascript:void(0)"><span class="icon-down-circled-1"></span> Download</a><a href="javascript:void(0)"><span class="icon-trash"></span> Delete</a></div></div></div><div class="atk-cells atk-cells-gutter-large atk-box atk-swatch-red"><div class="atk-cell"><img src="temp/tomatoes.jpg" alt="Tomatoes"></div><div class="atk-cell atk-jackscrew"><h4>Tomatoes</h4><p class="atk-push-small">Curabitur posuere vehicula scelerisque. Quisque vitae velit ante. Sed vel euismod est. Sed eu libero quis justo aliquet condimentum. Maecenas dictum, tortor vehicula.</p><div class="atk-actions-large"><a href="javascript:void(0)"><span class="icon-down-circled-1"></span> Download</a><a href="javascript:void(0)"><span class="icon-trash"></span> Delete</a></div></div></div></div><div class="atk-col-6"><div class="atk-cells atk-cells-gutter-large atk-box atk-swatch-yellow atk-valign-top"><div class="atk-cell"><img src="temp/bananas.jpg" alt="Bananas"></div><div class="atk-cell atk-jackscrew"><h4>Bananas</h4><p class="atk-push-small">Curabitur posuere vehicula scelerisque. Quisque vitae velit ante. Sed vel euismod est. Sed eu libero quis justo aliquet condimentum. Maecenas dictum, tortor vehicula.</p><div class="atk-actions"><a href="javascript:void(0)"><span class="icon-down-circled-1"></span> Download</a><a href="javascript:void(0)"><span class="icon-trash"></span> Delete</a></div></div></div><div class="atk-cells atk-cells-gutter-large atk-box atk-swatch-blue"><div class="atk-cell"><img src="temp/blueberries.jpg" alt="Blueberries"></div><div class="atk-cell atk-jackscrew"><h4>Blueberries</h4><p class="atk-push-small">Curabitur posuere vehicula scelerisque. Quisque vitae velit ante. Sed vel euismod est. Sed eu libero quis justo aliquet condimentum. Maecenas dictum, tortor vehicula.</p><div class="atk-actions-large"><a href="javascript:void(0)"><span class="icon-down-circled-1"></span> Download</a><a href="javascript:void(0)"><span class="icon-trash"></span> Delete</a></div></div></div></div></div></div><h3>Tables</h3><!-- [Widget] Table--><p>Basic <span class="atk-label atk-effect-info">.atk-table</span> widget.</p><div class="atk-box"><div class="atk-table"><table><thead><tr><th><input type="checkbox"></th><th>Name</th><th>Description</th><th>Actions</th></tr></thead><tbody><tr><td><input type="checkbox"></td><td class="atk-text-nowrap">Brian O'Connell</td><td class="atk-jackscrew atk-text-dimmed">Nullam convallis ipsum nec lacus pharetra congue.</td><td class="atk-align-center"><a href="javascript:void(0)">Edit</a></td></tr><tr><td><input type="checkbox"></td><td class="atk-text-nowrap">Danny Brown</td><td class="atk-jackscrew atk-text-dimmed">Cras faucibus dui eget nunc commodo, vitae condimentum quam pharetra.</td><td class="atk-align-center"><a href="javascript:void(0)">Edit</a></td></tr><tr><td><input type="checkbox"></td><td class="atk-text-nowrap">John Smith</td><td class="atk-jackscrew atk-text-dimmed">Sed varius nulla sodales hendrerit eleifend.</td><td class="atk-align-center"><a href="javascript:void(0)">Edit</a></td></tr><tr><td><input type="checkbox"></td><td class="atk-text-nowrap">Satya Nadella</td><td class="atk-jackscrew atk-text-dimmed">Aliquam rhoncus turpis felis, ac tempor nulla pulvinar id.</td><td class="atk-align-center"><a href="javascript:void(0)">Edit</a></td></tr></tbody></table></div></div><!-- [Widget] Table: Zebra--><p><span class="atk-label atk-effect-info">.atk-table</span> widget with <span class="atk-label atk-effect-info">.atk-table-zebra</span> class on.</p><div class="atk-box"><div class="atk-table atk-table-zebra"><table><thead><tr><th><input type="checkbox"></th><th>Name</th><th>Description</th><th>Actions</th></tr></thead><tbody><tr><td><input type="checkbox"></td><td class="atk-text-nowrap">Brian O'Connell</td><td class="atk-jackscrew atk-text-dimmed">Nullam convallis ipsum nec lacus pharetra congue.</td><td class="atk-align-center"><a href="javascript:void(0)">Edit</a></td></tr><tr><td><input type="checkbox"></td><td class="atk-text-nowrap">Danny Brown</td><td class="atk-jackscrew atk-text-dimmed">Cras faucibus dui eget nunc commodo, vitae condimentum quam pharetra.</td><td class="atk-align-center"><a href="javascript:void(0)">Edit</a></td></tr><tr><td><input type="checkbox"></td><td class="atk-text-nowrap">John Smith</td><td class="atk-jackscrew atk-text-dimmed">Sed varius nulla sodales hendrerit eleifend.</td><td class="atk-align-center"><a href="javascript:void(0)">Edit</a></td></tr><tr><td><input type="checkbox"></td><td class="atk-text-nowrap">Satya Nadella</td><td class="atk-jackscrew atk-text-dimmed">Aliquam rhoncus turpis felis, ac tempor nulla pulvinar id.</td><td class="atk-align-center"><a href="javascript:void(0)">Edit</a></td></tr></tbody></table></div></div><!-- [Widget] Table: Bordered--><p><span class="atk-label atk-effect-info">.atk-table</span> widget with <span class="atk-label atk-effect-info">.atk-table-outline</span> class on.</p><div class="atk-box"><div class="atk-table atk-table-outline"><table><thead><tr><th><input type="checkbox"></th><th>Name</th><th>Description</th><th>Actions</th></tr></thead><tbody><tr><td><input type="checkbox"></td><td class="atk-text-nowrap">Brian O'Connell</td><td class="atk-jackscrew atk-text-dimmed">Nullam convallis ipsum nec lacus pharetra congue.</td><td class="atk-align-center"><a href="javascript:void(0)">Edit</a></td></tr><tr><td><input type="checkbox"></td><td class="atk-text-nowrap">Danny Brown</td><td class="atk-jackscrew atk-text-dimmed">Cras faucibus dui eget nunc commodo, vitae condimentum quam pharetra.</td><td class="atk-align-center"><a href="javascript:void(0)">Edit</a></td></tr><tr><td><input type="checkbox"></td><td class="atk-text-nowrap">John Smith</td><td class="atk-jackscrew atk-text-dimmed">Sed varius nulla sodales hendrerit eleifend.</td><td class="atk-align-center"><a href="javascript:void(0)">Edit</a></td></tr><tr><td><input type="checkbox"></td><td class="atk-text-nowrap">Satya Nadella</td><td class="atk-jackscrew atk-text-dimmed">Aliquam rhoncus turpis felis, ac tempor nulla pulvinar id.</td><td class="atk-align-center"><a href="javascript:void(0)">Edit</a></td></tr></tbody></table></div></div><!-- [Widget] Table: Bordered--><p><span class="atk-label atk-effect-info">.atk-table</span> widget with <span class="atk-label atk-effect-info">.atk-table-bordered</span> class on.</p><div class="atk-box"><div class="atk-table atk-table-bordered"><table><thead><tr><th><input type="checkbox"></th><th>Name</th><th>Description</th><th>Actions</th></tr></thead><tbody><tr><td><input type="checkbox"></td><td class="atk-text-nowrap">Brian O'Connell</td><td class="atk-jackscrew atk-text-dimmed">Nullam convallis ipsum nec lacus pharetra congue.</td><td class="atk-align-center"><a href="javascript:void(0)">Edit</a></td></tr><tr><td><input type="checkbox"></td><td class="atk-text-nowrap">Danny Brown</td><td class="atk-jackscrew atk-text-dimmed">Cras faucibus dui eget nunc commodo, vitae condimentum quam pharetra.</td><td class="atk-align-center"><a href="javascript:void(0)">Edit</a></td></tr><tr><td><input type="checkbox"></td><td class="atk-text-nowrap">John Smith</td><td class="atk-jackscrew atk-text-dimmed">Sed varius nulla sodales hendrerit eleifend.</td><td class="atk-align-center"><a href="javascript:void(0)">Edit</a></td></tr><tr><td><input type="checkbox"></td><td class="atk-text-nowrap">Satya Nadella</td><td class="atk-jackscrew atk-text-dimmed">Aliquam rhoncus turpis felis, ac tempor nulla pulvinar id.</td><td class="atk-align-center"><a href="javascript:void(0)">Edit</a></td></tr></tbody></table></div></div><!-- [Widget] Table: With Expander--><p><span class="atk-label atk-effect-info">.atk-table</span> widget with <span class="atk-label atk-effect-info">.atk-table-expander</span>. Click on a table row to expand it.</p><div id="table-expander" class="atk-box"><div class="atk-table atk-table-outline"><table><thead><tr><th>Name</th><th>Description</th><th>Actions</th></tr></thead><tbody><tr><td class="atk-text-nowrap"><a href="javascript:void(0)" class="icon-right-dir"></a> Brian O'Connell</td><td class="atk-jackscrew atk-text-dimmed">Nullam convallis ipsum nec lacus pharetra congue.</td><td class="atk-align-center"><a href="javascript:void(0)">Edit</a></td></tr><tr class="atk-table-expander"><td colspan="3" class="atk-padding atk-swatch-gray atk-text-inherit"><h4>Compact Form</h4><form class="atk-form atk-cells-group atk-cells-gutter-large"><div class="atk-cells atk-push-small"><div class="atk-cell atk-text-nowrap"><label class="atk-input-label"><strong>Input:</strong></label></div><div class="atk-cell atk-jackscrew"><input type="text" size="9"></div></div><div class="atk-cells atk-push-small"><div class="atk-cell atk-text-nowrap"><label class="atk-input-label"><strong>Password:</strong></label></div><div class="atk-cell atk-jackscrew"><input type="password" class="atk-jackscrew"></div></div><div class="atk-cells"><div class="atk-cell"> </div><div class="atk-cell atk-actions atk-jackscrew"><button class="atk-button">Submit</button><button class="atk-button">Cancel</button></div></div></form></td></tr><tr><td class="atk-text-nowrap"><a href="javascript:void(0)" class="icon-right-dir"></a> Danny Brown</td><td class="atk-jackscrew atk-text-dimmed">Cras faucibus dui eget nunc commodo, vitae condimentum quam pharetra.</td><td class="atk-align-center"><a href="javascript:void(0)">Edit</a></td></tr><tr class="atk-table-expander"><td colspan="3" class="atk-padding atk-swatch-gray atk-text-inherit"><h4>Compact Form</h4><form class="atk-form atk-cells-group atk-cells-gutter-large"><div class="atk-cells atk-push-small"><div class="atk-cell atk-text-nowrap"><label class="atk-input-label"><strong>Input:</strong></label></div><div class="atk-cell atk-jackscrew"><input type="text" size="9"></div></div><div class="atk-cells atk-push-small"><div class="atk-cell atk-text-nowrap"><label class="atk-input-label"><strong>Password:</strong></label></div><div class="atk-cell atk-jackscrew"><input type="password" class="atk-jackscrew"></div></div><div class="atk-cells"><div class="atk-cell"> </div><div class="atk-cell atk-actions atk-jackscrew"><button class="atk-button">Submit</button><button class="atk-button">Cancel</button></div></div></form></td></tr><tr><td class="atk-text-nowrap"><a href="javascript:void(0)" class="icon-right-dir"></a> John Smith</td><td class="atk-jackscrew atk-text-dimmed">Sed varius nulla sodales hendrerit eleifend.</td><td class="atk-align-center"><a href="javascript:void(0)">Edit</a></td></tr><tr class="atk-table-expander"><td colspan="3" class="atk-padding atk-swatch-gray atk-text-inherit"><h4>Compact Form</h4><form class="atk-form atk-cells-group atk-cells-gutter-large"><div class="atk-cells atk-push-small"><div class="atk-cell atk-text-nowrap"><label class="atk-input-label"><strong>Input:</strong></label></div><div class="atk-cell atk-jackscrew"><input type="text" size="9"></div></div><div class="atk-cells atk-push-small"><div class="atk-cell atk-text-nowrap"><label class="atk-input-label"><strong>Password:</strong></label></div><div class="atk-cell atk-jackscrew"><input type="password" class="atk-jackscrew"></div></div><div class="atk-cells"><div class="atk-cell"> </div><div class="atk-cell atk-actions atk-jackscrew"><button class="atk-button">Submit</button><button class="atk-button">Cancel</button></div></div></form></td></tr><tr><td class="atk-text-nowrap"><a href="javascript:void(0)" class="icon-right-dir"></a> Satya Nadella</td><td class="atk-jackscrew atk-text-dimmed">Aliquam rhoncus turpis felis, ac tempor nulla pulvinar id.</td><td class="atk-align-center"><a href="javascript:void(0)">Edit</a></td></tr><tr class="atk-table-expander"><td colspan="3" class="atk-padding atk-swatch-gray atk-text-inherit"><h4>Compact Form</h4><form class="atk-form atk-cells-group atk-cells-gutter-large"><div class="atk-cells atk-push-small"><div class="atk-cell atk-text-nowrap"><label class="atk-input-label"><strong>Input:</strong></label></div><div class="atk-cell atk-jackscrew"><input type="text" size="9"></div></div><div class="atk-cells atk-push-small"><div class="atk-cell atk-text-nowrap"><label class="atk-input-label"><strong>Password:</strong></label></div><div class="atk-cell atk-jackscrew"><input type="password" class="atk-jackscrew"></div></div><div class="atk-cells"><div class="atk-cell"> </div><div class="atk-cell atk-actions atk-jackscrew"><button class="atk-button">Submit</button><button class="atk-button">Cancel</button></div></div></form></td></tr></tbody></table></div></div><!-- [Widget] Table: With Panels--><p><span class="atk-label atk-effect-info">.atk-table</span> widget combined with <span class="atk-label atk-effect-info">.atk-box</span> component.</p><div class="atk-box"><div class="atk-table atk-table-zebra atk-table-bordered"><div class="atk-box-small"><span class="atk-input-icon atk-move-right"><input type="text" placeholder="Search"><a href="javascript:void(0)" class="icon-search atk-swatch-ink"></a></span><div class="atk-actions"><button class="atk-button">Add</button><button class="atk-button atk-effect-danger">Delete</button></div></div><table><thead><tr><th><input type="checkbox"></th><th class="atk-text-nowrap atk-table-sort"><a href="javascript:void(0)"><span class="icon-down-dir"></span>Name</a></th><th>Description</th><th>Actions</th></tr></thead><tbody><tr><td><input type="checkbox"></td><td class="atk-text-nowrap">Brian O'Connell</td><td class="atk-jackscrew atk-text-dimmed">Nullam convallis ipsum nec lacus pharetra congue.</td><td class="atk-align-center"><a href="javascript:void(0)">Edit</a></td></tr><tr><td><input type="checkbox"></td><td class="atk-text-nowrap">Danny Brown</td><td class="atk-jackscrew atk-text-dimmed">Cras faucibus dui eget nunc commodo, vitae condimentum quam pharetra.</td><td class="atk-align-center"><a href="javascript:void(0)">Edit</a></td></tr><tr><td><input type="checkbox"></td><td class="atk-text-nowrap">John Smith</td><td class="atk-jackscrew atk-text-dimmed">Sed varius nulla sodales hendrerit eleifend.</td><td class="atk-align-center"><a href="javascript:void(0)">Edit</a></td></tr><tr><td><input type="checkbox"></td><td class="atk-text-nowrap">Satya Nadella</td><td class="atk-jackscrew atk-text-dimmed">Aliquam rhoncus turpis felis, ac tempor nulla pulvinar id.</td><td class="atk-align-center"><a href="javascript:void(0)">Edit</a></td></tr></tbody></table><div class="atk-box-small atk-actions atk-align-center"><a href="javascript:void(0)">« Prev</a><a href="javascript:void(0)">1</a><a href="javascript:void(0)">2</a><strong>3</strong><a href="javascript:void(0)">4</a><a href="javascript:void(0)">5</a><a href="javascript:void(0)">Next »</a></div></div></div><!-- [Widget] Table: No Results--><p><span class="atk-label atk-effect-info">.atk-table</span> combined with <span class="atk-label atk-effect-info">.atk-label</span> component.</p><div class="atk-box"><div class="atk-table atk-table-bordered"><div class="atk-box-small"><span class="atk-input-icon atk-move-right"><input type="text" placeholder="Search"><a href="javascript:void(0)" class="icon-search atk-swatch-ink"></a></span><div class="atk-actions"><button class="atk-button">Add</button><button class="atk-button atk-effect-danger">Delete</button></div></div><table><tbody><tr><td class="atk-padding-large atk-align-center"><span class="atk-label atk-effect-warning"><span class="icon-attention"></span> No results found.</span></td></tr></tbody></table></div></div><h4>Navigation Bar</h4><p>Combination of <span class="atk-label atk-effect-info">.atk-cells</span>, <span class="atk-label atk-effect-info">.atk-swatch-*</span> and <span class="atk-label atk-effect-info">.atk-padding</span> components. The best used as a header on a fluid page.</p><div class="atk-box"><div class="atk-bar atk-cells atk-cells-gutter-large atk-swatch-ink atk-padding-small"><div class="atk-cell"><a href="javascript:void(0)" class="atk-size-kilo"><strong>Logo</strong></a></div><div class="atk-cell atk-jackscrew"><ul class="atk-menu-horizontal"><li class="atk-state-active"><a href="javascript:void(0)" class="atk-padding-small">Item 1</a></li><li><a href="javascript:void(0)" class="atk-padding-small">Item 2 <span class="atk-label atk-size-milli atk-shape-rounded atk-swatch-green">12</span></a></li><li><a href="javascript:void(0)" class="atk-padding-small">Item 3</a></li></ul></div><div class="atk-cell atk-text-nowrap"><div class="atk-actions"><a href="javascript:void(0)" class="atk-label atk-swatch-yellow">Upgrade</a><span class="atk-sep">⋅</span><a href="javascript:void(0)">Help</a></div></div><div class="atk-cell atk-text-nowrap"><div class="atk-cells atk-cells-gutter-small"><div class="atk-cell atk-text-reset"><img src="temp/apples.jpg" alt="Apples" width="32" class="atk-shape-circle"></div><div class="atk-cell">John Smith <span class="icon-down-dir"></span></div></div></div></div></div><h4>Boxed Navigation Bar</h4><p>Combination of <span class="atk-label atk-effect-info">.atk-cells</span>, <span class="atk-label atk-effect-info">.atk-swatch-*</span> and <span class="atk-label atk-effect-info">.atk-box</span> components. The best used as a boxed type header.</p><div class="atk-box"><div class="atk-bar atk-cells atk-cells-gutter-large atk-swatch-ink atk-box-small"><div class="atk-cell"><a href="javascript:void(0)" class="atk-size-kilo"><strong>Logo</strong></a></div><div class="atk-cell atk-jackscrew"><ul class="atk-menu-horizontal"><li class="atk-state-active"><a href="javascript:void(0)" class="atk-padding-small">Item 1</a></li><li><a href="javascript:void(0)" class="atk-padding-small">Item 2</a></li><li><a href="javascript:void(0)" class="atk-padding-small">Item 3</a></li></ul></div><div class="atk-cell atk-text-nowrap"><div class="atk-actions"><a href="javascript:void(0)" class="atk-label atk-swatch-yellow">Upgrade</a><span class="atk-sep">⋅</span><a href="javascript:void(0)">Help</a></div></div><div class="atk-cell atk-text-nowrap"><div class="atk-cells atk-cells-gutter-small"><div class="atk-cell atk-text-reset"><img src="temp/apples.jpg" alt="Apples" width="32" class="atk-shape-circle"></div><div class="atk-cell">John Smith <span class="icon-down-dir"></span></div></div></div></div></div><h4>Fixed Navigation Bar</h4><p><span class="atk-label atk-effect-warning"><span class="icon-attention"></span></span> Combination of <span class="atk-label atk-effect-info">.atk-cells</span>, <span class="atk-label atk-effect-info">.atk-swatch-*</span> and <span class="atk-label atk-effect-info">.atk-section-*</span> components. The best used as a header on a fixed page.</p><div class="atk-box"><div class="atk-swatch-ink"><div class="atk-move-center atk-col-8"><div class="atk-bar atk-cells atk-cells-gutter atk-section-small"><div class="atk-cell"><a href="javascript:void(0)" class="atk-size-kilo"><strong>Logo</strong></a></div><div class="atk-cell atk-jackscrew"><ul class="atk-menu-horizontal"><li class="atk-state-active"><a href="javascript:void(0)" class="atk-padding-small">Item 1</a></li><li><a href="javascript:void(0)" class="atk-padding-small">Item 2</a></li><li><a href="javascript:void(0)" class="atk-padding-small">Item 3</a></li></ul></div><div class="atk-cell atk-text-nowrap"><div class="atk-actions"><a href="javascript:void(0)" class="atk-label atk-swatch-yellow">Upgrade</a><span class="atk-sep">⋅</span><a href="javascript:void(0)">Help</a></div></div></div></div></div></div><!-- [Widget] Popovers --><h3>Popovers</h3><p><span class="atk-label atk-effect-info">.atk-popover</span></p><div id="example-widgets-popover"><div class="atk-push atk-row"><div class="atk-col-4"><div class="atk-box"><div class="atk-popover atk-popover-top-left atk-box atk-align-center atk-size-kilo">.atk-popover-top-left<div class="atk-popover-arrow"></div></div></div></div><div class="atk-col-4"><div class="atk-box"><div class="atk-popover atk-popover-top-center atk-box atk-align-center atk-size-kilo atk-swatch-blue">.atk-popover-top-center<div class="atk-popover-arrow"></div></div></div></div><div class="atk-col-4"><div class="atk-box"><div class="atk-popover atk-popover-top-right atk-box atk-align-center atk-size-kilo atk-swatch-ink">.atk-popover-top-right<div class="atk-popover-arrow"></div></div></div></div></div><div class="atk-row atk-pushv"><div class="atk-col-4"><div class="atk-box"><div class="atk-popover atk-popover-bottom-left atk-box atk-align-center atk-size-kilo atk-swatch-yellow">.atk-popover-bottom-left<div class="atk-popover-arrow"></div></div></div></div><div class="atk-col-4"><div class="atk-box"><div class="atk-popover atk-popover-bottom-center atk-box atk-align-center atk-size-kilo atk-swatch-red">.atk-popover-bottom-center<div class="atk-popover-arrow"></div></div></div></div><div class="atk-col-4"><div class="atk-box"><div class="atk-popover atk-popover-bottom-right atk-box atk-align-center atk-size-kilo atk-swatch-green">.atk-popover-bottom-right<div class="atk-popover-arrow"></div></div></div></div></div></div><h3>Banners</h3><p><span class="atk-label atk-effect-info">.atk-banner</span></p><div class="atk-box atk-actions atk-inline"><button id="banner-loader-start" class="atk-button">Show Loader</button><button id="banner-notification-start" class="atk-button">Show Notification</button></div><div id="banner-loader" class="atk-banner atk-cells"><div class="atk-cell atk-align-center atk-valign-middle"><div class="atk-box atk-inline atk-size-zetta atk-banner-cogs"></div></div></div><div id="banner-notification" class="atk-banner atk-cells"><div class="atk-cell atk-align-center atk-valign-middle"><div style="width:180px" class="atk-box atk-inline"><div class="icon-mail-alt atk-size-yotta atk-push-small atk-text-baseline-reset"></div><div class="atk-text-bold atk-text-lead">Verification link sent to your email</div></div></div></div></section><section id="responsive"><h2>Responsive</h2><p>.atk-show-*, .atk-hide-*, .atk-stack-*</p></section><section id="jqueryui"><h2>jQueryUI Widgets</h2><h3>Dialogs</h3><p>Basic modal <span class="atk-label atk-effect-info">.ui-dialog</span> with a minimal form in it.</p><div class="atk-box atk-inline"><button id="opener" class="atk-button">Open Dialog</button></div><div id="dialog" title="Basic dialog"><p class="atk-push-small">Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p><form class="atk-form"><div class="atk-push-xsmall"><input type="text" placeholder="Username" class="atk-jackscrew"></div><div class="atk-push-xsmall"><input type="password" placeholder="Password" class="atk-jackscrew"></div><button class="atk-button atk-swatch-green atk-jackscrew">Okay</button></form></div><p>Modal <span class="atk-label atk-effect-info">.ui-dialog</span> with the <span class="atk-label atk-effect-info">button</span> option on.</p><div class="atk-box atk-inline"><button id="opener2" class="atk-button">Open Dialog with the Button Panel</button></div><div id="dialog-buttonpane" title="Dialog with the Panel"><p>Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum.</p></div><h3>Tabs</h3><div class="atk-box"><div id="tabs"><ul><li><a href="#tabs-1">Nunc tincidunt</a></li><li><a href="#tabs-2">Proin dolor</a></li><li><a href="#tabs-3">Aenean lacinia</a></li></ul><div id="tabs-1"><p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p></div><div id="tabs-2"><p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p></div><div id="tabs-3"><p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p></div></div></div><p><span class="atk-label atk-effect-info">.ui-tabs</span> widget mixed with <span class="atk-label atk-effect-info">.atk-padding</span> component.</p><div class="atk-box"><div id="tabs2"><ul><li><a href="#tabs-1">Nunc tincidunt</a></li><li><a href="#tabs-2">Proin dolor</a></li><li><a href="#tabs-3">Aenean lacinia</a></li></ul><div id="tabs-1" class="atk-padding"><p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p></div><div id="tabs-2" class="atk-padding"><p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p></div><div id="tabs-3" class="atk-padding"><p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p></div></div></div><p><span class="atk-label atk-effect-info">.ui-tabs</span> widget mixed with <span class="atk-label atk-effect-info">.atk-section</span> component.</p><div class="atk-box"><div id="tabs3"><ul><li><a href="#tabs-1">Nunc tincidunt</a></li><li><a href="#tabs-2">Proin dolor</a></li><li><a href="#tabs-3">Aenean lacinia</a></li></ul><div id="tabs-1" class="atk-section"><p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p></div><div id="tabs-2" class="atk-section"><p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p></div><div id="tabs-3" class="atk-section"><p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p></div></div></div><p><span class="atk-label atk-effect-info">.ui-tabs</span> widget mixed with <span class="atk-label atk-effect-info">.atk-box</span> component.</p><div class="atk-box"><div id="tabs4"><ul><li><a href="#tabs-1">Nunc tincidunt</a></li><li><a href="#tabs-2">Proin dolor</a></li><li><a href="#tabs-3">Aenean lacinia</a></li></ul><div id="tabs-1" class="atk-box"><p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p></div><div id="tabs-2" class="atk-box"><p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p></div><div id="tabs-3" class="atk-box"><p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p></div></div></div><h3>Accordion</h3><div class="atk-box"><div id="accordion"><h3>Section 1</h3><div><p>Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p></div><h3>Section 2</h3><div><p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.</p></div><h3>Section 3</h3><div><p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede.<a href="javascript:void(0)">Phasellus</a> ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.</p></div></div></div><h3>Datepicker</h3><p>Basic <span class="atk-label atk-effect-info">.ui-datepicker</span> widget.</p><div class="atk-box atk-inline"><div class="atk-form"><form><div class="atk-cells atk-cells-gutter-small"><div class="atk-cell"><label for="datepicker">Date:</label></div><div class="atk-cell"><input id="datepicker" type="text"></div></div></form></div></div><p><span class="atk-label atk-effect-info">.ui-datepicker</span> with year and month dropdowns.</p><div class="atk-box atk-inline"><div class="atk-form"><form><div class="atk-cells atk-cells-gutter-small"><div class="atk-cell"><label for="datepicker2">Date:</label></div><div class="atk-cell"><input id="datepicker2" type="text"></div></div></form></div></div><h3>Tooltips</h3><div id="example-jqueryui-tooltips" class="atk-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#" title="Tooltip Example">Nobis</a>, corrupti, dignissimos voluptatem modi omnis beatae deleniti ipsa <a href="#" title="Tooltip Example">animi similique</a> dolorem quos est adipisci officiis quam distinctio deserunt reprehenderit aliquid a.</div></section></div></div></div></div></div><script src="js/jquery-2.1.4.min.js"></script><script src="js/jquery-ui/core.js"></script><script src="js/jquery-ui/widget.js"></script><script src="js/jquery-ui/position.js"></script><script src="js/jquery-ui/menu.js"></script><script src="js/jquery-ui/tabs.js"></script><script src="js/jquery-ui/datepicker.js"></script><script src="js/jquery-ui/selectmenu.js"></script><script src="js/jquery-ui/accordion.js"></script><script src="js/jquery-ui/dialog.js"></script><script src="js/jquery-ui/button.js"></script><script src="js/jquery-ui/tooltip.js"></script><script src="js/highlight.pack.js"></script><script src="js/demo.js"></script><script type="text/javascript">(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-17702108-4');
ga('send', 'pageview');</script></body></html>