tsmith512 · August 29, 2015 14:15
diff --git a/SassMeister-input-HTML.html b/SassMeister-input-HTML.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>
  <div id="container">
    <div class="left">Left Column</div>
    <div class="right">Right Column</div>
  </div>
 </body>
 </html>
diff --git a/SassMeister-input.scss b/SassMeister-input.scss
 // ----
 // Sass (v3.4.12)
 // Compass (v1.0.3)
 // Singularity.gs (v1.5.1)
 // ----

 /**
 * Examples for Presentation: Advanced Responsive Web Design
 * Part 4: Basic Intro to Singularity, Box-Sizing, Comparison to 960gs
 * For More Information: http://github.com/tsmith512/arwd
 */

 @import "compass";
 @import "singularitygs";

 // Box sizing: border box all the things!
 *, *:before, *:after {
  @include box-sizing('border-box');
 }

 // Singularity could be configured to build 960 Grids,
 // if you want...
 @include add-grid(12);    // Number of Columns
 @include add-gutter(1/3); // Gutter to Column ratio, 20px/60px = 1/3

 // Also, 'float' (not the default), is how 960 and many
 // other grid systems work out-of-the-box.
 @include sgs-change('output', 'float');

 // Set up container and columns using Grid Span
 #container {
  max-width: 960px;  	// Outer Container
  padding: 0 10px;   	// Side Gutter
  margin: 0 auto;    	// Center Container
  @include clearfix; 	// Have container clear floats properly
  border: 1px solid #333;
 }

 .left {
  @include grid-span(6,1);
  background: #FAA;
 }

 .right {
  @include grid-span(6,7);
  background: #AAF;
 }

 // To see this grid using background-grid, we need debugging options:
 @include sgs-change('debug', true);

 #container {
  @include background-grid($color: #ddd);
  padding-bottom: 1em; // For space to see
 }
diff --git a/SassMeister-output.css b/SassMeister-output.css
 /**
 * Examples for Presentation: Advanced Responsive Web Design
 * Part 4: Basic Intro to Singularity, Box-Sizing, Comparison to 960gs
 * For More Information: http://github.com/tsmith512/arwd
 */
 *, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
 }

 #container {
  max-width: 960px;
  padding: 0 10px;
  margin: 0 auto;
  overflow: hidden;
  *zoom: 1;
  border: 1px solid #333;
 }

 .left {
  width: 48.93617%;
  clear: right;
  float: left;
  margin-left: 0;
  margin-right: 2.12766%;
  background: #FAA;
 }

 .right {
  width: 48.93617%;
  clear: right;
  float: right;
  margin-right: 0;
  background: #AAF;
 }

 #container {
  background-image: linear-gradient(to right, #ddd 0%, #ddd 6.38298%, #e5e5e5 6.38298%, #e5e5e5 8.51064%, #ddd 8.51064%, #ddd 14.89362%, #e5e5e5 14.89362%, #e5e5e5 17.02128%, #ddd 17.02128%, #ddd 23.40426%, #e5e5e5 23.40426%, #e5e5e5 25.53191%, #ddd 25.53191%, #ddd 31.91489%, #e5e5e5 31.91489%, #e5e5e5 34.04255%, #ddd 34.04255%, #ddd 40.42553%, #e5e5e5 40.42553%, #e5e5e5 42.55319%, #ddd 42.55319%, #ddd 48.93617%, #e5e5e5 48.93617%, #e5e5e5 51.06383%, #ddd 51.06383%, #ddd 57.44681%, #e5e5e5 57.44681%, #e5e5e5 59.57447%, #ddd 59.57447%, #ddd 65.95745%, #e5e5e5 65.95745%, #e5e5e5 68.08511%, #ddd 68.08511%, #ddd 74.46809%, #e5e5e5 74.46809%, #e5e5e5 76.59574%, #ddd 76.59574%, #ddd 82.97872%, #e5e5e5 82.97872%, #e5e5e5 85.10638%, #ddd 85.10638%, #ddd 91.48936%, #e5e5e5 91.48936%, #e5e5e5 93.61702%, #ddd 93.61702%, #ddd);
  padding-bottom: 1em;
 }
diff --git a/SassMeister-rendered.html b/SassMeister-rendered.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>
  <div id="container">
    <div class="left">Left Column</div>
    <div class="right">Right Column</div>
  </div>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	</head>
	<body>
	<div id="container">
	<div class="left">Left Column</div>
	<div class="right">Right Column</div>
	</div>
	</body>
	</html>
	// ----
	// Sass (v3.4.12)
	// Compass (v1.0.3)
	// Singularity.gs (v1.5.1)
	// ----

	/**
	* Examples for Presentation: Advanced Responsive Web Design
	* Part 4: Basic Intro to Singularity, Box-Sizing, Comparison to 960gs
	* For More Information: http://github.com/tsmith512/arwd
	*/

	@import "compass";
	@import "singularitygs";

	// Box sizing: border box all the things!
	, :before, *:after {
	@include box-sizing('border-box');
	}

	// Singularity could be configured to build 960 Grids,
	// if you want...
	@include add-grid(12); // Number of Columns
	@include add-gutter(1/3); // Gutter to Column ratio, 20px/60px = 1/3

	// Also, 'float' (not the default), is how 960 and many
	// other grid systems work out-of-the-box.
	@include sgs-change('output', 'float');

	// Set up container and columns using Grid Span
	#container {
	max-width: 960px; // Outer Container
	padding: 0 10px; // Side Gutter
	margin: 0 auto; // Center Container
	@include clearfix; // Have container clear floats properly
	border: 1px solid #333;
	}

	.left {
	@include grid-span(6,1);
	background: #FAA;
	}

	.right {
	@include grid-span(6,7);
	background: #AAF;
	}

	// To see this grid using background-grid, we need debugging options:
	@include sgs-change('debug', true);

	#container {
	@include background-grid($color: #ddd);
	padding-bottom: 1em; // For space to see
	}