Item grid is a content-agnostic responsive scaffold. Used in conjunction with grid-marionette, it allows designers to quickly build responsive layouts with many variations

The Scaffold

<ul class="item-grid _responsive-classes_">   <li class="grid-item">     <p>Item 1.<br />     This can be anything. You can use marionette classes here to further control how the item content responds.</p>   </li><!-- /grid-item -->   <li class="grid-item">     <p>Item 2.<br />     This can be anything. You can use marionette classes here to further control how the item content responds.</p>   </li><!-- /grid-item -->   <li class="grid-item">     <p>Item 3.<br />     This can be anything. You can use marionette classes here to further control how the item content responds.</p>   </li><!-- /grid-item --> </ul><!-- /item-grid -->

Example with a link white-box

<div class="item-grid _responsive-classes_">   <a class="grid-item white-box" href="#self-reference">     <p>Item 1.<br />     This can be anything. You can use marionette classes here to further control how the item content responds.</p>   </a><!-- /grid-item -->   <a class="grid-item white-box" href="#self-reference">     <p>Item 2.<br />     This can be anything. You can use marionette classes here to further control how the item content responds.</p>   </a><!-- /grid-item -->   <a class="grid-item white-box" href="#self-reference">     <p>Item 3.<br />     This can be anything. You can use marionette classes here to further control how the item content responds.</p>   </a><!-- /grid-item --> </div><!-- /item-grid -->

Example with a div container

<div class="item-grid _responsive-classes_">   <div class="grid-item">     <p>Item 1.<br />     This can be anything. You can use marionette classes here to further control how the item content responds.</p>   </div><!-- /grid-item -->   <div class="grid-item">     <p>Item 2.<br />     This can be anything. You can use marionette classes here to further control how the item content responds.</p>   </div><!-- /grid-item -->   <div class="grid-item">     <p>Item 3.<br />     This can be anything. You can use marionette classes here to further control how the item content responds.</p>   </div><!-- /grid-item --> </div><!-- /item-grid -->


Responsive Grid Definitions

By Adding breakpoint specific grid definitions to the item-grid parent, you can control where the item grid breaks. These classes are:

  1. Prefix
    • mobi-
    • phablet-
    • tablet-
    • desktop-
    • wide-
  2. Suffix
    • 1-narrow
    • 1-thin
    • 1-grid
    • 2-grid
    • 3-grid
    • 4-grid
    • 5-grid
    • 6-grid
    • 7-grid
    • 8-grid
  3. Examples
    • mobi-1-narrow
    • phablet-1-grid
    • tablet-2-grid
    • desktop-6-grid
    • wide-2-grid
    • tablet-5-grid

Helper classes

you can add white-box to any grid-item to enclose it in a white background with padding.

Examples

Example 1: Narrow 2-column white box, growing to 3 columns on phablet, 5 on tablet, 6 on desktop, and 7 on wide.

<ul class="item-grid mobi-2-grid phablet-3-grid tablet-5-grid desktop-6-grid wide-7-grid">

  • Item 1.
  • Item 2.
  • Item 3.
  • Item 4.
  • Item 5.
  • Item 6.
  • Item 7.
  • Item 8.
  • Item 9.
  • Item 10.

Example 2: You can combine this grid with marionette classes for more responsiveness. This example is a 1-column stacked image, growing to 2 columns stacked on phablet, 2 side-by-side on tablet, 4 stacked on desktop, and back to 3 side-by-side on wide.

<ul class="item-grid mobi-1-narrow phablet-2-grid tablet-2-grid desktop-4-grid wide-3-grid">   <li class="grid-item">     <div class="columns twelve tablet-5 wide-5"><img src="http://placehold.it/400x400" alt="placeholder"></div>     <div class="columns twelve tablet-7-omega wide-7-omega"><p>Item 4. This can be anything. You can use marionette classes here to further control how the item content responds.</p></div>   </li><!-- /grid-item --> </ul><!-- /item-grid -->

  • placeholder

    Item 1. This can be anything. You can use marionette classes here to further control how the item content responds.

  • placeholder

    Item 2. This can be anything. You can use marionette classes here to further control how the item content responds.

  • placeholder

    Item 3. This can be anything. You can use marionette classes here to further control how the item content responds.

  • placeholder

    Item 4. This can be anything. You can use marionette classes here to further control how the item content responds.

  • placeholder

    Item 5. This can be anything. You can use marionette classes here to further control how the item content responds.

  • placeholder

    Item 6. This can be anything. You can use marionette classes here to further control how the item content responds.

  • placeholder

    Item 7. This can be anything. You can use marionette classes here to further control how the item content responds.

  • placeholder

    Item 8. This can be anything. You can use marionette classes here to further control how the item content responds.