O'Reilly logo

Getting Started with Zurb Foundation 4 by Andrew D. Patterson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Designing with SASS

Where do you start when designing your website layout? You probably start with your HTML markup and add Foundation's grid classes until you have something that meets your requirement. You'll be happy to learn that you can make this process even simpler by using Foundation's SASS grid components.

Let's start with a simple three-part layout:

<header>
<main>
<footer>

We want each of these to be an outside container, an outer row. So we'll add the SCSS code to do that. Put the following code in your custom SCSS file:

header { @include grid-row(); }
main { @include grid-row(); }
footer { @include grid-row(); }

When you compile your SCSS, you will see that the header, main, and footer elements all have the same properties that an outer ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required