Clearing is a full screen lightbox that is nice to showcase images without the distraction of the other site elements. A good example would be a photograph portfolio gallery. So let's add the following code on or around line 104, just make sure it is above the closing </section> tag:
<ul class="clearing-thumbs large-block-grid-3" data-clearing>
<li><a href="img/wood1.jpg"><img data-caption="Wood 1 Caption" src="img/wood1-tb.jpg"></a></li>
<li><a href="img/wood2.jpg"><img data-caption="Wood 2 Caption" src="img/wood2-tb.jpg"></a></li>
<li><a href="img/wood3.jpg"><img data-caption="Wood 3 Caption" src="img/wood3-tb.jpg"></a></li>
</ul>Now, take a look at your browser, you will see three wood paneling images that take up the full width of the browser because we did not put this in the Foundation grid, and when you click on one you get a nice full-screen...