Skip to content

Instantly share code, notes, and snippets.

@tzi
Created November 24, 2014 23:05
Embed
What would you like to do?
Generated by SassMeister.com.
// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----
// Attributes
// ----------------------------------
$grid-default-column-count: 12 !default;
$grid-default-gutter-width: 20px !default;
// Utils
// ----------------------------------
@mixin clearFix() {
&:after {
content: "";
display: table;
clear: both;
}
}
@function get-cell-width($column-span, $column-count) {
@return $column-span * 100% / $column-count;
}
// Grid Container Mixins
// ----------------------------------
@mixin grid-container-gutter(
$gutter-width: $grid-default-gutter-width
) {
margin: (-0.5 * $gutter-width);
}
@mixin grid-container(
$gutter-width: $grid-default-gutter-width
) {
display: block;
@include grid-container-gutter($gutter-width);
@include clearFix();
}
// Grid Cell Mixins
// ----------------------------------
@mixin grid-cell-width(
$column-span: 1,
$column-count: $grid-default-column-count
) {
width: get-cell-width($column-span, $column-count);
}
@mixin grid-cell-gutter(
$gutter-width: $grid-default-gutter-width
) {
padding: (0.5 * $gutter-width);
}
@mixin grid-cell-flow(
$cell-flow: 'inline'
) {
@if $cell-flow == 'left' {
float: left;
margin-right: 0;
} @else if $cell-flow == 'right' {
float: right;
margin-right: 0;
} @else {
display: inline-block;
vertical-align: top;
margin-right: -0.25em;
}
}
@mixin grid-cell-push(
$column-offset: 1,
$column-count: $grid-default-column-count
) {
margin-left: get-cell-width($column-offset, $column-count);
}
@mixin grid-cell-pull(
$column-offset: 1,
$column-count: $grid-default-column-count
) {
margin-right: get-cell-width($column-offset, $column-count);
}
@mixin grid-cell(
$column-span: 1,
$column-count: $grid-default-column-count,
$gutter-width: $grid-default-gutter-width,
$cell-flow: 'inline'
){
@include grid-cell-flow($cell-flow);
@include grid-cell-width($column-span, $column-count);
@include grid-cell-gutter($gutter-width);
}
// Grid Generator Mixins
// ----------------------------------
@mixin grid-class-generator(
$column-count: $grid-default-column-count,
$gutter-width: $grid-default-gutter-width,
$class-prefix: "",
$class-suffix: ""
) {
@for $counter from 1 through $column-count {
.#{$class-prefix}col-#{$counter}#{$class-suffix} {
@include grid-cell($counter, $column-count, $gutter-width);
}
.#{$class-prefix}pull-#{$counter}#{$class-suffix} {
@include grid-cell-pull($counter - 1, $column-count);
}
.#{$class-prefix}push-#{$counter}#{$class-suffix} {
@include grid-cell-push($counter - 1, $column-count);
}
}
.#{$class-prefix}row#{$class-suffix} {
@include grid-container($gutter-width);
}
.#{$class-prefix}col-right#{$class-suffix} {
@include grid-cell-flow('right');
}
.#{$class-prefix}col-left#{$class-suffix} {
@include grid-cell-flow('left');
}
.#{$class-prefix}col-inline#{$class-suffix} {
@include grid-cell-flow('inline');
}
}
@include grid-class-generator(12, 1em, 'grid-');
.grid-col-1 {
display: inline-block;
vertical-align: top;
margin-right: -0.25em;
width: 8.33333%;
padding: 0.5em;
}
.grid-pull-1 {
margin-right: 0%;
}
.grid-push-1 {
margin-left: 0%;
}
.grid-col-2 {
display: inline-block;
vertical-align: top;
margin-right: -0.25em;
width: 16.66667%;
padding: 0.5em;
}
.grid-pull-2 {
margin-right: 8.33333%;
}
.grid-push-2 {
margin-left: 8.33333%;
}
.grid-col-3 {
display: inline-block;
vertical-align: top;
margin-right: -0.25em;
width: 25%;
padding: 0.5em;
}
.grid-pull-3 {
margin-right: 16.66667%;
}
.grid-push-3 {
margin-left: 16.66667%;
}
.grid-col-4 {
display: inline-block;
vertical-align: top;
margin-right: -0.25em;
width: 33.33333%;
padding: 0.5em;
}
.grid-pull-4 {
margin-right: 25%;
}
.grid-push-4 {
margin-left: 25%;
}
.grid-col-5 {
display: inline-block;
vertical-align: top;
margin-right: -0.25em;
width: 41.66667%;
padding: 0.5em;
}
.grid-pull-5 {
margin-right: 33.33333%;
}
.grid-push-5 {
margin-left: 33.33333%;
}
.grid-col-6 {
display: inline-block;
vertical-align: top;
margin-right: -0.25em;
width: 50%;
padding: 0.5em;
}
.grid-pull-6 {
margin-right: 41.66667%;
}
.grid-push-6 {
margin-left: 41.66667%;
}
.grid-col-7 {
display: inline-block;
vertical-align: top;
margin-right: -0.25em;
width: 58.33333%;
padding: 0.5em;
}
.grid-pull-7 {
margin-right: 50%;
}
.grid-push-7 {
margin-left: 50%;
}
.grid-col-8 {
display: inline-block;
vertical-align: top;
margin-right: -0.25em;
width: 66.66667%;
padding: 0.5em;
}
.grid-pull-8 {
margin-right: 58.33333%;
}
.grid-push-8 {
margin-left: 58.33333%;
}
.grid-col-9 {
display: inline-block;
vertical-align: top;
margin-right: -0.25em;
width: 75%;
padding: 0.5em;
}
.grid-pull-9 {
margin-right: 66.66667%;
}
.grid-push-9 {
margin-left: 66.66667%;
}
.grid-col-10 {
display: inline-block;
vertical-align: top;
margin-right: -0.25em;
width: 83.33333%;
padding: 0.5em;
}
.grid-pull-10 {
margin-right: 75%;
}
.grid-push-10 {
margin-left: 75%;
}
.grid-col-11 {
display: inline-block;
vertical-align: top;
margin-right: -0.25em;
width: 91.66667%;
padding: 0.5em;
}
.grid-pull-11 {
margin-right: 83.33333%;
}
.grid-push-11 {
margin-left: 83.33333%;
}
.grid-col-12 {
display: inline-block;
vertical-align: top;
margin-right: -0.25em;
width: 100%;
padding: 0.5em;
}
.grid-pull-12 {
margin-right: 91.66667%;
}
.grid-push-12 {
margin-left: 91.66667%;
}
.grid-row {
display: block;
margin: -0.5em;
}
.grid-row:after {
content: "";
display: table;
clear: both;
}
.grid-col-right {
float: right;
margin-right: 0;
}
.grid-col-left {
float: left;
margin-right: 0;
}
.grid-col-inline {
display: inline-block;
vertical-align: top;
margin-right: -0.25em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment