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 row has in Foundation's style sheet. The beauty of this is that you do your markup in HTML as usual, mirror that in SCSS, and add appropriate mixins.
To show they are equivalent, here are the properties associated with the .row class...