.%{STYLEGUIDE_PAGE}-containerで囲うと幅940px中央揃えに変わります。ブロックをレイアウトするために使います。合計12カラムで計算します。
※Ver.1.0.1では%{STYLEGUIDE_PAGE}-gridと%{STYLEGUIDE_PAGE}-grid-rでレスポンシブ対応にするか分けていましたが、Ver.1.1.0からは%{STYLEGUIDE_PAGE}-col-のクラス名の指定の仕方で管理できるように変更しました。従来の%{STYLEGUIDE_PAGE}-grid(レスポンシブ対応しないようにするクラス)を使う場合は、%{STYLEGUIDE_PAGE}-col-クラスをお使いください。
<div class="%{STYLEGUIDE_PAGE}-container">
<div class="%{STYLEGUIDE_PAGE}-grid">
<div class="%{STYLEGUIDE_PAGE}-col-5">
...
</div>
<div class="%{STYLEGUIDE_PAGE}-col-7">
...
</div>
</div>
</div>
<div class="%{STYLEGUIDE_PAGE}-container">
<div class="%{STYLEGUIDE_PAGE}-grid">
<div class="%{STYLEGUIDE_PAGE}-col-md-5">
...
</div>
<div class="%{STYLEGUIDE_PAGE}-col-md-7">
...
</div>
</div>
</div>
<div class="%{STYLEGUIDE_PAGE}-container">
<div class="%{STYLEGUIDE_PAGE}-grid">
<div class="%{STYLEGUIDE_PAGE}-col-md-7 %{STYLEGUIDE_PAGE}-col-sm-6">
...
</div>
<div class="%{STYLEGUIDE_PAGE}-col-md-5 %{STYLEGUIDE_PAGE}-col-sm-6">
...
</div>
</div>
<div class="%{STYLEGUIDE_PAGE}-grid">
<div class="%{STYLEGUIDE_PAGE}-col-md-7 %{STYLEGUIDE_PAGE}-col-sm-6 %{STYLEGUIDE_PAGE}-col-lg-4">
...
</div>
<div class="%{STYLEGUIDE_PAGE}-col-md-5 %{STYLEGUIDE_PAGE}-col-sm-6 %{STYLEGUIDE_PAGE}-col-lg-8">
...
</div>
</div>
<div class="%{STYLEGUIDE_PAGE}-grid">
<div class="%{STYLEGUIDE_PAGE}-col-md-7 %{STYLEGUIDE_PAGE}-col-sm-6 %{STYLEGUIDE_PAGE}-col-lg-4 %{STYLEGUIDE_PAGE}-col-xl-8">
...
</div>
<div class="%{STYLEGUIDE_PAGE}-col-md-5 %{STYLEGUIDE_PAGE}-col-sm-6 %{STYLEGUIDE_PAGE}-col-lg-8 %{STYLEGUIDE_PAGE}-col-xl-4">
...
</div>
</div>
</div>
| クラス名 | デフォルトのブレイクポイント |
|---|---|
| %{STYLEGUIDE_PAGE}-col- | 全て |
| %{STYLEGUIDE_PAGE}-col-sm- | 480px以上〜 |
| %{STYLEGUIDE_PAGE}-col-md- | 768px以上〜 |
| %{STYLEGUIDE_PAGE}-col-lg- | 1024px以上〜 |
| %{STYLEGUIDE_PAGE}-col-xl- | 1440px以上〜 |
<div class="%{STYLEGUIDE_PAGE}-grid">
<div class="%{STYLEGUIDE_PAGE}-col-md-4">
...
</div>
<div class="%{STYLEGUIDE_PAGE}-col-md-8">
<div class="%{STYLEGUIDE_PAGE}-grid">
<div class="%{STYLEGUIDE_PAGE}-col-md-5">
...
</div>
<div class="%{STYLEGUIDE_PAGE}-col-md-7">
...
</div>
</div>
</div>
</div>
.%{STYLEGUIDE_PAGE}-push-5にするとグリッドが右側にきて、.%{STYLEGUIDE_PAGE}-pull-7にするとグリッドが左側にきます。
<div class="%{STYLEGUIDE_PAGE}-grid">
<div class="%{STYLEGUIDE_PAGE}-col-md-7 %{STYLEGUIDE_PAGE}-push-md-5">
...
</div>
<div class="%{STYLEGUIDE_PAGE}-col-md-5 %{STYLEGUIDE_PAGE}-pull-md-7">
...
</div>
</div>
タブレット幅のときに.%{STYLEGUIDE_PAGE}-push-md-5にするとグリッドが右側にきて、.%{STYLEGUIDE_PAGE}-pull-md-7にするとグリッドが左側にきます。
<div class="%{STYLEGUIDE_PAGE}-grid">
<div class="%{STYLEGUIDE_PAGE}-col-md-7 %{STYLEGUIDE_PAGE}-push-md-5">
...
</div>
<div class="%{STYLEGUIDE_PAGE}-col-md-5 %{STYLEGUIDE_PAGE}-pull-md-7">
...
</div>
</div>
スマートフォンの幅のときに.%{STYLEGUIDE_PAGE}-push-sm-5にするとグリッドが右側にきて、.%{STYLEGUIDE_PAGE}-pull-sm-7にするとグリッドが左側にきます。
<div class="%{STYLEGUIDE_PAGE}-grid">
<div class="%{STYLEGUIDE_PAGE}-col-sm-7 %{STYLEGUIDE_PAGE}-push-sm-5">
...
</div>
<div class="%{STYLEGUIDE_PAGE}-col-sm-5 %{STYLEGUIDE_PAGE}-pull-sm-7">
...
</div>
</div>
タブレット幅のときにpush、pullを解除する
<div class="%{STYLEGUIDE_PAGE}-grid">
<div class="%{STYLEGUIDE_PAGE}-push-5 %{STYLEGUIDE_PAGE}-col-md-7 %{STYLEGUIDE_PAGE}-push-md-auto">
...
</div>
<div class="%{STYLEGUIDE_PAGE}-pull-7 %{STYLEGUIDE_PAGE}-col-md-5 %{STYLEGUIDE_PAGE}-pull-md-auto">
...
</div>
</div>
スマートフォン幅のときにpush、pullを解除する
<div class="%{STYLEGUIDE_PAGE}-grid">
<div class="%{STYLEGUIDE_PAGE}-push-5 %{STYLEGUIDE_PAGE}-col-md-7 %{STYLEGUIDE_PAGE}-push-md-5 %{STYLEGUIDE_PAGE}-col-sm-7 %{STYLEGUIDE_PAGE}-push-sm-auto">
...
</div>
<div class="%{STYLEGUIDE_PAGE}-pull-7 %{STYLEGUIDE_PAGE}-col-md-5 %{STYLEGUIDE_PAGE}-pull-md-7 %{STYLEGUIDE_PAGE}-col-sm-5 %{STYLEGUIDE_PAGE}-pull-sm-auto">
...
</div>
</div>