Susy: How to Extend Content Box to Cover Grid-Padding as Well

Susy: How to extend content box to cover grid-padding as well?

You have two good options. One is a simplified version of what you have. Since block elements are 100% width by default, you can simply eliminate your width setting (and all that hacky math).

header {
    height: 150px;
    margin: 0 0 - $grid-padding;
}

Your other option is to use multiple containers on the page. That requires a change to the markup, but sometimes it's a simplification that works well. If you move the header outside your current container, and declare it as a container of it's own, that will do the trick.

(as a side note: if you do need the full width ever, you can simply use the columns-width() function (for inner width, without padding) or container-outer-width() for the full width including the padding.)

UPDATE:

I've been using this mixin, to apply bleed anywhere I need it:

@mixin bleed($padding: $grid-padding, $sides: left right) {
  @if $sides == 'all' {
    margin: - $padding;
    padding: $padding;
  } @else {
    @each $side in $sides {
      margin-#{$side}: - $padding;
      padding-#{$side}: $padding;
    }
  }
}

Some examples:

#header { @include bleed; }
#nav { @include bleed($sides: left); }
#main { @include bleed($sides: right); }
#footer { @include bleed(space(3)); }

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

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!

How to set a maximum container-width in Susy that only the padding/margin keeps growing on larger viewports?

Both the % units and the squish mixin are working against you. Susy sets a max-width on containers by default, in the same units you used to define the grid. In fact, that's all those units are used for. If you want your max-width to be in px, define your grid in px. If you want em use em. $container-width is an override for the default, so that should have worked. I would have to see your actual code when you tried that to know what went wrong.

I recommend just this:

$total-columns: 24;
$column-width: 30px; // adjust as needed
$gutter-width: 10px; // adjust as needed
$grid-padding: 0;

.sectionwrap{
  @include container;
}

Anything else is really just overcomplicating things.

How to get the Susy +pad mixin to work?

A few things:

1. Unless you use the border-box box-sizing model, padding is added to a span width. If you want an outer span of 9, with a prefix of 1, you need to span 8 and add the prefix.

2. Relative padding is based on the parent element width, not the current element, so span-columns and pad or prefix should always be passed the same context argument. Currently, this is wrong:

   .image-group-title
     +span-columns(10, 14)
     padding: 1em 0
     +pad(1,0,10)
     +trailer(.5)
   

   it should be:

   .image-group-title
     +span-columns(10, 14)
     padding: 1em 0
     +prefix(1, 14)
     +trailer(.5)
   

It's not clear in your example what code is applied to the p in question, so very hard to know if I'm actually answering the question, but I hope that helps.

How to use Susy grids to create a 'bootstrap' style grid?

Susy has a gutter-position setting that already allows you to choose split (half-gutter margins) or inside (half-gutter padding) as options — so you don't have to do that math yourself. Set gutter-position to inside, and the gutter() function will return a half-gutter width. Here it is in sassmeister with split gutters:

$susy: (
  columns: 12,
  gutters: 0.8,
  gutter-position: split,
);

@include border-box-sizing;

.container {
  @include container();
}

.row {
  margin-left: 0 - gutter();
  margin-right: 0 - gutter();
}

.column {
  @include span(2)
}

Susy Next content source ordered layout

You're right - it's totally possible and not even very hard in Susy Next:

.region {
  &:first-child { @include span(last 8); }
  &:nth-child(2) {
    clear: right;
    @include span(4 at 5 isolate);
  }
  &:nth-child(3) { @include span(last 4 isolate); }
  &:last-child { width: span(4); }
}

The isolation option allows you to position elements at specific locations on the grid.

Susyone no longer working as expected after update

This isn't a change in Susy, it's a change in Sass. Looks like you need the !global flag on all the settings for them to take effect:

.dropdown .susy_container{
    //Get ready for grids with bigger screen sizes
    $total-columns: 12 !global;  // a 12-column grid
    $column-width: 100em !global;  // each column
    $gutter-width: 1em !global;  // gutters between columns
    $grid-padding: 0em !global ;
    @include container;
}

Adding Padding to the sides keeps breaking layout

Add it to your columns, like this:

#content {
  @include span(9 of 12);
  padding: 20px 0 20px 20px;
}

#sidebar {
  @include span(last 3 of 12);
  padding: 20px 20px 20px 0;
}

Here you have it working:

http://codepen.io/yivi/pen/BywygG

And here with fluid math:
http://codepen.io/yivi/pen/jEGEjj

How to make my header span only 2 grid units and keep its position fixed in Susy Compass?

See the answers and comments on "A `position:fixed` sidebar whose width is set in percentage?".

z-index may be the best fix, but you also may be able to fix it by getting rid of the clearfix on the header - so it collapses around the floated elements inside it. That clearfix is happening in the Susy container mixin, so you would have to use set-container-width instead (along with auto-margins to center it in the window.

---

Related Topics