hatefulcrawdad/foundation4-semantic-grid.html

## foundation4-semantic-grid.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>Foundation Semantic Grid Testing</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>

  <nav>
    <img src="http://placehold.it/300x100">
    <ul>
      <li>Links</li>
    </ul>
  </nav>

  <section id="hero">
    <div class="news">
      <img src="http://placehold.it/330x300">
      <p>News</p>
    </div>
    <div class="latest">
      <img src="http://placehold.it/330x300">
      <p>Latest</p>
    </div>
    <div class="promo">
      <img src="http://placehold.it/330x300">
      <p>Promos</p>
    </div>
  </section>

  <ul id="logos">
    <li><img src="http://placehold.it/300x300"></li>
    <li><img src="http://placehold.it/300x300"></li>
    <li><img src="http://placehold.it/300x300"></li>
    <li><img src="http://placehold.it/300x300"></li>
    <li><img src="http://placehold.it/300x300"></li>
    <li><img src="http://placehold.it/300x300"></li>
  </ul>

  <section id="callUs">
    <a href="#">1.800.888.1243</a>
  </section>

</body>
</html>

## styles.scss
* { box-sizing: border-box; }
body { margin: 0; padding: 0; background: white; font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-weight: normal; font-style: normal; font-size: 16px; line-height: 1.5; color: #222222; position: relative; -webkit-font-smoothing: antialiased; }
ul { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
p { margin-top: 0; }

// Clearfix mixin
@mixin clearfix() { *zoom:1;
  &:before, &:after { content: " "; display: table; }
  &:after { clear: both; }
}

// Grid Calculation for Percentages
@function gridCalc($colNumber, $totalColumns) {
  @return percentage(($colNumber / $totalColumns));
}

// Function for calculating em values
@function emCalc($pxWidth) {
  @return ($pxWidth / $emBase) + em;
}

// Variables pertaining to Grid
$emBase: 16px !default;
$rowWidth: 62.5em !default; // 1000px / 16px = 62.5em
$columnGutter: 1.875em !default; // 30px / 16px = 1.875em
$totalColumns: 12 !default;
$defaultFloat: left !default;
$defaultOpposite: right !default;

// Media Queries
$largeScreen: emCalc(768px) !default;
$smallScreen: emCalc(767px) !default;

$smallBreakPoint: "only screen and (max-width:"#{$smallScreen}")" !default;
$largeBreakPoint: "only screen and (min-width:"#{$largeScreen}")" !default;


//
// Semantic Grid
//
// For creating container, nested, and collapsed rows.
@mixin gridRow($behavior: false) {

  // use @include gridRow(nest); to include a nested row
  @if $behavior == nest {
    width: auto;
    margin: 0 (-($columnGutter/2));
    max-width: none;
  }

  // use @include gridRow(collapse); to collapsed a container row margins
  @else if $behavior == collapse {
    width: 100%;
    margin: 0;
    max-width: $rowWidth;
  }

  // use @include gridRow(nest-collapse); to collapse outer margins on a nested row
  @else if $behavior == nest-collapse {
    width: auto;
    margin: 0;
    max-width: none;
  }

  // use @include gridRow(); to use a container row
  @else {
    width: 100%;
    margin: 0 auto;
    max-width: $rowWidth;
  }

  // Clearfix for all rows
  @include clearfix();

}

// For creating columns - @include these inside a media query to control small vs. large grid layouts
@mixin gridCol($columns:false, $lastCol:false, $center:false, $offset:false, $push:false, $pull:false, $collapse:false) {

  // Default positioning
  position: relative;

  // Gutter padding whenever a column isn't set to collapse
  @if $collapse == false {
    padding-left: $columnGutter / 2;
    padding-right: $columnGutter / 2;
  }

  // If a column number is given, calculate width
  @if $columns {
    width: gridCalc($columns, $totalColumns);

    // If last column, float naturally instead of to the right
    @if $lastCol { float: $defaultOpposite; }

    // If centered, get rid of float and add appropriate margins
    @else if $center { float: none !important; margin: 0 auto; }

    // If offset, calculate appropriate margins
    @else if $offset { margin-#{$defaultFloat}: gridCalc($offset, $totalColumns); }

    // if collapsed, get rid of gutter padding
    @else if $collapse { padding-left: 0; padding-right: 0; }

    // Source Ordering, adds left/right depending on which you use.
    @else if $push { #{$defaultFloat}: gridCalc($push, $totalColumns); #{$defaultOpposite}: auto; }
    @else if $pull { #{$defaultOpposite}: gridCalc($pull, $totalColumns); #{$defaultFloat}: auto; }

    // default float for columns
    @else { float: $defaultFloat; }
  }

  // Mobile first columns
  @else {
    float: none;
    width: 100%;
  }

}


// Mobile First Styles
nav,
#hero,
#logos,
#callUs {
  @include gridRow;
}

nav {
  margin-bottom: 30px;

  img {
    @include gridCol;
    text-align: center;
  }

  ul {
    @include gridCol;
    list-style: none;
    li { background: #eee; }
  }
}

#hero {
  .news, .latest, .promo {
    @include gridCol;
  }
}

#logos {
  list-style: none;

  li { @include gridCol; }
}

#callUs {
  text-align: center;
  margin-top: 40px;

  a { @include gridCol; }
}

// Small Screens that support media queries
@media #{$smallBreakPoint} {

  #hero {
    .news, .latest{
      @include gridCol($columns:4);
    }
    .promo {
      @include gridCol;
    }
  }

  #logos li {
    @include gridCol($columns:2);
  }

}

