Grid : Flex - A 12-column grid using flexbox

grid-flex-a-12-column-grid-using-flexbox.markdown

Grid : Flex - A 12-column grid using flexbox

Grid : Flex is a dead-simple, bare bones grid to help you get your layouts looking sharp very quickly. It only cares about laying out your content, so you can style your website or application however you like, without having to worry about creating a custom grid system.

A Pen by Pablo on CodePen.

License.

index.html

<div class="hero">
  <h1>Grid : Flex</h1>
  <p><strong>A bare-bones 12-column grid</strong></p>
</div>
<div class="flex-container">

  <div class="about">
    <p><strong>Grid : Flex</strong> is a dead-simple, bare bones grid to help you get your layouts looking sharp very quickly. It only cares about laying out your content, so you can style your website or application however you like, without having to worry about creating a custom grid system.</p>

    <p>It's a 12 column grid, with sizing classes available for elements spanning 1 through 12 columns, so you can easily mix and match column sizes. If you don't don't need all 12 columns, it provides helper classes to center or right align your columns.</p>

    <h2>How to Use</h2>

    <p>Simply create a wrapper element with a <code>.flex-row</code> class. Place your column elements inside and give each a class of <code>.flex-col-{breakpoint}-{column-width}</code>, where <code>{breakpoint}</code> is the size at which the grid will collapse to full-width (see Breakpoint Sizes below) and <code>{column-width}</code> is the number of horizontal columns that the element will occupy.</p>

    <p>For example, if you want to create a three-column row that will stack vertically at the medium breakpoint size, your markup would look like this...</p>

<pre><code>&lt;div class="flex-row"&gt;
  &lt;div class="flex-col-md-4"&gt;
    &lt;h3&gt;I'm the first element&lt;/h3&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="flex-col-md-4"&gt;
    &lt;h3&gt;I'm the second element&lt;/h3&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="flex-col-md-4"&gt;
    &lt;h3&gt;I'm the third element&lt;/h3&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>
    
    <p>...which creates this:</p>
    
    <div class="flex-row">
      <div class="flex-col-md-4">
        <h3>I'm the first element</h3>
        <p>Lorem ipsum dolor sit amet</p>
      </div>
      <div class="flex-col-md-4">
        <h3>I'm the second element</h3>
        <p>Lorem ipsum dolor sit amet</p>
      </div>
      <div class="flex-col-md-4">
        <h3>I'm the third element</h3>
        <p>Lorem ipsum dolor sit amet</p>
      </div>
    </div>

    <h3>Breakpoint Sizes</h3>

    <p>
    <strong>xs</strong> = 540px<br>
    <strong>sm</strong> = 768px<br>
    <strong>md</strong> = 992px<br>
    <strong>lg</strong> = 1200px<br>
    </p>

    <h2>Getting Started</h2>

    <p>While the grid is fully functional, this is still a work in progress. Right now, the best way to get going would be to copy the <a href="https://codepen.io/dgca/pen/QExbKN.scss" target="_blank">SCSS</a> or complied <a href="https://codepen.io/dgca/pen/QExbKN.css" target="_blank">CSS</a> in this Pen and add it to your project. I'm working on making the installation process as painless as possible, as soon as possible!</p>
    
    <h2>Sample Grid</h2>
  </div>

  <div class="flex-row">
    <div class="flex-col-sm-1">flex-col-sm-1</div>
    <div class="flex-col-sm-1">flex-col-sm-1</div>
    <div class="flex-col-sm-1">flex-col-sm-1</div>
    <div class="flex-col-sm-1">flex-col-sm-1</div>
    <div class="flex-col-sm-1">flex-col-sm-1</div>
    <div class="flex-col-sm-1">flex-col-sm-1</div>
    <div class="flex-col-sm-1">flex-col-sm-1</div>
    <div class="flex-col-sm-1">flex-col-sm-1</div>
    <div class="flex-col-sm-1">flex-col-sm-1</div>
    <div class="flex-col-sm-1">flex-col-sm-1</div>
    <div class="flex-col-sm-1">flex-col-sm-1</div>
    <div class="flex-col-sm-1">flex-col-sm-1</div>
  </div>
  <div class="flex-row">
    <div class="flex-col-sm-2">flex-col-sm-2</div>
    <div class="flex-col-sm-2">flex-col-sm-2</div>
    <div class="flex-col-sm-2">flex-col-sm-2</div>
    <div class="flex-col-sm-2">flex-col-sm-2</div>
    <div class="flex-col-sm-2">flex-col-sm-2</div>
    <div class="flex-col-sm-2">flex-col-sm-2</div>
  </div>
  <div class="flex-row">
    <div class="flex-col-sm-3">flex-col-sm-3</div>
    <div class="flex-col-sm-3">flex-col-sm-3</div>
    <div class="flex-col-sm-3">flex-col-sm-3</div>
    <div class="flex-col-sm-3">flex-col-sm-3</div>
  </div>
  <div class="flex-row">
    <div class="flex-col-sm-4">flex-col-sm-4</div>
    <div class="flex-col-sm-4">flex-col-sm-4</div>
    <div class="flex-col-sm-4">flex-col-sm-4</div>
  </div>
  <div class="flex-row">
    <div class="flex-col-sm-2">flex-col-sm-2</div>
    <div class="flex-col-sm-5">flex-col-sm-5</div>
    <div class="flex-col-sm-5">flex-col-sm-5</div>
  </div>
  <div class="flex-row">
    <div class="flex-col-sm-6">flex-col-sm-6</div>
    <div class="flex-col-sm-6">flex-col-sm-6</div>
  </div>
  <div class="flex-row">
    <div class="flex-col-sm-12">flex-col-sm-12</div>
  </div>
