Skip to content

Instantly share code, notes, and snippets.

@scerelli
Last active September 17, 2015 23:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save scerelli/b80c82f66c37925ba55b to your computer and use it in GitHub Desktop.
Save scerelli/b80c82f66c37925ba55b to your computer and use it in GitHub Desktop.
Grid system (gutter free) based on bootstrap grid naming.
// @author: Stefano Cerelli
// @grid system like Bootstrap
+layout(12)
$total-columns: 12
$gutter: 0
$screen-sm: 768px
$screen-md: 992px
$screen-lg: 1200px
$spacer-base: 8
.clearfix
&:before,&:after
content: ""
display: table
&:after
clear: both
.row
+full
.container
width: 100%
max-width: 1170px
margin: 0 auto
@extend .clearfix
.container-fluid
width: 100%
@extend .clearfix
@for $i from 1 to susy-get(columns)+1
.col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}
+span($i of $total-columns $gutter)
@if $i != susy-get(columns)+1
.col-xs-#{$i}:last-of-type, .col-sm-#{$i}:last-of-type, .col-md-#{$i}:last-of-type, .col-lg-#{$i}:last-of-type
+last()
//spacers
@for $i from 1 to 9
$newSpacer: $spacer-base * $i
.spacer-#{$i}
padding-left: #{$newSpacer}px
padding-right: #{$newSpacer}px
.spacer-left-#{$i}
padding-left: #{$newSpacer}px
.spacer-right-#{$i}
padding-right: #{$newSpacer}px
@media screen and (min-width: $screen-sm)
@for $i from 1 to susy-get(columns)+1
.col-sm-#{$i}
+span($i of $total-columns $gutter)
@if $i != susy-get(columns)+1
.col-sm-#{$i}:last-of-type
+last()
@media screen and (min-width: $screen-md)
@for $i from 1 to susy-get(columns)+1
.col-md-#{$i}
+span($i of $total-columns $gutter)
@if $i != susy-get(columns)+1
.col-md-#{$i}:last-of-type
+last()
@media screen and (min-width: $screen-lg)
@for $i from 1 to susy-get(columns)+1
.col-lg-#{$i}
+span($i of $total-columns $gutter)
@if $i != susy-get(columns)+1
.col-lg-#{$i}:last-of-type
+last()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment