Question

I’m using Susy for my grid layout and want the container to apply grid-padding at widths below 960px, but remove grid-padding at 960px and up. I could just set grid-padding to 0 and then apply padding with a breakpoint, but want to be able to apply it in other situations. I tried using Eric Meyer’s bleed mixin, but it sends my grid to the left. I modified the bleed mixin to remove padding and center the container, but I’m not sure this is the best approach. Is there a better way to accomplish this while keeping the other bleed options viable?

Susy Variables

// --- Layout --- 
$max-site-width: 960px; // sets the max width

// --- Susy Grid System ---
$container-style: magic;
$container-width: $max-site-width;
$total-columns: 12;
$column-width: 4em;
$gutter-width: 2em;
$grid-padding: 1em;

Eric’s Bleed Mixin:

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

Modified with $orient to center the container without padding

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

  }
}

Apply bleed in SCSS where breakpoint is a standalone mixin with at-max = $max-site-width

.test-grid{
    @include container;
    @include breakpoint(at-max){
        @include bleed($orient: center);
    }
}

Answer 1

You don’t want the bleed mixin at all in this case. You just want to remove/add the grid-padding. The bleed mixin is for pushing elements outside their containers – but if you want all the elements to bleed, you should just get rid of the padding on your container. That’s easy:

.test-grid{
  @include container;
  @include breakpoint(at-max){
    padding: 0;
  }
}