Difference between revisions of "Susy Grid"

From rbachwiki
Jump to navigation Jump to search
 
(9 intermediate revisions by the same user not shown)
Line 4: Line 4:
Breakpoint needs to be installed
Breakpoint needs to be installed
gem install breakpoint
gem install breakpoint
@ require 'breakpoint'; // in the config.rb file
require 'breakpoint' // in the config.rb file
    
    
</pre>
</pre>
== Grid Global Setting (Maps) _grid.scss ==
<pre>
// 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,
 
);
</pre>
==  Shorthand syntax for layout maps ==
<pre>
@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);
</pre>


== To use breakpoint, wrap your code into a breakpoint function ==
== To use breakpoint, wrap your code into a breakpoint function ==


<pre>
<pre>
  $small: 500px;
$narrrow: 400px;
  $large: 1200px;
$small: 650px;
 
$medium: 960px;
breakpoint($small)
$wide: 1200px;
  {
 
  main { @include span(8);
.navbar {
  }
@include container;
    
.brand{
  aside {
@include span(4);
  @include span(4 at 9);
float: left ;
  }
font-weight: $bold;
 
font-family: $headFont;
  @include breakpoint($large){
text-align: center ;
@include layout(24);
text-transform: uppercase ;
background: $navBrandBg;    
main {
a{
@include span(21);
color: $navForeground;
.col1, .col2, .col3 {
text-decoration: none ;
@include span(8);
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
aside {
@include span(3 at 21);
}
</pre>
</pre>
==  Breakpoint mixin ==
==  Breakpoint mixin ==
Line 44: Line 152:
    
    
</pre>
</pre>
== 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
----
==[[#Responsive Design using Breakpoint|Back To Top]]-[[Main_Page| Home]] - [[Css|Category]]==

Latest revision as of 20:41, 14 August 2016

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


Back To Top- Home - Category