Pre-installed Elements

Because the Placid theme is built on top of the HTML Kickstart framework you can take advantage of all of the features built into the frame work.

This page was built to not only show you all of the e,ements that are built in to the Placid theme but also to provide you with html snippets to help get you going. You can copy and paste from the examples below to add to your web page as a starting point.

Buttons

Buttons


A.button



With Icons




Colors


.orange


Styles



.pop

Button Bar

  
     
<!-- 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-circle"></i> .pink</button>
<button class="medium green"><i class="fa fa-play-circle-o"></i> .green</button>
<button class="large red"><i class="fa fa-minus-circle"></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-circle"></i> .inset</button>

<!-- Square -->
<button class="square"><i class="fa fa-minus-circle"></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-arrow-circle-o-up"></i> Upload</a></li>
<li><a href=""><i class="fa fa-plus-circle"></i></a></li>
</ul>

Lists

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>

Typography

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

1234 South Creek Lane
Calgary, Alberta, Canada
T4B–1S6

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

Icons/Glyphs

Because the Placid theme uses the HTML KickStart as it foundation you can take advantage of all of the built-in goodies that are included with HTML Kickstart ... like
Font Awesome Icons!

How to use icons: <i class="fa fa-globe"></i>.
Replace fa fa-globe with the icon you would like to use.

To increase the size of icons relative to its container, use fa-6, fa-5, fa-4, fa-3, or fa-2.

