Skip to content

Instantly share code, notes, and snippets.

@CristinaSolana
Created February 20, 2013 17:24
Show Gist options
  • Save CristinaSolana/4997286 to your computer and use it in GitHub Desktop.
Save CristinaSolana/4997286 to your computer and use it in GitHub Desktop.
Simple Responsive Grid - Simple SASS mixin generating a grid with nesting and offseting enabled for super quick prototypes. To do: properly clear first in row A CodePen by Cristina Solana
<div class="container">
<header>
<code>
.mod--foo {
@include column-span(6, 3);
}
<br>// $column-count, $offset[optional]
<br>// To do: properly clear first in row
</code>
</header>
<section>
<div class="mod--foo">
<code>.mod--foo</code>
</div>
<div class="mod--bar">
<code>.mod--bar</code>
</div>
</section>
<section>
<div class="mod--one">
<code>.mod--one</code>
</div>
<div class="mod--two">
<code>.mod--two</code>
</div>
<div class="mod--three">
<code>.mod--three</code>
</div>
<div class="mod--four">
<code>.mod--four</code>
</div>
<div class="mod--five">
<code>.mod--five</code>
</div>
<div class="mod--six">
<code>.mod--six</code>
</div>
<div class="mod--seven">
<code>.mod--seven</code>
</div>
<div class="mod--eight">
<code>.mod--eight</code>
</div>
<div class="mod--nine">
<code>.mod--nine</code>
</div>
<div class="mod--ten">
<code>.mod--ten</code>
</div>
<div class="mod--eleven">
<code>.mod--eleven</code>
</div>
<div class="mod--twelve">
<code>.mod--twelve</code>
</div>
</section>
</div>
@import "compass";
// Aesthetics
body { font-family: sans-serif; }
.container { padding: 2em }
header { box-sizing: border-box; margin-bottom: 1em; padding: 1em; background-color: #eee; }
code { font-family: monospace; }
// Variables
$total-columns: 12; // No. of Columns
$margins: 1%; // Column Margins: left and right
$padding: 1%; // Column padding
// Mixin
@mixin column-span($column-span, $push:0) {
$grid-width: 100%;
$column-calc: ($grid-width / $total-columns * $column-span);
$column-width: $column-calc - ($margins * 2);
$offset: ($column-calc) / ($column-span) * $push + $margins;
@include box-sizing(border-box);
// MARGINS NEED TO BE ADDED FOR OFFSET
float: left;
width: $column-width;
padding: $padding;
@if $push == 0 {
margin: $margins;
} @else {
margin: $margins;
margin-left: $offset;
}
// for testing only below
outline: 1px dashed #f06;
}
// Layout Test
// Mobile First
.mod--foo {
@include column-span(5)
}
.mod--bar {
@include column-span(7)
}
/* Start new row */
.mod--one {
@include column-span(6);
}
.mod--two {
@include column-span(6);
}
/* Start new row */
.mod--three {
@include column-span(4);
}
.mod--four {
@include column-span(4);
}
.mod--five {
@include column-span(4);
}
/* Start new row */
.mod--six {
@include column-span(3);
}
.mod--seven {
@include column-span(3);
}
.mod--eight {
@include column-span(3);
}
.mod--nine {
@include column-span(3);
}
/* Start new row */
.mod--ten {
@include column-span(12);
}
/* Start new row */
.mod--eleven {
@include column-span(9);
}
.mod--twelve {
@include column-span(3);
}
@media all and (min-width: (750/14)+em) {
.mod--foo {
@include column-span(5)
}
.mod--bar {
@include column-span(5, 2)
}
/* Start new row */
.mod--one {
@include column-span(3,1);
}
.mod--two {
@include column-span(4);
}
.mod--three {
@include column-span(3);
}
/* Start new row */
.mod--four {
@include column-span(3);
}
.mod--five {
@include column-span(2,1);
}
.mod--six {
@include column-span(2);
}
.mod--seven {
@include column-span(3,1);
}
/* Start new row */
.mod--eight {
@include column-span(6);
}
.mod--nine {
@include column-span(6);
}
/* Start new row */
.mod--ten {
@include column-span(3, 3);
}
.mod--eleven {
@include column-span(3);
}
/* Start new row */
.mod--twelve {
@include column-span(4, 4);
}
}
@tayel2000
Copy link

?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment