.%{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>