ZURB Menu

Foundation

Getting Started

Whether you are using Scss or CSS, we've made it easy to start a project so that you can help take over the world one responsive site at a time.

Foundation is developed in Sass, which is a powerful CSS pre-processor that helps you write cleaner, more organized, CSS that you can more easily maintain over time without the typical headaches of vanilla CSS. On top of our minimal styling, we've written powerful Javascript plugins that will make useful interactions easier to implement across screen sizes.

Looking for Foundation 3?
We're still supporting Foundation 3 for those who don't want to take the leap into the future with us. You can view the docs, download a package or visit the Github page.


Ready to Move to 4?
We've got you covered with a migration guide that explains the differences.

Migration Guide

What comes with Foundation?

We've got you covered when it comes to useful features and we've made it easy to take out what you don't need. Here's what you'll get when you create a project using our Sass version or the default CSS version:
The Grid
Our grid works on almost any device and has support for nesting, source ordering, offsets and device presentation. It almost makes creating layouts too easy!
Typography
Our type is based on a golden ratio modular scale that creates meaningful relationships for the copy on the page. It's easily updated using Scss or our CSS customizer.
Buttons
Buttons are a core interactive element of the Web. We've included styles for creating simple marketing CTAs to complex application toolbars.
Navigation
People have to get around. Navigation styles in Foundation include a complex top bar that supports 3-level dropdown navigation for simple bars, sidebars and subnav pills.
Forms
Built with the Foundation Grid, you can create simple or complicated forms quickly and easily— validation states, custom select, radio buttons and more.
UI Elements
We've also included lots of useful elements like visibility classes (to hide or show things based on screen size or orientation), labels, alerts, tooltips, panels and a lot more.
Section
Whether it's entire pages or simple tabbed content, Foundation's tabs get the job done. Not only stylish, but interactive out of the box.
Orbit
A powerful image or content slider that works responsively and includes tons of useful options, such as timers, paddles, bullet thumbs and more.
Reveal
You can easily call modals without writing any JS, even spawn subsequent modals cleanly on the same page. Reveal works across devices.
Clearing
Show off your images in style with our easy to use gallery plugin. It's built with simple unordered lists that can be styled to your hearts content.
Magellan
A flexible sticky navigation that knows where you are on the page. You just tell it what to recognize and set it off.
Joyride
This plugin lets you give users a tour of your site or app. Joyride is easy to customize using CSS or our Scss variables.
Tooltips
Tooltips lets you add quick hover or tap tooltips to elements.
Dropdown
We've made a dropdown plugin that makes it easy to attach a popover dropdown to any element on the page.
Interchange
This plugin lets you load up the appropriate size image based on media queries that you define.
Abide
Abide is an HTML5 form validation library that supports the native API by using patterns and required attributes.

How is a project structured?

We follow common patterns for directory structure that are logical and easily maintained. Below is an explanation of each file you'll get when you create a project using our gem or download via our customizer.
css
Includes foundation.css and foundation.min.css so you can choose which to use. You'll also see normalize.css, which we use for resets. Add another stylesheet on top of Foundation to override defaults.
js
All of our plugins and the necessary JavaScript to make Foundation work properly. All JS is initiated by default.
img
This directory actually comes empty in Foundation 4! We no longer have any images included in the core of Foundation.
index.html
A sample structure for page content, giving you something to use as a basic structural template for the rest of the pages in your project.
humans.txt
A way to tell the world about the people that worked on the sites you build, giving them kudos they deserve.
robots.txt
Give instructions to web robots so search engines know what to do when they crawl your site for content.

Using the Gem? You'll see a couple extra pieces in your project upon creation. These are:
scss/
Your main style folder is named scss/ and contains app.scss (which has the foundation gem import and commented portions you can pick and choose). Override the Foundation styles within your app.scss file. You can see the compiled CSS in your stylesheets directory after you manually compile or watch. This directory also includes _settings.scss, which is used to control variables that help easily style Foundation. You'll also notice that the directory names are slightly different. Compass defaults to "stylesheets", "javascripts", and "image".
config.rb
This file is used by Compass to compile your project. Here you can control the output style of your CSS, the structure of your directories and other useful settings.

HTML Page Markup

Our markup structure is straight forward and gives you the flexibility you need to create to your hearts desires. Here's an example page that includes the basics:
<!DOCTYPE html>
<!--[if IE 8]>         <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>Foundation 4</title>

  <!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
  <link rel="stylesheet" href="css/normalize.css" />
  <link rel="stylesheet" href="css/foundation.css" />

  <!-- If you are using the gem version, you need this only -->
  <link rel="stylesheet" href="css/app.css" />

  <script src="js/vendor/custom.modernizr.js"></script>

</head>
<body>

  <!-- body content here -->

  <script>
  document.write('<script src=' +
  ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
  '.js><\/script>')
  </script>
  <script src="js/foundation/foundation.js"></script>
  <script src="js/foundation/foundation.alerts.js"></script>
  <script src="js/foundation/foundation.clearing.js"></script>
  <script src="js/foundation/foundation.cookie.js"></script>
  <script src="js/foundation/foundation.dropdown.js"></script>
  <script src="js/foundation/foundation.forms.js"></script>
  <script src="js/foundation/foundation.joyride.js"></script>
  <script src="js/foundation/foundation.magellan.js"></script>
  <script src="js/foundation/foundation.orbit.js"></script>
  <script src="js/foundation/foundation.placeholder.js"></script>
  <script src="js/foundation/foundation.reveal.js"></script>
  <script src="js/foundation/foundation.section.js"></script>
  <script src="js/foundation/foundation.tooltips.js"></script>
  <script src="js/foundation/foundation.topbar.js"></script>
  <script src="js/foundation/foundation.interchange.js"></script>
  <script>
    $(document).foundation();
  </script>
</body>
</html>

Doctype & Head
We use the HTML doctype declaration to tell the browser what to expect. From there we've used a technique by Paul Irish that attaches classes to the HTML for IE. After that, we set the character set to UTF-8.
Meta Viewport tag
This is used to make sure smaller devices use the device width as the viewport width.
Title Tag
This one is pretty self-explanatory. You're setting the name of the current page with this value.
CSS & Modernizr
The default CSS download includes everything you need to get going, including necessary styles and our custom Modernizr script.
CSS
We include foundation.min.css and foundation.css with a default CSS download. The difference here is whether or not you want minified code or not (link whichever you want, but not both).
Modernizr
We use this to give us the HTML5 Shiv, touch classes and JS media queries that help us control Foundation.
Javascripts
Our JS is linked up right before the closing body tag and includes all necessary plugins and initializers to hit the ground running.

Get going!

Now that you understand the gist of what Foundation is and how it works, it's time to start a project! We've got two different ways for you to build projects with Foundation, a Compass Gem using Scss or a with plain CSS.
Using the Gem Quickstart with CSS

This is a modal.

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

Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.

Second Modal...

×

This is a second modal.

See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.

×

This modal has video

×