Menu icon Foundation
What is the SASS variable for column gutters?

I want to create a class for 'vertical' gutters, eg something like:

 

.vertical-gutter {
  padding-top: 0.9375rem;
  padding-bottom: 0.9375rem;
}

I could hard code this, as above, but I'd rather use Foundations's SASS variables so that everything is nice and neat.

Looking through the documentation, I found:

 

$grid-column-gutter: (
  small: 20px,
  medium: 30px,
);

And so made:

.vertical-gutter {
  padding-top: #{map-get($grid-column-gutter, small)};
  padding-bottom: #{map-get($grid-column-gutter, small)};
}

However, these are set to 20px, not 0.9375rem so that when combined with the default column padding I get non-unform padding that is 20px high and 15 px wide

Would anyone know what the SASS class that provided 0.9375rem is called?

guttersSassscssgridcolumns

I want to create a class for 'vertical' gutters, eg something like:

 

.vertical-gutter {
  padding-top: 0.9375rem;
  padding-bottom: 0.9375rem;
}

I could hard code this, as above, but I'd rather use Foundations's SASS variables so that everything is nice and neat.

Looking through the documentation, I found:

 

$grid-column-gutter: (
  small: 20px,
  medium: 30px,
);

And so made:

.vertical-gutter {
  padding-top: #{map-get($grid-column-gutter, small)};
  padding-bottom: #{map-get($grid-column-gutter, small)};
}

However, these are set to 20px, not 0.9375rem so that when combined with the default column padding I get non-unform padding that is 20px high and 15 px wide

Would anyone know what the SASS class that provided 0.9375rem is called?

Rafi Benkual almost 2 years ago

Are you using the new XY Grid? It has a vertical margin or padding class already called .grid-margin-y

Jessica Barnes almost 2 years ago

Just imagine you want a responsive list of products where product items have a width of 50% on mobile devices and 33% on tablets and desktops. Nobody wants to write long pieces of code, so let’s catch the clean HTML and add some Bootstrap to the CSS.