Menu icon Foundation

My Posts


My Comments

Matt Ferderer commented on Cordale Ottley's post over 3 years

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

Matt Ferderer commented on Matt Ferderer's post over 3 years

In regards to the styleguide module are you referring to the code that is part of the gulp file & the docs task? 

Matt Ferderer commented on Matt Ferderer's post over 3 years

Ideally we would create living documentation for our projects similar to the ones Foundation has created that explain how to use the classes, sass methods, JS functions, React components, etc in our project. We would also use it to help create a style guide. 
I did look through the entire documentation on GitHub. I was hoping to see if I could find if anyone had anything else. I may just need to take some time & sit down with an empty project and slowly try to understand how Supercollider works. 

Posts Followed


Following

    No Content

Followers

My Posts


My Comments

You commented on Cordale Ottley's post over 3 years

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

You commented on Matt Ferderer's post over 3 years

In regards to the styleguide module are you referring to the code that is part of the gulp file & the docs task? 

You commented on Matt Ferderer's post over 3 years

Ideally we would create living documentation for our projects similar to the ones Foundation has created that explain how to use the classes, sass methods, JS functions, React components, etc in our project. We would also use it to help create a style guide. 
I did look through the entire documentation on GitHub. I was hoping to see if I could find if anyone had anything else. I may just need to take some time & sit down with an empty project and slowly try to understand how Supercollider works. 

Posts Followed

Following

  • No Content

Followers

  • No Content