How to add left and right padding to containers in Susy 2.0

Question

I'm using Susy 2.0. I'm building a fixed-width site (that will become responsive in a later phase). However, I think my question applies when using Susy as static or fluid.

Here are my global settings:

$susy: (
 container: auto, 
 columns: 12,  
 column-width: 62px,
 math: static, 
 gutters: 1/3,
);

As per the Susy 2.0 docs with regard to static sites, I've set container to be auto and I'm letting the column-width settings dictate the width of my container elements.

I would like to apply a bit of left and right padding to containers, just so that there's a little bit of breathing space on either side when the viewport narrows on mobile, etc.

What's the best way of doing this? If I simply apply padding-left and padding-right (in plain CSS) to my container element, this breaks the grid. The container is no longer wide enough to contain Susy's column width calculations.

I have 'box-sizing' universally set to 'border-box' in my CSS. If I override this on my container element, with 'content-box', then the grid behaves correctly. I'd have expected the opposite actually?

Is the solution to apply 'box-sizing: content-box' to my container elements? Or is there a setting in Susy I can apply that I'm missing? I feel like there probably is. I'd rather let Susy handle all grid calculations if possible.

My question also applies to responsive/fluid design too, as I still have the same issue even if I give the container setting a specific width and remove the 'column-width' and 'math' settings.

Comedown

Answer 1

At the moment, setting content-box on the container and adding your own padding is the best way to go. While border-box is more sensible for most things, there are times when content-box makes sense, and in my opinion this is a great example. It works because Susy is setting your container width, and your padding adds to that, rather than being subtracted, which means you still have the space you need for the grid.

I'd be willing to consider some type of grid-padding feature again, but in Susy 1 it seemed like it caused more problems than it solved. I'll have to think through better ways we might do it. If you have ideas, I'm always interested!

Dol

Thanks Eric. I was actually about to add a comment before I saw your reply:'or put another way, what's the Susy 2.0 equivalent of $grid-padding?' – Comedown

Grid debug background gets rendered full width and all layout seems off the grid. – Almanac

The debug background should be smart about padding (using background-origin and background-clip), but the debug overlay is not as smart. – Dol

I have a similar issue. I'm using multiple containers on a page and adding padding manually to each of them seems not DRY. Is there a way to specify it on a global level? Or do I better create a wrapper for a container() mixin? – Aut

Susy doesn't have it built in. You could create a shared class, just share a variable, or wrap the container mixin. – Dol

@EricMSuzanne Is there any way Susy could support using a CSS calc(...) function as container width parameter ? Then we could just use e.g. calc(100% - 20px) and set margin: 0 auto to center, so we have 10px on each side (see my answer also). – Banks

I don't know any way in Sass to even recognize a css function like calc — but 100% - 20px doesn't actually solve the problem described above, which has to do with fixed-width grids and padding. More to the point: Susy is built to take apart. If the container mixin isn't doing what you need, you should stop using that mixin. It doesn't do anything magic: just width, clearfix, and centering. You could instead do width: container() + 20px; and set the clearfix/centering yourself. If you are using different units for the column-width and the padding, then calc() could help with that. – Dol

But I don't see how that's better than changing the box-sizing. This is exactly the use-case content-box is designed for. There is no reason not to use it. – Dol

Answer 2

For grid paddings I'll usually do something like this. Works great and theres no need for further complication :)

.container {
  @include container($susy); 
  padding-left: 15px; 
  padding-right: 15px; 
}

Rockey

yes, but when you do that, grid (when showing as background helper) escapes on resize, then after pressing f5 it goes into place again. this however does not happen normally in susy – Thompkins

Answer 3

In general, you need to add the keyword "static" to the container which gives you a static site, but you need to include the "math: fluid" to the settings to give you a site based on percentages. Otherwise, as you mentioned in your question, the "container is no longer wide enough to contain Susy's column width calculations".

Susy Settings

You can still have a site based on border-box. Add global-box-sizing: border-box to the settings. You need to also change "math: static" to "math: fluid" so that all your units are in percentages.

Border Box Include

Add "@include border-box-sizing;" outside of the @suzy settings. You may have to include compass with "@import "compass";"

Container

You need to include "static" as a parameter. The container takes a "layout" parameter (http://susydocs.oddbird.net/en/latest/toolkit/#container). The "layout" variable is made up of keywords (http://susydocs.oddbird.net/en/latest/shorthand/#shorthand-layout). The "keywords" include "static" (http://susydocs.oddbird.net/en/latest/shorthand/#term-keywords).

Full Example

$susy: (
 container: auto, 
 columns: 12,  
 column-width: 62px,
 math: fluid,
 global-box-sizing: border-box,
 gutters: 1/3
);

@include border-box-sizing;

.container {
     @include container(static);
     padding: 1%;
}

Padding can be added now to the container or any other element without breaking the site.

Wot

I'm sorry, but this answer is incorrect. If you use fluid math to turn the Susy values into percentages, then use border-box, the percentages within the grid will be based on the assumption that the container does not bear any padding, and thus all the values within will be slightly off. content-box on the container is needed to maintain the correct sizes. – Gravitate

Answer 4

If you're OK with adding some margin in the same mode (relative or fixed) as the container width itself, you can just reduce the width of your container and use margin: 0 auto to center it in it's parent.

Like this, for a 5% padding on each side:

.my-container {
    @include container(90%);
    margin: 0 auto;
}

If Susy would support CSS functions as container width, you would be able to use a fixed number of pixels even with a relative container width, like this for 10px on each side:

.my-container {
    @include container(calc(100% - 20px));
    margin: 0 auto:
}

Unfortunately, that doesn't work. Of course, if you can add a wrapper div around your container, you can set the width and margin there and use container(100%).

Banks