Is there a way to set a minimum width to an element using susy?

I know it's probably not possible and I've looked through the documentation and I couldn't find it.

Here's my scenario:

Say I have a 12 column grid, main content on the left side and secondary on the right side.

I'm following a mobile-first approach, so the default styling (mobile) makes both the left and right columns 100%. The main content being first and secondary at the bottom.

Then for tablet/desktop I make the main content 8 columns (aligned to the left) and the secondary 4 columns (aligned to the right). However, I need the secondary content column to always be at least 300px (because of an ad).

Is there a way I can do this with Susy?

Solution

Sure. The simplest way is to make sure your breakpoint doesn't happen until there is enough space for 4/12 columns to be greater than 300px. Failing that, you have to get creative.

The only possible way to do that in CSS is to have the controlled element (secondary) come first in the markup. Because of the way document flow is handled, it isn't possible to have a later element affect a former one — and you need the styles on secondary to control how main moves.

The first thing is to get secondary moving the way you want it. You'll also need to set up your gutter manually here:

.secondary {
  @include span-columns(4 omega);
  min-width: 300px;
  margin-left: gutter();
}

Then you need to give maina layout context, so that it doesn't wrap around the floated secondary. The simplest way to do that (with some side-effects) is to use overflow: hidden.

.main {
  overflow: hidden;
}

That's it. If you can't use overflow: hidden, there are other approaches that might work for you. The OOCSS lastUnit serves this purpose, but uses a lot more code.

Or you could use flexbox instead, but support isn't great.

Basically: Susy isn't the problem — there are ways to do it, but it's going to take some work no matter what system you use. I still recommend a higher breakpoint (or an intermediate one).