Mobile First Foundation

Based on version 3.0.9 generated on September 10, 2012, (among other things).

Breadcrumbs

  • Home
  • Features
  • Gene Splicing

General Typography

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 small header.
h6. This is very small header.

This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content so, let’s see… did you know that there are storms occurring on Jupiter that are larger than the Earth? That's pretty cool.

Side Nav

Progress Bar

Inline Labels

Example Label This label could read a date for an update, or it could include an author name, or anything really. Inline labels are pretty handy when you need to draw attention or visually separate a short piece of content.

Filter Subnav

Filter:
All
Active
Pending
Suspended

The Grid

This is a twelve column section in a row. Each of these includes a div.panel element so you can see where the columns are - it's not required at all for the grid.

Fieldset & Form Fields

I am Legend
  5. Why this is wrong

Pagination

Blockquote

I do not fear computers. I fear the lack of them. Isaac Asimov

Tables

Very Long 1st Cell Content
Header 1 Header 2 Header 3 Header 4 Header 5 Header 6 Header 7 Header 8
Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage. row 1, cell 2 row 1, cell 3 row 1, cell 4 row 1, cell 5 row 1, cell 6 row 1, cell 7 row 1, cell 8
Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage. row 2, cell 2 row 2, cell 3 row 2, cell 4 row 2, cell 5 row 2, cell 6 row 2, cell 7 row 2, cell 8
Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage. row 3, cell 2 row 3, cell 3 row 3, cell 4 row 3, cell 5 row 3, cell 6 row 3, cell 7 row 3, cell 8
Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage. row 4, cell 2 row 4, cell 3 row 4, cell 4 row 4, cell 5 row 4, cell 6 row 4, cell 7 row 4, cell 8

Columns

Twelve columns

Six columns

Six columns

Four columns

Four columns

Four columns

Tabs

Simple Tab 1
Simple Tab 2
  • This is simple tab 1’s content. Pretty neat, huh?
  • This is simple tab 2’s content. Now you see it!

Buttons

Small Button

Medium Button

Large Button

Small Alert Button

Medium Success Button

Large Secondary Button

Other Resources

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 on Github
    Latest code, issue reports, feature requests and more.
  • @foundationzurb
    Ping us on Twitter if you have questions. If you build something with this we'd love to see it (and send you a totally boss sticker).

Reveal

Example modal

This is a modal.

Reveal makes these very easy to summon and dismiss. The close button is simple an anchor with a unicode character icon and a class of close-reveal-modal. Clicking anywhere outside the modal will also dismiss it.

×