Web Design Guide 2024-10-28 08:44:01 | 2.0.0

Spacing 

<div class="container">
    <div class="grid-x grid-margin-x grid-margin-y medium-up-4">
        <div class="cell"><span class="h4">No background - no spacing</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
        <div class="cell -bg-gray-darker -cs-dark">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
        <div class="cell -bg-black -cs-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
        <div class="cell -bg-primary -cs-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    </div>
</div>
 
<div class="container">
  <div class="grid-x grid-margin-x grid-margin-y medium-up-4">
    <div class="cell"><span class="h4">No background - no spacing</span>{{text}}</div>
    <div class="cell -bg-gray-darker -cs-dark">{{text}}</div>
    <div class="cell -bg-black -cs-white">{{text}}</div>
    <div class="cell -bg-primary -cs-light">{{text}}</div>
  </div>
</div>
 
{
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}
  • Content: 
    /* Spacing */

@mixin make-colored-cell-spacing($colors) {
  @include -zf-breakpoint-value(auto, $grid-gutters) {
    .cell {
      @each $name, $color in $colors {
        &.-bg-#{$name} {
          padding: rem-calc($-zf-bp-value);
        }
      }
    }
  }
}

@include make-colored-cell-spacing($colors);
@include make-colored-cell-spacing($theme-colors);
  • URL: /components/raw/spacing/_spacing.scss
  • Filesystem Path: src/components/03-css-utilities/02-helpers/spacing/_spacing.scss
  • Size: 361 Bytes

There are no notes for this item.