Question

Is there a way to make Compass Susy work from large widths down to mobile?

I understand mobile first to keep filesizes small and the like but from the perspective of layouts, Surely building a full desktop version and having breakpoints remove items for narrower widths would be best?

Any thoughts?

Answer 1

Yes, you can. I actually find it much easier to work mobile-up building layouts, because that makes me think about content before layout. I think it’s a better process to start from absolute minimal, and add at each step as needed. That said, Susy will work with any process you like. Just use max-widths for your media-queries instead of min-widths.

The at-breakpoint mixin accepts a three-part argument: $min $layout $max. You can pass any combination of those except max-only. Do it the same way you would do mobile-first, just with decreasing max-widths instead of increasing min-widths. The susy defaults are actually set up for a desktop-first approach. Just add breakpoints going down!

.page {
  @include container;
  @include at-breakpoint(9 40em) { /* a 9-column grid with max-width of 40em */ }
  @include at-breakpoint(6 20em) { /* a 6-column grid with max-width of 20em */ }
}