Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A little Grid Snippet we use at sayhello.ch
/**
* Settings
*/
$grid-space-x : 2rem;
$grid-padding : ($grid-space-x/2);
$grid-columns : 12;
$grid-size : 1200px;
//Breakpoints as suggested here: https://medium.freecodecamp.com/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862#.t6xy2x4af
$grid-breakpoints : (
phone : 0px,
tablet : 600px,
desktop : 1200px,
);
/**
* Mixins
*/
@mixin make-col-span($size, $columns: $grid-columns) {
width: percentage($size / $columns);
}
@mixin make-col-offset($size, $columns: $grid-columns) {
margin-left: percentage($size / $columns);
}
@mixin make-col-push($size, $columns: $grid-columns) {
left: if($size > 0, percentage($size / $columns), auto);
}
@mixin make-col-pull($size, $columns: $grid-columns) {
right: if($size > 0, percentage($size / $columns), auto);
}
@mixin make-col-modifier($type, $size, $columns) {
// Work around the lack of dynamic mixin @include support (https://github.com/sass/sass/issues/626)
@if $type == push {
@include make-col-push($size, $columns);
} @else if $type == pull {
@include make-col-pull($size, $columns);
} @else if $type == offset {
@include make-col-offset($size, $columns);
}
}
@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-space-x) {
// Common properties for all breakpoints
%grid-column {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: ($gutter / 2);
padding-right: ($gutter / 2);
}
@each $breakpoint, $min in $grid-breakpoints {
@for $i from 1 through $columns {
.col-#{$breakpoint}-#{$i} {
@extend %grid-column;
}
}
@media (min-width: $min) {
// Work around cross-media @extend (https://github.com/sass/sass/issues/1050)
%grid-column-float-#{$breakpoint} {
float: left;
}
@for $i from 1 through $columns {
.col-#{$breakpoint}-#{$i} {
@extend %grid-column-float-#{$breakpoint};
@include make-col-span($i, $columns);
}
}
@each $modifier in (pull, push, offset) {
@for $i from 0 through $columns {
.col-#{$breakpoint}-#{$modifier}-#{$i} {
@include make-col-modifier($modifier, $i, $columns)
}
}
}
}
}
}
/**
* output
*/
.container {
margin: 0 auto;
width: 100%;
max-width: $grid-size;
padding-left: $grid-padding;
padding-right: $grid-padding;
@include clearfix();
.row {
@include clearfix();
margin-left: -$grid-padding;
margin-right: -$grid-padding;
}
}
@include make-grid-columns();
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.