Foundation Block Grids Extended

Foundation Block Grids Extended

Foundation Block Grids Extended
--------------------


Describe your own breakpoints and names
Use them to create Block Grids from Foundation 

The crazier your grid, the crazier the CSS

index.html

<ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-6 xl-block-grid-4">
  <li>000001</li>
  <li>000002</li>
  <li>000003</li>
  <li>000004</li>
  <li>000005</li>
  <li>000006</li>
  <li>000007</li>
  <li>000008</li>
  <li>000009</li>
</ul>

style.scss

/* Below Variables added to make this work in Codepen, individually, without including Foundation
* http://codepen.io/rvinay88/pen/Gbvua
*/
@import "compass";
@mixin clearfix {
  clear: both;
}
$default-float: left;
$include-html-classes: true;
/*End Variable Declaration*/

//
// Block Grid Variables
//
$include-html-grid-classes: $include-html-classes !default;

// We use this to control the maximum number of block grid elements per row
$block-grid-elements: 12 !default;
$block-grid-default-spacing: 10px !default;

// Enables media queries for block-grid classes. Set to false if writing semantic HTML.
$block-grid-media-queries: true !default;

//
// Block Grid Mixins
//

// We use this mixin to create different block-grids. You can apply per-row and spacing options.
// Setting $base-style to false will ommit default styles.
@mixin block-grid($per-row:false, $spacing:$block-grid-default-spacing, $base-style:true) {

  @if $base-style {
    display: block;
    padding: 0;
    margin: 0 ($spacing/2);
    @include clearfix;

    &>li {
      display: inline;
      height: auto;
      float: $default-float;
      padding: 0 ($spacing/2) $spacing;
    }
  }

  @if $per-row {
    &>li {
      width: 100%/$per-row;
      padding: 0 ($spacing/2) $spacing;

      &:nth-of-type(n) { clear: none; }
      &:nth-of-type(#{$per-row}n+1) { clear: both; }
    }
  }


}

@if $include-html-grid-classes {
  /* Foundation Block Grids for below small breakpoint */
  
  /* Add your media query names and breakpoints here */

  $breakingpoint-names:  xs, small, medium, large, xl;
  $breakingpoint-widths: 320px, 500px, 768px, 1024px, 1200px;

  $bp-prev: false;
  $query: ();
  
  @for $bp-name from 1 through length($breakingpoint-names) {
   
     $name:  nth($breakingpoint-names, $bp-name); 
     $width: nth($breakingpoint-widths, $bp-name); 
     $query: " screen and (min-width: #{$width})";
     
     /* Mobile First Styles */
    
     @if ($bp-name == 1) {
      @media only screen {
        [class*="block-grid-"] { @include block-grid; }
      
        @for $i from 1 through $block-grid-elements {
          .#{$name}-block-grid-#{($i)} {
            @include block-grid($i,$block-grid-default-spacing,false);
          }
        }
      }
    }

  /* Extending styles for >mobile breakpoint */

    @else {
      @media #{$query}
      {
        @for $i from 1 through $block-grid-elements {
          $a: nth($breakingpoint-names, $bp-name);
          .#{$a}-block-grid-#{$i} {
            @include block-grid($i,$block-grid-default-spacing,false);
          }
        }
        @each $bpn in $breakingpoint-names {
          @if $bpn != $name {
            @for $j from 1 through $block-grid-elements {
              .#{$bpn}-block-grid-#{$j} > li:nth-of-type(#{$j}n+1) { clear: none; }
            }
          }
        }
      }
    }
  }
}