58bits/app.scss

## app.scss
// Import
@import "main";

// Singularity 1.2 Syntax
@include sgs-change('debug', true);
@include sgs-change('mobile first', true);
@include sgs-change('output', 'isolation');
@include sgs-change('include clearfix', true);


$break: 600px;
$break2: 900px;
$break3: 1200px;

@include add-grid(2);
@include add-grid(4 at $break);
@include add-grid(12 at $break2);
@include add-grid(16 at $break3);
@include add-gutter(0.2);

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

body {
  margin: 0;
  padding: 0;
  @include background-grid($color: #e8b491);
}

header {
  background-color: rgba(200,200,200,0.75);
  height: 70px;
}

nav {
  background-color: grey;
  height: 20px;
}

#content { @include clearfix;}


#main {

  background-color: rgba(200,200,100,0.75);

  article { background: purple;}


  @include grid-span(2, 1);

  @include breakpoint($break) {
    @include grid-span(3, 1);
  }

  @include breakpoint($break2) {
    @include grid-span(8, 1);
  }

  @include breakpoint($break3) {
    @include grid-span(10, 1);
  }
}

aside {
  background: green;
  @include grid-span(2, 1, $options: 'both');

  @include breakpoint($break) {
    @include grid-span(1, 4);
  }

  @include breakpoint($break2) {
    @include grid-span(4, 9);
  }

  @include breakpoint($break3) {
    @include grid-span(6, 11);
  }
}

footer {
  background: yellow;
  section {background: pink; padding: 4px;}
  @include grid-span(2, 1);
  @include layout($gutter: .1) {
    .section1 { @include float-span(1, 1);}
    .section2 { @include float-span(1, 2);}
    .section3 { @include float-span(1, 1);}
    .section4 { @include float-span(1, 2);}
  }

  @include breakpoint($break) {
    @include grid-span(4, 1);
    .section1 {@include grid-span(1,1);}
    .section2 {@include grid-span(1,2);}
    .section3 {@include grid-span(1,3);}
    .section4 {@include grid-span(1,4);}
  }

  @include breakpoint($break2) {
    @include grid-span(12, 1);
    .section1 {@include grid-span(3,1);}
    .section2 {@include grid-span(3,4);}
    .section3 {@include grid-span(3,7);}
    .section4 {@include grid-span(3,10);}

  }

  @include breakpoint($break3) {
    @include grid-span(16, 1);
    .section1 {@include grid-span(4,1);}
    .section2 {@include grid-span(4,5);}
    .section3 {@include grid-span(4,9);}
    .section4 {@include grid-span(4,13);}
  }
}

## index.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>My Front-end Demo Project</title>
    <link rel="stylesheet" href="stylesheets/application.css">
    <script type="text/javascript" src="scripts/app.js"></script>
</head>

<body>
    <div id="container">
        <header>
            Header goes here...
        </header>
        <nav>
            <a href="#">Home</a>
            <a href="#">Services</a>
            <a href="#">About Us</a>
            <a href="#">Contact Us</a>
        </nav>

        <div id="content">

            <section id="main" role="main">

                <article>An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it.</article>

                <article>Another article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it.</article>

            </section>

            <aside>
                <article>
                    <h3>Sidebar Title 1</h3>
                    <p>
                        Some Text Here
                    </p>
                </article>

                <article>
                    <h3>Sidebar Title 2</h3>
                    <p>
                        Some Text Here
                    </p>
                </article>

            </aside>

        </div>

        <footer>
            <section class="section1">The first section in the footer.</section>
            <section class="section2">The second section in the footer.</section>
            <section class="section3">The third section in the footer.</section>
            <section class="section4">The fourth section in the footer.</section>
        </footer>
    </div>
</body>

</html>
	// Import
	@import "main";

	// Singularity 1.2 Syntax
	@include sgs-change('debug', true);
	@include sgs-change('mobile first', true);
	@include sgs-change('output', 'isolation');
	@include sgs-change('include clearfix', true);


	$break: 600px;
	$break2: 900px;
	$break3: 1200px;

	@include add-grid(2);
	@include add-grid(4 at $break);
	@include add-grid(12 at $break2);
	@include add-grid(16 at $break3);
	@include add-gutter(0.2);

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

	body {
	margin: 0;
	padding: 0;
	@include background-grid($color: #e8b491);
	}

	header {
	background-color: rgba(200,200,200,0.75);
	height: 70px;
	}

	nav {
	background-color: grey;
	height: 20px;
	}

	#content { @include clearfix;}


	#main {

	background-color: rgba(200,200,100,0.75);

	article { background: purple;}


	@include grid-span(2, 1);

	@include breakpoint($break) {
	@include grid-span(3, 1);
	}

	@include breakpoint($break2) {
	@include grid-span(8, 1);
	}

	@include breakpoint($break3) {
	@include grid-span(10, 1);
	}
	}

	aside {
	background: green;
	@include grid-span(2, 1, $options: 'both');

	@include breakpoint($break) {
	@include grid-span(1, 4);
	}

	@include breakpoint($break2) {
	@include grid-span(4, 9);
	}

	@include breakpoint($break3) {
	@include grid-span(6, 11);
	}
	}

	footer {
	background: yellow;
	section {background: pink; padding: 4px;}
	@include grid-span(2, 1);
	@include layout($gutter: .1) {
	.section1 { @include float-span(1, 1);}
	.section2 { @include float-span(1, 2);}
	.section3 { @include float-span(1, 1);}
	.section4 { @include float-span(1, 2);}
	}

	@include breakpoint($break) {
	@include grid-span(4, 1);
	.section1 {@include grid-span(1,1);}
	.section2 {@include grid-span(1,2);}
	.section3 {@include grid-span(1,3);}
	.section4 {@include grid-span(1,4);}
	}

	@include breakpoint($break2) {
	@include grid-span(12, 1);
	.section1 {@include grid-span(3,1);}
	.section2 {@include grid-span(3,4);}
	.section3 {@include grid-span(3,7);}
	.section4 {@include grid-span(3,10);}

	}

	@include breakpoint($break3) {
	@include grid-span(16, 1);
	.section1 {@include grid-span(4,1);}
	.section2 {@include grid-span(4,5);}
	.section3 {@include grid-span(4,9);}
	.section4 {@include grid-span(4,13);}
	}
	}
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<title>My Front-end Demo Project</title>
	<link rel="stylesheet" href="stylesheets/application.css">
	<script type="text/javascript" src="scripts/app.js"></script>
	</head>

	<body>
	<div id="container">
	<header>
	Header goes here...
	</header>
	<nav>
	<a href="#">Home</a>
	<a href="#">Services</a>
	<a href="#">About Us</a>
	<a href="#">Contact Us</a>
	</nav>

	<div id="content">

	<section id="main" role="main">

	<article>An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it.</article>

	<article>Another article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it.</article>

	</section>

	<aside>
	<article>
	<h3>Sidebar Title 1</h3>
	<p>
	Some Text Here
	</p>
	</article>

	<article>
	<h3>Sidebar Title 2</h3>
	<p>
	Some Text Here
	</p>
	</article>

	</aside>

	</div>

	<footer>
	<section class="section1">The first section in the footer.</section>
	<section class="section2">The second section in the footer.</section>
	<section class="section3">The third section in the footer.</section>
	<section class="section4">The fourth section in the footer.</section>
	</footer>
	</div>
	</body>

	</html>