Theme Style Guide

We’re stoked you want to try Foundation!

To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.

Once you've exhausted the fun in this document, you should check out:

Foundation Documentation
Everything you need to know about using the framework.

Foundation Code Skills
These online courses offer you a chance to better understand how Foundation works and how you can master it to create awesome projects.

Foundation Forum
Join the Foundation community to ask a question or show off your knowledge.

Foundation on Github
Latest code, issue reports, feature requests and more.

@zurbfoundation
Ping us on Twitter if you have questions. When you build something with this we'd love to see it (and send you a totally boss sticker).

Headers, girl!

H1

paragraph paragraph paragraph paragraph paragraph anchor in a paragraph paragraph paragraph paragraph

paragraph paragraph paragraph paragraph paragraph anchor in a paragraph paragraph paragraph paragraph

H2

paragraph paragraph paragraph paragraph paragraph anchor in a paragraph paragraph paragraph paragraph

H3

paragraph paragraph paragraph paragraph paragraph anchor in a paragraph paragraph paragraph paragraph

H4

paragraph paragraph paragraph paragraph paragraph anchor in a paragraph paragraph paragraph paragraph

H5

paragraph paragraph paragraph paragraph paragraph anchor in a paragraph paragraph paragraph paragraph

H6

paragraph paragraph paragraph paragraph paragraph anchor in a paragraph paragraph paragraph paragraph

UtilitiesAF

color styles

Theme Colors

p.color-brand

p.color-brand-light

p.color-accent-red

p.color-gray-57

p.color-gray-f6

p.color-gray-ff

Primary Colors

p.color-primary

p.color-secondary

p.color-success

p.color-warning

p.color-alert

p.text-ital

p.text-roman (makes not-ital)

.text-center, .text-left, .text-right, and (sometimes) .text-justify. < they make text align

Boring Stuff

Primary Colors

Components N Stuff

.head-line

.subhead-line

Same thing

But this one isn't in div.cell

spot fills

Theme Colors

div.fill-brand

div.fill-brand-light

div.fill-accent-red

div.fill-gray-57

div.fill-gray-f6

div.fill-gray-ff

Primary Colors

div.fill-primary

div.fill-secondary

div.fill-success

div.fill-warning

div.fill-alert

Buttons

a.small.button
a.medium.success.button
a.medium.alert.button
a.large.secondary.button

And HollowButtons

Same as the filled buttons, just tack on .hollow

a.small.button
a.medium.success.button
a.medium.alert.button
a.large.secondary.button

Buttons has spots

a.small. brand.button a.medium.brand-light.button a.medium.accent-red.button a.small.gray-57.button a.small. brand.button a.medium.brand-light.button a.medium.accent-red.button a.small.gray-57.button

Here’s your basic grid:

This is a twelve column section in a grid-x with grid-margin-x. Each of these includes a div.callout element so you can see where the cell are - it's not required at all for the grid.

Six cell

Six cell

Four cell

Four cell

Four cell

We bet you’ll need a form somewhere:

Input Label

Input Label

Input Label

Input Label

.com

Select Box

Choose Your Favorite Radio 1 Radio 2

Check these out Checkbox 1 Checkbox 2

Textarea Label

So many components, girl!

A whole kitchen sink of goodies comes with Foundation. Check out the docs to see them all, along with details on making them your own.

thing
thing
thing
Multiline thing Multiline thing Multiline thing Multiline thing Multiline thing Multiline thing Multiline thing
thing
thing

Go to Foundation Docs