The Grid

For the grid, we use a stripped down version of Foundation. This way, we don't have to overwrite code and it keeps the scss clean. We're also using their normalize styling for good practice.

SCSS

@import 'foundation_normalize';
@import 'foundation_grid';

Read about the Foundation basic grid system here. Foundation runs on rows and columns so all columns must be wrapped in rows. Column widths are inherited from smaller screen sizes. For example, a column that is "small-6" is half of its container on all screen sizes unless another class is added. If "large-8" is added, the column would be half the container on small and medium screens and two thirds of the container on large screens. If no width is specified, it is assumed the column is the full width of the container. See below.

<div class="row">
<p>This is the container.</p>
<div class="medium-4 columns">
    <p>This section spans 4 columns.</p>
</div>
<div class="medium-8 columns">
    <p>This section spans 8 columns</p>
    <div class="row">
        <div class="medium-4 columns">
            <p>This spans 4 nested columns of the 8 overall columns</p>
        </div>
        <div class="medium-4 columns">
            <p>This spans 4 nested columns of the 8 overall columns</p>
        </div>
        <div class="medium-4 columns">
            <p>This spans 4 nested columns of the 8 overall columns</p>
        </div>
    </div>
</div>
</div>

Rendered Code