# HTML KickStart

#### Ultra–Lean HTML5, CSS, & JS Building Blocks
for Rapid Website Production

Responsive
MIT Open Source
479 Icons
Designer Friendly
Download (Github)

Downloaded over 91036 Times :)

### Getting Started

- Instructions

#### Setup

1. Download HTML KickStart
2. Include jQuery and HTML KickStart

       <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 -->

3. Copy Elements into your HTML

#### Browsers

HTML KickStart Tested and working in IE 8+, Safari, Chrome, Firefox, Opera, Safari IOS, Browser and Chrome Android.

#### Notes

Don't forget to use an HTML5 Doctype `<!DOCTYPE html>`

### Buttons

- Example
- Sizes
- With Icons
- Colors
- Styles
- Button Bar

#### Buttons

A.button

#### With Icons

#### Colors

.orange

#### Styles

.pop

#### Button Bar

- Edit
- Tag
- Upload

- Item1
- Item2
- Item3
- Item4

    <!-- 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>

    <!-- 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>

    <!-- 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>

    <!-- 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>

    <!-- 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>

### Lists

- Example
- UL
- OL
- UL.icons
- UL.alt

#### Unordered List

- Apple
- Banana
- Orange
- Pear

#### Ordered List

1. Apple
2. Banana
3. Orange
4. Pear

#### UL.icons

- Apple
- Banana
- Orange
- Pear

#### UL.alt

- Apple
- Banana
- Orange
- Pear

    <!-- Unordered List -->
    <ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Orange</li>
    <li>Pear</li>
    </ul>

    <!-- Ordered List -->
    <ol>
    <li>Apple</li>
    <li>Banana</li>
    <li>Orange</li>
    <li>Pear</li>
    </ol>

    <!-- 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>

    <!-- List Alternative Style -->
    <ul class="alt">
    <li>Apple</li>
    <li>Banana</li>
    <li>Orange</li>
    <li>Pear</li>
    </ul>

### Menus

- Example
- Horizontal
- Vertical
- Vertical.right

### Tables

- Example
- Table
- Table w/side TH
- Table Styles

#### Table (default)

Item1 | Item2 | Item3
--- | --- | ---
Item1 | Item2 | Item3
Item1 | Item2 | Item3
Item1 | Item2 | Item3
Item1 | Item2 | Item3

#### Table.striped

| Item2 | Item3
--- | --- | ---
Item1 | Item2 | Item3
Item1 | Item2 | Item3
Item1 | Item2 | Item3
Item1 | Item2 | Item3

#### Table.tight

Item1 | Item2 | Item3
--- | --- | ---
Item1 | Item2 | Item3
Item1 | Item2 | Item3
Item1 | Item2 | Item3
Item1 | Item2 | Item3

#### Table.sortable

Name | Number | Color | Actions
--- | --- | --- | ---
Joshua | 555-4325 | Blue |
Peter | 555-5698 | Gold |
Mary | 666-7654 | Red |
Gretty | 555-6732 | Pink |

    <!-- 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>

    <!-- 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>

    <!-- 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>

### ToolTips

- Example
- Positions
- w/ HTML Content

#### Tooltips

Tooltips are awesome. These tooltips are designed to mimic the default browser tooltips - smart, aware of the edge of the browser window. Simple.

Hover over the examples on the right to preview.

Use:
`class="tooltip"` +
`title="my tooltip content"`

#### Tooltip Positions

- `.tooltip` (default)
- `.tooltip-top`
- `.tooltip-right`
- `.tooltip-left`
- `.tooltip-bottom`

#### Tooltips with HTML Content

`.tooltip` + `data-content="#ID"`

##### HTML Content

This is more HTML content. You can place any HTML in this tooltip.

    <!-- 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>

    <!-- 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>

### Typography

- Example
- Headings
- Paragraphs
- Blockquote
- Blockquote.small
- Inline Styles
- Address

#### Paragraphs

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

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.

#### Blockquote

> 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 Someone Important

#### Blockquote Small

> 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 Someone Important

#### Inline Styles

- Strong
- Emphasis
- Inline Link
- Strike
- Inline Icons
- `<h1>Sample Code</h1>`

# Heading 1

## Heading 2

### Heading 3

#### Heading 4

##### Heading 5

###### Heading 6

#### Address

    <!-- 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>

    <!-- 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>

    <!-- 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>

    <!-- 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>

    <!-- 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>

    <!-- Address -->
    <address><p>
    1234 South Creek Lane<br />
    Calgary, Alberta, Canada<br />
    T4B–1S6
    </p>
    </address>

### Horizontal Rules

- Example
- HTML

#### HR

#### HR.alt1

#### HR.alt2

    <!-- HR -->
    <hr />

    <!-- HR.alt1 -->
    <hr class="alt1" />

    <!-- HR.alt2 -->
    <hr class="alt2" />

### Icons/Glyphs

#### HTML KickStart now using
Font Awesome 4.2.0 Icons!

How to use icons: `<i class="fa fa-globe"></i>`.
Replace fa-globe with the icon you would like to use from the Cheatsheet.
To increase the size of icons relative to its container, use `icon-large`, `icon-2x`, `icon-3x`, or `icon-4x`.

`.pull-left` 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.
`.pull-right` 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.
`.fa-border` 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.

### Code/Pre

- Example
- PRE.html
- PRE.css
- PRE.js
- PRE.php

#### PRE HTML

    <html>
    <head><title>This is a title</title></head>
    <body class="subpage">
    	<!-- Content Here -->
    </body>
    </html>

