Foundation: Rapid Prototyping and Building Framework from ZURB

Foundation: Rapid Prototyping and Building Framework from ZURB

elcome to Foundation!

Welcome to the Foundation documentation. Here you can learn what Foundation includes, as well as how to use it on mobile and on the desktop Web.

 

---

 

What's in Foundation?

So much good stuff, girl. We've built Foundation to help you quickly get a site off the ground and to a state where you can easily adapt and modify it into a release. Here's the highlights:

• Global

  Foundation's global styles include Eric Meyer's rock-solid reset, tested styles for typography, links, lists, tables and more.

• The Grid

  You're gonna like this. Within global.css you'll find The Grid (not the one from Tron), a layout framework that works on mobile devices, small screens and full-on modern desktops. It's a twelve column, semi-liquid, mobile-scaling grid of awesomeness that you're gonna love. It even supports arbitrary nesting.

• Buttons

  We love buttons at ZURB. Foundation includes two base styles, three sizes, and several colors that are preconfigured and super easy to modify.

• Forms

  Hate forms? So do we. They're a pain. Well, we're simplifying that by creating two base styles for forms that are tested, include validation styles, have proper spacing…all the good stuff. We even included custom radio buttons, checkboxes and select lists so you can style up every form element. They're easy to modify, like everything else.

• Orbit

  That's right - Orbit, the awesome way to put image or content sliders on your page, is packaged in with Foundation. It even works on mobile.

• Reveal

  Finally, we've created a whole new plugin for modal dialogs in Foundation. Reveal is easy to call, supports several intro animations right out of the box, and is completely stylable. It also works on mobile.

 

---

 

Changelog

2.2.1 April 10, 2012

Numerous bug fixes and tweaks to cement Foundation 2 and let us move into Foundation 3.

2.2 February 21, 2012

Added breadcrumbs to UI, and made numerous changes to the JS plugins for stability and cross-browser behaviour. Numerous bug fixes both in JS and CSS.

2.1.5 January 26, 2012

Numerous bug fixes around the nav, UI elements, edge cases and general code cleanliness. Also added in tooltips and inline labels. The tooltips can be attached to most objects and work cross-device on click or tap. Note: Within this version we now include a build of Modernizr to detect touch-enabled devices. Is it not mandatory, but the nav works best with it in place. You can use another build of Modernizr if you have touch-detection and classes turned on.

2.1.4 December 19, 2011

Two semi-major new features: source ordering and video embed support. You can now reorder the grid (both desktop/tablet and phone) using push and pull classes. If you need to embed Youtube or Vimeo videos you can wrap them in a simple .flex-video class to have them scale by proportion within the grid. We also updated the nav-bar to work properly across more devices, and fixed a number of other small bugs.

2.1.3 December 9, 2011

We've fixed a number of inheritance issues with dropdown nav, and turned off the JS hooks for that element while we resolve some iOS / Android inconsistencies. Dropdowns will work as expected based on their CSS, but have no special mobile functionality at the moment.

2.1.2 December 7, 2011

Added nav bar styles to ui.css including arbitrary-content dropdowns. Added basic support for microformats. Modified how the grid handles phone sizes through margin and padding, and in the process fixed a bug which broke the phone grid when used outside another column.

2.1.1 November 21, 2011

Fixed an issue with buttons modifying their bottom margin on hover, as well as fixing bugs with rows inside a Reveal modal and changing the desktop visibility for objects with a declared display property.

2.1 November 18, 2011

Added in a four-column mobile grid which can be optionally attached to existing grid elements. Retooled the documentation site for better scalability and added in a vertical tabs element. Also included documentation for the new SaSS gem.

2.0.3

Major fixes for Orbit in responsive layouts, various other grid and common element bug fixes.

2.0.2

Changed the download pack to combine CSS and JS into single files for fewer requests on mobile. Split out typography and the Grid into separate files on Github for easier hacking.

2.0.1

Removed PHP from the base download requirements, numerous bugfixes.

2.0.0

Initial public release.

 

---

 

What's Next for Foundation

We're not content to sit still — we're going to keep polishing Foundation, fixing edge cases, and preparing for the next major release. Coming to Foundation: templates, site generation, more common elements, and even better mobile support.

 

---

 

Contributing to Foundation

Foundation is hosted on Github. If you have questions or bugs please file them through Github, but you can also talk to us if you want to get into Foundation and help build out the next generation way of rapidly prototyping. Yeah, we're thinking big.

Get Foundation

Download Foundation here to get started quickly. Includes the base file structure, CSS, JS, and required images.

Download Foundation

Score an awesome product engineering
or design job. Check out:

• 
  Interaction Design Lead
  Best Buy in Minneapolis, MN
  
• 
  DevOps
  Olark in Ann Arbor, Michigan
  
• 
  Sr Manager, Interaction Design
  Best Buy in Minneapolis, MN
  

via ZURBjobs

Getting Started

Grid

Buttons

Forms

Layout

UI

Orbit

Reveal

QA