グリッドCSSの見直し

[qrac]

使用頻度の低い100vh CSSを削除

.grid.is-mobile-100vh {
  height: 100vh;
}

@include fablet {
  .grid.is-fablet-100vh {
    height: 100vh;
  }
}

@include tablet {
  .grid.is-tablet-100vh {
    height: 100vh;
  }
}

@include desktop {
  .grid.is-desktop-100vh {
    height: 100vh;
  }
}

@include wide {
  .grid.is-wide-100vh {
    height: 100vh;
  }
}

@include touch {
  .grid.is-touch-100vh {
    height: 100vh;
  }
}

@include landscape {
  .grid.is-landscape-100vh {
    height: 100vh;
  }
}

@include portrait {
  .grid.is-portrait-100vh {
    height: 100vh;
  }
}

[qrac]

• スペーシングの書き方を見直し
• 繰り返しを9から4までに変更
• タイルレイアウト用の連続Gridマージンは削除

before

@for $i from 1 through 9 {
  .grid.is-space-#{$i} {
    margin: 0 $i * -2px $i * -4px;
  }
  .grid.is-space-#{$i} > .col {
    padding: 0 $i * 2px $i * 4px;
  }
  .grid + .grid.is-space-#{$i} {
    padding: $i * 4px 0 0;
  }
}

after

@for $i from 1 through 4 {
  .grid.is-space-#{$i} {
    margin: $i * -4px 0 0 $i * -4px;
  }
  .grid.is-space-#{$i} > .col {
    padding: $i * 4px 0 0 $i * 4px;
  }
}

[qrac]

ランドスケープ・ポートレートの変化を削除。

@include landscape {
  @for $i from 0 through $split-grid {
    @if $i == 0 {
      .col.is-landscape-#{$i} {
        flex: 1 0 0%;
        max-width: 100%;
      }
    }
    @else {
      .col.is-landscape-#{$i} {
        flex: 0 0 100% / $split-grid * $i;
        max-width: 100% / $split-grid * $i;
      }
    }
  }
  .col.is-landscape-auto {
    flex: 0 1 auto;
    max-width: 100%;
  }
}

@include portrait {
  @for $i from 0 through $split-grid {
    @if $i == 0 {
      .col.is-portrait-#{$i} {
        flex: 1 0 0%;
        max-width: 100%;
      }
    }
    @else {
      .col.is-portrait-#{$i} {
        flex: 0 0 100% / $split-grid * $i;
        max-width: 100% / $split-grid * $i;
      }
    }
  }
  .col.is-portrait-auto {
    flex: 0 1 auto;
    max-width: 100%;
  }
}

[qrac]

タッチサイズ指定を削除。他のCSSで補えるため。

@include touch {
  @for $i from 0 through $split-grid {
    @if $i == 0 {
      .col.is-touch-#{$i} {
        flex: 1 0 0%;
        max-width: 100%;
      }
    }
    @else {
      .col.is-touch-#{$i} {
        flex: 0 0 100% / $split-grid * $i;
        max-width: 100% / $split-grid * $i;
      }
    }
  }
  .col.is-touch-auto {
    flex: 0 1 auto;
    max-width: 100%;
  }
}

[qrac]

CSSグリッドはIEとEdgeで非常に面倒なバグがあるので、要素が細かくなるグリッドレイアウトには向かない。不採用。

http://codepen.io/qrac/pen/qmaQwj

[qrac]

カラムのストレッチ化をグリッド（親要素）で調整させるように変更。

before

.col {
  &.is-stretch {
    display: flex;
  }
}

after

.grid {
  &.is-stretch > .col {
    display: flex;
  }
}

[qrac]

スペース（溝）調整は細かい調整なので、フレームワークからは削除する。 別途テンプレートなどで対応。

@for $i from 1 through 4 {
  .grid.is-space-#{$i} {
    margin: $i * -4px 0 0 $i * -4px;
  }
  .grid.is-space-#{$i} > .col {
    padding: $i * 4px 0 0 $i * 4px;
  }
}

[qrac]

.grid.is-endを直感的に書くため.grid.is-rightに変更。

[qrac]

グリッドに溝が無い状況が少ないため、ボタンやフォームと同じ溝を作る。

.grid {
  margin-left: -0.5em;
  margin-bottom: -0.5em;
  > .col {
    padding-left: 0.5em;
    padding-bottom: 0.5em;
  }
}

[qrac]

グリッドが並んだ場合のマージン設定。

.grid {
  + .grid {
    margin-top: 0.5em;
  }
}