Popular posts

I assume your talking about spacing within a component, eg. the space between a title and a text, etc.

I had the same dilemma.

// Sizing.
@mixin card-sizing($card-spacer-x, $card-spacer-y) {
  .card-title,
  .card-separator,
  .card-subtitle,
  .card-text,
  .card-element {
    margin-top: 0;
    margin-bottom: $card-spacer-y;
  }

  .card-subtitle {
    margin-top: -($card-spacer-y / 2);
  }

  .card-block { // I feel like this should not be there.
    padding: $card-spacer-y $card-spacer-x;
  }
}

.card {
  @include card-huer($card-background, $card-text-color, ...);
}

// Default sizing.
@include card-sizing($card-spacer-x, $card-spacer-y);

I designed this card components a while ago as a "one purpose - one look" component.. which was a mistake. I have a lot of themes to support with very different styles and each of them have their own requirements and look and feel.

At first, it bothered me a lot. Another mistake that I've done was trying to handle every possibility in the whole universe, even the most crazy one with the same monolithic stack of lines... It's good to think and anticipate some needs but I spent wayyy too much time doing that.

I ended up creating variants, with --modifier ; kind of BEM-style.

.card--vstream {
  @include card-huer($card-vstream-background, $card-vstream-color...);
  @include card-sizing($card-vstream-spacer-x, $card-vstream-spacer-y);
}

.card--event {
  @include card-huer($card-event-background, $card-event-color...);
  @include card-sizing($card-event-spacer-x, $card-event-spacer-y);
}

// etc.

I try to follow the ITCSS rules so I have:

• tools/cards.scss with the mixins
• settings/cards.scss with the (too?) many variables that you'll end up with 🙃
• components/cards/cards.scss with the component itself and the default variant.
• components/cards/variants.scss with well, all the variants (and I've got a lot, so this one will probably will be split in many files.

Outer-space now!

To handle space between my cards, I don't style them directly but embed them in another component named .gallery which can be a list, a grid, a scrolling list, etc. This component sole purpose is to handle scaffolding and spacing, not the card itself.

<div class="gallery gallery--vstream">
  <div class="gallery-item">
    <div class="card card--vstream">
      <!-- and so on -->
    </div>
  </div>
</div>

---

Does anyone have another way to deal with it? 🤐