Foundation

The most advanced responsive
front-end framework in the world.

hero-image

Foundation for Apps is here!

It’s the first front-end framework created for developing fully responsive

Responsive design gets a whole lot faster

It's now crazy fast for designers and engineers to code and learn too.

faster-for-users

Faster for Users

Users will feel the speed. Interchange now enables HTML partials for device specific content. Smoother animations and transitions happen with hardware acceleration. The default styles are all updated.

faster-to-code

Faster to Code

For the nerd in all of you, we've built a new command line tool to spin up projects fast and added Libsass, speeding up your SCSS changes by 5X. Our HTML Templates have even been brought up to speed.

faster-to-learn

Faster to Learn

We overhauled our documentation with all new and more detailed code examples. And we're now supporting Foundation with a new and expert training so you can get started building even faster.

Build products, apps and services

Foundation 5 is the professional choice for designers, developers and teams.


semantic

Semantic

Everything is semantic. You can have the cleanest markup without sacrificing the utility and speed of Foundation.

responsive

Mobile First

You can build for small devices first. Then, as devices get larger and larger, layer in more complexity for a complete responsive design.

customizable

Customizable

You can customize your build to include or remove certain elements, as well as define the size of columns, colors, font size and more.

training

Professional

Millions of designers and developers depend on Foundation. Now we have business support, training and consulting to help grow your product or service.

Foundation Forum is here to help

Engage with other designers & engineers in our Foundation community

Input .error unwanted animation

BY JOHN KOLE , LAST REPLY BY JOHN KOLE ABOUT ABOUT 2 HOURS AGO

Not sure if this has always been the case, but when the error class is set on an input element, the change in the bottom margin to zero is animated if $input-include-glowing-effect == false. This results in what seems to me to be a very jarring experienc... (continued)

Help with Equalizer

BY ADAM S GERHARD , LAST REPLY BY ARTHUR LEE ABOUT ABOUT 6 HOURS AGO

Please be gentle as I am new to foundation. I am trying to get eqaulizer to work as I need two columns in a row to be of a equal height....but I can't get equalizer to even work on the most basic sample. What am I missing? Here is a test site and as yo... (continued)

Block grid margin too large

BY HAROUT YAACOUBIAN , LAST REPLY BY HAROUT YAACOUBIAN ABOUT ABOUT 8 HOURS AGO

Hello All, i have implemented a block grid to a website that I am developing. This issue is that the margin between the images is too large, meaning there is way to much space between the images on the first row and on the second. i have added the co... (continued)

Join the Foundation community to ask a question or see all topics →

Foundation Forum is here to help

Engage with other designers & engineers in our Foundation community

Sites using Foundation:

  • logo-pbs
  • logo-natgeo
  • logo-webfwd
  • logo-wp
  • logo-losalamos
  • logo-felix
responsive-banner-main

Get a running start with Foundation

Learn the fundamentals of the world's most advanced responsive framework in our intro to Foundation class. You'll hear from the creators themselves how to use Foundation to jumpstart your next project.

Stay on top of what’s happening in responsive design

Sign up to receive monthly Responsive Reading Read Last Month's Edition »

Foundation

Foundation is made by , ZURB, a product design company in Campbell, California. We've put more than 15 years of experience building web products, services and websites into this framework.

Talk to us

Tweet us at
@ZURBfoundation

Or check our
support page

Stay in touch

Keep up with the latest on
Foundation. Find us on Github.