TWT bootstrap grid, written in sass

_grid.sass

//
// Grid system
// --------------------------------------------------

// Media queries breakpoints
// --------------------------------------------------

// Extra small screen / phone
$screen-xs-min: 480px

// Small screen / tablet
$screen-sm-min: 768px

// Medium screen / desktop
$screen-md-min: 992px

// Large screen / wide desktop
$screen-lg-min: 1200px

// So media queries don't overlap when required, provide a maximum
$screen-xs-max: ($screen-sm-min - 1)
$screen-sm-max: ($screen-md-min - 1)
$screen-md-max: ($screen-lg-min - 1)


// Grid settings
// --------------------------------------------------
$grid-columns: 12
$grid-gutter-width: 30px


// Container sizes
// --------------------------------------------------

// Small screen / tablet
$container-tablet:((720px + $grid-gutter-width))
$container-sm: $container-tablet

// Medium screen / desktop
$container-desktop: ((940px + $grid-gutter-width))
$container-md: $container-desktop

// Large screen / wide desktop
$container-large-desktop: ((1140px + $grid-gutter-width))
$container-lg: $container-large-desktop

// --------------------------------------------------

@mixin container-fixed()
  margin-right: auto
  margin-left: auto
  padding-left:  ($grid-gutter-width / 2)
  padding-right: ($grid-gutter-width / 2)
  @extend %cf


@mixin make-row($gutter: $grid-gutter-width)
  margin-left:  ($gutter / -2)
  margin-right: ($gutter / -2)
  @extend %cf


@mixin setup-all-cols()
  @for $i from 1 through $grid-columns
    .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}
      @extend %col-common


@mixin setup-common-col-rules($class)

  $floated-cols: ()
  $comma: ','

  @for $i from 1 through ($grid-columns - 1)
    $floated-cols: append($floated-cols, #{$class}-#{$i}#{$comma})

  #{$floated-cols}
    float: left

  @for $i from 1 through $grid-columns
    #{$class}-#{$i}
      width: percentage(($i / $grid-columns))


// Mixin for generateing responsive cols classes
@mixin setup-responsive-grid($breakpoint, $container-width, $class)
  @media (min-width: $breakpoint)

    .container
      width: $container-width

    @include setup-common-col-rules($class)

    // Push and pull columns for source order changes
    // @for $i from 1 through ($grid-columns - 1) {
    //   #{$class}-push-#{$i} {
    //     left: percentage(($i / $grid-columns))
    //   }
    // }

    // @for $i from 1 through ($grid-columns - 1) {
    //   #{$class}-pull-#{$i} {
    //     right: percentage(($i / $grid-columns))
    //   }
    // }

    // Offsets
    @for $i from 1 through ($grid-columns - 1)
      #{$class}-offset-#{$i}
        margin-left: percentage(($i / $grid-columns))


// Set the container width, and override it for fixed navbars in media queries
.container
  @include container-fixed()


// mobile first defaults
.row
  @include make-row()


// Common styles for small and large grid columns
%col-common
  position: relative
  min-height: 1px
  padding-left:  ($grid-gutter-width / 2)
  padding-right: ($grid-gutter-width / 2)


@include setup-all-cols()

// Extra small grid
@include setup-common-col-rules('.col-xs')

// Small grid
@include setup-responsive-grid($screen-sm-min, $container-sm, '.col-sm')

// Medium grid
@include setup-responsive-grid($screen-md-min, $container-md, '.col-md')

// Large grid
@include setup-responsive-grid($screen-lg-min, $container-lg, '.col-lg')