Skip to content

Instantly share code, notes, and snippets.

@asterick
Last active Jun 12, 2018
Embed
What would you like to do?
Variable column grid system with ratios ala PURE in very little SCSS
// Globals
$screen-width: 1280px;
// Grid
$column-granularity: 12;
$column-gutter: 20px;
// Dimensions (responsive)
$screen-xs-max: 567px;
$screen-sm-min: 568px;
$screen-sm-max: 767px;
$screen-md-min: 768px;
$screen-md-max: 1023px;
$screen-lg-min: 1024px;
$screen-lg-max: 1279px;
$screen-xl-min: 1280px;
$screen-sizes: (xs sm md lg xl);
$screen-bounds: (
xs: (
max: $screen-xs-max
),
sm: (
min: $screen-sm-min,
max: $screen-sm-max
),
md: (
min: $screen-md-min,
max: $screen-md-max
),
lg: (
min: $screen-lg-min,
max: $screen-lg-max
),
xl: (
min: $screen-xl-min,
)
);
@function greatest-common-divisor ($a, $b) {
@while $a != $b {
@if ($a > $b) {
$a: $a - $b;
} @else {
$b: $b - $a;
}
}
@return $a;
}
@mixin standard-grid($numerator, $denominator, $prefix: "grid") {
@if (greatest-common-divisor($numerator, $denominator) == 1) {
.#{$prefix}-#{$numerator}-#{$denominator} {
display: inline-block;
box-sizing: border-box;
width: percentage($numerator/$denominator);
padding-left: $column-gutter;
padding-right: $column-gutter;
font-size: 18px;
}
@if $denominator >= 2 {
@for $count from 1 through ($denominator - 1) {
.#{$prefix}-#{$numerator}-#{$denominator}-push-#{$count} {
position: relative;
left: percentage($numerator/$denominator*$count);
}
.#{$prefix}-#{$numerator}-#{$denominator}-pull-#{$count} {
position: relative;
right: percentage($numerator/$denominator*$count);
}
}
}
}
}
@mixin media-query($min, $max: null) {
@if ($min and $max) {
@media screen and (min-width: #{$min}) and (max-width: #{$max}) {
@content;
}
} @else if ($min) {
@media screen and (min-width: #{$min}) {
@content;
}
} @else if ($max) {
@media screen and (max-width: #{$max}) {
@content;
}
} @else {
@content;
}
}
.grid {
margin-left: -$column-gutter;
margin-right: -$column-gutter;
display: block;
font-size: 0;
}
@for $denominator from 1 through $column-granularity {
@for $numerator from 1 through $denominator {
@include standard-grid($numerator, $denominator);
}
}
@each $size in $screen-sizes {
$range: map-get($screen-bounds, $size);
$min: map-get($range, min);
$max: map-get($range, max);
@include media-query($min) {
@for $denominator from 1 through $column-granularity {
@for $numerator from 1 through $denominator {
@include standard-grid($numerator, $denominator, "grid-#{$size}");
}
}
}
}
@each $size in $screen-sizes {
$range: map-get($screen-bounds, $size);
$min: map-get($range, min);
$max: map-get($range, max);
@include media-query($min, $max) {
@each $other-size in $screen-sizes {
@if($other-size == $size) {
.hidden-#{$other-size} {
display: none;
}
} @else {
.visible-#{$other-size} {
display: none;
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment