Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Our mobile first grid mixins for Foundation 4.0. Comments welcome.
<!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);
}
}
@bmatzner

This comment has been minimized.

Copy link

commented Jan 10, 2013

Love it!

@michaelryancaputo

This comment has been minimized.

Copy link

commented Jan 10, 2013

I might have to play with this later today!

@hatefulcrawdad

This comment has been minimized.

Copy link
Owner Author

commented Jan 10, 2013

Thanks guys!

@steveluscher

This comment has been minimized.

Copy link

commented Aug 18, 2013

I have some questions about the semantic-grid approach in general, detailed here: zurb/foundation-sites#3049

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.