Skip to content

Instantly share code, notes, and snippets.

@dannyprose
Created September 9, 2013 02:52
Show Gist options
  • Save dannyprose/6490975 to your computer and use it in GitHub Desktop.
Save dannyprose/6490975 to your computer and use it in GitHub Desktop.
Working with Susy 2 syntax.
//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); }
}
}
@mirisuzanne
Copy link

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.

div[role="content"] {
  @include container(65em); 
  @include grid-padding; // This may be a good idea to roll in to Susy...
}

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% is 48%, not matter what the context, so leave it alone:

div[role="content_main"] { 
  @include breakpoint($break-medium) { @include span(48% no-gutters); }
}

div[role="content_second"] { 
  @include breakpoint($break-medium) { @include span(last 48% no-gutters); }
}

That should give you exactly the same setup, in a fraction of the code. :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment