Menu icon Foundation
How do I get a value from the grid-column-responsive-gutter variable

I would like to get the current value from the responsive grid gutter variable so I can place a background graphic and match the responsive padding in the column. Is there a variable I can use that will give me the current gutter width?

e.g. - background: url(../images/logos/logo.svg) no-repeat right $column-gutter center/auto 90px; - - (Replace $column-gutter with variable that will work).

Is there a way for me to get the current value from the grid-column-reponsive-gutter variable? I want to use the current padding size in a background graphic so it will match the padding built into the column.
(In the example below, replace the variable colum-gutter below with the variable that will work.)

#mycolumn {
  background: url(../images/logos/logo.svg) no-repeat right $column-gutter center/auto 90px;
}     

         

gutterresponsive gutter

I would like to get the current value from the responsive grid gutter variable so I can place a background graphic and match the responsive padding in the column. Is there a variable I can use that will give me the current gutter width?

e.g. - background: url(../images/logos/logo.svg) no-repeat right $column-gutter center/auto 90px; - - (Replace $column-gutter with variable that will work).

Is there a way for me to get the current value from the grid-column-reponsive-gutter variable? I want to use the current padding size in a background graphic so it will match the padding built into the column.
(In the example below, replace the variable colum-gutter below with the variable that will work.)

#mycolumn {
  background: url(../images/logos/logo.svg) no-repeat right $column-gutter center/auto 90px;
}     

         
Carvel Avis over 3 years ago

Would like to know the answer to this as well.

Corey Schaaf over 3 years ago

I'm curious what your expectation would be is someone resizes the browser. Are you wanting the live width of the viewport as the page loads. But what about if someone resizes their window on a desktop? Javascript equalizer helps keeps column heights but a function like you're describing out of the box would only be helpful if that value changes as the page changes otherwise you would be stuck with a static number. 

While this doesn't exist in the framework (at least I don't think it does). What you're describing sounds like something you would do with jquery.

This page has a really good working example but you would have to build it outside of foundation. Not impossible. 

http://ryanve.com/lab/dimensions/

Also, have you considered using background-size as a percentage? 

Cordale Ottley over 3 years ago

Since Foundation already reports a specific padding for each column given a specific breakpoint, I just want access to that number with a variable. In this case, I am not using a column, but want the element I am using to mimic the same amount of space/padding that the columns above use.

Brett Mason over 3 years ago

You can use the Sass map-get function, like so:

map-get($grid-column-gutter, medium)

This will return the pixel value of the medium breakpoint gutter. If you wanted a rem value you would just pass this to `rem-calc` like so: 

rem-calc(map-get($grid-column-gutter, medium))

I hope that helps!

Corey Schaaf over 3 years ago

Brett That's awesome! Out of curiosity, is this is a static number based the viewport when the page loads? What about the instances where someone resizes the browser? 

Carvel Avis over 3 years ago

Yea, Brett, thanks a bunch. Corey, here's one way you could set up responsive styling based on browser size. Our application uses SASS. We've set up a couple of extra screen sizes but only set different gutter sizes for 4 of them using the $grid-column-responsive array variable. 

.your-element
  padding-left: map-get($grid-column-responsive-gutter, small)
  @include breakpoint(medium)
    padding-left: map-get($grid-column-responsive-gutter, medium)
  @include breakpoint(large)
    padding-left: map-get($grid-column-responsive-gutter, large)
  @include breakpoint(xlarge)
    padding-left: map-get($grid-column-responsive-gutter, xlarge)

In our _settings.scss file we have:

$breakpoints: (
  small: 0,
  medium: 480px,
  large: 768px,
  largewide: 1024px,
  xlarge: 1280px,
  xxlarge: 1440px,
);

$breakpoint-classes: (small medium large largewide xlarge);

$grid-column-responsive-gutter: (
  small: 8px,
  medium: 12px,
  large: 15px,
  xlarge: 20px,
);

I tested this in our application and it works like a charm! Hope that helps, and thanks again, Brett.

Brett Mason over 3 years ago

Glad that helped! In order to apply a different value to each breakpoint you would need to do something like:

#mycolumn {
  background: url(../images/logos/logo.svg) no-repeat rem-calc(map-get($grid-column-gutter, small));

  @include breakpoint(medium) {
    background-position: rem-calc(map-get($grid-column-gutter, medium));
  }
}

And you would need to include a breakpoint for each size you have in the $grid-column-gutter map.

I hope that helps! I've been thinking of submitting a small PR for a helper function for outputting the $grid-column-gutter value without the other code.

Matt Ferderer over 3 years ago

I had this problem as well. Here is a mixin I created to help solve it. 

/// Calculates the width of gutter and applies it to specified property.
///
/// @param {List} $property - CSS Property to apply gutter size to

@mixin use-gutter(
  $properties
) {
  $gutter: $grid-column-gutter;

  @if type-of($gutter) == 'map' {
    @each $breakpoint, $value in $gutter {
      $padding: rem-calc($value) / 2;

      @include breakpoint($breakpoint) {
        @each $property in $properties {
          #{$property}: $padding;
        }
      }
    }
  }
  @else if type-of($gutter) == 'number' and strip-unit($gutter) > 0 {
    $padding: rem-calc($gutter) / 2;
      @each $property in $properties {
        #{$property}: $padding;
      }
  }
}

 

Then to use it I would do something like this:

.foo {
    @include use-gutter(('margin-top', 'margin-bottom'));
}

 

If I had multiple breakpoints I would get something like the following generated:

.foo {
  margin-top: 0.625rem;
  margin-bottom: 0.625rem;
}
@media screen and (min-width: 40em) {
  .foo {
    margin-top: 0.9375rem;
    margin-bottom: 0.9375rem; 
  }
}

Cordale Ottley about 3 years ago

That's great - Thanks Matt!

Gary Steffins about 1 year ago

 

This is an old thread, but a new problem for me, this seems to work well for v6.5, keeping amount of code to a minimum:

@function gutter($size) {
   @return rem-calc(map-get($grid-column-gutter, $size) * 1px);
}
.class {
margin: gutter(small);
@include breakpoint(medium){
margin: gutter(medium);
}
}