Susy Grids - Basic configuration and basic usage examples

_grid.scss

// Import main susy stylesheet. Assumes Compass is being used on the project
@import 'susy';

$column-count: 12;

// Main Configuration settings for the Susy Grid
// Docs: http://susy.readthedocs.org/en/latest/settings/
$susy: (
  columns: $column-count, // Number of columns in the grid
  global-box-sizing: border-box, // Tells Susy to use border-box
  gutter-position: inside, // Gutters will be padding on the left and right of columns
  debug: ( // Optional debug option to show grid on front-end
    image: show-columns,
    output: overlay, 
    toggle: bottom left
  )
);

// This tells Susy to use the .container element as the outer wrapper of the grid
%container,
.container {
  @include container($column-count);
  max-width: 1300px;// The max-width of the container. Replace this with a SASS variable specific to your website

  .no-mediaqueries & {
    min-width: 1024px;// The min-width of the container, for browsers that don't support media queries. Replace this with a SASS variable specific to your website
  }
}

// Optional - define some column classes, which can be added to elements in html or in scss using @extend
@for $i from 1 through $column-count {
  %col-#{$i},
  .col-#{$i} {
    @include span($i);
    &.no-gutter {
      padding-left: 0;
      padding-right: 0;
    }
    @media (max-width: 768px) { // At mobile breakpoint, make all columns full width so elements stack
    	width: 100%;
    }
  }
}

index.html

<div class="container">
 <div class="left col-6">
  Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent.
 </div>
 <div class="right col-6">
  Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent.
 </div>
</div>