This website is built on the ZURB Foundation base theme and Foundation 6, which means that the page template and other base templates contain Foundation 6 markup. But how do you harness the Foundation grid in your Views content? For example, how did I make the responsive grid of Drupal projects on my Drupal Portfolio page?
The solution is a little bit unintuitive but actually quite easy to implement. although I had a few false starts before eventually getting it right. Looking at the Foundation 6 Documentation, it initially looked like what I needed was a Block Grid. A block grid contains a single row, with each block in the grid being a column. Translating this idea to Views, the view output would have class="row", and each views row would have class="column".
My portfolio grid has 2 columns on small and medium screens, and 4 columns on large screen, which means I need the following markup:
<div class="row small-up-2 large-up-4">
<div class="column">[VIEWS ROW 1]</div>
<div class="column">[VIEWS ROW 2]</div>
<div class="column">[VIEWS ROW 3]</div>
...
</div>
I made my View output this markup by giving the Views display a class="row small-up-2 large-up-4" and giving each Views row a class="column" and tested my grid. But it didn't work. Why not? Because in Foundation's block grid the columns must be direct descendants of the row. Foundation CSS looks like this:
.large-up-4 > .column, .large-up-4 > .columns {
width: 25%; float: left;
}
But my Views output looked like this:
<div class="row small-up-2 large-up-4 view ...">
<div class="contextual" ...>
<div class="view-content">
<div class="column">[VIEWS ROW 1]</div>
<div class="column">[VIEWS ROW 2]</div>
...
</div>
</div>
</div>
The grid columns are wrapped by two outer divs, so are not direct descendants of the row. I could remove the contextual links wrapper div by turning off contextual links under Views Advanced settings, but that still left me with the view-content div. I was determined to solve this problem without resorting to template overrides, so I played around some more with Foundation classes and eventually hit on an alternative way to achieve a block grid. The solution is to apply the grid classes to the columns (i.e. the Views rows) instead of to the row (i.e. the View), so that the markup output is like this:
<div class="row view ...">
<div class="contextual" ...>
<div class="view-content">
<div class="column small-6 large-3">[VIEWS ROW 1]</div>
<div class="column small-6 large-3">[VIEWS ROW 2]</div>
...
</div>
</div>
</div>
Here is how to add the necessary classes through the Views UI:
Add the Foundation row class to the View display
Add the Foundation column class to the View row