// Large Screens that support media queries
@media #{$largeBreakPoint} {

  nav {
    img {
      @include gridCol($columns:3);
    }
    ul {
      @include gridCol($columns:9);
    }
  }

  #hero {
    .news, .latest, .promo {
      @include gridCol($columns:4);
    }
  }

  #logos li {
    @include gridCol($columns:2);
  }

}
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width" />
	<title>Foundation Semantic Grid Testing</title>
	<link rel="stylesheet" href="styles.css">
	</head>

	<body>

	<nav>
	<img src="http://placehold.it/300x100">
	<ul>
	<li>Links</li>
	</ul>
	</nav>

	<section id="hero">
	<div class="news">
	<img src="http://placehold.it/330x300">
	<p>News</p>
	</div>
	<div class="latest">
	<img src="http://placehold.it/330x300">
	<p>Latest</p>
	</div>
	<div class="promo">
	<img src="http://placehold.it/330x300">
	<p>Promos</p>
	</div>
	</section>

	<ul id="logos">
	<li><img src="http://placehold.it/300x300"></li>
	<li><img src="http://placehold.it/300x300"></li>
	<li><img src="http://placehold.it/300x300"></li>
	<li><img src="http://placehold.it/300x300"></li>
	<li><img src="http://placehold.it/300x300"></li>
	<li><img src="http://placehold.it/300x300"></li>
	</ul>

	<section id="callUs">
	<a href="#">1.800.888.1243</a>
	</section>

	</body>
	</html>
	* { box-sizing: border-box; }
	body { margin: 0; padding: 0; background: white; font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-weight: normal; font-style: normal; font-size: 16px; line-height: 1.5; color: #222222; position: relative; -webkit-font-smoothing: antialiased; }
	ul { margin: 0; padding: 0; }
	img { max-width: 100%; height: auto; display: block; }
	p { margin-top: 0; }

	// Clearfix mixin
	@mixin clearfix() { *zoom:1;
	&:before, &:after { content: " "; display: table; }
	&:after { clear: both; }
	}

	// Grid Calculation for Percentages
	@function gridCalc($colNumber, $totalColumns) {
	@return percentage(($colNumber / $totalColumns));
	}

	// Function for calculating em values
	@function emCalc($pxWidth) {
	@return ($pxWidth / $emBase) + em;
	}

	// Variables pertaining to Grid
	$emBase: 16px !default;
	$rowWidth: 62.5em !default; // 1000px / 16px = 62.5em
	$columnGutter: 1.875em !default; // 30px / 16px = 1.875em
	$totalColumns: 12 !default;
	$defaultFloat: left !default;
	$defaultOpposite: right !default;

	// Media Queries
	$largeScreen: emCalc(768px) !default;
	$smallScreen: emCalc(767px) !default;

	$smallBreakPoint: "only screen and (max-width:"#{$smallScreen}")" !default;
	$largeBreakPoint: "only screen and (min-width:"#{$largeScreen}")" !default;


	//
	// Semantic Grid
	//
	// For creating container, nested, and collapsed rows.
	@mixin gridRow($behavior: false) {

	// use @include gridRow(nest); to include a nested row
	@if $behavior == nest {
	width: auto;
	margin: 0 (-($columnGutter/2));
	max-width: none;
	}

	// use @include gridRow(collapse); to collapsed a container row margins
	@else if $behavior == collapse {
	width: 100%;
	margin: 0;
	max-width: $rowWidth;
	}

	// use @include gridRow(nest-collapse); to collapse outer margins on a nested row
	@else if $behavior == nest-collapse {
	width: auto;
	margin: 0;
	max-width: none;
	}

	// use @include gridRow(); to use a container row
	@else {
	width: 100%;
	margin: 0 auto;
	max-width: $rowWidth;
	}

	// Clearfix for all rows
	@include clearfix();

	}

	// For creating columns - @include these inside a media query to control small vs. large grid layouts
	@mixin gridCol($columns:false, $lastCol:false, $center:false, $offset:false, $push:false, $pull:false, $collapse:false) {

	// Default positioning
	position: relative;

	// Gutter padding whenever a column isn't set to collapse
	@if $collapse == false {
	padding-left: $columnGutter / 2;
	padding-right: $columnGutter / 2;
	}

	// If a column number is given, calculate width
	@if $columns {
	width: gridCalc($columns, $totalColumns);

	// If last column, float naturally instead of to the right
	@if $lastCol { float: $defaultOpposite; }

	// If centered, get rid of float and add appropriate margins
	@else if $center { float: none !important; margin: 0 auto; }

	// If offset, calculate appropriate margins
	@else if $offset { margin-#{$defaultFloat}: gridCalc($offset, $totalColumns); }

	// if collapsed, get rid of gutter padding
	@else if $collapse { padding-left: 0; padding-right: 0; }

	// Source Ordering, adds left/right depending on which you use.
	@else if $push { #{$defaultFloat}: gridCalc($push, $totalColumns); #{$defaultOpposite}: auto; }
	@else if $pull { #{$defaultOpposite}: gridCalc($pull, $totalColumns); #{$defaultFloat}: auto; }

	// default float for columns
	@else { float: $defaultFloat; }
	}

	// Mobile first columns
	@else {
	float: none;
	width: 100%;
	}

	}


	// Mobile First Styles
	nav,
	#hero,
	#logos,
	#callUs {
	@include gridRow;
	}

	nav {
	margin-bottom: 30px;

	img {
	@include gridCol;
	text-align: center;
	}

	ul {
	@include gridCol;
	list-style: none;
	li { background: #eee; }
	}
	}

	#hero {
	.news, .latest, .promo {
	@include gridCol;
	}
	}

	#logos {
	list-style: none;

	li { @include gridCol; }
	}

	#callUs {
	text-align: center;
	margin-top: 40px;

	a { @include gridCol; }
	}

	// Small Screens that support media queries
	@media #{$smallBreakPoint} {

	#hero {
	.news, .latest{
	@include gridCol($columns:4);
	}
	.promo {
	@include gridCol;
	}
	}

	#logos li {
	@include gridCol($columns:2);
	}

	}

	// Large Screens that support media queries
	@media #{$largeBreakPoint} {

	nav {
	img {
	@include gridCol($columns:3);
	}
	ul {
	@include gridCol($columns:9);
	}
	}

	#hero {
	.news, .latest, .promo {
	@include gridCol($columns:4);
	}
	}

	#logos li {
	@include gridCol($columns:2);
	}

	}