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.

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!

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; 
}

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.

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%).