<!DOCTYPE html> <html class=“debug”>

<head>
  <title>Grid - IRFS Components</title>
  <link rel="stylesheet" href="../../bower_components/normalize-css/normalize.css">
  <link rel="stylesheet" href="grid.css">
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    header {
      display: block;
      height: 33px;
      line-height: 33px;
    }

    .logo {
      display: inline-block;
      vertical-align: top;
    }

    .logo:before {
      content: " ";
      display: inline-block;
      width: 74px;
      height: 21px;
      vertical-align: middle;
      background-color: #000;
    }

    header .group {
      display: none;
      margin: 0;
      line-height: 33px;
    }

    header > .logo {
      display: inline-block !important;
    }

    /* Group 1 */
    @media (max-width: 399px) {
      header .group-1 {
        display: inline-block;
      }
    }

    /* Group 2 */
    @media (min-width: 400px) and (max-width: 599px) {
      header .group-2 {
        display: inline-block;
      }
    }

    /* Group 3 */
    @media (min-width: 600px) and (max-width: 1007px) {
      header .group-3 {
        display: inline-block;
      }
    }

    /* Group 4b - flexible */
    @media (min-width: 1008px) and (max-width: 1280px) {
      header .group-4 {
        display: inline-block;
      }
    }

    /* Group 4a - fixed */
    @media (min-width: 1281px) {
      header .group-5 {
        display: inline-block;
      }
    }
  </style>
</head>
<body>
  <div class="grid">
    <div class="grid-row">
      <header class="grid-col grid-12">
          <span class="logo"></span>
          <h2 class="group group-1">Group 1</h2>
          <h2 class="group group-2">Group 2</h2>
          <h2 class="group group-3">Group 3</h2>
          <h2 class="group group-4">Group 4 (fluid)</h2>
          <h2 class="group group-5">Group 5 (fixed)</h2>
      </header>
    </div><!-- .grid-row -->
  </div><!-- .grid -->

  <h2>Normal grid</h2>
  <div class="grid">
    <div class="grid-row">
      <div class="grid-col grid-12">
        <span>12</span>
      </div>
    </div><!-- .grid-row -->

    <div class="grid-row">
      <div class="grid-col grid-6">
        <span>6</span>
      </div>
      <div class="grid-col grid-6">
        <span>6</span>
      </div>
    </div><!-- .grid-row -->

    <div class="grid-row">
      <div class="grid-col grid-1"><span>1</span></div>
      <div class="grid-col grid-1"><span>1</span></div>
      <div class="grid-col grid-1"><span>1</span></div>
      <div class="grid-col grid-1"><span>1</span></div>
      <div class="grid-col grid-1"><span>1</span></div>
      <div class="grid-col grid-1"><span>1</span></div>
      <div class="grid-col grid-2"><span>2</span></div>
      <div class="grid-col grid-2"><span>2</span></div>
      <div class="grid-col grid-2"><span>2</span></div>
    </div><!-- .grid-row -->
  </div><!-- .grid -->

  <h2>Grid with bleed</h2>
  <div class="grid grid-bleed">
    <div class="grid-row">
      <div class="grid-col grid-12">
        <span>12</span>
      </div>
    </div><!-- .grid-row -->

    <div class="grid-row">
      <div class="grid-col grid-6">
        <span>6</span>
      </div>
      <div class="grid-col grid-6">
        <span>6</span>
      </div>
    </div><!-- .grid-row -->
  </div><!-- .grid -->
</body>

</html>