</div>
<footer>
  <p>A work in progress by <a href="http://dancort.es/" target="_blank">Dan Cortes</a></p>
</footer>

<style>
  :root {
    color: #2E282A;
    font-family: 'Open Sans';
  }
  
  body {
    background-color: #EFF1F3;
  }
  
  .hero {
    background-color: #17BEBB;
    border-bottom: 0.5em solid #2E282A;
    color: #2E282A;
    text-align: center;
    margin-bottom: 2em;
    padding: 4.5em 2em;
  }
  
  .hero p {
    margin-bottom: 0;
  }
  
  h1 {
    font-family: 'Roboto Slab';
    font-size: 64px;
    margin: 0 0 0.25em;
  }
  
  @media screen and (max-width: 768px) {
    h1 {
      font-size: 48px;
    }
  }
  
  p {
    margin: 0 auto 2em;
  }
  
  p code {
    background-color: #FFD6E0;
    border: 1px solid #FF7093;
    border-radius: 0.2em;
    padding: 0.15em 0.25em;
  }
  
  a {
    color: #10778C;
  }
  
  pre {
    background-color: #FFF4F7;
    border: 1px solid #FFD6E0;
    border-radius: 0.2em;
    padding: 0.5em 0.75em;
  }
  
  .about {
    margin: 0 auto;
    max-width: 60ch;
  }

  [class^='flex-col'] {
    background-color: #FFD6E0;
    border: 1px dotted #FF7093;
    text-align: center;
  }
  
  footer {
    background-color: #2E282A;
    color: #EFF1F3;
    margin-top: 4em;
    padding: 4em 2em;
    text-align: center;
  }
  
  footer p {
    margin: 0;
  }
  
  footer a {
    color: #17BEBB;
  }
</style>

style.scss

$device-xs: 540px;
$device-sm: 768px;
$device-md: 992px;
$device-lg: 1200px;

.flex-container {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 1em;

  @media (min-width: $device-xs) {
    max-width: $device-xs;
  }

  @media (min-width: $device-sm) {
    max-width: $device-sm;
  }

  @media (min-width: $device-md) {
    max-width: $device-md;
  }

  @media (min-width: $device-lg) {
    max-width: $device-lg;
  }
}

.flex-row {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1em;
}

.flex-row--align-v-center {
  align-items: center;
}

.flex-row--align-v-bottom {
  align-items: flex-end;
}

.flex-row--align-h-center {
  justify-content: center;
}

.flex-row--align-h-right {
  justify-content: flex-end;
}

.flex-row--reverse {
  flex-direction: row-reverse;
}

@for $i from 1 through 12 {
  .flex-col-xs-#{$i},
  .flex-col-sm-#{$i},
  .flex-col-md-#{$i},
  .flex-col-lg-#{$i} {
    box-sizing: border-box;
    padding: 1em;
    width: 100%;
  }

  .flex-col-xs-#{$i} {
    @media (min-width: $device-xs) {
      width: calc(100% * (#{$i} / 12));
    }
  }

  .flex-col-sm-#{$i} {
    @media (min-width: $device-sm) {
      width: calc(100% * (#{$i} / 12));
    }
  }

  .flex-col-md-#{$i} {
    @media (min-width: $device-md) {
      width: calc(100% * (#{$i} / 12));
    }
  }

  .flex-col-lg-#{$i} {
    @media (min-width: $device-lg) {
      width: calc(100% * (#{$i} / 12));
    }
  }
}