Colors

Primary Color
#1f3857

Primary Accent
#28486f

Alert Color
#E0162B

Dark Blue
#0c1d31

Beige
#f4f1ee

Dark Beige
#e9e8e6

Ticker Green
#00ff17

Text Blue
#4a83da

Gray
#5a6167

Dark Gray
#373c40

Gray Medium
#6c7e8a

Tan
#8c8c8c

Tan Darker
#dbd9d7

Fonts

Output

Code

Primary Headings: Lato Bold

This is a primary heading

Subheaders: Tisa Web Pro Bold

This is a secondary heading

Lead Paragraph: Tisa Web Pro

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Body Text: Tisa Web Pro

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et imperdiet nibh. Suspendisse eu metus lorem. Pellentesque quis diam tincidunt, tempus risus in, pharetra lectus. In sodales ex malesuada vehicula tempor. Ut mollis nunc vehicula urna tincidunt, quis rhoncus dolor placerat.

HTML

Typography

Headers & Subheaders

Output

Code

h1. This is a very large header.

h2. This is a large header.

h3. This is a medium header.

h4. This is a moderate header.

h5. This is a small header.

h6. This is a tiny header.

Subheaders

h1. subheader

h2. subheader

h3. subheader

h4. subheader

h5. subheader

h6. subheader

HTML

Lists

Output

Code

Definition Lists

Lower cost: The new version of this product costs significantly less than the previous one!
Easier to use: We've changed the product so that it's much easier to use!
Safe for kids: You can leave your kids alone in a room with this product and they won't get hurt (not a guarantee).

Un-ordered Lists

List item with a much longer description or more content.
List item
List item
- Nested List Item
- Nested List Item
- Nested List Item
List item
List item
List item

Ordered Lists

List Item 1
List Item 2
List Item 3

HTML

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo at est sit amet imperdiet. Phasellus ut nisl risus. Nam blandit lectus eu erat bibendum condimentum. Pellentesque purus lorem, ultrices eu metus ut, viverra porta augue. Donec sed nisi hendrerit, lobortis augue non, hendrerit leo. Etiam pharetra tortor ac leo sagittis, a vehicula eros fermentum. Phasellus tincidunt nulla non auctor consequat. Sed at augue hendrerit, condimentum ex finibus, tristique risus. Integer ullamcorper, libero facilisis dictum euismod, elit nunc eleifend arcu, vel hendrerit eros massa non orci. Duis scelerisque condimentum lacus id vehicula. Nullam vel justo id dui sodales posuere quis sit amet leo. Nam faucibus aliquam euismod.

Blockquotes

I do not fear computers. I fear the lack of them. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.Isaac Asimov

Alert Boxes

Output

Code

This is a standard alert (div.alert-box.radius). ×

This is a success alert (div.alert-box.success). ×

This is an alert (div.alert-box.alert.round). ×

This is a secondary alert (div.alert-box.secondary). ×

HTML

SCSS

@import "lib/foundation/alert-boxes";

JavaScript

// Included by default in global.js
$(document).foundation();

Icons by Font Awesome

Output

Code

HTML

SCSS

@import "lib/font-awesome/font-awesome";

This icon font is by Font Awesome. For more icons and documentation, visit http://fortawesome.github.io/Font-Awesome/.

Or, to generate your own icon set, you may use the IcoMoon App.

Buttons

Output

Code

.tiny.button
.small.button
.button
.large.button
.expand.button

.tiny.secondary.button
.small.success.radius.button
.alert.round.disabled.button

HTML

SCSS

@import "lib/foundation/buttons";

Button Groups

Output

Code

HTML

SCSS

@import "lib/foundation/buttons";
@import "lib/foundation/button-groups";

Dropdown Buttons

Output

Code

HTML

SCSS

@import "lib/foundation/buttons";
@import "lib/foundation/dropdown-buttons";
@import "lib/foundation/dropdown";

JavaScript

// Included by default in global.js
$(document).foundation();

Split Buttons

Output

Code

Tiny Split Button
Small Secondary Radius Split Button
Round Alert Split Button
Large Success Split Button

HTML

SCSS

@import "lib/foundation/buttons";
@import "lib/foundation/split-buttons";

JavaScript

// Included by default in global.js
$(document).foundation();

Forms

Slick Carousel

Output

Code

HTML

SCSS

@import "lib/slick/slick";

JavaScript

// Change ".slick" to match your object's class
$(document).ready(function() {
	$('.slick').slick();
});

For full documentation on Slick carousel visit http://kenwheeler.github.io/slick/.

Flex Video

Output

Code

HTML

SCSS

@import "lib/foundation/flex-video";

Loading Element

Output

