Difference between revisions of "Susy Grid"

From rbachwiki
Jump to navigation Jump to search
 
(3 intermediate revisions by the same user not shown)
Line 72: Line 72:
$wide: 1200px;
$wide: 1200px;
  
  
.navbar {
.navbar {
@include container;
@include container;
.brand{
.brand{
@include span(4);
@include span(4);
float: left ;
float: left ;
font-weight: $bold;
font-weight: $bold;
font-family: $headFont;
font-family: $headFont;
text-align: center ;
text-transform: uppercase ;
background: $navBrandBg; 
a{
color: $navForeground;
text-decoration: none ;
text-align: center ;
text-align: center ;
text-transform: uppercase ;
display: inline-block ;
background: $navBrandBg; 
padding: 10px;
a{
font-size: 1.5em ;   
color: $navForeground;
text-decoration: none ;
@include breakpoint(max-width $small){
text-align: center ;
font-size: 1.2em ;
display: inline-block ;
span{
padding: 10px;
display: none ;
font-size: 1.5em ;   
@include breakpoint(max-width $small){
font-size: 1.2em ;
span{
display: none ;
}
}
}
} // a
}
} //brand
} // a
ul {
} //brand
@include span(8 at 4 of 12);
ul {
li{
@include span(8 at 4 of 12);
float: left ;
li{
a{
float: left ;
color: $navForeground;
a{
font: $mainFont;
        color: $navForeground;
font-size: 1em;
font: $mainFont;
display: inline-block;
font-size: 1em;
padding: 10px 10px 10px 45px;
display: inline-block;
text-decoration: none ;
padding: 10px 10px 10px 45px;
// icon styles
text-decoration: none ;
-webkit-background-size: 35px;
// icon styles
-o-background-size: 35px;  
background-size: 35px;
background-size: 35px;  
background-repeat: no-repeat ;
background-repeat: no-repeat ;
background-position: 2px;
background-position: 2px;
&.info {background-image: url(../../images/icons/info.png);}
&.info {background-image: url(../../images/icons/info.png);}
&.rooms {background-image: url(../../images/icons/rooms.png);}
&.rooms {background-image: url(../../images/icons/rooms.png);}
&.dining {background-image: url(../../images/icons/dining.png);}
&.dining {background-image: url(../../images/icons/dining.png);}
&.events {background-image: url(../../images/icons/events.png);}
&.events {background-image: url(../../images/icons/events.png);}
&.attractions {background-image: url(../../images/icons/attractions.png);}
&.attractions {background-image: url(../../images/icons/attractions.png);}
    &:hover {
    &:hover {
    background-color: $navHover;
    background-color: $navHover;
    color: $blue;  
    color: $blue;  
    } // hover
    } // hover
    @include breakpoint(0 $small){
    @include breakpoint(0 $small){
    padding: 10px 18px;
    padding: 10px 18px;
    &::after{
    &::after{
    content:'\000a0';
    content:'\000a0';
    display: block ;
    display: block ;
    }
    }
    span{
    span{
    display: none ;
    display: none ;
    } // sapn
    } // sapn
    }//breakpoint
    }//breakpoint
    @include breakpoint($small $medium){
    @include breakpoint($small $medium){
    padding: 10px ;
    padding: 10px ;
    &.icon {
    &.icon {
    background-image: none ;
    background-image: none ;
    }// breakpoing
    }// breakpoing
    }
    }
 
} // a
} // a
}// li
}// li
}
}
} // navbar
} // navbar
} // nav
} // nav
</pre>
</pre>
Line 154: 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]]==
==[[#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