How to make static element widths in a fluid grid system in Susy2

Question

I'm new to CSS and front end styling and I've chosen Sass and Susy2 as the 2 frameworks I'd like to work off of.

My susy config looks like this:

$susy: (
        columns: 16,
        gutters: 1/4,
        column-width: 2rem,
        output: isolate
);

So this gives me 16 fluid columns to work with. I understand breakpointing and shifting content around that way but is there a way to define an element with a static width or is this not best practice?

For example I have my menu button and other elements on my top navbar that I'd like to keep from shrinking and expanding with the page.

I'm pretty new to fluid design so I'm not sure if I should make containers that use @span and then make static width elements within those? It seems like that adds an extra layer in my html where I'd just like to have a @span on the elements themselves.

Answer 1

It's hard to comment on specifics here, so I'll try to answer the more general best-practice questions:

• It is possible, but can be difficult, to include static elements inside a fluid layout. That's true with or without Susy. How difficult it is depends on the specific layout/responsiveness you want - but Susy has no real opinion one way or another.
• If elements don't shrink/expand, you just have to decide what happens with the extra space when there is too much, and what happens to the elements when they no longer fit.
• Susy has no real opinion about Static vs fluid vs mixed — but there is no way for Susy to calculate a mixed grid, and still understand it as a single grid. Mixing static and fluid is by definition breaking the grid. you can do it, and Susy won't know the difference, but you're off the beaten path.
• Susy is primarily a layout-math calculator, with some extra shortcuts for establishing CSS layouts. There is nothing magic or required about a span, so you can use it anywhere it is helpful, and not use it when it gets in the way.

Basically, Susy is built to be as flexible as you want it to be. Each Susy mixin provides a shortcut for certain layout-related CSS, which you can use as you like. The Susy functions also give you direct access to the math, which you can use as you see fit.