512-282-7393
MENU

Style Guide

Colors

Blue Light
#278bc2
Blue Medium
#1c759d
Blue Dark
#003468
Blue Very Dark
#091f48
Gray Very Light
#f0f0f0
Gray Light
#e9e4df
Gray Medium
#c7c8c9
Gray Dark
#9d9fa1
Alert Color
#f04124
Success Color
#43ac6a
Warning Color
#f08a24
Info Color
#278bc2

Fonts

Output
Code
Primary Headings: Brandon Grotesque 500

This is a primary heading

Secondary Headings: Adobe Caslon Pro 400

This is a secondary heading

Lead Paragraph: Brandon Grotesque 400

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Body Text: Open Sans

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

Buttons

Output
Code

.button

.expand.button

HTML
SCSS
@import "lib/foundation/buttons";

Accordions

Output
Code
Accordion 1

Section Header

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

Section Header

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

Section Header

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();

Routers

Output
Code
Router Button 1
Router Button 2
Router Button 3
HTML

Sidebar Nav

Output
Code
HTML

Sidebar Section

Output
Code
HTML

Property Grid

Output
Code
HTML
SCSS
@import "lib/foundation/block-grid";

Forms

Output
Code

Input Label

Input Label

Input Label

Textarea Label

HTML

Favicons


iPad 3 Retina (144x144)


iPhone 4 Retina (114x114)


iPad (72x72)


iPhone Apple Touch (57x57)


Favicon Retina (32x32)


Favicon (16x16)