ColemanCollins/_base.scss

## readme.md

      
    Raw
  

              readme.md
            
          
    #Let's do this.

###Get the compass and susy gems
$gem install compass
$gem install susy

###Make a new compass project
$compass create -r susy -u susy
###Put it together
*Add the index.html from below to susy-spike
*Replace the _base.scss and screen.scss from below in the proper /sass/ directory spots.
*run compass watch to compile changes
 $compass watch

###fire up a browser with the html, and play with it.

###Compass docs:
http://compass-style.org/reference/compass/
###Sass docs:
http://sass-lang.com/docs.html
###Susy docs:
http://susy.oddbird.net/guides/reference/
#The mobile-first, expand as room is necessary concept from
http://framelessgrid.com/, with some magic added to fit and flow as makes sense.

  
## _base.scss
// ---------------------------------------------------------------------------
// Imports

@import "susy";

// ---------------------------------------------------------------------------
// Basic (mobile) Grid

$total-columns  : 4;
$column-width   : 5em;
$gutter-width   : 1em;
$grid-padding   : $gutter-width;

$show-grid-backgrounds  : true;

// ---------------------------------------------------------------------------
// RWD breakpoints — breakpoint size, followed by number of columns for Susy at that size

$breakpoint-small:400px 6;
$breakpoint-medium:600px 8;
$breakpoint-large:800px 12;
$breakpoint-xl:1080px 16;
$breakpoint-xxl:1280px 20;

## index.html
<!DOCTYPE html>

   <head>
	        <meta charset="utf-8">
	        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	        <title></title>
	        <meta name="description" content="">
	        <meta name="viewport" content="width=device-width">

	        <link rel="stylesheet" href="stylesheets/screen.css">
	</head>

	<body>
		<div class="container">
			<p>Hello, World</p>
		</div>
	</body>
</html>

## screen.scss
// ---------------------------------------------------------------------------
// Imports

@import "base";

/* -------------------------------------------------------------------------*/
/* Layout */

.container {
  @include container;
  @include susy-grid-background;
//switch to 6 column grid once there's room
  @include at-breakpoint($breakpoint-small){
    @include container;
    @include susy-grid-background;
  }
//switch to 8 column grid once there's room
  @include at-breakpoint($breakpoint-medium){
  	@include container;
    @include susy-grid-background;
  }
//switch to 12 column grid once there's room
  @include at-breakpoint($breakpoint-large){
  	@include container;
    @include susy-grid-background;
  }
//switch to 16 column grid once there's room
  @include at-breakpoint($breakpoint-xl){
  	@include container;
    @include susy-grid-background;
  }
 //switch to 20 column grid once there's room
  @include at-breakpoint($breakpoint-xl){
  	@include container;
    @include susy-grid-background;
  }
}
	// ---------------------------------------------------------------------------
	// Imports

	@import "susy";

	// ---------------------------------------------------------------------------
	// Basic (mobile) Grid

	$total-columns : 4;
	$column-width : 5em;
	$gutter-width : 1em;
	$grid-padding : $gutter-width;

	$show-grid-backgrounds : true;

	// ---------------------------------------------------------------------------
	// RWD breakpoints — breakpoint size, followed by number of columns for Susy at that size

	$breakpoint-small:400px 6;
	$breakpoint-medium:600px 8;
	$breakpoint-large:800px 12;
	$breakpoint-xl:1080px 16;
	$breakpoint-xxl:1280px 20;
	<!DOCTYPE html>

	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title></title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width">

	<link rel="stylesheet" href="stylesheets/screen.css">
	</head>

	<body>
	<div class="container">
	<p>Hello, World</p>
	</div>
	</body>
	</html>
	// ---------------------------------------------------------------------------
	// Imports

	@import "base";

	/* -------------------------------------------------------------------------*/
	/* Layout */

	.container {
	@include container;
	@include susy-grid-background;
	//switch to 6 column grid once there's room
	@include at-breakpoint($breakpoint-small){
	@include container;
	@include susy-grid-background;
	}
	//switch to 8 column grid once there's room
	@include at-breakpoint($breakpoint-medium){
	@include container;
	@include susy-grid-background;
	}
	//switch to 12 column grid once there's room
	@include at-breakpoint($breakpoint-large){
	@include container;
	@include susy-grid-background;
	}
	//switch to 16 column grid once there's room
	@include at-breakpoint($breakpoint-xl){
	@include container;
	@include susy-grid-background;
	}
	//switch to 20 column grid once there's room
	@include at-breakpoint($breakpoint-xl){
	@include container;
	@include susy-grid-background;
	}
	}