Contents

article#layout {
  margin: 0 auto;
  width: columns-width(3);
}

// Indent

.indent-one-gutter {
  margin-left: $gutter-width;
}

.indent-one-unit {
  margin-left: units-width(1);
}

.indent-one-column {
  margin-left: columns-width(1);
}

.indent-two-gutter {
  margin-left: $gutter-width * 2;
}

.indent-two-unit {
  margin-left: units-width(2);
}

.indent-two-column {
  margin-left: columns-width(2);
}

.indent-three-gutter {
  margin-left: $gutter-width * 3;
}

.indent-three-unit {
  margin-left: units-width(3);
}

.indent-three-column {
  margin-left: columns-width(3);
}

// Width

// TODO: Implement flexbox

article#layout-width {
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  justify-content: space-between;
  -webkit-justify-content: space-between;
}

article#layout-width > .gutters,
article#layout-width > .units,
article#layout-width > .columns {
  background-color: rgb(252, 251, 1);
}

@mixin flex-width($width) {
  display: -webkit-flex;
  display: flex;
  -webkit-flex: 0 0 $width;
  flex: 0 0 $width;
}

.width-one-gutter {
  @include flex-width($gutter-width * 1);
}

.width-one-unit {
  @include flex-width(units-width(1));
}

.width-one-column {
  @include flex-width(columns-width(1));
}

.width-two-gutter {
  @include flex-width($gutter-width * 2);
}

.width-two-unit {
  @include flex-width(units-width(2));
}

.width-two-column {
  @include flex-width(columns-width(2));
}

.width-three-gutter {
  @include flex-width($gutter-width * 3);
}

.width-three-unit {
  @include flex-width(units-width(3));
}

.width-three-column {
  @include flex-width(columns-width(3));
}

Version data entries

3 entries across 3 versions & 1 rubygems

Version	Path
cyclist-0.4.0	vendor/raster/test/src/sass/_layout.scss
cyclist-0.3.0	vendor/raster/test/src/sass/_layout.scss
cyclist-0.2.0	vendor/raster/test/src/sass/_layout.scss