Getting Started
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?
Hack on CSS
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.
Customize with Sass
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.
Build an App
If you want to build or integrate with a web app, check out this guide. We'll show you how to use the Foundation gem, as well as give you other tools for working with a modern web app.
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:
The Grid
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.
Navigation
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.
Buttons
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.
Plugins
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.
