生成するグリッドの幅やサイズを設定します。[設定方法]
グリッドの有効幅(全体幅)を指定します。
この設定は、そのまま「container要素」のwidthのpx値になります。
width
px
参考：「レスポンシブ設定」により、max-width:100%;に設定を切り替えるポイント（画面幅）を指定できます。
max-width:100%;
カラムの分割数を指定します。
分割数は、一般的な12、16、24分割の他にも、任意の数字を指定できます。
12
16
24
カラムの余白を整数で指定します。
ガターは、カラム内部の左右paddingとなります。
padding
入力値の半分のpx値が各カラムの左右paddingに設定されます。連続する事で目的の余白となります。
グリッドを構成するClass名を設定します。[設定方法]
グリッド大外枠の要素です。 任意のClass名を指定できます。
グリッドを縦方向に分割する要素です。 任意のClass名を指定できます。
グリッドを横方向に分割する要素です。 ここで入力するのは接頭辞となる文字列です。
CSSに出力されるClass名は、.col-1.col-2 .col-3のように、入力した接頭辞の直後に数字が付与されたものとなります。
.col-1
.col-2
.col-3
col要素をカラム単位で左右に移動させるオプションClassです。 ここで入力するのは接頭辞となる文字列です。
CSSに出力されるClass名は.push-1.push-2.push-3 のように、直後に数字が付与されたものとなります。
.push-1
.push-2
.push-3
グリッド専用のレスポンシブ設定をおこないます。 有効にするには「レスポンシブ設定の使用」にチェックを入れてください。[設定方法]
グリッドのレスポンシブ設定を有効にする場合はチェックしてください。
この設定をOFFにするとレスポンシブに関連するCSSは出力されなくなります。 グリッドをスタティックな状態のみで使用する場合には、チェックを外してからジェネレートしてください。
最大15個のブレイクポイントを任意に設定できます。
BP1～15までの数字は「設定枠」の名称です。 設定内容さえ同じであれば、どの項目を有効にしても出力されるCSSに差異は出ません。
「container要素」の幅を、px指定からmax-width:100%;に切り替えるポイントを指定できます。
設定を有効にするには、「狭方」「広方」にチェックを入れてから、有効になっているBPの行のラジオボタンをクリックしてください。
■狭方→ 指定したBP以下すべての画面幅で「container要素」がフルード化
■広方→ 指定したBPより大きい（+1px）すべての画面幅で「container要素」がフルード化
カラムを制御するためのオプションClass専用の設定です。
@mediaの画面幅指定（min-width max-width）を切り替えるポイントを指定できます。
@media
min-width
max-width
全て統一したい場合は、「0」か「∞」の項目にチェックを入れてください。
containerのフルード化と同じタイミングで、カラム同士の余白を任意のピクセルに変更できます。
例えば、以下のような挙動の設定ができます。
例：基本設定で40pxの余白を、狭い画面幅では20pxにし、逆に広い時には60pxにする
出力されるCSSのレスポンシブ設定に関する項目をプレビュー表示しています。
containerフルード化するポイントを表示しています。 参考情報、出力内容確認としてお使いください。
レスポンシブ制御用ClassのCSS出力を指定できます。
この設定をOFFにすると、オプションのCSSは出力されません。
左の表の各種設定により生成される画面幅と、メディアクエリの指定方法を表示しています。 参考情報、出力内容確認としてお使いください。
グレーの状態ではCSSには出力されず、左の表の設定のプレビューのみとなります
レスポンシブ設定に応じてcol要素を制御するためのClassです。 row要素にマルチクラスで付与します。
詳細
以下のファイルをZipファイルにてダウンロードします。