Getting started With Foundation is easy. Whether you are a master of Sass, building a new app, or making your existing site responsive, we've got you covered. How would you like to get started?
As the simplest way to get started, the straight CSS version is perfect if you want to just start writing code or hacking on a simple, static site. We'll give you all the pieces you need, no setup required.
Want more control? Check out how to get started with Sass (SCSS) which will let you customize … well, everything. Setup is straightforward and if you haven't used Sass before, once you do, you'll never look back.
Try Foundation in the Browser
Want to give Foundation a quick spin? We've set up a Codepen where you can play around with the default Foundation download — HTML, CSS and JS. Pretty swanky way to just see what Foundation has to offer.
Coming From Foundation 4?
We've put together a totally rad migration guide, so upgrading is easy peasy. Migration Guide →
What Comes With Foundation?
Well, most everything you need, we hope. Foundation has a ton of components and structures to help you build a responsive site without having to worry about all of your baseline, foundational (see what we did there) code. Here's a snapshot of what every version of Foundation includes:
Our grid works on almost any device and has support for nesting, source ordering, offsets and device presentation. Frankly it's a little too easy.
People have to get around. Navigation styles in Foundation include a bitchin' off-canvas implementation, a robust top bar, and a bunch of other navigational constructs.
Clicking on stuff is awesome, so hook up your users with buttons to do stuff. We've included styles for size, presentation, color and more so making a button is as easy as adding a class.
We've included a ton of JS plugins written just for Foundation to optimize your page (Interchange), show off images (Clearing), pop up modals (Reveal) and tons more.
...and so much more. Seriously.
That's just a snapshot of everything in Foundation. Check out all the components here through the docs — there are explanations, code examples, rendered examples and everything you need to build the components in Foundation with HTML, CSS, or Sass. Go forth and make awesome things.
Got a Foundation question we didn't cover in the docs?
Post your questions on the Foundation Forum! We have a strong community where you can:
- Get helpful answers fast from avid Foundation fans and ZURBians.
- Describe your code problem or response design question with text, code and imagery so the community can respond with appropriate advise or answers.
- Follow posts and people to learn new things about Foundation.