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 almost 6 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 almost 6 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 almost 6 years ago

Can you post the code?

Rafi Benkual almost 6 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 almost 6 years ago

Thanks Rafi!

It works for my block mixin!

Chad R. almost 6 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.