Created
April 22, 2012 14:09
-
-
Save pdewouters/2464266 to your computer and use it in GitHub Desktop.
Genesis layouts with SCSS / Susy fluid grid
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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