<!DOCTYPE html>
<html><head>
<title>HTML KickStart Elements</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="HTML KickStart is a ultra–lean set of HTML5, CSS, and jQuery (javascript) files, layouts, and elements designed to give you a headstart and save you a lot of hours on your next web project." />
<meta name="copyright" content="Joshua Gatcke 99lime.com All Rights Reserved" />
<link rel="stylesheet" type="text/css" href="css/kickstart.css" media="all" /> <!-- KICKSTART -->
<link rel="stylesheet" type="text/css" href="style.css" media="all" /> <!-- CUSTOM STYLES -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/kickstart.js"></script> <!-- KICKSTART -->
</head><body>
<!-- ===================================== END HEADER ===================================== -->
<nav class="navbar">
<a class="hide-phone" id="logo" href="http://www.99lime.com"><i class="fa fa-angle-right"></i> 99<span>Lime</span></a>
<ul>
<li><a href="http://www.99lime.com/elements/"><span>HTML</span>KickStart</a></li>
<li><a href="http://www.99lime.com/uikit/"><span>UI</span>KIT</a></li>
<li><a href="http://www.99lime.com/blog/">Blog</a></li>
</ul>
</nav>
<div class="callout callout-top clearfix">
<div class="grid">
<h1>HTML KickStart</h1>
<h4>Ultra–Lean HTML5, CSS, & JS Building Blocks<br />for Rapid Website Production</h4>
<div class="col_3">
<i class="fa fa-mobile fa-4x"></i><br />
Responsive
</div>
<div class="col_3">
<i class="fa fa-github fa-4x"></i><br />
MIT Open Source
</div>
<div class="col_3">
<i class="fa fa-flag fa-4x"></i><br />
479 Icons<br />
</div>
<div class="col_3 omega">
<i class="fa fa-tint fa-4x"></i><br />
Designer Friendly
</i>
</div>
<div class="clear"></div><br />
<a class="button red large" href="http://www.99lime.com/downloads/"><i class="fa fa-cloud-download"></i> Download (Github)</a>
<span style="white-space: nowrap;">
<a class="button blue large" href="https://twitter.com/htmlkickstart"><i class="fa fa-twitter"></i></a>
<a class="button blue large" href="mailto:joshua@99lime.com"><i class="fa fa-envelope"></i></a></span><br />
<p>Downloaded over 91036 Times :)</p>
</div>
</div>
<div class="grid">
<!-- =====================================
INSTRUCTIONS
===================================== -->
<h3>Getting Started</h3>
<ul class="tabs">
<li><a href="#instructions">Instructions</a></li>
</ul>
<div id="instructions" class="tab-content">
<div class="col_8">
<h4><i class="fa fa-wrench"></i> Setup</h4>
<ol>
<li><a href="http://www.99lime.com/downloads/">Download HTML KickStart</a></li>
<li>Include jQuery and HTML KickStart
<pre>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/kickstart.js"></script> <!-- KICKSTART -->
<link rel="stylesheet" href="css/kickstart.css" media="all" /> <!-- KICKSTART -->
</pre>
</li>
<li>Copy Elements into your HTML</li>
</ol>
</div>
<div class="col_1"></div>
<div class="col_3">
<h4><i class="fa fa-globe"></i> Browsers</h4>
HTML KickStart Tested and working in IE 8+, Safari, Chrome, Firefox, Opera, Safari IOS, Browser and Chrome Android.
<h4>Notes</h4>
Don't forget to use an HTML5 Doctype
<code><!DOCTYPE html></code>
</div>
</div>
<!-- =====================================
BUTTONS
===================================== -->
<style type="text/css">
#btn-example .button-bar{margin-bottom:10px;}
</style>
<h3 id="buttons">Buttons</h3>
<ul class="tabs">
<li><a href="#btn-example">Example</a></li>
<li><a href="#btn-sizes">Sizes</a></li>
<li><a href="#btn-icons">With Icons</a></li>
<li><a href="#btn-colors">Colors</a></li>
<li><a href="#btn-styles">Styles</a></li>
<li><a href="#btn-bar">Button Bar</a></li>
</ul>
<style type="text/css">
#btn-example a.button, #btn-example button{margin-bottom:10px;}
</style>
<div id="btn-example" class="tab-content">
<div class="col_3">
<h4>Buttons</h4>
<button>Button</button><br />
<a class="button" href="">A.button</a><br />
<button class="small">Small</button> <br />
<button class="small" disabled="disabled">Small (disabled)</button><br />
<button class="medium">Medium</button><br />
<button class="large">Large</button>
</div>
<!-- BUTTONS W/ICON -->
<div class="col_3">
<h4>With Icons</h4>
<button class="small"><i class="fa fa-picture-o"></i> Small</button><br />
<button class="medium"><i class="fa fa-coffee"></i> Medium</button><br />
<button class="large"><i class="fa fa-leaf"></i> Large</button><br />
</div>
<!-- BUTTON VARIATIONS -->
<div class="col_3">
<h4>Colors</h4>
<button class="blue"><i class="fa fa-star"></i> .blue</button><br />
<a class="button orange" href=""><i class="fa fa-music"></i> .orange</a><br />
<button class="small pink"><i class="fa fa-plus-square"></i> .pink</button><br />
<button class="medium green"><i class="fa fa-play-circle"></i> .green</button><br />
<button class="large red"><i class="fa fa-minus-square"></i> .red</button>
</div>
<!-- BUTTON STYLES -->
<div class="col_3">
<h4>Styles</h4>
<button>default</button><br />
<button class="pill"><i class="fa fa-star"></i> .pill</button><br />
<a class="button pop" href=""><i class="icon-music"></i> .pop</a><br />
<button class="inset"><i class="fa fa-plus-square"></i> .inset</button> <br />
<button class="square"><i class="fa fa-minus-square"></i> .square</button>
</div><div class="clear"></div>
<div class="col_12">
<h4>Button Bar</h4>
<ul class="button-bar">
<li><a href=""><i class="fa fa-pencil"></i> Edit</a></li>
<li><a href=""><i class="fa fa-tag"></i> Tag</a></li>
<li><a href=""><i class="fa fa-upload"></i> Upload</a></li>
<li><a href=""><i class="fa fa-plus-square"></i></a></li>
</ul>
<ul class="button-bar">
<li><a href=""><i class="fa fa-folder-open"></i></a></li>
<li><a href=""><i class="fa fa-file"></i></a></li>
<li><a href=""><i class="fa fa-trash"></i></a></li>
<li><a href=""><i class="fa fa-wrench"></i></a></li>
</ul>
<ul class="button-bar">
<li><a href="">Item1</a></li>
<li><a href=""><i class="fa fa-globe"></i> Item2</a></li>
<li><a href="">Item3</a></li>
<li><a href="">Item4</a></li>
</ul>
<ul class="button-bar">
<li><a href=""><i class="fa fa-caret-left"></i></a></li>
<li><a href=""><i class="fa fa-caret-right"></i></a></li>
</ul>
</div>
</div>
<div id="btn-sizes" class="tab-content">
<pre>
<!-- Button Sizes -->
<button>Button</button>
<a class="button" href="">A.button</a>
<button class="small">Small</button>
<button class="small" disabled="disabled">Small (disabled)</button>
<button class="medium">Medium</button>
<button class="large">Large</button></pre>
</div>
<div id="btn-icons" class="tab-content">
<pre>
<!-- Buttons w/Icons -->
<button class="small"><i class="fa fa-picture-o"></i> Small</button>
<button class="medium"><i class="fa fa-coffee"></i> Medium</button>
<button class="large"><i class="fa fa-leaf"></i> Large</button></pre>
</div>
<div id="btn-colors" class="tab-content">
<pre>
<!-- Buttons w/Colors -->
<button class="blue"><i class="fa fa-star"></i> .blue</button>
<a class="button orange" href=""><i class="fa fa-music"></i> .orange</a>
<button class="small pink"><i class="fa fa-plus-square"></i> .pink</button>
<button class="medium green"><i class="fa fa-play-circle"></i> .green</button>
<button class="large red"><i class="fa fa-minus-square"></i> .red</button></pre>
</div>
<div id="btn-styles" class="tab-content">
<pre>
<!-- Default (no style) -->
<button>default</button>
<!-- Pill -->
<button class="pill"><i class="fa fa-star"></i> .pill</button>
<!-- Pop -->
<a class="button pop" href=""><i class="fa fa-music"></i> .pop</a>
<!-- Inset -->
<button class="inset"><i class="fa fa-plus-square"></i> .inset</button>
<!-- Square -->
<button class="square"><i class="icon-minus-square"></i> .square</button>
</pre>
</div>
<div id="btn-bar" class="tab-content">
<pre>
<!-- Button Bar w/icons -->
<ul class="button-bar">
<li><a href=""><i class="fa fa-pencil"></i> Edit</a></li>
<li><a href=""><i class="fa fa-tag"></i> Tag</a></li>
<li><a href=""><i class="fa fa-upload"></i> Upload</a></li>
<li><a href=""><i class="fa fa-plus-sign"></i></a></li>
</ul>
</pre>
</div>
<!-- =====================================
LISTS
===================================== -->
<h3 id="lists">Lists</h3>
<ul class="tabs">
<li><a href="#list-example">Example</a></li>
<li><a href="#list-ul">UL</a></li>
<li><a href="#list-ol">OL</a></li>
<li><a href="#list-checks">UL.icons</a></li>
<li><a href="#list-alt">UL.alt</a></li>
</ul>
<div id="list-example" class="tab-content">
<div class="col_3">
<h4>Unordered List</h4>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Pear</li>
</ul>
</div>
<div class="col_3">
<h4>Ordered List</h4>
<ol>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Pear</li>
</ol>
</div>
<div class="col_3">
<h4>UL.icons</h4>
<ul class="icons">
<li><i class="fa fa-check"></i> Apple</li>
<li><i class="fa fa-check"></i> Banana</li>
<li><i class="fa fa-check"></i> Orange</li>
<li><i class="fa fa-remove"></i> Pear</li>
</ul>
</div>
<div class="col_3">
<h4>UL.alt</h4>
<ul class="alt">
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Pear</li>
</ul>
</div>
</div>
<div id="list-ul" class="tab-content">
<pre>
<!-- Unordered List -->
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Pear</li>
</ul></pre>
</div>
<div id="list-ol" class="tab-content">
<pre>
<!-- Ordered List -->
<ol>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Pear</li>
</ol></pre>
</div>
<div id="list-checks" class="tab-content">
<pre>
<!-- List Icons -->
<ul class="icons">
<li><i class="fa fa-check"></i>Apple</li>
<li><i class="fa fa-check"></i>Banana</li>
<li><i class="fa fa-check"></i>Orange</li>
<li><i class="fa fa-remove"></i>Pear</li>
</ul></pre>
</div>
<div id="list-alt" class="tab-content">
<pre>
<!-- List Alternative Style -->
<ul class="alt">
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Pear</li>
</ul></pre>
</div>
<!-- =====================================
MENUS
===================================== -->
<h3 id="menus">Menus</h3>
<ul class="tabs">
<li><a href="#menu-example">Example</a></li>
<li><a href="#menu-horizontal">Horizontal</a></li>
<li><a href="#menu-vertical">Vertical</a></li>
<li><a href="#menu-vertical-right">Vertical.right</a></li>
</ul>
<div id="menu-example" class="tab-content">
<p>These Menus are optionally responsive when using a responsive grid: <code>.grid</code> or <code>.grid.flex</code></p>
<!-- MENU VERTICAL -->
<div class="col_3">
<h4>Vertical Left</h4>
<ul class="menu vertical">
<li class="current"><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a>
<ul>
<li><a href="">Sub Item that is super long and we don't want it to break the menu</a></li>
<li><a href="">Sub Item</a>
<ul>
<li><a href="">Sub Item</a></li>
<li><a href="">Sub Item</a></li>
<li><a href="">Sub Item</a></li>
<li><a href="">Sub Item</a></li>
</ul>
</li>
<li><a href="">Sub Item</a></li>
</ul>
</li>
<li><a href="">Item 4</a></li>
</ul>
</div>
<!-- MENU HORIZONTAL -->
<div class="col_6">
<h4>Horizontal</h4>
<ul class="menu">
<li class="current"><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href=""><i class="fa fa-inbox"></i> Item 3</a>
<ul>
<li><a href=""><i class="fa fa-cog"></i> Sub Item</a></li>
<li><a href=""><i class="fa fa-envelope"></i> Sub Item</a>
<ul>
<li><a href=""><i class="fa fa-wrench"></i> Sub Item</a></li>
<li><a href=""><i class="fa fa-camera-retro"></i> Sub Item</a></li>
<li><a href=""><i class="fa fa-coffee"></i> Sub Item</a></li>
<li><a href=""><i class="fa fa-twitter"></i> Sub Item</a></li>
</ul>
</li>
<li class="divider"><a href=""><i class="fa fa-trash"></i> li.divider</a></li>
</ul>
</li>
<li><a href="">Item 4</a></li>
</ul>
</div>
<!-- MENU VERTICAL RIGHT -->
<div class="col_3">
<h4>Vertical Right</h4>
<ul class="menu vertical right">
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a>
<ul>
<li><a href="">Sub Item</a></li>
<li class="current"><a href="">Sub Item</a>
<ul>
<li><a href="">Sub Item</a></li>
<li><a href="">Sub Item</a></li>
<li><a href="">Sub Item</a></li>
<li><a href="">Sub Item</a></li>
</ul>
</li>
<li><a href="">Sub Item</a></li>
</ul>
</li>
<li><a href="">Item 4</a></li>
</ul>
</div>
</div>
<div id="menu-vertical" class="tab-content">
<pre>
<!-- Menu Vertical Left -->
<ul class="menu vertical">
<li class="current"><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a>
<ul>
<li><a href="">Sub Item that is super long and we don't want it to break the menu</a></li>
<li><a href="">Sub Item</a>
<ul>
<li><a href="">Sub Item</a></li>
<li><a href="">Sub Item</a></li>
<li><a href="">Sub Item</a></li>
<li><a href="">Sub Item</a></li>
</ul>
</li>
<li><a href="">Sub Item</a></li>
</ul>
</li>
<li><a href="">Item 4</a></li>
</ul></pre>
</div>
<div id="menu-horizontal" class="tab-content">
<pre>
<!-- Menu Horizontal -->
<ul class="menu">
<li class="current"><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href=""><i class="fa fa-inbox"></i> Item 3</a>
<ul>
<li><a href=""><i class="fa fa-cog"></i> Sub Item</a></li>
<li><a href=""><i class="fa fa-envelope"></i> Sub Item</a>
<ul>
<li><a href=""><i class="fa fa-wrench"></i> Sub Item</a></li>
<li><a href=""><i class="fa fa-camera-retro"></i> Sub Item</a></li>
<li><a href=""><i class="fa fa-coffee"></i> Sub Item</a></li>
<li><a href=""><i class="fa fa-twitter"></i> Sub Item</a></li>
</ul>
</li>
<li class="divider"><a href=""><i class="fa fa-trash"></i> li.divider</a></li>
</ul>
</li>
<li><a href="">Item 4</a></li>
</ul></pre>
</div>
<div id="menu-vertical-right" class="tab-content">
<pre>
<!-- Menu Vertical Right -->
<ul class="menu vertical right">
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a>
<ul>
<li><a href="">Sub Item</a></li>
<li class="current"><a href="">Sub Item</a>
<ul>
<li><a href="">Sub Item</a></li>
<li><a href="">Sub Item</a></li>
<li><a href="">Sub Item</a></li>
<li><a href="">Sub Item</a></li>
</ul>
</li>
<li><a href="">Sub Item</a></li>
</ul>
</li>
<li><a href="">Item 4</a></li>
</ul></pre>
</div>
<!-- =====================================
TABLES
===================================== -->
<h3 id="tables">Tables</h3>
<ul class="tabs">
<li><a href="#table-example">Example</a></li>
<li><a href="#table">Table</a></li>
<li><a href="#table-wside">Table w/side TH</a></li>
<li><a href="#table-styles">Table Styles</a></li>
</ul>
<div id="table-example" class="tab-content">
<div class="col_6">
<h4>Table (default)</h4>
<table cellspacing="0" cellpadding="0">
<thead><tr>
<th>Item1</th>
<th>Item2</th>
<th>Item3</th>
</tr></thead>
<tbody><tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
</tr><tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
</tr><tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
</tr><tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
</tr></tbody>
</table>
</div>
<div class="col_6">
<h4>Table.striped</h4>
<table class="striped" cellspacing="0" cellpadding="0">
<thead><tr>
<th> </th>
<th>Item2</th>
<th>Item3</th>
</tr></thead>
<tbody><tr>
<th>Item1</th>
<td>Item2</td>
<td>Item3</td>
</tr><tr>
<th>Item1</th>
<td>Item2</td>
<td>Item3</td>
</tr><tr>
<th>Item1</th>
<td>Item2</td>
<td>Item3</td>
</tr><tr>
<th>Item1</th>
<td>Item2</td>
<td>Item3</td>
</tr></tbody>
</table>
</div><div class="clear"></div>
<div class="col_6">
<h4>Table.tight</h4>
<table class="tight" cellspacing="0" cellpadding="0">
<thead><tr>
<th>Item1</th>
<th>Item2</th>
<th>Item3</th>
</tr></thead>
<tbody><tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
</tr><tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
</tr><tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
</tr><tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
</tr></tbody>
</table>
</div>
<div class="col_6">
<h4>Table.sortable</h4>
<table class="sortable" cellspacing="0" cellpadding="0">
<thead><tr>
<th>Name</th>
<th>Number</th>
<th>Color</th>
<th>Actions</th>
</tr></thead>
<tbody><tr>
<td>Joshua</td>
<td>555-4325</td>
<td>Blue</td>
<td><a href=""><i class="fa fa-pencil"></i></a>
<a href=""><i class="fa fa-minus-square"></i></a></td>
</tr><tr>
<td>Peter</td>
<td>555-5698</td>
<td>Gold</td>
<td><a href=""><i class="fa fa-pencil"></i></a>
<a href=""><i class="fa fa-minus-square"></i></a></td>
</tr><tr>
<td>Mary</td>
<td>666-7654</td>
<td>Red</td>
<td><a href=""><i class="fa fa-pencil"></i></a>
<a href=""><i class="fa fa-minus-square"></i></a></td>
</tr><tr>
<td>Gretty</td>
<td>555-6732</td>
<td>Pink</td>
<td><a href=""><i class="fa fa-pencil"></i></a>
<a href=""><i class="fa fa-minus-square"></i></a></td>
</tr></tbody>
</table>
</div>
</div>
<div id="table" class="tab-content">
<pre>
<!-- Table -->
<table cellspacing="0" cellpadding="0">
<thead><tr>
<th>Item1</th>
<th>Item2</th>
<th>Item3</th>
</tr></thead>
<tbody><tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
</tr><tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
</tr><tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
</tr><tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
</tr></tbody>
</table></pre>
</div>
<div id="table-wside" class="tab-content">
<pre>
<!-- Table w/Side -->
<table cellspacing="0" cellpadding="0">
<thead><tr>
<th> </th>
<th>Item2</th>
<th>Item3</th>
</tr></thead>
<tbody><tr>
<th>Item1</th>
<td>Item2</td>
<td>Item3</td>
</tr><tr>
<th>Item1</th>
<td>Item2</td>
<td>Item3</td>
</tr><tr>
<th>Item1</th>
<td>Item2</td>
<td>Item3</td>
</tr><tr>
<th>Item1</th>
<td>Item2</td>
<td>Item3</td>
</tr></tbody>
</table></pre>
</div>
<div id="table-styles" class="tab-content">
<pre>
<!-- Table striped -->
<table class="striped">
...
</table>
<!-- Table tight -->
<table class="tight">
...
</table>
<!-- Table sortable -->
<table class="sortable">
...
</table>
<!-- Table combined Styles -->
<table class="striped tight sortable">
...
</table>
</pre>
</div>
<!-- =====================================
TOOL TIPS
===================================== -->
<h3 id="tooltips">ToolTips</h3>
<ul class="tabs">
<li><a href="#tooltip-example">Example</a></li>
<li><a href="#tooltip-positions">Positions</a></li>
<li><a href="#tooltip-html">w/ HTML Content</a></li>
</ul>
<div id="tooltip-example" class="tab-content">
<div class="col_4">
<h4>Tooltips</h4>
<p>Tooltips are awesome. These tooltips are designed to mimic the default browser tooltips - smart, aware of the edge of the browser window. Simple.</p>
<p>Hover over the examples on the right to preview.</p>
<p>Use:<br />
<code>class="tooltip"</code> + <br />
<code class="tooltip" title="my tooltip content">title="my tooltip content"</code></p>
</div>
<div class="col_4">
<h4>Tooltip Positions</h4>
<ul>
<li><code class="tooltip" title="This is a default (top) tooltip">.tooltip</code> (default)</li>
<li><code class="tooltip-top" title="This is a Top tooltip">.tooltip-top</code></li>
<li><code class="tooltip-right" title="This is a Right tooltip">.tooltip-right</code></li>
<li><code class="tooltip-left" title="This is a Left tooltip">.tooltip-left</code></li>
<li><code class="tooltip-bottom" title="This is a Bottom tooltip">.tooltip-bottom</code></li>
</ul>
</div>
<div class="col_4">
<h4>Tooltips with HTML Content</h4>
<code>.tooltip</code> + <code>data-content="#ID"</code>
<hr />
<button class="tooltip medium orange pill" data-content="#tooltipcontentID">Hover Over Me</button>
<button class="tooltip medium blue pill" data-content="#tooltipcontentID" data-action="click">Click Me</button>
<div class="tooltip-content" id="tooltipcontentID"><h5>HTML Content</h5>
<img src="http://placehold.it/180x150/4D99E0/ffffff.png&text=180x150" width="180" height="150" />
<p>This is more HTML content. You can place any HTML in this tooltip.</p></div>
</div>
</div>
<div id="tooltip-positions" class="tab-content">
<pre>
<!-- Tooltip Default (top) -->
<span class="tooltip" title="This is a default (top) tooltip">.tooltip</span>
<!-- Tooltip Top -->
<span class="tooltip-top" title="This is a Top tooltip">.tooltip-top</span>
<!-- Tooltip Right -->
<span class="tooltip-right" title="This is a Right tooltip">.tooltip-right</span>
<!-- Tooltip Left -->
<span class="tooltip-left" title="This is a Left tooltip">.tooltip-left</span>
<!-- Tooltip Bottom -->
<span class="tooltip-bottom" title="This is a Bottom tooltip">.tooltip-bottom</span>
</pre>
</div>
<div id="tooltip-html" class="tab-content">
<pre>
<!-- Hover Action -->
<button class="tooltip medium orange pill" data-content="#tooltipcontentID">Hover Over Me</button>
<!-- Click Action -->
<button class="tooltip medium blue pill" data-content="#tooltipcontentID" data-action="click">Click Me</button>
<!-- Tooltip Content -->
<div class="tooltip-content" id="tooltipcontentID"><h5>HTML Content</h5>
<img src="http://placehold.it/180x150/4D99E0/ffffff.png&text=180x150" width="180" height="150" />
<p>This is more HTML content. You can place any HTML in this tooltip.</p></div>
</pre>
</div>
<!-- =====================================
TYPOGRAPHY
===================================== -->
<h3 id="typography">Typography</h3>
<ul class="tabs">
<li><a href="#type-example">Example</a></li>
<li><a href="#type-headings">Headings</a></li>
<li><a href="#type-paragraphs">Paragraphs</a></li>
<li><a href="#type-blockquotes">Blockquote</a></li>
<li><a href="#type-blockquotes-small">Blockquote.small</a></li>
<li><a href="#type-inline-styles">Inline Styles</a></li>
<li><a href="#type-address">Address</a></li>
</ul>
<div id="type-example" class="tab-content">
<div class="col_8">
<h4>Paragraphs</h4>
<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>
<p>El 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. Nam
liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim
placerat facer possim assum.</p>
<!-- BLOCKQUOTES -->
<h4>Blockquote</h4>
<blockquote><p>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
<span>Someone Important</span></p></blockquote>
<!-- BLOCKQUOTE SMALL -->
<h4>Blockquote Small</h4>
<blockquote class="small"><p>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
<span>Someone Important</span></p></blockquote>
</div>
<!-- TYPE STYLES -->
<div class="col_4">
<h4>Inline Styles</h4>
<ul>
<li><strong>Strong</strong></li>
<li><em>Emphasis</em></li>
<li><a href="">Inline Link</a></li>
<li><strike>Strike</strike></li>
<li>Inline <i class="fa fa-film"></i> Icons</li>
<li><code><h1>Sample Code</h1></code></li>
</ul>
<hr />
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<hr />
<h4>Address</h4>
<address><p>
1234 South Creek Lane<br />
Calgary, Alberta, Canada<br />
T4B–1S6
</p>
</address>
</div>
</div>
<div id="type-headings" class="tab-content">
<pre>
<!-- Headings 1–6 -->
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6></pre>
</div>
<div id="type-paragraphs" class="tab-content">
<pre>
<!-- Paragraph -->
<p>Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt...</p>
<p>El illum dolore eu feugiat nulla facilisis at vero eros et accumsan...</p></pre>
</div>
<div id="type-blockquotes" class="tab-content">
<pre>
<!-- Blockquote -->
<blockquote>
<p>
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
<span>Someone Important</span>
</p>
</blockquote></pre>
</div>
<div id="type-blockquotes-small" class="tab-content">
<pre>
<!-- Blockquote Small -->
<blockquote class="small">
<p>
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
<span>Someone Important</span>
</p>
</blockquote></pre>
</div>
<div id="type-inline-styles" class="tab-content">
<pre><!-- Strong -->
<strong>Strong</strong>
<!-- Emphasis -->
<em>Emphasis</em>
<!-- Inline Link -->
<a href="">Inline Link</a>
<!-- Strike -->
<strike>Strike</strike>
<!--Inline Icons -->
Inline <i class="icon-film"></i> Icons
<!--Sample Code (encoded entities) -->
<code>&lt;h1&gt;Sample Code&lt;/h1&gt;</code></pre>
</div>
<div id="type-address" class="tab-content">
<pre>
<!-- Address -->
<address><p>
1234 South Creek Lane<br />
Calgary, Alberta, Canada<br />
T4B–1S6
</p>
</address></pre>
</div>
<!-- =====================================
HORIZONTAL RULES
===================================== -->
<h3 id="horizontal-rules">Horizontal Rules</h3>
<ul class="tabs">
<li><a href="#hr-example">Example</a></li>
<li><a href="#hr-html">HTML</a></li>
</ul>
<div id="hr-example" class="tab-content">
<div class="col_4">
<h4>HR</h4>
<hr />
</div>
<div class="col_4">
<h4>HR.alt1</h4>
<hr class="alt1" />
</div>
<div class="col_4">
<h4>HR.alt2</h4>
<hr class="alt2" />
</div>
</div>
<div id="hr-html" class="tab-content">
<pre>
<!-- HR -->
<hr />
<!-- HR.alt1 -->
<hr class="alt1" />
<!-- HR.alt2 -->
<hr class="alt2" /></pre>
</div>
<!-- =====================================
ICONS
===================================== -->
<style type="text/css">
#icon-description{border:1px solid #ddd;padding:20px;background:#fff;}
#icon-description span{color:red;}
</style>
<h3 id="icons">Icons/Glyphs</h3>
<div id="icon-description" class="clearfix">
<div class="col_7">
<h4>HTML KickStart now using<br /><a href="http://fortawesome.github.com/Font-Awesome/">Font Awesome 4.2.0 Icons</a>!</h4>
How to use icons: <code><i class="<span>fa fa-globe</span>"></i></code>.
<br />Replace <span>fa-globe</span> with the icon you would like to use from the <a href="http://fortawesome.github.io/Font-Awesome/cheatsheet/">Cheatsheet</a>.</div>
<div class="col_5">
<i class="fa fa-github-alt fa-large"></i>
<i class="fa fa-github-alt fa-2x"></i>
<i class="fa fa-github-alt fa-3x"></i>
<i class="fa fa-github-alt fa-4x"></i>
<br />
To increase the size of icons relative to its container, use <code>fa-large</code>, <code>fa-2x</code>, <code>fa-3x</code>, or <code>fa-4x</code>.</div><hr />
<div class="col_4">
<i class="fa fa-github-alt fa-4x pull-left"></i> <code>.pull-left</code> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="col_4">
<i class="fa fa-github-alt fa-4x pull-right"></i> <code>.pull-right</code> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="col_4">
<i class="fa fa-github-alt fa-4x pull-left fa-border"></i> <code>.fa-border</code> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="clear" style="margin-bottom:40px;"></div>
<!-- =====================================
CODE/PRE
===================================== -->
<h3 id="code">Code/Pre</h3>
<ul class="tabs">
<li><a href="#code-example">Example</a></li>
<li><a href="#code-html">PRE.html</a></li>
<li><a href="#code-css">PRE.css</a></li>
<li><a href="#code-js">PRE.js</a></li>
<li><a href="#code-php">PRE.php</a></li>
</ul>
<div id="code-example" class="tab-content">
<div class="col_4">
<h4>PRE HTML</h4>
<pre>
<html>
<head><title>This is a title</title></head>
<body class="subpage">
<!-- Content Here -->
</body>
</html></pre>
</div>
<!-- CODE CSS -->
<div class="col_4">
<h4>PRE CSS</h4>
<pre class="css">
body{
font-weight:bold;
color:#000;
line-height:150%;
}</pre>
</div>
<!-- CODE JS -->
<div class="col_4">
<h4>PRE JS</h4>
<pre class="js">
$(document).ready(function(){
alert('jQuery');
});</pre>
</div>
</div>
<div id="code-html" class="tab-content">
<pre>
<!-- Code HTML -->
<pre>
…code goes here…
</pre></pre>
</div>
<div id="code-css" class="tab-content">
<pre>
<!-- Code CSS -->
<pre>
…code goes here…
</pre></pre>
</div>
<div id="code-js" class="tab-content">
<pre>
<!-- Code Javascript -->
<pre>
…code goes here…
</pre></pre>
</div>
<div id="code-php" class="tab-content">
<pre>
<!-- Code PHP -->
<pre>
…code goes here…
</pre></pre>
</div>
<!-- =====================================
TABS
===================================== -->
<h3 id="tabs">Tabs</h3>
<ul class="tabs">
<li><a href="#tabs-example">Example</a></li>
<li><a href="#tabs-left">Tabs.left</a></li>
<li><a href="#tabs-center">Tabs.center</a></li>
<li><a href="#tabs-right">Tabs.right</a></li>
</ul>
<div id="tabs-example" class="tab-content">
<div class="col_4">
<h4>Tabs.left</h4>
<ul class="tabs left">
<li><a href="#tab1">Tab1</a></li>
<li><a href="#tab2">Tab2</a></li>
<li><a href="#tab3">Tab3</a></li>
</ul>
<div id="tab1" class="tab-content">Tab1</div>
<div id="tab2" class="tab-content">Tab2</div>
<div id="tab3" class="tab-content">Tab3</div>
</div>
<!-- TABS CENTER -->
<div class="col_4">
<h4>Tabs.center</h4>
<ul class="tabs center">
<li><a href="#tabc1">Tab1</a></li>
<li><a href="#tabc2"><i class="fa fa-folder-open"></i> Tab2</a></li>
<li><a href="#tabc3">Tab3</a></li>
</ul>
<div id="tabc1" class="tab-content">Tab1</div>
<div id="tabc2" class="tab-content">Tab2 has an icon.</div>
<div id="tabc3" class="tab-content">Tab3</div>
</div>
<!-- TABS RIGHT -->
<div class="col_4">
<h4>Tabs.right</h4>
<ul class="tabs right">
<li><a href="#tabr1">Tab1</a></li>
<li><a href="#tabr2">Tab2</a></li>
<li><a href="#tabr3">Tab3</a></li>
</ul>
<div id="tabr1" class="tab-content">Tab1</div>
<div id="tabr2" class="tab-content">Tab2</div>
<div id="tabr3" class="tab-content">Tab3</div>
</div>
</div>
<div id="tabs-left" class="tab-content">
<pre>
<!-- Tabs Left -->
<ul class="tabs left">
<li><a href="#tabr1">Tab1</a></li>
<li><a href="#tabr2">Tab2</a></li>
<li><a href="#tabr3">Tab3</a></li>
</ul>
<div id="tabr1" class="tab-content">Tab1</div>
<div id="tabr2" class="tab-content">Tab2</div>
<div id="tabr3" class="tab-content">Tab3</div></pre>
</div>
<div id="tabs-center" class="tab-content">
<pre>
<!-- Tabs Center -->
<ul class="tabs center">
<li><a href="#tabc1">Tab1</a></li>
<li><a href="#tabc2"><i class="fa fa-folder-open"></i> Tab2</a></li>
<li><a href="#tabc3">Tab3</a></li>
</ul>
<div id="tabc1" class="tab-content">Tab1</div>
<div id="tabc2" class="tab-content">Tab2 has an icon.</div>
<div id="tabc3" class="tab-content">Tab3</div></pre>
</div>
<div id="tabs-right" class="tab-content">
<pre>
<!-- Tabs Right -->
<ul class="tabs right">
<li><a href="#tabr1">Tab1</a></li>
<li><a href="#tabr2">Tab2</a></li>
<li><a href="#tabr3">Tab3</a></li>
</ul>
<div id="tabr1" class="tab-content">Tab1</div>
<div id="tabr2" class="tab-content">Tab2</div>
<div id="tabr3" class="tab-content">Tab3</div></pre>
</div>
<!-- =====================================
BREADCRUMBS
===================================== -->
<h3 id="breadcrumbs">Breadcrumbs</h3>
<ul class="tabs">
<li><a href="#bread-example">Example</a></li>
<li><a href="#bread">Breadcrumbs</a></li>
<li><a href="#bread-alt1">Breadcrumbs.alt1</a></li>
</ul>
<div id="bread-example" class="tab-content">
<div class="col_6">
<h4>Breadcrumbs</h4>
<ul class="breadcrumbs">
<li><a href="">Home</a></li>
<li><a href="">Category</a></li>
<li><a href="">Sub Category</a></li>
<li><a href="">Page Title</a></li>
</ul>
</div>
<div class="col_6">
<h4>Breadcrumbs.alt1</h4>
<ul class="breadcrumbs alt1">
<li><a href="">Home</a></li>
<li><a href="">Category</a></li>
<li><a href="">Sub Category</a></li>
<li><a href="">Page Title</a></li>
</ul>
</div>
</div>
<div id="bread" class="tab-content">
<pre>
<!-- Breadcrumbs -->
<ul class="breadcrumbs">
<li><a href="">Home</a></li>
<li><a href="">Category</a></li>
<li><a href="">Sub Category</a></li>
<li><a href="">Page Title</a></li>
</ul></pre>
</div>
<div id="bread-alt1" class="tab-content">
<pre>
<!-- Alternative Style -->
<ul class="breadcrumbs alt1">
<li><a href="">Home</a></li>
<li><a href="">Category</a></li>
<li><a href="">Sub Category</a></li>
<li><a href="">Page Title</a></li>
</ul></pre>
</div>
<!-- =====================================
GRIDS/COLUMNS
===================================== -->
<style type="text/css">
#grids-example [class*="col_"]{
padding:10px;
}
</style>
<h3 id="columns">Grids/Columns</h3>
<ul class="tabs">
<li><a href="#grids-example">Example</a></li>
<li><a href="#grids-html">HTML</a></li>
</ul>
<div id="grids-example" class="tab-content">
<h4>Responsive & Flexible Grid</h4>
<p>Responsive functionality is optional. Only use <code>.grid</code> & <code>.grid.flex</code> if you
want a responsive grid. Resize your browser to see it in action.</p>
<div class="col_4"><p>Responsive Grid:<br /><code><div class="grid"></code></p></div>
<div class="col_4"><p>Flexible Responsive Grid:<br /><code><div class="grid flex"></code></p></div>
<div class="col_4"><p>Grid Helper Classes:<br />
<code>.show-desktop</code>
<code>.hide-desktop</code>
<code>.show-tablet</code>
<code>.hide-tablet</code>
<code>.show-phone</code>
<code>.hide-phone</code>
</p></div>
<div class="col_12">All columns automatically have the class <code>.column</code>. Apply padding and borders directly to columns
<br /><code>.column{border:1px solid red;padding:10px;}</code> </div>
<div class="clear"></div>
<div class="col_12 visible">col_12</div>
<div class="col_1 visible">col_1</div><div class="col_11 visible">col_11</div>
<div class="col_2 visible">col_2</div><div class="col_10 visible">col_10</div>
<div class="col_3 visible">col_3</div><div class="col_9 visible">col_9</div>
<div class="col_4 visible">col_4</div><div class="col_8 visible">col_8</div>
<div class="col_5 visible">col_5</div><div class="col_7 visible">col_7</div>
<div class="col_6 visible">col_6</div><div class="col_6 visible">col_6</div>
<div class="col_7 visible">col_7</div><div class="col_5 visible">col_5</div>
<div class="col_8 visible">col_8</div><div class="col_4 visible">col_4</div>
<div class="col_9 visible">col_9</div><div class="col_3 visible">col_3</div>
<div class="col_10 visible">col_10</div><div class="col_2 visible">col_2</div>
<div class="col_11 visible">col_11</div><div class="col_1 visible">col_1</div>
<div class="col_12 visible">col_12</div>
<!-- FOURTHS -->
<div class="col_3 visible">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.</div>
<div class="col_3 visible">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.</div>
<div class="col_3 visible">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.</div>
<div class="col_3 visible">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.</div>
<!-- THIRDS -->
<div class="col_4 visible">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.</div>
<div class="col_4 visible">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.</div>
<div class="col_4 visible">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.</div>
<!-- HALF & HALF -->
<div class="col_6 visible">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.</div>
<div class="col_6 visible">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.</div>
</div>
<div id="grids-html" class="tab-content">
<pre>
<!-- Columns/Grid -->
<div class="col_12">col_12</div>
<div class="col_1">col_1</div><div class="col_11">col_11</div>
<div class="col_2">col_2</div><div class="col_10">col_10</div>
<div class="col_3">col_3</div><div class="col_9">col_9</div>
<div class="col_4">col_4</div><div class="col_8">col_8</div>
<div class="col_5">col_5</div><div class="col_7">col_7</div>
<div class="col_6">col_6</div><div class="col_6">col_6</div>
<div class="col_7">col_7</div><div class="col_5">col_5</div>
<div class="col_8">col_8</div><div class="col_4">col_4</div>
<div class="col_9">col_9</div><div class="col_3">col_3</div>
<div class="col_10">col_10</div><div class="col_2">col_2</div>
<div class="col_11">col_11</div><div class="col_1">col_1</div>
<div class="col_12">col_12</div>
<!-- FOURTHS -->
<div class="col_3">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.</div>
<div class="col_3">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.</div>
<div class="col_3">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.</div>
<div class="col_3">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.</div>
<!-- THIRDS -->
<div class="col_4">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.</div>
<div class="col_4">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.</div>
<div class="col_4">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.</div>
<!-- HALF & HALF -->
<div class="col_6">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.</div>
<div class="col_6">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.</div></pre>
</div>
<!-- =====================================
IMAGES
===================================== -->
<h3 id="images">Images</h3>
<ul class="tabs">
<li><a href="#images-example">Example</a></li>
<li><a href="#images-caption">.caption</a></li>
<li><a href="#images-gallery">DIV.gallery</a></li>
<li><a href="#images-left">.align-left</a></li>
<li><a href="#images-right">.align-right</a></li>
<li><a href="#images-full-width">.full-width</a></li>
</ul>
<div id="images-example" class="tab-content">
<div class="col_6">
<h4>IMG.caption</h4>
<img class="caption" title="This is the image caption" src="http://placehold.it/400x350/4D99E0/ffffff.png&text=400x350" width="400" height="350" />
</div>
<div class="col_6 gallery">
<h4>DIV.gallery</h4>
<a href="http://placehold.it/600x450/4D99E0/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/4D99E0/ffffff.png&text=100x100" width="100" height="100" /></a>
<a href="http://placehold.it/600x450/75CC00/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/75CC00/ffffff.png&text=100x100" width="100" height="100" /></a>
<a href="http://placehold.it/600x450/E49800/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/E49800/ffffff.png&text=100x100" width="100" height="100" /></a>
<a href="http://placehold.it/600x450/E4247E/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/E4247E/ffffff.png&text=100x100" width="100" height="100" /></a>
<a href="http://placehold.it/600x450/00C6E4/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/00C6E4/ffffff.png&text=100x100" width="100" height="100" /></a>
<a href="http://placehold.it/600x450/E4DB0F/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/E4DB0F/ffffff.png&text=100x100" width="100" height="100" /></a>
<a href="http://placehold.it/600x450/7400E4/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/7400E4/ffffff.png&text=100x100" width="100" height="100" /></a>
<a href="http://placehold.it/600x450/C50000/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/C50000/ffffff.png&text=100x100" width="100" height="100" /></a>
</div>
<div class="clear"> </div>
<div class="col_4">
<h4>IMG.align-left</h4>
<img class="align-left" src="http://placehold.it/100x100/4D99E0/ffffff.png&text=100x100" width="100" height="100" />
<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 class="col_4">
<h4>IMG.align-right</h4>
<img class="align-right" src="http://placehold.it/100x100/4D99E0/ffffff.png&text=100x100" width="100" height="100" />
<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 class="col_4">
<h4>IMG.full-width</h4>
<img class="full-width" src="http://placehold.it/260x200/4D99E0/ffffff.png&text=full+width" />
</div>
</div>
<div id="images-caption" class="tab-content">
<pre>
<!-- Caption -->
<img class="caption" title="This is the image caption" src="http://placehold.it/400x350/4D99E0/ffffff.png&text=400x350" width="400" height="350" /></pre>
</div>
<div id="images-left" class="tab-content">
<pre>
<!-- Align Left -->
<img class="align-left" src="http://placehold.it/100x100/4D99E0/ffffff.png&text=100x100" width="100" height="100" />
<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></pre>
</div>
<div id="images-right" class="tab-content">
<pre>
<!-- Align Right -->
<img class="align-right" src="http://placehold.it/100x100/4D99E0/ffffff.png&text=100x100" width="100" height="100" />
<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></pre>
</div>
<div id="images-full-width" class="tab-content">
<pre>
<!-- Full Width -->
<img class="full-width" src="http://placehold.it/260x200/4D99E0/ffffff.png&text=full+width" /></pre>
</div>
<div id="images-gallery" class="tab-content">
<pre>
<!-- Gallery -->
<div class="gallery">
<a href="http://placehold.it/600x450/4D99E0/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/4D99E0/ffffff.png&text=100x100" width="100" height="100" /></a>
<a href="http://placehold.it/600x450/75CC00/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/75CC00/ffffff.png&text=100x100" width="100" height="100" /></a>
<a href="http://placehold.it/600x450/E49800/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/E49800/ffffff.png&text=100x100" width="100" height="100" /></a>
<a href="http://placehold.it/600x450/E4247E/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/E4247E/ffffff.png&text=100x100" width="100" height="100" /></a>
<a href="http://placehold.it/600x450/00C6E4/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/00C6E4/ffffff.png&text=100x100" width="100" height="100" /></a>
<a href="http://placehold.it/600x450/E4DB0F/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/E4DB0F/ffffff.png&text=100x100" width="100" height="100" /></a>
<a href="http://placehold.it/600x450/7400E4/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/7400E4/ffffff.png&text=100x100" width="100" height="100" /></a>
<a href="http://placehold.it/600x450/C50000/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/C50000/ffffff.png&text=100x100" width="100" height="100" /></a>
</div></pre>
</div>
<!-- =====================================
SLIDESHOW
===================================== -->
<h3 id="slideshow">Slideshow</h3>
<ul class="tabs">
<li><a href="#slideshow-example">Example</a></li>
<li><a href="#slideshow-html">HTML</a></li>
</ul>
<div id="slideshow-example" class="tab-content">
<p>Fully responsive slideshow. Touch enabled. Uses the awesome & highly configurable <a href="http://bxslider.com/">BXSlider</a>.</p>
<div class="col_8">
<ul class="slideshow">
<li><img src="http://placehold.it/550x350/4D99E0/ffffff.png&text=550x350" width="550" height="350" /></li>
<li><img src="http://placehold.it/550x350/75CC00/ffffff.png&text=550x350" width="550" height="350" /></li>
<li><img src="http://placehold.it/550x350/E49800/ffffff.png&text=550x350" width="550" height="350" /></li>
</ul>
</div>
<div class="col_4">
<h4>Features</h4>
<ul class="icons">
<li><i class="fa fa-check"></i> Slide Any HTML Content</li>
<li><i class="fa fa-check"></i> Responsive</li>
<li><i class="fa fa-check"></i> Touch Enabled</li>
<li><i class="fa fa-check"></i> Iframes</li>
<li><i class="fa fa-check"></i> Videos</li>
<li><i class="fa fa-check"></i> Images</li>
<li><i class="fa fa-check"></i> Lightweight</li>
<li><i class="fa fa-check"></i> Multiple Slideshows</li>
<li><i class="fa fa-check"></i> Zero Setup Required</li>
<li><i class="fa fa-check"></i> Unordered List (default)</li>
</ul>
</div>
</div>
<div id="slideshow-html" class="tab-content">
<pre>
<!-- Slideshow -->
<ul class="slideshow">
<li><img src="http://placehold.it/550x350/4D99E0/ffffff.png&text=550x350" width="550" height="350" /></li>
<li><img src="http://placehold.it/550x350/75CC00/ffffff.png&text=550x350" width="550" height="350" /></li>
<li><img src="http://placehold.it/550x350/E49800/ffffff.png&text=550x350" width="550" height="350" /></li>
<li><h3>Slide Anything</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></li>
</ul></pre>
</div>
<!-- =====================================
FORMS
===================================== -->
<h3 id="forms">Forms</h3>
<ul class="tabs">
<li><a href="#form-example">Example</a></li>
<li><a href="#form-textfield">Textfield</a></li>
<li><a href="#form-select">Select</a></li>
<li><a href="#form-checkbox">Checkbox</a></li>
<li><a href="#form-radio">Radio</a></li>
<li><a href="#form-fieldset">Fieldset</a></li>
<li><a href="#form-textarea">Textarea</a></li>
<li><a href="#form-notices">Notices</a></li>
</ul>
<div id="form-example" class="tab-content">
<h4>Form.vertical</h4>
<form class="vertical"><div class="col_4">
<label for="text1">Text Field</label>
<input id="text1" type="text" />
<label for="text2">Placeholder</label>
<input id="text2" type="text" placeholder="Placeholder Text" />
<label for="text3" class="disabled">Disabled Field</label>
<input id="text3" type="text" disabled="disabled" />
<label for="text4">Label with Right Hint <span class="right">A-Z, 0-9</span></label>
<input id="text4" type="text" />
<label for="text5">Label with Hint <span>A-Z, 0-9</span></label>
<input id="text5" type="text" />
<label for="text6" class="error">Text Field (Error)</label>
<input id="text6" class="error" type="text" />
</div>
<div class="col_4">
<label for="select1">Select Field</label>
<select id="select1">
<option value="0">-- Choose --</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label for="select3">Select multiple</label>
<select id="select3" multiple="multiple" class="fancy">
<option value="0">-- Choose --</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<fieldset>
<legend>Checkboxes</legend>
<input type="checkbox" id="check1" /> <label for="check1" class="inline">Checkbox Field</label><br />
<input type="checkbox" id="check2" /> <label for="check2" class="inline">Checkbox Field</label><br />
<input type="checkbox" id="check3" /> <label for="check3" class="inline">Checkbox Field</label>
</fieldset>
<fieldset>
<legend>Radios</legend>
<input type="radio" name="radio" id="radio1" /> <label for="radio1" class="inline">Option1</label><br />
<input type="radio" name="radio" id="radio2" /> <label for="radio2" class="inline">Option1</label><br />
<input type="radio" name="radio" id="radio3" /> <label for="radio3" class="inline">Option1</label>
</fieldset>
<label for="file1">File Field</label>
<input id="file1" type="file" />
</div>
<div class="col_4">
<div class="notice error"><i class="fa fa-remove fa-large"></i> This is an Error Notice
<a href="#close" class="fa fa-remove"></a></div>
<div class="notice warning"><i class="fa fa-warning fa-large"></i> This is a Warning Notice
<a href="#close" class="fa fa-remove"></a></div>
<div class="notice success"><i class="fa fa-check fa-large"></i> This is a Success Notice
<a href="#close" class="fa fa-remove"></a></div>
<label for="textarea1">TextArea</label>
<textarea id="textarea1" placeholder="Placeholder Text"></textarea>
<button type="submit">Submit</button>
</div>
</form>
<hr />
<div class="col_12">
<h4>Inline Form Fields (default)</h4>
<form>
<label for="text21">Label</label>
<input type="text" name="text21" placeholder="Username" />
<input type="text" name="text22" placeholder="Password "/>
<select id="select22" class="fancy">
<option value="0">-- Choose --</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<button type="button" class="small green">Button</button>
<input type="checkbox" name="check23" id="check23" /> <label for="check23">Checkbox Label</label>
</form>
</div>
<hr />
<style type="text/css">
#form-sizes label{border:1px dotted #ccc;}
</style>
<div id="form-sizes" class="col_12">
<h4>Input/Label Sizes</h4>
<!--label class="col_12">label.col_12</label-->
<!--input type="text" placeholder=".col_1" class="col_1" /><label class="col_11">label.col_11</label-->
<input type="text" placeholder=".col_2" class="col_2" /><label class="col_10">label.col_10</label>
<input type="text" placeholder=".col_3" class="col_3" /><label class="col_9">label.col_9</label>
<input type="text" placeholder=".col_4" class="col_4" /><label class="col_8">label.col_8</label>
<input type="text" placeholder=".col_5" class="col_5" /><label class="col_7">label.col_7</label>
<input type="text" placeholder=".col_6" class="col_6" /><label class="col_6">label.col_6</label>
<input type="text" placeholder=".col_7" class="col_7" /><label class="col_5">label.col_5</label>
<input type="text" placeholder=".col_8" class="col_8" /><label class="col_4">label.col_4</label>
<input type="text" placeholder=".col_9" class="col_9" /><label class="col_3">label.col_3</label>
<input type="text" placeholder=".col_10" class="col_10" /><label class="col_2">label.col_2</label>
<!--input type="text" placeholder=".col_11" class="col_11" /><label class="col_1">label.col_1</label-->
<!--input type="text" placeholder=".col_12" class="col_12" /-->
</div>
</div>
<div id="form-textfield" class="tab-content">
<pre>
<!-- Text Field -->
<label for="text1">Text Field</label>
<input id="text1" type="text" />
<!-- Placeholder Text -->
<label for="text2">Placeholder</label>
<input id="text2" type="text" placeholder="Placeholder Text" />
<!-- Disabled Field -->
<label for="text3" class="disabled">Disabled Field</label>
<input id="text3" type="text" disabled="disabled" />
<!-- Label with Right Hint -->
<label for="text4">Label with Right Hint <span class="right">A-Z, 0-9</span></label>
<input id="text4" type="text" />
<!-- Label with Hint -->
<label for="text5">Label with Hint <span>A-Z, 0-9</span></label>
<input id="text5" type="text" />
<!-- Text Field Error -->
<label for="text6" class="error">Text Field (Error)</label>
<input id="text6" class="error" type="text" /></pre>
</div>
<div id="form-select" class="tab-content">
<pre>
<!-- Select -->
<label for="select1">Select Field</label>
<select id="select1">
<option value="0">-- Choose --</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select></pre>
</div>
<div id="form-checkbox" class="tab-content">
<pre>
<!-- Checkbox -->
<input type="checkbox" id="check1" />
<label for="check1" class="inline">Checkbox Field</label></pre>
</div>
<div id="form-radio" class="tab-content">
<pre>
<!-- Radio -->
<input type="radio" name="radio" id="radio1" />
<label for="radio1" class="inline">Option1</label></pre>
</div>
<div id="form-fieldset" class="tab-content">
<pre>
<!-- Fieldset -->
<fieldset>
<legend>Checkboxes</legend>
<!-- Form Fields Here -->
</fieldset></pre>
</div>
<div id="form-textarea" class="tab-content">
<pre>
<!-- Textarea -->
<textarea id="textarea1" placeholder="Placeholder Text"></textarea></pre>
</div>
<div id="form-notices" class="tab-content">
<pre>
<!-- Error -->
<div class="notice error"><i class="icon-remove-sign icon-large"></i> This is an Error Notice
<a href="#close" class="icon-remove"></a></div>
<!-- Warning -->
<div class="notice warning"><i class="icon-warning-sign icon-large"></i> This is a Warning Notice
<a href="#close" class="icon-remove"></a></div>
<!-- Success -->
<div class="notice success"><i class="icon-ok icon-large"></i> This is a Success Notice
<a href="#close" class="icon-remove"></a></div></pre>
</div>
<!-- =====================================
Extras/Helpers
===================================== -->
<h3 id="forms">Extras/Helpers</h3>
<ul class="tabs">
<li><a href="#extras">Extras</a></li>
</ul>
<div id="extras" class="tab-content">
<table><thead><tr>
<th>Item</th>
<th>Description</th>
</tr><tr>
<td><code>.left</code> <code>.center</code> <code>.right</code></td>
<td>Align Text</td>
</tr><tr>
<td><code>a.lightbox</code></td>
<td>Open Link in lightbox. Auto Detects, iframe, inline content, etc.</td>
</tr>
<tr>
<td><code>.clear</code></td>
<td>Add this class to a div or other element to clear floats.</td>
</tr><tr>
<td><code>.clearfix</code></td>
<td>Add this class to containers that have floating children inside to clear inner floats.</td>
</tr><tr>
<td><code>li.first</code> <code>li.last</code></td>
<td>First and Last <code><li></li></code> items automatically get classes <code>.first</code> and <code>.last</code> respectively.</td>
</tr><tr>
<td><code>.column</code></td>
<td>All columns have the class <code>.column</code> added to them automatically for easy global styling.</td>
</tr><tr>
<td><code>.visible</code></td>
<td>Add this to columns to view during production. Adds light grey background color to columns.</td>
</tr><tr>
<td><code>.hide</code> <code>.show</code></td>
<td><code>.hide</code> to hide content (display:none). <code>.show</code> to show content (display:block).</td>
</tr><tr>
<td><code>tr.first</code> <code>tr.last</code></td>
<td>First and Last <code><tr></tr></code> items automatically get classes <code>.first</code> and <code>.last</code> respectively.</td>
</tr><tr>
<td><code>tr.alt</code></td>
<td>Every second table row automatically gets class <code>.alt</code>.</td>
</tr></thead></table>
</div>
</div><!--END GRID WRAP-->
<div class="callout clearfix">
<div class="grid">
<a class="button red large" href="http://www.99lime.com/downloads/"><i class="fa fa-download-cloud"></i> Download (Github)</a>
<span style="white-space: nowrap;">
<a class="button blue large" href="https://twitter.com/htmlkickstart"><i class="fa fa-twitter"></i></a>
<a class="button blue large" href="mailto:joshua@99lime.com"><i class="fa fa-envelope"></i></a></span><br />
<p>Downloaded over 91036 Times :)</p>
</div>
</div>
<!-- Begin MailChimp Signup Form -->
<div class="grid center" id="mc_embed_signup">
<form action="http://99lime.us4.list-manage2.com/subscribe/post?u=f4a8f36be8ffba6bf0580ef5f&id=67a4916516" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
<div class="mc-field-group">
<h4>99Lime Announcements and Releases.</h4>
<input type="email" style="width:40%;" value="" placeholder="name@domain.com" name="EMAIL" class="required email" id="mce-EMAIL">
<button class="button small orange" type="submit" value="Get Notified" name="subscribe" id="mc-embedded-subscribe">Get Notified</button>
</div>
<label for="mce-EMAIL"><span>No spam. We hate spam too.</span></label>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
<!-- ===================================== START FOOTER ===================================== -->
<div class="clear"></div>
<div id="footer">
© Copyright 2014 All Rights Reserved. This website was built with
<a href="http://www.99lime.com">HTML KickStart</a> •
<a href="http://99lime.com/rss/">RSS</a> •
<a href="http://www.99lime.com/_bak2/">Joshua Gatcke</a>
</div>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-1641401-6']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body></html>