Foundation-sites: Feature Proposal: Space Mixing

[phifa]

I built a mixin that I use all the time, and I wanted to share this. Maybe something like this can be an integrated helper mixin? The idea behind it is simple: I often find myself in the situation, where I need spacing, this can be padding, margin or simple left, right positioning. And very often I wanted this spacing to be dependent on my current gutter.

I am not an expert in scss, so I would welcome any improvements on this mixin, but this is how I set it up so far and I love using it:

@mixin space ($top:false, $bottom:false, $left:false, $right:false, $multiply:1, $property:'padding'){
  @each $breakpoint, $value in $grid-column-gutter {
    $property-prefix: $property;
    @if $property == margin {
      $property-prefix: margin-;
    } @else if $property == position  {
      $property-prefix: false;
    }  @else if $property == padding {
      $property-prefix: padding-;
    }
    $spacing: rem-calc($value)/2;
    @include breakpoint($breakpoint) {
      @if $top == true {
      #{$property-prefix}top: $spacing*$multiply;
      }
      @if $bottom == true {
      #{$property-prefix}bottom: $spacing*$multiply;
      }
      @if $left == true {
      #{$property-prefix}left: $spacing*$multiply;
      }
      @if $right == true {
      #{$property-prefix}right: $spacing*$multiply;
      }
    }
  }
}

This is how I use it for example:
@include space($top:true, $bottom:true);
or like this:
@include space($property:'margin', $top:true, $multiply:2);
one could also do this:
@include space($property:'absolute',$top:true, $left:true);

[IamManchanda]

@phifa Duplicate to #9607

Infact,
Pending PR ( Prototype Mode ) => #9738 ( #9736 )
which includes all prototypes utilities.

But i am happy you raised it ,
but please note ( as it should ) that prototype mode is not enabled by default
as everyone don't wants it!
But you can customize that easily!!!

[phifa]

@IamManchanda this has nothing to do with prototyping.

[IamManchanda]

@phifa Oh yeah .... i just read that title .... so what's your motive then ?

[phifa]

This is a helper mixin. Let's say for example you have a footer and you want it to have a margin-top that corresponds with the overall gutter spacing of the site (double it). Also it should have padding-top and padding-bottom, that corrosponds with the current gutter. This is how this mixin can help then:

.footer {
  @include space($top:true,$bottom:true);
  @include space($top:true,$property:'margin',$multiply:2);
}

In settings.scss I have this $grid-column-gutter:

$grid-column-gutter: (
        small: 20px,
        medium: 40px,
        large: 60px,
        xlarge: 80px,
);

This results in the following CSS

.footer {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  margin-top: 1.25rem;
}
@media print, screen and (min-width: 40em) {
  .footer {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem; 
    margin-top: 2.5rem;
  } 
}
@media print, screen and (min-width: 64em) {
  .footer {
    padding-top: 1.875rem;
    padding-bottom: 1.875rem; 
    margin-top: 3.75rem; 
  } 
}
@media screen and (min-width: 75em) {
  .footer {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem; 
    margin-top: 5rem; 
  } 
}

[kball]

Curious what some of our more designy folks think of this @jnemeth @tdhartwick @brettsmason @andycochran

[phifa]

One occurrence where I use it literally every time, is when I use cards in the block grid. Since they have full width, their spacing to the left and right is normal gutter spacing. But the margin bottom spacing is different. With the space() mixin I get margin bottom spacing for each breakpoint just like gutter, so cards have same spacing to the left and right and bottom.

Also where I use it often, is when I have a fixed item at the bottom of the screen on the right side for example, like a chat button or slide-in-contactpanel, etc. I keep it bottom:0, but usually I use the space() mixin to keep the right spacing based on the gutter, so it is in line with other content on the page. Makes sense?

Also I just saw that $property-prefix: false does not work. It should be $property-prefix: ''`.

Well, it all does not seem super elegant, so I'd appreciate some optimization, even if it doesn't make it to the foundation core. Cheers!

[kball]

@phifa I think we have a way to handle this for block grid... but still curious what @tdhartwick @brettsmason @andycochran and @jnemeth think of this.

[andycochran]

I'd use this mixin. Similar use cases are why I added the grid-column-margin mixin for bottom margins on block grid columns w/ the .column-block class — which could be reworked to use this same method.

[kball]

Interesting... so refactoring the block grid approach to essentially use a mixin like this, and leaving the mixin as an available helper sounds like a winner. @phifa would you like to submit a PR for this?

[phifa]

sure, how and where would be the right place for this?

[kball]

Hmm... @andycochran @brettsmason what do you think? If we were going to create a space helper that could be used to do spacing in any direction in values relative to the gutters, where should it live? In utils?

Looking forward, would it make sense to use this underlying helper to create our grid gutters as well?

[andycochran]

I do like the idea of consistency in method, the helper powering the grid gutters too.

But I usually just do something like this:

.component {
  padding: map-get($grid-column-gutter, small) / 2;
  @include breakpoint(medium) {
    padding: map-get($grid-column-gutter, medium) / 2;
  }
  @include breakpoint(large) {
    padding: map-get($grid-column-gutter, medium);
  }
}

…which has the advantage over the proposed mixin of being able to control which breakpoints to use and which gutter value each breakpoint gets.

That's not possible with @include space($top:true,$bottom:true);. At least not without making the arguments messy.

[JeremyEnglert]

This seems like a pretty big re-write, which won't happen in 6.

This is marked as a "feature request" so we can revisit in V7.