Menu icon Foundation
Clearing + Box Grid

I would like to use Clearing. However, I would like the thumbnails to be used in the Box Grid layout. Is this possible? This is what I was trying.

<ul class="small-block-grid-3 clearing-thumbs" data-clearing>
  <li><a href="path/to/your/img"><img src="path/to/your/img-th"></a></li>
  <li><a href="path/to/your/img"><img src="path/to/your/img-th"></a></li>
  <li><a href="path/to/your/img"><img src="path/to/your/img-th"></a></li>
</ul>
            

         

clearingbox-grid

I would like to use Clearing. However, I would like the thumbnails to be used in the Box Grid layout. Is this possible? This is what I was trying.

<ul class="small-block-grid-3 clearing-thumbs" data-clearing>
  <li><a href="path/to/your/img"><img src="path/to/your/img-th"></a></li>
  <li><a href="path/to/your/img"><img src="path/to/your/img-th"></a></li>
  <li><a href="path/to/your/img"><img src="path/to/your/img-th"></a></li>
</ul>
            

         
Rafi Benkual over 5 years ago

Sere can! Here is an example of how.

Click edit pen in lower left to see code:
http://cdpn.io/HkCgf

Jacob Graf over 5 years ago

That is exactly what I did but this is how it's rendering?

http://glui.me/?i=u4p3q4go30ch0ua/2014-01-14_at_1.03_PM.png/

Rafi Benkual over 5 years ago

Can you post the code?

Rafi Benkual over 5 years ago

Here is a solution:
http://cdpn.io/whIro

This was tied to a GitHub issue https://github.com/zurb/foundation/issues/2696 which we will resolve there.

Alex Plaza over 5 years ago

Thanks Rafi!

It works for my block mixin!

Chad R. over 5 years ago

It's just a tad bit more code, maybe a bit redundant... but if you want want to confine your thumbnail items to your responsive grid then put each list item in it's own ul... there is no limit on how many list you can make and I've found it work quite nice. Here is an example to make more sense...

<div class="row">
      <div class="small-12 medium-6 large-3 columns">
            <ul data-clearing>
                <li><a href="gallery/web/image1.jpg"><img data-caption="" src="http://placeimg.com/640/480/any" /></a></li>
            </ul>
      </div>

        <div class="small-12 medium-6 large-3 columns">
            <ul data-clearing>
                <li><a href="gallery/web/image2.jpg"><img data-caption="" src="http://placeimg.com/640/480/any" /></a></li>
            </ul>
      </div>

        <div class="small-12 medium-6 large-3 columns">
            <ul data-clearing>
                <li><a href="gallery/web/image3.jpg"><img data-caption="" src="http://placeimg.com/640/480/any" /></a></li>
            </ul>
      </div>

        <div class="small-12 medium-6 large-3 columns">
            <ul data-clearing>
                <li><a href="gallery/web/image4.jpg"><img data-caption="" src="http://placeimg.com/640/480/any" /></a></li>
            </ul>
      </div>
</div><!--row-->

Hope this helps.