MENU

Style Guide

Colors

Primary Blue
#008cba
Secondary Gray
#e7e7e7
Alert Color
#f04124
Success Color
#43ac6a
Warning Color
#f08a24
Info Color
#a0d3e8

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
  1. List Item 1
  2. List Item 2
  3. 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 https://fortawesome.github.io/Font-Awesome/.

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

Buttons

Output
Code

Button Groups

Output
Code
HTML

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


Split Buttons

Output
Code

Forms

Fieldset
.com


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('https://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(
				'https://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(
				'https://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(
				'https://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
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";

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
Tab 1
Tab 2
Tab 3
Tab 4

First panel content goes here...

Second panel content goes here...

Third panel content goes here...

Fourth panel content goes here...

Vertical
Tab 1
Tab 2
Tab 3
Tab 4

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

Side Nav

Output
Code
HTML

SCSS
@import "lib/foundation/side-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)