Susy Grid

Responsive Design using Breakpoint

Breakpoint needs to be installed
gem install breakpoint
require 'breakpoint' // in the config.rb file
  

Grid Global Setting (Maps) _grid.scss

// Requirements
// ============
@import "compass";
@import "susy";


$susy: (
 flow: ltr, // ltr | rtl
  output: float, // float | isolate
  math: fluid, // fluid | static (requires column-width)
  column-width: false, // false | value
  container:700px, // length or % | auto
  container-position: center, // left | center | right | <length> [*2] (grid padding)
  last-flow: to,
  columns: 12,
  gutters: 1/4,
  gutter-position: after, // before | after | split | inside | inside-static (requires column-width)
  global-box-sizing: border-box, // content-box | border-box (affects inside/inside-static)
  debug: (
  		image: show,
  		color: rgba(#656, .25),
  		output: background,
  		toggle: top right,
  	),
  use-custom: (
  	background-image: true,
  	background-options: false,
  	box-sizing: true,
  	clearfix: false,
  	rem: true,
  	)
);
  // you can defing a second grid for different scaling
  $widelayout: (
  columns: 24,
  gutters: 1/4,
  math: fluid,
  output: float,
  gutter-position: inside,
  
);

Shorthand syntax for layout maps

	@include layout(24 1/4 fluid float inside);
  // 960 grid 
  @include layout(12(60px 10px) split static);
  // you need to set your @include container(960px);

To use breakpoint, wrap your code into a breakpoint function

$narrrow: 400px;
$small: 650px;
$medium: 960px;
$wide: 1200px;
  	
.navbar {
	@include container;
	.brand{
		@include span(4);
		float: left ;
		font-weight: $bold;
		font-family: $headFont;
		text-align: center ;
		text-transform: uppercase ;
		background: $navBrandBg;   
		a{
			color: $navForeground;
			text-decoration: none ;
			text-align: center ;
			display: inline-block ;
			padding: 10px;
			font-size: 1.5em ;  
			
			@include breakpoint(max-width $small){
				font-size: 1.2em ;
				span{
					display: none ;
				}
			}
		} // a
	} //brand
	ul {
		@include span(8 at 4 of 12);
		li{				
			float: left ;
	a{
	        color: $navForeground;
		font: $mainFont;
		font-size: 1em;
		display: inline-block;
		padding: 10px 10px 10px 45px;
		text-decoration: none ;
		// icon styles
		
		background-size: 35px; 
		background-repeat: no-repeat ;
		background-position: 2px;
		&.info {background-image: url(../../images/icons/info.png);}
		&.rooms {background-image: url(../../images/icons/rooms.png);}
		&.dining {background-image: url(../../images/icons/dining.png);}
		&.events {background-image: url(../../images/icons/events.png);}
		&.attractions {background-image: url(../../images/icons/attractions.png);}
		    &:hover {
		    	background-color: $navHover;
		    	color: $blue; 
		    } // hover
		    @include breakpoint(0 $small){
		    	padding: 10px 18px;
		    	&::after{
		    	 content:'\000a0';
		    	 display: block ;
		    	}
		    	span{
		    		display: none ;
		    	} // sapn
		    }//breakpoint
		    @include breakpoint($small $medium){
		    	padding: 10px ;
		    	&.icon {
		    		background-image: none ;
			    	}// breakpoing
			    }
				} // a
		}// li
	}
} // navbar
} // nav

Breakpoint mixin

susy-breakpoint($large, 24) // if you use this you dont have to @include layout(24)
  @include pad(10px)
  

Using susy Pad function

The pad function will offset your column x left by x right

@include pad(3,1);

This will offset it 3 columns form the left and 1 column from the right ---