Created
September 9, 2013 02:52
-
-
Save dannyprose/6490975 to your computer and use it in GitHub Desktop.
Working with Susy 2 syntax.
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
//Grid-wide settings | |
$columns : 4; | |
$break-large : 50em; | |
$break-medium : 35em; | |
//Ulitities | |
$show-grids : hide; //show-grids or hide | |
//Basic Padding | |
@mixin grid-padding { | |
@include background-origin(content-box); | |
@include background-clip(content-box); | |
padding: rhythm(0.25) 1.5em; | |
} | |
//Grid Setup | |
div[role="content"] { | |
@include container; | |
@include grid-padding; | |
@include breakpoint($break-large) { | |
@include use-grid(16 1/4) { | |
@include container; | |
@include grid-padding; | |
max-width: 65em; | |
} | |
} | |
@include breakpoint($break-medium) { | |
@include use-grid(16 1/4) { | |
@include container; | |
@include grid-padding; | |
max-width: 65em; | |
} | |
} | |
div[role="content_main"] { | |
@include breakpoint($break-medium) { @include span(48% no-gutters); } | |
@include breakpoint($break-large) { @include span(48% no-gutters); } | |
} | |
div[role="content_second"] { | |
@include breakpoint($break-medium) { @include span(last 48% no-gutters); } | |
@include breakpoint($break-large) { @include span(last 48% no-gutters); } | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Looks good, but you can simplify. If you want smooth container transitions the whole way up, I only bother setting the largest. All it really does is add a max-width and a clearfix, anyway. Column count doesn't matter if you are setting an outer width yourself.
And you may as well take advantage of the mobile-first approach with your nested content. Don't bother with a large breakpoint for settings that are identical to the medium.
48%
is48%
, not matter what the context, so leave it alone:That should give you exactly the same setup, in a fraction of the code. :)