gentux-style-guide
Version:
<http://gentuxdesign.com>
961 lines (773 loc) • 36.3 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow">
<title>Atoms</title>
<meta name="description" content="">
<link rel="stylesheet" href="/css/all.css">
<!-- <link rel="stylesheet" href="/css/all-menguin.css"> -->
</head>
<nav class="navbar navbar-default navbar-main navbar-with-columns">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-inverted" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="visible-xs navbar-brand" href="/">
<img class="navbar-brand-logo-gt" src="/images/styleguide-required/gt-logo.svg" alt="Generation Tux Logo">
</a>
</div>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-inverted">
<div class="row">
<div class="col-sm-3 col-lg-2">
<a class="hidden-xs navbar-brand navbar-brand-gt" href="/">
<img class="navbar-brand-logo-gt" src="/images/styleguide-required/gt-logo.svg" alt="Generation Tux Logo">
<img class="navbar-brand-logo-full" src="/images/styleguide-required/generationtux-logo.svg" alt="Generation Tux Logo">
</a>
</div><!-- /col -->
<div class="col-sm-9 col-md-7 col-lg-8">
<ul class="nav navbar-nav">
<li class="h5 ">
<a href="/brand-guidelines/">Guide</a>
</li>
<li class="h5 ">
<a href="/brand-assets/">Assets</a>
</li>
<li class="dropdown">
<a
class="dropdown-toggle h5"
data-toggle="dropdown"
href="#!"
>
Developers <em class="caret"></em>
</a>
<ul class="dropdown-menu" role="menu">
<li class="h5 ">
<a href="/dev-intro/">Intro</a>
</li>
<li class="h5 active">
<a href="/atoms/">Atoms</a>
</li>
<li class="h5 uppercase ">
<a href="/modules/">Modules</a>
</li>
</ul>
</li>
</ul>
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<body>
<div class="bordered-bottom bordered-light
pt-5 pt-md-6
pb-4 pb-md-5
mb-5 mb-md-5">
<div class="container-fluid">
<div class="row">
<div class="
col-sm-7 col-sm-offset-3
col-lg-6 col-lg-offset-2
readable-line
">
<h1 class="domd mb-3">Atoms</h1>
<p>
The Gentux Style Guide is based on <a href="http://getbootstrap.com">Bootstrap</a>. We extend its base functionality and add our own style. Here, that allows us to show a simplified and easier to digest sample of elements. If you'd like to see more documentation or examples, links to the relevant sections on the Bootstrap website are provided below.
</p>
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /container -->
</div>
<div class="container-fluid">
<div class="row">
<div class="
col-sm-3
col-md-3
col-lg-2
sticky
">
<div class="row">
<div class="col-sm-12 mt-5">
<h5 class="mb-2">Module Types:</h5>
<ul>
<li class="small"><a href="#Colors">Colors</a></li>
<li class="small"><a href="#Typography">Typography</a></li>
<li class="small"><a href="#Backgrounds">Backgrounds</a></li>
<li class="small"><a href="#Buttons">Buttons</a></li>
<li class="small"><a href="#Icons">Icons</a></li>
<li class="small"><a href="#Loaders">Loaders</a></li>
<li class="small"><a href="#Lists">Lists</a></li>
<li class="small"><a href="#Tables">Tables</a></li>
<li class="small"><a href="#Forms">Forms</a></li>
</ul>
<div class="h5"><a href="#">Back to Top</a></div>
</div><!--/col-->
</div><!--/row-->
</div><!-- /col -->
<div class="
col-sm-9
">
<div id="Colors" class="pt-5 mb-6">
<h2>Colors</h2>
<hr class="mb-sm-5">
<div class="row">
<div class="col-xs-11 col-xs-offset-1">
<div class="row">
<div class="col-sm-12">
<h3 class="h4 mb-2"> Primary and Secondary Colors</h3>
</div>
<div class="col-sm-8 copy-to-clipboard mb-4">
<div class="bg-brand-black color-swatch"></div>
<h3 class="h6 uppercase mt-2">Brand Black</h3>
<div class="clipboard-content clipboard-init small" title="click to copy to clipboard">000000</div>
</div>
<div class="col-sm-4 copy-to-clipboard mb-4">
<div class="bg-brand-gold color-swatch"></div>
<h3 class="h6 uppercase mt-2">Brand Gold</h3>
<div class="clipboard-content clipboard-init small" title="click to copy to clipboard">E6CE9A</div>
</div>
</div><!-- /row -->
<hr class="mt-4 mb-4">
<div class="row">
<div class="col-sm-12">
<h3 class="h4 mb-2"> Grayscale Colors</h3>
</div>
<div class="col-sm-2 copy-to-clipboard mb-4">
<div class="bg-gray-darker color-swatch py-5"></div>
<h3 class="h6 uppercase mt-2">Brand Gray Darker</h3>
<div class="clipboard-content clipboard-init small" title="click to copy to clipboard">404042</div>
</div>
<div class="col-sm-2 copy-to-clipboard mb-4">
<div class="bg-gray-dark color-swatch py-5"></div>
<h3 class="h6 uppercase mt-2">Brand Gray Dark</h3>
<div class="clipboard-content clipboard-init small" title="click to copy to clipboard">888888</div>
</div>
<div class="col-sm-2 copy-to-clipboard mb-4">
<div class="bg-gray color-swatch py-5"></div>
<h3 class="h6 uppercase mt-2">Brand Gray</h3>
<div class="clipboard-content clipboard-init small" title="click to copy to clipboard">cccccc</div>
</div>
<div class="col-sm-2 copy-to-clipboard mb-4">
<div class="bg-gray-light color-swatch py-5"></div>
<h3 class="h6 uppercase mt-2">Brand Gray Light</h3>
<div class="clipboard-content clipboard-init small" title="click to copy to clipboard">e6e6e6</div>
</div>
<div class="col-sm-2 copy-to-clipboard mb-4">
<div class="bg-gray-lighter color-swatch py-5"></div>
<h3 class="h6 uppercase mt-2">Brand Gray Lighter</h3>
<div class="clipboard-content clipboard-init small" title="click to copy to clipboard">f8f8f8</div>
</div>
</div><!-- /row -->
</div>
</div><!-- /row -->
</div>
<div id="Typography" class="pt-5 mb-6">
<h2>Typography</h2>
<hr class="mb-sm-5">
<div class="row">
<div class="col-xs-11 col-xs-offset-1">
<div class="row">
<div class="col-sm-12">
<p>
This typography system is built on a subset of the following scale:
<br> A ratio of 1.25 or 4:5 or major 3rd
<br> The full type scale reference can be found at: <a href="http://www.modularscale.com/?16&px&1.25&web&text">http://www.modularscale.com/?16&px&1.25&web&text</a>
</p>
<h3 class="context-copy">Fonts</h3>
<p>
Headlines use Roboto Condensed.
<br>
Body copy use Roboto.
</p>
<hr class="mt-5 mb-5">
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="h5 context--copy uppercase styleguide-label">Headline Waterfall</div>
</div>
</div>
<div class="row">
<div class="col-sm-7 col-sm-offset-1 col-lg-8 col-lg-offset-2">
<h1 class="mb-4">h1 Headline</h1>
<h2 class="mt-4 mb-4">h2 Headline</h2>
<h3 class="mt-4 mb-4">h3 Headline</h3>
<h4 class="mt-4 mb-4">h4 Headline</h4>
<h5 class="mt-4 mb-4">h5 Headline</h5>
<h6 class="mt-4 mb-4">h6 Headline</h6>
<h1 class="normalcase mt-4 mb-4">h1 Headline</h1>
<h2 class="normalcase mt-4 mb-4">h2 Headline</h2>
<h3 class="normalcase mt-4 mb-4">h3 Headline</h3>
<h4 class="normalcase mt-4 mb-4">h4 Headline</h4>
<h5 class="normalcase mt-4 mb-4">h5 Headline</h5>
<h6 class="normalcase mt-4 mb-4">h6 Headline</h6>
<h1 class="mb-4 domd">h1 Headline</h1>
<h2 class="mt-4 mb-4 domd">h2 Headline</h2>
<h3 class="mt-4 mb-4 domd">h3 Headline</h3>
<h4 class="mt-4 mb-4 domd">h4 Headline</h4>
<h5 class="mt-4 mb-4 domd">h5 Headline</h5>
<h6 class="mt-4 mb-4 domd">h6 Headline</h6>
<hr class="mt-5 mb-5">
</div>
</div>
<div class="row">
<div class="col-sm-7">
<div class="h5 context--copy uppercase styleguide-label">Headlines Longform</div>
</div>
</div>
<div class="row">
<div class="col-sm-7 col-sm-offset-1 col-lg-8 col-lg-offset-2">
<h1 class="mb-4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</h1>
<h2 class="mt-4 mb-4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</h2>
<h3 class="mt-4 mb-4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</h3>
<h4 class="mt-4 mb-4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</h4>
<h5 class="mt-4 mb-4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</h5>
<h6 class="mt-4 mb-4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</h6>
<h1 class="normalcase mt-4 mb-4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</h1>
<h2 class="normalcase mt-4 mb-4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</h2>
<h3 class="normalcase mt-4 mb-4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</h3>
<h4 class="normalcase mt-4 mb-4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</h4>
<h5 class="normalcase mt-4 mb-4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</h5>
<h6 class="normalcase mt-4 mb-4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</h6>
<h1 class="domd mt-4 mb-4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</h1>
<h2 class="domd mt-4 mb-4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</h2>
<h3 class="domd mt-4 mb-4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</h3>
<h4 class="domd mt-4 mb-4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</h4>
<h5 class="domd mt-4 mb-4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</h5>
<h6 class="domd mt-4 mb-4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</h6>
<hr class="mt-5 mb-5">
</div>
</div>
<div class="row">
<div class="col-sm-7">
<div class="h5 context--copy uppercase styleguide-label">Paragraphs</div>
</div>
</div>
<div class="row">
<div class="col-sm-7 col-sm-offset-1 col-lg-8 col-lg-offset-2">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi.
</p>
<hr>
<p class="small">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi.
</p>
</div><!-- /col -->
</div><!-- /row -->
</div>
</div><!-- /row -->
</div>
<div id="Backgrounds" class="pt-5 mb-6">
<h2>Backgrounds</h2>
<hr class="mb-sm-5">
<div class="row">
<div class="col-xs-11 col-xs-offset-1">
<div class="bg-gray-lighter-right-10 p-4 mb-4">
<div class="row">
<div class="col-sm-12">
<h5>This has an offset background right of 10 columns.</h5>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
</p>
</div>
</div>
</div>
<div class="bg-gray-lighter-right-7 p-4 mb-4">
<div class="row">
<div class="col-sm-12">
<h5>This has an offset background right of 7 columns.</h5>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
</p>
</div>
</div>
</div>
<div class="bg-gray-lighter-left-10 p-4 mb-4">
<div class="row">
<div class="col-sm-12">
<h5>This has an offset background left of 10 columns.</h5>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
</p>
</div>
</div>
</div>
<div class="bg-gray-lighter-left-7 p-4 mb-4">
<div class="row">
<div class="col-sm-12">
<h5>This has an offset background left of 7 columns.</h5>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
</p>
</div>
</div>
</div>
</div>
</div><!-- /row -->
</div>
<div id="Buttons" class="pt-5 mb-6">
<h2>Buttons</h2>
<hr class="mb-sm-5">
<div class="row">
<div class="col-xs-11 col-xs-offset-1">
<button type="button" class="btn btn-default btn-xs mb-2">btn x-small</button>
<button type="button" class="btn btn-default btn-sm mb-2">btn small</button>
<button type="button" class="btn btn-default mb-2">btn default</button>
<button type="button" class="btn btn-default btn-lg mb-2">btn large</button>
<button disabled type="button" class="btn btn-default mb-2">btn disabled</button>
<button disabled type="button" class="btn mb-2">btn disabled</button>
<hr class="mt-4 mb-4">
<!-- Standard button -->
<button type="button" class="btn btn-default mb-2">btn default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary mb-2">btn primary</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info mb-2">btn info</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success mb-2">btn success</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger mb-2">btn danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link mb-2">btn link</button>
<br>
<!-- Standard button -->
<button type="button" class="btn btn-default mb-2 active">btn default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary mb-2 active">btn primary</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info mb-2 active">btn info</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success mb-2 active">btn success</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger mb-2 active">btn danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link mb-2 active">btn link</button>
<hr class="mt-4 mb-4">
<!-- Standard button -->
<button type="button" class="btn btn-hollow-default mb-2">btn hollow default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-hollow-primary mb-2">btn hollow primary</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-hollow-info mb-2">btn hollow info</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-hollow-success mb-2">btn hollow success</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-hollow-danger mb-2">btn hollow danger</button>
<br>
<button type="button" class="btn btn-hollow-default mb-2 active">btn hollow default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-hollow-primary mb-2 active">btn hollow primary</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-hollow-info mb-2 active">btn hollow info</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-hollow-success mb-2 active">btn hollow success</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-hollow-danger mb-2 active">btn hollow danger</button>
<hr class="mt-4 mb-4">
<!-- Standard button -->
<button type="button" class="btn btn-hollow-transparent-default mb-2">btn hollow transparent default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-hollow-transparent-primary mb-2">btn hollow transparent primary</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-hollow-transparent-info mb-2">btn hollow transparent info</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-hollow-transparent-success mb-2">btn hollow transparent success</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-hollow-transparent-danger mb-2">btn hollow transparent danger</button>
<br>
<!-- Standard button -->
<button type="button" class="btn btn-hollow-transparent-default mb-2 active">btn hollow transparent default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-hollow-transparent-primary mb-2 active">btn hollow transparent primary</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-hollow-transparent-info mb-2 active">btn hollow transparent info</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-hollow-transparent-success mb-2 active">btn hollow transparent success</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-hollow-transparent-danger mb-2 active">btn hollow transparent danger</button>
<hr class="mt-4 mb-4">
<div class="row">
<div class="col-xs-6">
<button type="button" class="btn btn-default mb-2 btn-block">btn block</button>
</div>
<div class="col-xs-6">
<button type="button" class="btn btn-primary mb-2 btn-block">btn block</button>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<button type="button" class="btn btn-default mb-2 btn-block active">btn block</button>
</div>
<div class="col-xs-6">
<button type="button" class="btn btn-primary mb-2 btn-block active">btn block</button>
</div>
</div>
</div>
</div><!-- /row -->
</div>
<div id="Icons" class="pt-5 mb-6">
<h2>Icons</h2>
<hr class="mb-sm-5">
<div class="row">
<div class="col-xs-11 col-xs-offset-1">
<div class="row">
<div class="col-sm-12">
<span class="glyphicon glyphicon-arrow-left"></span>
<span class="glyphicon glyphicon-arrow-right"></span>
</div>
</div><!-- /row -->
</div>
</div><!-- /row -->
</div>
<div id="Loaders" class="pt-5 mb-6">
<h2>Loaders</h2>
<hr class="mb-sm-5">
<div class="row">
<div class="col-xs-11 col-xs-offset-1">
<div class="row">
<div class="col-sm-12">
<div class="spinner-container">
<div class="spinner">
<div class="loading-tie loading-spin" />
</div>
<h5 class="uppercase mt-3">Loading</h5>
</div>
</div>
</div><!-- /row -->
</div>
</div><!-- /row -->
</div>
<div id="Lists" class="pt-5 mb-6">
<h2>Lists</h2>
<hr class="mb-sm-5">
<div class="row">
<div class="col-xs-11 col-xs-offset-1">
<h3 class="context--copy">Definition Lists</h3>
<div class="row">
<div class="col-sm-10 col-sm-offset-1 col-lg-10 col-lg-offset-2">
<dl>
<dt>Lorem ipsum dolor sit amet</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Lorem ipsum dolor sit amet</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
</dl>
</div><!-- /col -->
</div><!-- /row -->
<h3 class="context--copy">Unordered Lists</h3>
<div class="row">
<div class="col-sm-10 col-sm-offset-1 col-lg-10 col-lg-offset-2">
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
</div><!-- /col -->
</div><!-- /row -->
<h3 class="context--copy">Ordered Lists</h3>
<div class="row">
<div class="col-sm-10 col-sm-offset-1 col-lg-10 col-lg-offset-2">
<ol>
<li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
<li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
<li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
<li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>
</ol>
</div><!-- /col -->
</div><!-- /row -->
<h3 class="context--copy">List Group</h3>
<div class="row">
<div class="col-sm-10 col-sm-offset-1 col-lg-10 col-lg-offset-2">
<div class="list-group">
<a href="#!" class="list-group-item active">Profile</a>
<a href="#!" class="list-group-item ">Shipping Address</a>
<a href="#!" class="list-group-item ">Billing Info</a>
<a href="#!" class="list-group-item ">Fit</a>
<a href="#!" class="list-group-item ">Orders</a>
</div>
</div>
</div>
</div>
</div><!-- /row -->
</div>
<div id="Tables" class="pt-5 mb-6">
<h2>Tables</h2>
<hr class="mb-sm-5">
<div class="row">
<div class="col-xs-11 col-xs-offset-1">
<h3 id="tables-example" class="context--copy">Basic example</h3>
<div class="row">
<div class="col-sm-10 col-sm-offset-1 col-lg-10 col-lg-offset-2">
<p>For basic styling—light padding and only horizontal dividers—add the base class <code>.table</code> to any <code><table></code>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.</p>
<div class="bs-example" data-example-id="simple-table">
<table class="table">
<caption>Optional table caption.</caption>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div><!-- /col -->
</div><!-- /row -->
<h3 id="tables-striped" class="context--copy">Striped rows</h3>
<div class="row">
<div class="col-sm-10 col-sm-offset-1 col-lg-10 col-lg-offset-2">
<p>Use <code>.table-striped</code> to add zebra-striping to any table row within the <code><tbody></code>.</p>
<div class="bs-callout bs-callout-danger" id="callout-tables-striped-ie8">
<h4>Cross-browser compatibility</h4>
<p>Striped tables are styled via the <code>:nth-child</code> CSS selector, which is not available in Internet Explorer 8.</p>
</div>
<div class="bs-example" data-example-id="striped-table">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div><!-- /col -->
</div><!-- /row -->
<h3 id="tables-bordered" class="context--copy">Bordered table</h3>
<div class="row">
<div class="col-sm-10 col-sm-offset-1 col-lg-10 col-lg-offset-2">
<p>Add <code>.table-bordered</code> for borders on all sides of the table and cells.</p>
<div class="bs-example" data-example-id="bordered-table">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div><!-- /col -->
</div><!-- /row -->
<h3 id="tables-hover-rows" class="context--copy">Hover rows</h3>
<div class="row">
<div class="col-sm-10 col-sm-offset-1 col-lg-10 col-lg-offset-2">
<p>Add <code>.table-hover</code> to enable a hover state on table rows within a <code><tbody></code>.</p>
<div class="bs-example" data-example-id="hoverable-table">
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div><!-- /col -->
</div><!-- /row -->
</div>
</div><!-- /row -->
</div>
<div id="Forms" class="pt-5 mb-6">
<h2>Forms</h2>
<hr class="mb-sm-5">
<div class="row">
<div class="col-xs-11 col-xs-offset-1">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div><!-- /row -->
</div>
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /container -->
<div class="container-fluid">
<div class="row">
<div class="
col-sm-7 col-sm-offset-3
col-lg-6 col-lg-offset-3
">
<h2 class="domd
mt-5 mt-md-5
mb-4
">Next Steps
</h2>
</div><!-- /col -->
</div><!-- /row -->
<div class="row">
<div class="
col-sm-8 col-sm-offset-3
col-lg-6 col-lg-offset-3
">
<a href="/modules/" class="
panel-link
link-style-clear d-block
p-4
mb-4
">
<h3 class="h4">Modules</h3>
<p>Componenets built up of atoms. Think navigation, hero and content sections, etc.</p>
<div class="text-right"><span class="glyphicon glyphicon-arrow-right"></span></div>
</a>
</div>
</div>
</div><!-- /container -->
</body>
<div class="
container
mt-6
pt-3
pb-6
bordered-top bordered-lighter
">
<div class="row">
<div class="col-sm-12">
<p class="small">Created by the design team at <a href="https://generationtux.com">Generation Tux.</a> Visit us on <a href="https://dribbble.com/gtux">Dribbble</a>.</p>
</div>
</div>
</div>
<script src="/js/app.js"></script>
</html>