Susy: Creating a grid for given screen widths (breakpoint px values) and not knowing the width of a single column (a non-content-first approach)

Question

I\'m using Susy.

I failed leveraging the content-first approach and decided to go window-px-widths-first

At first i tried the content-first approach to grids,

Answer 1

Not bad, but a few things you could clean up.

First the settings. There's no point in using Susy for a single column, so you could drop your small grid entirely, create it by hand (just padding), and have cleaner code. Once you add multiple columns, your current settings don't make much sense. 2 columns at 85%, with a 15% gutter? That adds up to 185% width. It works, because Susy is actually more interested in the ratio between the numbers, than the numbers themselves, but it's a bit ugly. I would change it to e.g. 85px and 15px or 8.5em and 1.5em. Since you are overriding the container anyway, that shouldn't change anything - just a bit more sensible.

The other main change I would make is to drop all the set-column-width calls, since your width is a 100% fluid override anyway. All it's doing is setting a width of 100% every time. Why bother? With that out of the way, I imagine you could automate the dev-background calls with a simple loop through your breakpoints.

$layouts: $layout-m $layout-l $layout-xl $layout-xxl
@each $layout in $layouts
  +at-breakpoint($layout)
    +dev-grid-bg

Creating a shortcut to change column-spans at different breakpoints would be difficult on your end or ours, and would add a fair amount of output bloat unless that is really the only change you are making at each size. What you have currently looks good.