#### PRE CSS

    body{
    font-weight:bold;
    color:#000;
    line-height:150%;
    }

#### PRE JS

    $(document).ready(function(){
    	alert('jQuery');
    });

    <!-- Code HTML -->
    <pre>
    …code goes here…
    </pre>

    <!-- Code CSS -->
    <pre>
    …code goes here…
    </pre>

    <!-- Code Javascript -->
    <pre>
    …code goes here…
    </pre>

    <!-- Code PHP -->
    <pre>
    …code goes here…
    </pre>

### Tabs

- Example
- Tabs.left
- Tabs.center
- Tabs.right

#### Tabs.left

- Tab1
- Tab2
- Tab3

Tab1
Tab2
Tab3

#### Tabs.center

- Tab1
- Tab2
- Tab3

Tab1
Tab2 has an icon.
Tab3

#### Tabs.right

- Tab1
- Tab2
- Tab3

Tab1
Tab2
Tab3

    <!-- 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>

    <!-- 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>

    <!-- 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>

### Breadcrumbs

- Example
- Breadcrumbs
- Breadcrumbs.alt1

#### Breadcrumbs

#### Breadcrumbs.alt1

    <!-- 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>

    <!-- 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>

### Grids/Columns

- Example
- HTML

#### Responsive & Flexible Grid

Responsive functionality is optional. Only use `.grid` & `.grid.flex` if you want a responsive grid. Resize your browser to see it in action.

Responsive Grid:
`<div class="grid">`

Flexible Responsive Grid:
`<div class="grid flex">`

Grid Helper Classes:
`.show-desktop` `.hide-desktop` `.show-tablet` `.hide-tablet` `.show-phone` `.hide-phone`

All columns automatically have the class `.column`. Apply padding and borders directly to columns
`.column{border:1px solid red;padding:10px;}`
col_12
col_1
col_11
col_2
col_10
col_3
col_9
col_4
col_8
col_5
col_7
col_6
col_6
col_7
col_5
col_8
col_4
col_9
col_3
col_10
col_2
col_11
col_1
col_12
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.
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.
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.
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.
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.
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.
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.
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.
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.

    <!-- 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>

### Images

- Example
- .caption
- DIV.gallery
- .align-left
- .align-right
- .full-width

#### IMG.caption

#### DIV.gallery

#### IMG.align-left

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.

#### IMG.align-right

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.

#### IMG.full-width

    <!-- Caption -->
    <img class="caption" title="This is the image caption" src="http://placehold.it/400x350/4D99E0/ffffff.png&text=400x350" width="400" height="350" />

    <!-- 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>

    <!-- 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>

    <!-- Full Width -->
    <img class="full-width" src="http://placehold.it/260x200/4D99E0/ffffff.png&text=full+width" />

    <!-- 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>

### Slideshow

- Example
- HTML

Fully responsive slideshow. Touch enabled. Uses the awesome & highly configurable BXSlider.

#### Features

- Slide Any HTML Content
- Responsive
- Touch Enabled
- Iframes
- Videos
- Images
- Lightweight
- Multiple Slideshows
- Zero Setup Required
- Unordered List (default)

    <!-- 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>

### Forms

- Example
- Textfield
- Select
- Checkbox
- Radio
- Fieldset
- Textarea
- Notices

#### Form.vertical

Text Field Placeholder Disabled Field Label with Right Hint A-Z, 0-9 Label with Hint A-Z, 0-9 Text Field (Error)
Select Field
Select multiple
Checkboxes Checkbox Field
Checkbox Field
Checkbox Field
Radios Option1
Option1
Option1
File Field
This is an Error Notice
This is a Warning Notice
This is a Success Notice
TextArea

#### Inline Form Fields (default)

Label
Checkbox Label

#### Input/Label Sizes

label.col_10 label.col_9 label.col_8 label.col_7 label.col_6 label.col_5 label.col_4 label.col_3 label.col_2

    <!-- 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" />

    <!-- 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>

    <!-- Checkbox -->
    <input type="checkbox" id="check1" />
    <label for="check1" class="inline">Checkbox Field</label>

    <!-- Radio -->
    <input type="radio" name="radio" id="radio1" />
    <label for="radio1" class="inline">Option1</label>

    <!-- Fieldset -->
    <fieldset>
    <legend>Checkboxes</legend>
    	<!-- Form Fields Here -->
    </fieldset>

    <!-- Textarea -->
    <textarea id="textarea1" placeholder="Placeholder Text"></textarea>

    <!-- 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>

### Extras/Helpers

- Extras

Item | Description
--- | ---
`.left` `.center` `.right` | Align Text
`a.lightbox` | Open Link in lightbox. Auto Detects, iframe, inline content, etc.
`.clear` | Add this class to a div or other element to clear floats.
`.clearfix` | Add this class to containers that have floating children inside to clear inner floats.
`li.first` `li.last` | First and Last `<li></li>` items automatically get classes `.first` and `.last` respectively.
`.column` | All columns have the class `.column` added to them automatically for easy global styling.
`.visible` | Add this to columns to view during production. Adds light grey background color to columns.
`.hide` `.show` | `.hide` to hide content (display:none). `.show` to show content (display:block).
`tr.first` `tr.last` | First and Last `<tr></tr>` items automatically get classes `.first` and `.last` respectively.
`tr.alt` | Every second table row automatically gets class `.alt`.

Download (Github)

Downloaded over 91036 Times :)

#### 99Lime Announcements and Releases.

No spam. We hate spam too.