.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 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.
  • fa fa-adjust
  • fa fa-asterisk
  • fa fa-ban
  • fa fa-bar-chart
  • fa fa-barcode
  • fa fa-beer
  • fa fa-bell
  • fa fa-bolt
  • fa fa-book
  • fa fa-bookmark
  • fa fa-bookmark-o
  • fa fa-briefcase
  • fa fa-bullhorn
  • fa fa-calendar
  • fa fa-camera
  • fa fa-camera-retro
  • fa fa-certificate
  • fa fa-check
  • fa fa-square-o
  • fa fa-circle
  • fa fa-circle-blank
  • fa fa-cloud
  • fa fa-cloud-download
  • fa fa-cloud-upload
  • fa fa-coffee
  • fa fa-cog
  • fa fa-cogs
  • fa fa-comment
  • fa fa-comment-o
  • fa fa-comments
  • fa fa-comments-o
  • fa fa-credit-card
  • fa fa-dashboard
  • fa fa-desktop
  • fa fa-download
  • fa fa-edit
  • fa fa-envelope
  • fa fa-envelope-o
  • fa fa-envelope-square
  • fa fa-exchange
  • fa fa-exclamation
  • fa fa-exclamation-cirlce
  • fa fa-external-link
  • fa fa-eye-slash
  • fa fa-eye
  • fa fa-video-camera
  • fa fa-fighter-jet
  • fa fa-film
  • fa fa-filter
  • fa fa-fire
  • fa fa-flag
  • fa fa-flask
  • fa fa-folder
  • fa fa-folder-open
  • fa fa-folder-o
  • fa fa-folder-open-o
  • fa fa-cutlery
  • fa fa-gift
  • fa fa-glass
  • fa fa-globe
  • fa fa-group
  • fa fa-hdd-o
  • fa fa-headphones
  • fa fa-heart
  • fa fa-heart-o
  • fa fa-home
  • fa fa-inbox
  • fa fa-info-cirlce
  • fa fa-key
  • fa fa-leaf
  • fa fa-laptop
  • fa fa-legal
  • fa fa-lemon-o
  • fa fa-lightbulb-o
  • fa fa-lock
  • fa fa-unlock
  • fa fa-magic
  • fa fa-magnet
  • fa fa-map-marker
  • fa fa-minus
  • fa fa-minus-square
  • fa fa-mobile-phone
  • fa fa-money
  • fa fa-arrows
  • fa fa-music
  • fa fa-power-off
  • fa fa-check
  • fa check-circle-o
  • fa check-circle
  • fa fa-pencil
  • fa fa-picture-o
  • fa fa-plane
  • fa fa-plus
  • fa fa-plus-square
  • fa fa-print
  • fa fa-thumb-tack
  • fa fa-qrcode
  • fa fa-question-circle
  • fa fa-quote-left
  • fa fa-quote-right
  • fa fa-random
  • fa fa-refresh
  • fa fa-remove
  • fa fa-times-circle-o
  • fa fa-times-circle
  • fa fa-reorder
  • fa fa-reply
  • fa fa-arrows-h
  • fa fa-arrows-v
  • fa fa-retweet
  • fa fa-road
  • fa fa-rss
  • fa fa-crosshairs
  • fa fa-search
  • fa fa-share
  • fa fa-share-alt
  • fa fa-shopping-cart
  • fa fa-signal
  • fa fa-sign-in
  • fa fa-sign-out
  • fa fa-sitemap
  • fa fa-sort
  • fa fa-sort-down
  • fa fa-sort-up
  • fa fa-spinner
  • fa fa-star
  • fa fa-star-o
  • fa fa-star-half
  • fa fa-tablet
  • fa fa-tag
  • fa fa-tags
  • fa fa-tasks
  • fa fa-thumbs-down
  • fa fa-thumbs-up
  • fa fa-clock-o
  • fa fa-tint
  • fa fa-trash
  • fa fa-trophy
  • fa fa-truck
  • fa fa-umbrella
  • fa fa-arrow-circle-o-up
  • fa fa-upload
  • fa fa-user
  • fa fa-user-md
  • fa fa-volume-off
  • fa fa-volume-down
  • fa fa-volume-up
  • fa fa-exclamation-triangle
  • fa fa-wrench
  • fa fa-search-plus
  • fa fa-search-minus
  • fa fa-file
  • fa fa-file-o
  • fa fa-cut
  • fa fa-copy
  • fa fa-paste
  • fa fa-save
  • fa fa-undo
  • fa fa-repeat
  • fa fa-text-height
  • fa fa-text-width
  • fa fa-align-left
  • fa fa-align-center
  • fa fa-align-right
  • fa fa-align-justify
  • fa fa-indent
  • fa fa-dedent
  • fa fa-font
  • fa fa-bold
  • fa fa-italic
  • fa fa-strikethrough
  • fa fa-underline
  • fa fa-link
  • fa fa-paperclip
  • fa fa-columns
  • fa fa-table
  • fa fa-th-large
  • fa fa-th
  • fa fa-th-list
  • fa fa-list
  • fa fa-list-ol
  • fa fa-list-ul
  • fa fa-list-alt
  • fa fa-angle-left
  • fa fa-angle-right
  • fa fa-angle-up
  • fa fa-angle-down
  • fa fa-arrow-down
  • fa fa-arrow-left
  • fa fa-arrow-right
  • fa fa-arrow-up
  • fa fa-hand-o-down
  • fa fa-hand-left
  • fa fa-caret-down
  • fa fa-caret-left
  • fa fa-caret-right
  • fa fa-caret-up
  • fa fa-chevron-down
  • fa fa-chevron-left
  • fa fa-chevron-right
  • fa fa-chevron-up
  • fa fa-hand-right
  • fa fa-hand-up
  • fa fa-arrow-circle-down
  • fa fa-arrow-circle-left
  • fa fa-arrow-circle-right
  • fa fa-arrow-circle-up
  • fa fa-angle-double-left
  • fa fa-angle-double-right
  • fa fa-angle-double-up
  • fa fa-angle-double-down
  • fa fa-circle
  • fa fa-circle-o
  • fa fa-play-circle
  • fa fa-play
  • fa fa-pause
  • fa fa-stop
  • fa fa-arrows-alt
  • fa fa-step-backward
  • fa fa-fast-backward
  • fa fa-backward
  • fa fa-forward
  • fa fa-expand
  • fa fa-fast-forward
  • fa fa-step-forward
  • fa fa-eject
  • fa fa-compress
  • fa fa-phone
  • fa fa-phone-square
  • fa fa-facebook
  • fa fa-facebook-square
  • fa fa-pinterest-square
  • fa fa-twitter
  • fa fa-twitter-square
  • fa fa-github
  • fa fa-github-alt
  • fa fa-google-plus
  • fa fa-github-square
  • fa fa-linkedin
  • fa fa-linkedin-square
  • fa fa-pinterest
  • fa fa-google-plus-square
  • fa fa-square
  • fa fa-ambulance
  • fa fa-flask
  • fa fa-h-square
  • fa fa-hospital-o
  • fa fa-medkit
  • fa fa-plus-square
  • fa fa-stethoscope
  • fa fa-user-md

Code/Pre

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

Tabs.left

Tab1
Tab2
Tab3

Tabs.center

Tab1
Tab2 has an icon.
Tab3

Tabs.right

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="icon-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>

Grids/Columns

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>

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.

Images

IMG.caption

 

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

Slideshow

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

Uses BXSlider 4.1.2

  • Slide Anything

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

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

Form.vertical

Checkboxes

Radios

This is an Error Notice
This is a Warning Notice
This is a Success Notice

Inline Form Fields (default)

 

Input/Label Sizes

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

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.