starryeyez024

$tablet: 700px;
$desktop: 900px;
$wide-desktop: 1200px;

$gutters: 1em;
$gutter-styles: 'split';

$grids: 6;
$grids: add-grid(12 at $tablet);
$grids: add-grid(2 8 2 at $desktop);

starryeyez024

FOUNDATION:
If you are keen on SCSS and use it for your Foundation projects, you have access to grid mixins that will let you layout the page without using presentational classes that you don't want. You can create your own set of classes or even create your own grid. Setting any of the options to 'false' will leave off those styles, giving you lots of control over your CSS output. 

starryeyez024

$gutters: 1/3;
//$gutter-styles: 'split';

$grids: 3;  // Mobile 
$grids: add-grid(6 at 500px); // Tablet (Portrait)
$grids: add-grid(12 at 720px); // Tablet (Landscape)
$grids: add-grid(18 at 960px); // Desktop

#header {
  @include breakpoint (960px) {

starryeyez024

@import "compass";
@import "breakpoint";

$tablet: 500px;
$desktop: 960px;

@mixin desktop {
  @include breakpoint($desktop) {
    @content;
  }

starryeyez024

Inconsistent indentation: 3 spaces were used for indentation, but the rest of the document was indented using 2 spaces.

starryeyez024

@import "singularitygs"

$desktop: 980px
$grids: 2
$grids: add-grid(6 at 980px)
$gutters: 10px
$gutter-styles: 'fixed'
$output: 'isolation'

.l-page

starryeyez024

////////////////////////////////////////////////////
// FLUID GRID COLUMNS
///////////////////////////////////////////////////

=grid-mobile($class-name: views-row)
  .#{$class-name}
    clear: both
    list-style-type: none

=grid-desktop($class-name: views-row)

starryeyez024

// from BREAKPOINTS partial

$smartphone-portrait: 320px 960px
$smartphone-landscape: 480px 960px
$tablet-portrait: 550px 960px
$tablet-landscape: 750px 960px
$desktop: 960px

// Max-width queries, only use when necessary: 
$smartphone-portrait-max: max-width 320px

starryeyez024

////////////////////////
// TYPOGRAPHY
////////////////////////

$base-font-size: 14px
$base-line-height: 22px
$rhythm-unit: 'rem'
$rem-with-px-fallback: true

starryeyez024

.foo, .bar {
  background: red;
}