Abstract row component of inline-block based grid system

scss

@use "node_modules/sass-basis/src/css/core";

.c-ib-row {
  @include core.ib-row();

  &__col {
    @include core.ib-row__col();

    &--1-3 {
      @include core.ib-row__col(1, 3);
    }

    &--offset-1-3 {
      @include core.ib-row__col--offset(1, 3);
    }
  }
}

html

<div class="c-ib-row">
  <div class="c-ib-row__col c-ib-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-ib-row__col c-ib-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

Abstract column element of inline-block based grid system

scss

//
// @param  int  $columns      molecule column size
// @param  int  $max-columns  denominator column size
//

@use "node_modules/sass-basis/src/css/core";

.c-ib-row {
  @include core.ib-row();

  &__col {
    @include core.ib-row__col();

    &--1-3 {
      @include core.ib-row__col(1, 3);
    }
  }
}

html

<div class="c-ib-row">
  <div class="c-ib-row__col c-ib-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-ib-row__col c-ib-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

Sets column width of inline-block based grid system

scss

//
// @param  length  $width
//

@use "node_modules/sass-basis/src/css/core";

.c-ib-row {
  @include core.ib-row();

  &__col {
    @include core.ib-row__col();
    @include core.ib-row__col--width(auto);
  }
}

Sets column offset of inline-block based grid system

scss

//
// @param  int  $columns      molecule column size
// @param  int  $max-columns  denominator column size
//

@use "node_modules/sass-basis/src/css/core";

.c-ib-row {
  @include core.ib-row();

  &__col {
    @include core.ib-row__col();
    @include core.ib-row__col--offset(1, 3);
  }
}

Sets row margin of inline-block based grid system

scss

//
// @param  int  $coefficient
//

@use "node_modules/sass-basis/src/css/core";

.c-ib-row {
  @include core.ib-row();
  @include core.ib-row--margin(1);
}

Sets column margin of inline-block based grid system

scss

//
// @param  int  $coefficient
//

@use "node_modules/sass-basis/src/css/core";

.c-ib-row {
  @include core.ib-row();
  @include core.ib-row--margin(1);
}

Abstract column element of flexbox based grid system

scss

//
// @param  int  $columns      molecule column size
// @param  int  $max-columns  denominator column size
//

@use "node_modules/sass-basis/src/css/core";

.c-row {
  @include core.row();

  &__col {
    @include core.row__col();

    &--1-3 {
      @include core.row__col(1, 3);
    }
  }
}

html

<div class="c-row">
  <div class="c-row__col c-row__col--1-3">
    ...
  </div>
</div>

Sets column width of flexbox based grid system

scss

//
// @param  length  $width
//

@use "node_modules/sass-basis/src/css/core";

.c-row {
  @include core.row();

  &__col {
    @include core.row__col();
    @include core.row__col--width(auto);
  }
}

Sets column offset of flexbox based grid system

scss

//
// @param  int  $columns      molecule column size
// @param  int  $max-columns  denominator column size
//

@use "node_modules/sass-basis/src/css/core";

.c-row {
  @include core.row();

  &__col {
    @include core.row__col();
    @include core.row__col--offset(1, 3);
  }
}

Sets row margin of flexbox based grid system

scss

//
// @param  int  $coefficient
//

@use "node_modules/sass-basis/src/css/core";

.c-row {
  @include core.row();
  @include core.row--margin(1);
}

Sets column margin of flexbox based grid system

scss

//
// @param  int  $coefficient
//

@use "node_modules/sass-basis/src/css/core";

.c-row__col {
  @include core.row__col();
  @include core.row__col--margin(1);
}

Abstract row component of flexbox based grid system

scss

@use "node_modules/sass-basis/src/css/core";

.c-lattice {
  @include core.lattice();

  &__col {
    @include core.lattice__col();

    &--1-3 {
      @include core.lattice__col(1, 3);
    }
  }
}

html

<div class="c-lattice">
  <div class="c-lattice__col c-lattice__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-lattice__col c-lattice__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

Abstract column element of flexbox based grid system

scss

//
// @param  int  $columns      molecule column size
// @param  int  $max-columns  denominator column size
//

@use "node_modules/sass-basis/src/css/core";

.c-lattice {
  @include core.lattice();

  &__col {
    @include core.lattice__col();

    &--1-3 {
      @include core.lattice__col(1, 3);
    }
  }
}

html

<div class="c-lattice">
  <div class="c-lattice__col c-lattice__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-lattice__col c-lattice__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

Sets column width of flexbox based grid system

scss

//
// @param  length  $width
//

@use "node_modules/sass-basis/src/css/core";

.c-lattice {
  @include core.lattice();

  &__col {
    @include core.lattice__col(1, 2);

    @include core.media-min(lg) {
      @include core.lattice__col--width(1 / 3 * 100%);
    }
  }
}