influxweb
8/15/2016 - 7:26 PM

ITCSS Flexbox Grid Object

ITCSS Flexbox Grid Object

//
// s-breakpoints.scss
// Simply defines a key and min-width for each dimension to respond at
//
$breakpoints: (sm: 480px, md: 640px, lg: 960px);

//
// o-grid.scss
// Defines our grid object, no styling beyond layout
//
.o-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;

  &__cell {
    min-width: 100%;
    max-width: 100%;
    flex: 1 1 100%;

    @mixin grid-size($numerator, $denominator) {
      $min-width: (100% / (($denominator + 1) / $numerator)) + 1%;
      $max-width: 100% / ($denominator / $numerator);
      min-width: $min-width;
      max-width: $max-width;
      flex-basis: $min-width;
    }

    $fractions: (1,2), (1,3), (2, 3), (3, 4), (1,4);
    @each $numerator, $denominator in $fractions {
      &--#{$numerator}\/#{$denominator} {
        @include grid-size($numerator, $denominator);

        @each $key, $size in $breakpoints {
          @media (min-width: $size) {
            &\@#{$key} { @include grid-size($numerator, $denominator); }
          }
        }
      }
    }
  }
}

//
// u-order.scss
// Defines our order utility classes to re-order columns for different browser sizes
//
@for $number from 1 through 10 {
  .u-order-#{$number} {
    order: $number;

    @each $key, $size in $breakpoints {
      @media (min-width: $size) {
        &\@#{$key} { order: $number }
      }
    }
  }
}

//
// ignore.scss
// This is purely for demo purposes, do not include
//
body {
  font: 14px/1.25 helvetica neue, helvetica, sans-serif;
  background: #f7f7f7;
}
h3 {
  font-size: 16px;
  font-weight: bold;
}
.o-grid {
  background: #fff;
  box-sizing: border-box;
  
  & & {
    margin: -6px;
    background: rgba(0,0,0,0.1);
  }
  
  &__cell {
    box-sizing: border-box;
    border: 1px solid #999;
    padding: 5px;

    @for $number from 1 through 10 {
      &:nth-child(#{$number}) {
        background-color: rgba(0,0,0,(0.1 * $number));
      }
    }
  }
}
<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  <link rel="stylesheet" href="main.css" />
  <title>ITCSS Grid Example</title>
</head>
<body>

<h3>Example of combining halfs and quarters</h3>

<div class="o-grid">

  <div class="o-grid__cell o-grid__cell--1/2@md">
    o-grid__cell o-grid__cell--1/2@md
  </div>

  <div class="o-grid__cell o-grid__cell--1/2@sm o-grid__cell--1/4@md">
    o-grid__cell o-grid__cell--1/2@sm o-grid__cell--1/4@md
  </div>

  <div class="o-grid__cell o-grid__cell--1/2@sm o-grid__cell--1/4@md">
    o-grid__cell o-grid__cell--1/2@sm o-grid__cell--1/4@md
  </div>

</div>
  
<h3>Example of nested grid</h3>

<div class="o-grid">

  <div class="o-grid__cell o-grid__cell--1/2@md">
    <div class="o-grid">

      <div class="o-grid__cell o-grid__cell--1/2@md">
        o-grid__cell o-grid__cell--1/2@md
      </div>

      <div class="o-grid__cell o-grid__cell--1/2@md">
        o-grid__cell o-grid__cell--1/2@md
      </div>

    </div>
  </div>

  <div class="o-grid__cell o-grid__cell--1/2@sm o-grid__cell--1/4@md">
    o-grid__cell o-grid__cell--1/2@sm o-grid__cell--1/4@md
  </div>

  <div class="o-grid__cell o-grid__cell--1/2@sm o-grid__cell--1/4@md">
    o-grid__cell o-grid__cell--1/2@sm o-grid__cell--1/4@md
  </div>

</div>

<h3>Example of quarters</h3>

<div class="o-grid">

  <div class="o-grid__cell o-grid__cell--3/4@sm">
    o-grid__cell o-grid__cell--3/4@sm
  </div>

  <div class="o-grid__cell o-grid__cell--1/4@sm">
    o-grid__cell o-grid__cell--1/4@sm
  </div>

</div>

<h3>Example of thirds</h3>

<div class="o-grid">

  <div class="o-grid__cell o-grid__cell--1/3@sm">
    o-grid__cell o-grid__cell--1/3@sm
  </div>

  <div class="o-grid__cell o-grid__cell--2/3@sm">
    o-grid__cell o-grid__cell--2/3@sm
  </div>

</div>

<h3>Example of reordering based on screen size</h3>

<div class="o-grid">

  <div class="o-grid__cell o-grid__cell--1/2@md u-order-2@md">
    First when small, second (right) on medium<br />
    o-grid__cell o-grid__cell--1/2@md u-order-2@md
  </div>

  <div class="o-grid__cell o-grid__cell--1/2@md u-order-1@md">
    Second when small, first (left) on medium<br />
    o-grid__cell o-grid__cell--1/2@md u-order-1@md
  </div>

</div>

<h3>Example of multiple rows</h3>

<div class="o-grid">

  <div class="o-grid__cell o-grid__cell--1/2@sm o-grid__cell--1/4@lg">
    o-grid__cell o-grid__cell--1/2@sm o-grid__cell--1/4@lg
  </div>

  <div class="o-grid__cell o-grid__cell--1/2@sm o-grid__cell--1/4@lg">
    o-grid__cell o-grid__cell--1/2@sm o-grid__cell--1/4@lg
  </div>

  <div class="o-grid__cell o-grid__cell--1/2@sm o-grid__cell--1/4@lg">
    o-grid__cell o-grid__cell--1/2@sm o-grid__cell--1/4@lg
  </div>

  <div class="o-grid__cell o-grid__cell--1/2@sm o-grid__cell--1/4@lg">
    o-grid__cell o-grid__cell--1/2@sm o-grid__cell--1/4@lg
  </div>

</div>

</body>
</html>