9

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.

brett rogers
  • 6,501
  • 7
  • 33
  • 43
Dave Foy
  • 93
  • 1
  • 3

4 Answers4

10

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!

Miriam Suzanne
  • 13,632
  • 2
  • 38
  • 43
  • 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?' – Dave Foy Mar 14 '14 at 05:36
  • Grid debug background gets rendered full width and all layout seems off the grid. – henrijs Nov 19 '14 at 15:36
  • The debug background should be smart about padding (using `background-origin` and `background-clip`), but the debug overlay is not as smart. – Miriam Suzanne Nov 24 '14 at 22:50
  • 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? – Slava Fomin II Jun 15 '15 at 22:16
  • Susy doesn't have it built in. You could create a shared class, just share a variable, or wrap the `container` mixin. – Miriam Suzanne Jun 17 '15 at 05:30
  • @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). – herman Aug 28 '15 at 10:34
  • 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. – Miriam Suzanne Aug 29 '15 at 11:17
  • 2
    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. – Miriam Suzanne Aug 29 '15 at 11:20
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; 
}
Zell Liew
  • 162
  • 9
  • 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 – branquito Jul 13 '15 at 17:44
0

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.

Erik Markhauser
  • 112
  • 5
  • 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. – ividyon Feb 23 '17 at 10:07
0

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

herman
  • 11,740
  • 5
  • 47
  • 58