Skip to content

Instantly share code, notes, and snippets.

@polarblau
Created October 3, 2015 20:49
Show Gist options
  • Save polarblau/f2e86c06f8e57541ad99 to your computer and use it in GitHub Desktop.
Save polarblau/f2e86c06f8e57541ad99 to your computer and use it in GitHub Desktop.
Grid utilities, based on bourbon/neat.
// Settings
$grid-visual-aid-breakpoints: () !global !default
$grid-media-default-feature : min-width !default
$grid-max-columns : 12 !default
$grid-default-columns : 2 !default
$grid-float-direction : left !default
$grid-gutter-width : 30px !default
$grid-max-width : 1200px !default
// Scoped
$grid-columns-for-scope : $grid-default-columns !global
// ----------------------------------------------------------------------------
@function grid-media-breakpoint($query: $value $columns)
@if length($query) == 1 // Only value provided
$query: $grid-media-default-feature nth($query, 1) $grid-max-columns
@else if is-even(length($query)) // No feature provided
$query: $grid-media-default-feature nth($query, 1) nth($query, 2)
@if not index($query, $grid-visual-aid-breakpoints)
$grid-visual-aid-breakpoints: append($grid-visual-aid-breakpoints, $query, comma) !global
@return $query
// ----------------------------------------------------------------------------
=grid-media($query: $feature $value $columns)
$media-query: "screen and (" + nth($query, 1) + ": " + nth($query, 2) + ") "
// OUT:
@media #{$media-query}
$grid-columns-for-scope: nth($query, 3) !global
@content
$grid-columns-for-scope: $grid-default-columns !global
// ----------------------------------------------------------------------------
@function grid-columns-width($columns, $container-columns: $grid-columns-for-scope)
@return percentage($columns / $container-columns)
// ----------------------------------------------------------------------------
=grid-columns($span: $columns of $container-columns)
$columns: nth($span, 1)
// no container columns provided, use default
$container-columns: $grid-columns-for-scope
$grid-columns-for-scope: $grid-default-columns !default
// e.g. "2 of 12"
@if length($span) == 3
$container-columns: nth($span, 3)
// OUT:
float: $grid-float-direction
width: grid-columns-width($columns, $container-columns)
// ----------------------------------------------------------------------------
=grid-container
// OUT:
+clearfix
max-width: $grid-max-width
margin-left: auto
margin-right: auto
// ----------------------------------------------------------------------------
=grid-padded
// OUT:
padding-left: $grid-gutter-width / 2
padding-right: $grid-gutter-width / 2
// ----------------------------------------------------------------------------
@function -grid-visual-aid-column-gradient-stops($grid-columns, $color: hotpink)
$column-width: grid-columns-width(1, $grid-columns)
$column-offset: 0
$values: (transparent 0, $color 0)
@for $i from 0 to $grid-columns
@if $i % 2 == 0
$values: append($values, transparent $column-offset, comma)
$values: append($values, transparent $column-offset + $column-width, comma)
@else
$values: append($values, $color $column-offset, comma)
$values: append($values, $color $column-offset + $column-width, comma)
$column-offset: $column-offset + $column-width
@return $values
// ----------------------------------------------------------------------------
=-grid-visual-aid-column-gradient($values...)
// OUT:
background-image: -webkit-linear-gradient(left, $values)
background-image: -moz-linear-gradient(left, $values)
background-image: -ms-linear-gradient(left, $values)
background-image: -o-linear-gradient(left, $values)
background-image: unquote("linear-gradient(to left, #{$values})")
// ----------------------------------------------------------------------------
=grid-visual-aid
// OUT:
&:before
$gradient-stops: -grid-visual-aid-column-gradient-stops($grid-columns-for-scope)
+-grid-visual-aid-column-gradient($gradient-stops)
content: ""
display: inline-block
height: 100%
width: 100%
left: 0
right: 0
margin: 0 auto
opacity: 0.4
pointer-events: none
position: absolute
z-index: -1
@each $breakpoint in $grid-visual-aid-breakpoints
@if $breakpoint
+grid-media($breakpoint)
$gradient-stops: -grid-visual-aid-column-gradient-stops($grid-columns-for-scope)
+-grid-visual-aid-column-gradient($gradient-stops)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment