CODEWITHSUNDEEP
csssasssusy-compass
rctneil
rctneil

Reputation: 7220

Susy Columns media layout query

I have used Compass Susy on a couple of projects recently and have a few questions about it that have occurred to me now I have tried it out a couple of times.

I am starting as a desktop first workflow here by the way.

On these projects I have set my default column widths, gutters, etc.

Let's say I have a 12 column grid of 90px with 10px gutters

Then, when I reach a media query for mobile, say I want a 4 column grid then I have a media layout like: $mobile: 4 480px

@include at-breakpoint($mobile) { // Styles here }

What I have gotten really confused about is I don;t understand the media layouts. If I specify in the media layout that I want 4 columns at a min width of 480 pixels then how does it know what widths the columns are or what gutter width I want. I'm guessing it uses the defaults. Is that what it uses?

To get around this, for each media query I have ended up having to set the media query, span the columns and then use the with-grid-settings mixin to specify a new grid and then re include the container.

I may just be getting the wrong end of the stick. Could someone explain how it is meant to work and how I should be going about using Susy properly?

Thanks

Upvotes: 2

Views: 824

Answers (1)

Miriam Suzanne
Miriam Suzanne

Reputation: 14010

You're right. at-breakpoint is not meant to give you completely new grid settings at every size - only to change the number of columns. with-grid-settings is the right tool to use for changing the grid settings, and the two of them work well together if you need to change grid settings at different sizes. 

@include at-breakpoint($mobile) { 
  @include with-grid-settings(4,3em,2em,1em) { // styles here }
}

There is currently no shortcut for that.

Upvotes: 4

Related Questions