Contents

$row-width: 1200px !default;
$mobile-gutter: 0 10px !default;
$desktop-gutter: 0 10px !default;

.row {
  display: flex;
  flex-wrap: wrap;
  max-width: $row-width;
  margin: 0 auto;

  &.full-width { max-width: none; }
}

.column {
  width: 100%;
  padding: $mobile-gutter;

  @media (min-width: $large) { padding: $desktop-gutter; }

  &.no-gutters { padding: 0; }
}

@for $i from 1 through 12 {
  .sm-#{$i} { width: calc((100% / 12)  * #{$i}); }
  .sm-offset-#{$i} { margin-left: calc((100% / 12)  * #{$i}); }
  .sm-order-#{$i} { order: $i; }
}

@media (min-width: $medium) {
  @for $i from 1 through 12 {
    .md-#{$i} { width: calc((100% / 12)  * #{$i}); }
    .md-offset-#{$i} { margin-left: calc((100% / 12)  * #{$i}); }
    .md-order-#{$i} { order: $i; }
  }
}

@media (min-width: $large) {
  @for $i from 1 through 12 {
    .lg-#{$i} { width: calc((100% / 12)  * #{$i}); }
    .lg-offset-#{$i} { margin-left: calc((100% / 12)  * #{$i}); }
    .lg-order-#{$i} { order: $i; }
  }
}

@media (min-width: $xlarge) {
  @for $i from 1 through 12 {
    .xlg-#{$i} { width: calc((100% / 12)  * #{$i}); }
    .xlg-offset-#{$i} { margin-left: calc((100% / 12)  * #{$i}); }
    .xlg-order-#{$i} { order: $i; }
  }
}

@media (min-width: $xxlarge) {
  @for $i from 1 through 12 {
    .xxlg-#{$i} { width: calc((100% / 12)  * #{$i}); }
    .xxlg-offset-#{$i} { margin-left: calc((100% / 12)  * #{$i}); }
    .xxlg-order-#{$i} { order: $i; }
  }
}

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
timequake-3.3	app/assets/stylesheets/timequake/layout.scss
timequake-3.2	app/assets/stylesheets/timequake/layout.scss