Foundation For Sites


An easy to use, powerful, and flexible framework for building prototypes and production code on any kind of device.

Foundation provides the tools and resources like a simple yet flexible layout grid, modal boxes, typography, navigation components, and form elements that designers can quickly plug in to their products.

Based on Sass, the CSS preprocessor, designers can pick and choose which components they want, write HTML semantically, and control almost every aspect of the framework with a series of built-in variables.

Foundation’s is written with the most popular browsers in mind — specifically, mobile devices like smartphones. To that end its grid takes a mobile-first approach. Designers give each layout block a series of instructions depending on screen size. Mobile-first means Foundation’s grid assumes the smallest configuration until told otherwise. For example, instructions for medium screens, like tablets, override instructions for smartphones. Likewise, large instructions override medium.

Foundation for Sites is written with humans in mind two ways. First, its components and grid use people-friendly names and instructions. Second, Foundation for Sites includes accessibility options for screen readers. The end result is a framework that helps both designers and end users get up and running quickly because we don’t want to waste time reinventing the grid.

Foundation of Technology

Developing Foundation for Sites wasn’t always easy, and the road had many curves.

We wanted Foundation for Sites to be the fastest responsive CSS framework out there, but not just for end users. We also wanted it to be quick to use and easy to learn. Foundation for Site’s underpinnings include Sass, good ol’ HTML5. In late 2014 we took steps to make Foundation the most accessible framework available, and we aim to improve with each iteration better.

Foundation 4 used Zepto, a lightweight JavaScript library. We dropped that in favor of jQuery in version 5 because, in the long run, jQuery was more recognized and worked at least as well, in spite of Zepto’s small footprint.

Speaking of small, we also changed Foundation’s grid to use a mobile-first mindset, helping designers prepare for a growing mobile audience.

Then and Now

Foundation couldn’t just be all about prototyping. It had work equally as well for coding up an entire site. We’ve used Foundation to build several of our own sites, such as our blog, main website and Notable.

Foundation for Sites began its life as an internal tool at ZURB. In brief, we got tired of repeating ourselves when building client projects. Many began with nearly the same code, so we decided to build a solid, reusable platform that would give us a jump start for building, say, page layouts and navigation bars. And buttons. And typography. And on and on, until Foundation became the tool we rely on for pretty much every project, both internally and with our Studios clients.

We released Foundation as an open source project at version two in October, 2011. Since then it’s grown into a family of frameworks: Foundation for Sites, Foundation for Apps and Foundation for Email, all used by designers and developers around the world.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>