Bootstrap 3 Style Grid built on Bourbon Neat

grid.css.sass

// Main containers
.container
  @include outer-container

// Rows
.row
  @include row()


// A basic column without a defined width or height
.col
  float: left
  display: inline-block



// Common styles for small and large grid columns
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12
  position: relative
  // Prevent columns from collapsing when empty
  min-height: 1px

// Create the Extra small grid
@include grid-core(xs)
  
// Create the small grid
@include media(min-width $screen-sm)
  .container
    max-width: $screen-sm
  @include grid-core(sm)

// Create the medium grid
@include media(min-width $screen-md)
  .container
    max-width: $screen-md
  @include grid-core(md)

// Create the large grid
@include media(min-width $screen-lg)
  .container
    @include outer-container
  @include grid-core(lg)

index.html.haml

!!! 5
%html
  %body
  
    $section.container
      .row
        .col-lg-6.col-xs-3
          6
        .col-lg-6.col-xs-9.omega
          %div 6
          .col-sm-6.col-xs-12
            hello half
          .col-sm-6.col-xs-12
            hello half

      .row
        .col-lg-6.col-xs-3.col-lg-push-6
          col-lg-push-6
        .col-lg-6.col-xs-9.omega.col-lg-pull-6
          col-lg-pull-6


    %section.container
      .row.blargh
        .col-lg-3.col-md-4.col-sm-6.col-xs-12 hi
        .col-lg-3.col-md-4.col-sm-6.col-xs-12 hi
        .col-lg-3.col-md-4.col-sm-6.col-xs-12 hi
        .col-lg-3.col-md-4.col-sm-6.col-xs-12 hi
        .col-lg-3.col-md-4.col-sm-6.col-xs-12 hi
        .col-lg-3.col-md-4.col-sm-6.col-xs-12 hi
        .col-lg-3.col-md-4.col-sm-6.col-xs-12 hi
        .col-lg-3.col-md-4.col-sm-6.col-xs-12 hi
        .col-lg-3.col-md-4.col-sm-6.col-xs-12 hi
        .col-lg-3.col-md-4.col-sm-6.col-xs-12 hi
        .col-lg-3.col-md-4.col-sm-6.col-xs-12 hi
        .col-lg-3.col-md-4.col-sm-6.col-xs-12 hi
            

mixins.css.sass

// Grid Mixins

// Create the grid for a given size
// This will loop over the number of columns and create a css class
// for each. If it's the last gride size, then let's not add a float
@mixin grid-core($size)
  @for $i from 1 through $grid-columns
    .col-#{$size}-#{$i}
      // Ignore float for the largest grid size
      @if $i < $grid-columns
        float: left
      @include span-columns($i)

    // If it's not the screen-xs, then let's add push and pull helper classes
    @if $size != "xs"
      .col-#{$size}-push-#{$i}
        left: flex-grid($i, $grid-columns) + flex-gutter($grid-columns)
      .col-#{$size}-pull-#{$i}
        right: flex-grid($i, $grid-columns) + flex-gutter($grid-columns)

variables.css.sass

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

// Number of columns in the grid system
$grids-columns:              12
// Padding, to be divided by two and applied to the left and right of all columns
$gutter:                     golden-ratio(1em, 1)

$max-width:                  1200px





// Responsive Breakpoints
// ------------------------------------------------------

$screen-xs:                  480px !default
$screen-xs-min:              $screen-xs !default
$screen-phone:               $screen-xs-min !default

// Small screen / tablet
// Note: Deprecated $screen-sm and $screen-tablet as of v3.0.1
$screen-sm:                  768px !default
$screen-sm-min:              $screen-sm !default
$screen-tablet:              $screen-sm-min !default

// Medium screen / desktop
// Note: Deprecated $screen-md and $screen-desktop as of v3.0.1
$screen-md:                  992px !default
$screen-md-min:              $screen-md !default
$screen-desktop:             $screen-md-min !default

// Large screen / wide desktop
// Note: Deprecated $screen-lg and $screen-lg-desktop as of v3.0.1
$screen-lg:                  1200px !default
$screen-lg-min:              $screen-lg !default
$screen-lg-desktop:          $screen-lg-min !default
$max-width:                  $screen-lg

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

Good

Thank you! :-)

perfect, thx

Can you please explain how can this be used in sass project? Thanks

Deprecation Warning: The golden-ratio function has been deprecated and will be removed in the next major version release. Use the modular-scale function instead.

golden-ratio() to modular-scale()

This is really helpful, but I can't seem to find any reference to what outer-container is supposed to be? Did that value get updated to a new name (grid-container) or something?

@Tresky this might help thoughtbot/neat#623