Skip to content

Instantly share code, notes, and snippets.

@pdewouters
Created April 22, 2012 14:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save pdewouters/2464266 to your computer and use it in GitHub Desktop.
Save pdewouters/2464266 to your computer and use it in GitHub Desktop.
Genesis layouts with SCSS / Susy fluid grid
// Layout ----------------------------------------------------------------------
@include establish-baseline(16px);
#nav,
#inner,
#footer{
@include container;
width:100%;
@include padding-trailer(1);
}
.wrap{
@include pad(1,1);
@include pie-clearfix;
@media screen and (min-width: 980px){
@include pad(2,2);
}
}
.full-width-content #content{
@include full();
}
#nav{
display: none;
@media screen and (min-width: 600px){
display:block;
}
}
#mobile_menu_primary{
display:block;
@include margin-leader(1);
@media screen and (min-width: 600px){
display:none;
}
}
#footer{
@include dark-overlay(.3);
}
.content-sidebar{
#content{
@media screen and (min-width: 600px){
@include columns(9);
@include alpha;
}
}
#sidebar{
@media screen and (min-width: 600px){
@include columns(3);
@include omega;
}
}
}
.sidebar-content{
#content{
@media screen and (min-width: 600px){
@include columns(9);
@include omega;
}
}
#sidebar{
@media screen and (min-width: 600px){
@include columns(3);
@include alpha;
}
}
}
.sidebar-content-sidebar{
#content-sidebar-wrap {
@include full();
@media screen and (min-width: 980px){
@include columns(9);
@include alpha;
}
#content{
@media screen and (min-width: 700px){
@include columns(9,12);
@include omega;
}
@media screen and (min-width: 980px){
@include columns(6,9);
@include omega;
}
}
#sidebar{
@media screen and (min-width: 700px){
@include columns(3,12);
@include alpha;
}
@media screen and (min-width: 980px){
@include columns(3,9);
@include alpha;
}
}
}
#sidebar-alt{
@media screen and (min-width: 700px){
@include pie-clearfix;
}
@media screen and (min-width: 980px){
@include columns(3);
@include omega;
}
}
}
.sidebar-sidebar-content{
#content-sidebar-wrap {
@include columns(9);
@include omega;
#content{
@media screen and (min-width: 600px){
@include columns(6,9);
@include omega;
}
}
#sidebar{
@media screen and (min-width: 600px){
@include columns(3,9);
@include alpha;
}
}
}
#sidebar-alt{
@media screen and (min-width: 600px){
@include columns(3);
@include alpha;
}
}
}
.content-sidebar-sidebar{
#content-sidebar-wrap {
@include columns(9);
@include omega;
#content{
@media screen and (min-width: 600px){
@include columns(6,9);
@include alpha;
}
}
#sidebar{
@media screen and (min-width: 600px){
@include columns(3,9);
@include omega;
}
}
}
#sidebar-alt{
@media screen and (min-width: 600px){
@include columns(3);
@include omega;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment