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 knowlege.

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).

Here’s your basic grid:

This is a twelve cell section in a grid-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:
.com
Try one of these buttons:

Simple Button
Success Btn
Alert Btn
Secondary Btn

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.

Go to Foundation Docs

Javascript Examples

Responsive Accordion Tabs

one

Check me out! I'm a super cool Tab panel with text content!

two

three

Check me out! I'm a super cool Tab panel with text content!

four

five

Check me out! I'm a super cool Tab panel with text content!

six


Orbit

  • You can also throw some text in here!

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.

    This Orbit slide has chill

  • You can also throw some text in here!

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.

    This Orbit slide has chill


Reveal

Awesome. I Have It.

Your couch. It is mine.

I'm a cool paragraph that lives inside of an even cooler modal. Wins!


Smooth Scroll

Smooth Scroll to Top


Drilldown Menu