sharps/common.blocks/row/__col/row__col.post.css

Modular grid powered by Lost and BEM

@define-mixin col_base_classes $size {
  /* normal col */
  /* {s,m,l}w = {small, medium, large} width */
  @for $i from 1 to $columns {
    .row__col_$(size)w_$(i) {
      lost-column: $i/$columns;
    }
  }
  /* offset col */
  /* {s,m,l}o = {small, medium, large} offset */
  @for $i from 1 to $columnsExceptOne {
    .row__col_$(size)o_$(i) {
      lost-move: $i/$columns;
    }
  }
  /* auto size col */
  .row__col_$(size) {
    lost-flex-container: column;
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%;
    margin-right: $gutter;

    &:last-child {
      margin-right: 0;
    }
  }
}

@define-mixin col_order_classes $size {
  /* {s,m,l}of = {small, medium, large} order first */
  .row__col_$(size)of {
    order: -1;
  }
  /* {s,m,l}ol = {small, medium, large} order last */
  .row__col_$(size)ol {
    order: 1;
  }
}

@define-mixin col_visibility_classes $size {

  .row__col_$(size)w_0 {
    display: none;
  }

  .row__col_$(size)o_0 {
    margin-left: 0;
  }
}

@media (--small) {
  @mixin col_base_classes s;
}

@media (--small-only) {
  @mixin col_visibility_classes s;
  @mixin col_order_classes s;
}

@media (--medium) {
  @mixin col_base_classes m;
}

@media (--medium-only) {
  @mixin col_visibility_classes m;
  @mixin col_order_classes m;
}

@media (--large) {
  @mixin col_base_classes l;
}

@media (--large-only) {
  @mixin col_visibility_classes l;
  @mixin col_order_classes l;
}

@media (--xlarge) {
  @mixin col_base_classes xl;
}

@media (--xlarge-only) {
  @mixin col_visibility_classes xl;
  @mixin col_order_classes xl;
}

@media (--xxlarge) {
  @mixin col_base_classes xxl;
}

@media (--xxlarge-only) {
  @mixin col_visibility_classes xxl;
  @mixin col_order_classes xxl;
}