Code

.loading.revolve

.loading.rotate

.loading.circle-bounce

.loading.rectangle-bounce

.loading.pulse

.loading.dark.rectangle-bounce

HTML

SCSS

@import "lib/wlion/loading";

Social Sharing

Output

Code

HTML

JavaScript

// Included by default in global.js
$(document).ready(function() {

	$('[data-share-button]').on('click', share_this);

	function share_this(event) {
		/**
		 * Retrieve data to share from clicked object
		 */
		var share_on      = $(this).data('share-on');    // Determines which site to share to
		var share_url     = $(this).data('share-url');   // For all sites
		var share_title   = $(this).data('share-title'); // For LinkedIn, Tumblr and Email
		var share_text    = $(this).data('share-text');  // For Twitter, LinkedIn, Pinterest, Tumblr and Email
		var share_hash    = $(this).data('share-hash');  // For Twitter only
		var share_image   = $(this).data('share-image'); // For Pinterest only
		var popup_options = 'height=436,width=626,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes';

		/**
		 * Conditional statements to determine the click
		 * function to use based on the "share-on" data attribute
		 */

		// Share on Facebook
		if (share_on == 'facebook') {
			share_on_facebook(share_url);
		}
		// Share on Twitter
		else if (share_on == 'twitter') {
			share_on_twitter(share_url, share_text, share_hash);
		}
		// Share on Google
		else if (share_on == 'google') {
			share_on_google(share_url);
		}
		// Share on LinkedIn
		else if (share_on == 'linkedin') {
			share_on_linkedin(share_url, share_title, share_text);
		}
		// Share on Pinterest
		else if (share_on == 'pinterest') {
			share_on_pinterest(share_url, share_image, share_text);
		}
		// Share on Tumblr
		else if (share_on == 'tumblr') {
			share_on_tumblr(share_url, share_title, share_text);
		}
		// Share on StumbleUpon
		else if (share_on == 'stumbleupon') {
			share_on_stumbleupon(share_url);
		}
		// Share on Email
		else if (share_on == 'email') {
			share_on_email(share_url, share_title, share_text);
		}

		event.preventDefault();

		/**
		 * Define share functions for each share option
		 */

		// Share on Facebook
		function share_on_facebook(share_url) {
			window.open(
				'https://www.facebook.com/sharer/sharer.php?'
					+ 'u=' + encodeURIComponent(share_url),
				'popUpWindow',
				popup_options
			);
		}
		// Share on Twitter
		function share_on_twitter(share_url, share_text, share_hash) {
			window.open(
				'https://twitter.com/intent/tweet?'
					+ 'url='       + encodeURIComponent(share_url)
					+ '&text='     + encodeURIComponent(share_text)
					+ '&hashtags=' + encodeURIComponent(share_hash),
				'popUpWindow',
				popup_options
			);
		}
		// Share on Google
		function share_on_google(share_url) {
			window.open(
				'https://plus.google.com/share?'
					+ 'url=' + encodeURIComponent(share_url),
				'popUpWindow',
				popup_options
			);
		}
		// Share on LinkedIn
		function share_on_linkedin(share_url, share_title, share_text) {
			window.open('http://www.linkedin.com/shareArticle?mini=true'
					+ '&url='     + encodeURIComponent(share_url)
					+ '&title='   + encodeURIComponent(share_title)
					+ '&summary=' + encodeURIComponent(share_text),
				'popUpWindow',
				popup_options
			);
		}
		// Share on Pinterest
		function share_on_pinterest(share_url, share_image, share_text) {
			window.open(
				'http://www.pinterest.com/pin/create/button/?'
					+ 'url='          + encodeURIComponent(share_url)
					+ '&media='       + encodeURIComponent(share_image)
					+ '&description=' + encodeURIComponent(share_text),
				'popUpWindow',
				popup_options
			);
		}
		// Share on Tumblr
		function share_on_tumblr(share_url, share_title, share_text) {
			window.open(
				'http://www.tumblr.com/share/link?'
					+ 'url='          + encodeURIComponent(share_url)
					+ '&name='        + encodeURIComponent(share_title)
					+ '&description=' + encodeURIComponent(share_text),
				'popUpWindow',
				popup_options
			);
		}
		// Share on StumbleUpon
		function share_on_stumbleupon(share_url) {
			window.open(
				'http://www.stumbleupon.com/badge/?'
					+ 'url=' + encodeURIComponent(share_url),
				'popUpWindow',
				popup_options
			);
		}
		// Share on Email
		function share_on_email(share_url, share_title, share_text) {
			window.location.href = 'mailto:' + '?subject=' + escape(share_title)+ '&body=' + escape(share_text) + '%0D%0A%0D%0A' + escape(share_url);
		}
	}
});

