Simple grid example using Singularity and Breakpoint-Slicer

SassMeister-input-HTML.html

<header id="siteHeader" class="defaultHead">
  Header
</header>

<div id="siteContainer">
  <div id="siteContent" class="twoColumn">
    <section id="upperMainColumn" role="main" class="contentWell">
      UpperMain
      
      <p> Llama ipsum dolor sit amet consectetur alpaca elit, nam mattis risus sit amet tellus, posuere vel pronking diam adipiscing nullam. Semper bibendum nisi in humming llambada vivamus vel purus eu ipsum, kush placerat curabitur ullamcorper metus vel ipsum tempor feugiat. Eget quis mi vivamus at turpis lama glama a lobortis, nunc nunc sodales accumsan orci a tristique ut, eu interdum odio in hac habitasse platea dictumst. nam scelerisque here a llama yearling there a llama humming, massa sit amet auctor velit and another little llama morbi quis, yearling diam ut nisi urna fringilla rhoncus malesuada at.

Egestas pretium nibh phasellus eget lobortis llama llama duck, in posuere porta lobortis etiam vel accumsan, nunc nam pronking tempor metus non facilisis. Suspendisse eu nibh nec nibh placerat gravida ac sit amet urna suspendisse, potenti drama llama maecenas quam enim llamasutra pellentesque id venenatis sit, amet suscipit a nulla aliquam sodales llama llama sed. Pretium fringilla nisi eu aliquet nisi convallis cria vel, nunc vehicula porta ligula in iaculis erat auctor, eu vivamus pajama llama dam leo pretium. Quis fringilla sit amet blandit at ipsum vivamus dignissim turpis at feugiat, cursus orci elit llama yo mama interdum diam eget. </p>
    </section>
    <aside id="upperRightColumn">upper right. Must be 300px wide</aside>
    <section id="mainColumn">Lower Main</section>
    <aside id="rightColumn">Lower Right</aside>
  </div>
</div>

<footer id="siteFooter">Footer</footer>

SassMeister-input.scss

// ----
// Sass (v3.4.11)
// Compass (v1.0.3)
// Breakpoint (v2.5.0)
// Breakpoint Slicer (v1.3.6)
// Singularity Extras (v1.0.0)
// Singularity.gs (v1.5.1)
// ----

@import "compass";
@import "breakpoint-slicer";
@import "singularitygs";
@import "singularity-extras";

// Define breakpoints in a Slicer list
$slicer-breakpoints: 0 400px 600px 800px 1050px;

@include add-grid(1);
@include add-grid(1 300px at bp(3));
@include add-gutter(1em);
@include sgs-change('output', 'calc');

* {
  @include box-sizing('border-box');
}

#siteHeader, #siteContainer, #siteFooter{
  max-width:1050px;
  margin:0 auto 5px;
  @include clearfix;
}

#upperMainColumn, #mainColumn {
  background-color:pink;
  // Span 1 column, starting at the 1st column
  @include from(3) {
    @include grid-span(1, 1);
  }
  clear:both;
}

#upperRightColumn, #rightColumn {
  // Span 1 column, starting at the 2nd column
  @include from(3) {
    @include grid-span(1, 2);
  }
}

SassMeister-output.css

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#siteHeader, #siteContainer, #siteFooter {
  max-width: 1050px;
  margin: 0 auto 5px;
  overflow: hidden;
  *zoom: 1;
}

#upperMainColumn, #mainColumn {
  background-color: pink;
  clear: both;
}
@media (min-width: 601px) {
  #upperMainColumn, #mainColumn {
    width: -webkit-calc((((100% - (300px + 1em)) / (1))) * 1);
    width: calc((((100% - (300px + 1em)) / (1))) * 1);
    float: left;
    margin-right: -100%;
    margin-left: 0;
  }
}

@media (min-width: 601px) {
  #upperRightColumn, #rightColumn {
    width: 300px;
    float: right;
    margin-left: 0;
    margin-right: 0;
  }
}

SassMeister-rendered.html

<header id="siteHeader" class="defaultHead">
  Header
</header>

<div id="siteContainer">
  <div id="siteContent" class="twoColumn">
    <section id="upperMainColumn" role="main" class="contentWell">
      UpperMain
      
      <p> Llama ipsum dolor sit amet consectetur alpaca elit, nam mattis risus sit amet tellus, posuere vel pronking diam adipiscing nullam. Semper bibendum nisi in humming llambada vivamus vel purus eu ipsum, kush placerat curabitur ullamcorper metus vel ipsum tempor feugiat. Eget quis mi vivamus at turpis lama glama a lobortis, nunc nunc sodales accumsan orci a tristique ut, eu interdum odio in hac habitasse platea dictumst. nam scelerisque here a llama yearling there a llama humming, massa sit amet auctor velit and another little llama morbi quis, yearling diam ut nisi urna fringilla rhoncus malesuada at.

Egestas pretium nibh phasellus eget lobortis llama llama duck, in posuere porta lobortis etiam vel accumsan, nunc nam pronking tempor metus non facilisis. Suspendisse eu nibh nec nibh placerat gravida ac sit amet urna suspendisse, potenti drama llama maecenas quam enim llamasutra pellentesque id venenatis sit, amet suscipit a nulla aliquam sodales llama llama sed. Pretium fringilla nisi eu aliquet nisi convallis cria vel, nunc vehicula porta ligula in iaculis erat auctor, eu vivamus pajama llama dam leo pretium. Quis fringilla sit amet blandit at ipsum vivamus dignissim turpis at feugiat, cursus orci elit llama yo mama interdum diam eget. </p>
    </section>
    <aside id="upperRightColumn">upper right. Must be 300px wide</aside>
    <section id="mainColumn">Lower Main</section>
    <aside id="rightColumn">Lower Right</aside>
  </div>
</div>

<footer id="siteFooter">Footer</footer>