Inline Lists

Output

Code

SCSS

@import "lib/foundation/inline-lists";

Labels

Output

Code

Regular Label
Radius Secondary Label
Round Alert Label
Success Label

HTML

SCSS

@import "lib/foundation/labels";

Pagination

Output

Code

«
1
2
3
4
…
12
13
»

HTML

SCSS

@import "lib/foundation/pagination";

Panels

Output

Code

This is a regular panel.

It has an easy to override visual style, and is appropriately subdued.

This is a radiua callout panel.

It's a little ostentatious, but useful for important content.

HTML

SCSS

@import "lib/foundation/panels";

Tiles

Output

Code

Tile Header

It has an easy to override visual style, and is appropriately subdued.

John D. Smith

John Smith Title

It's a little ostentatious, but useful for important content.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Reveal

Output

Code

Example Modal… Example Video Modal…

HTML

SCSS

@import "lib/foundation/reveal";

JavaScript

// Included by default in global.js
$(document).foundation();

Accordions

Output

Code

Accordion 1

Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Accordion 2

Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Accordion 3

Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

HTML

SCSS

@import "lib/foundation/accordion";

JavaScript

// Included by default in global.js
$(document).foundation();

Tabs

Output

Code

Horizontal

First panel content goes here...

Second panel content goes here...

Third panel content goes here...

Fourth panel content goes here...

Vertical

Panel 1 content goes here.

Panel 2 content goes here.

Panel 3 content goes here.

Panel 4 content goes here.

HTML

SCSS

@import "lib/foundation/tabs";

JavaScript

// Included by default in global.js
$(document).foundation();

Top Bar

Output

Code

HTML

SCSS

@import "lib/foundation/top-bar";

JavaScript

// Included by default in global.js
$(document).foundation();

Side Nav

Output

Code

HTML

SCSS

@import "lib/foundation/side-nav";

Sub Nav

Output

Code

Filter:: All; Active; Pending; Suspended

HTML

SCSS

@import "lib/foundation/sub-nav";

Tables

Table Header	Table Header	Table Header	Table Header
Content Goes Here	This is longer content Donec id elit non mi porta gravida at eget metus.	Content Goes Here	Content Goes Here
Content Goes Here	This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.	Content Goes Here	Content Goes Here
Content Goes Here	This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.	Content Goes Here	Content Goes Here

Block Grid

Output

Code

HTML

SCSS

@import "lib/foundation/block-grid";

Thumbnails

Output

Code

HTML

SCSS

@import "lib/foundation/thumbs";

Tooltips

Output

Code

The tooltips can be positioned on the "tip-bottom", which is the default position, "tip-top" (hehe), "tip-left", or "tip-right" of the target element by adding the appropriate class to them. You can even add your own custom class to style each tip differently. On a small device, the tooltips are full width and bottom aligned.

HTML

SCSS

@import "lib/foundation/tooltips";

JavaScript

// Included by default in global.js
$(document).foundation();

Favicons

iPad 3 Retina (144x144)

iPhone 4 Retina (114x114)

iPad (72x72)

iPhone Apple Touch (57x57)

Favicon Retina (32x32)

Favicon (16x16)

Colors

Fonts

Primary Headings: Lato Bold

This is a primary heading

Subheaders: Tisa Web Pro Bold

This is a secondary heading

Lead Paragraph: Tisa Web Pro

Body Text: Tisa Web Pro

Typography

Headers & Subheaders

h1. This is a very large header.

h2. This is a large header.

h3. This is a medium header.

h4. This is a moderate header.

h5. This is a small header.

h6. This is a tiny header.

Subheaders

h1. subheader

h2. subheader

h3. subheader

h4. subheader

h5. subheader

h6. subheader

Lists

Definition Lists

Un-ordered Lists

Ordered Lists

Paragraphs

Blockquotes

Alert Boxes

Icons by Font Awesome

Buttons

Button Groups

Dropdown Buttons

Directions

Hover

Split Buttons

Forms

Slick Carousel

Flex Video

Loading Element

.loading.revolve

.loading.rotate

.loading.circle-bounce

.loading.rectangle-bounce

.loading.pulse

.loading.dark.rectangle-bounce

Social Sharing

Inline Lists

Labels

Pagination

Panels

This is a regular panel.

This is a radiua callout panel.

Tiles

Tile Header

John D. Smith

Reveal

This is a modal.

This is a second modal.

This modal has video

Accordions

Tabs

Horizontal

Vertical

Top Bar

Side Nav

Sub Nav

Tables

Block Grid

Thumbnails

Tooltips

Favicons

Share this Page