レイアウト
グリッド
12分割のグリッドで自由にレイアウト可能です。
親ブロック要素を.bl_colとして子に.bl_col__XX（XX = 12までの数字）の要素を入れてください。
ウィンドウ幅がスマホサイズの時、カラム数を変えたい場合は.bl_col_sm__XX（XX = 12までの数字）を追記してください。
よく使用する組み合わせ
.bl_col__12
.bl_col__6
.bl_col__6
.bl_col__4 + .bl_col_sm__12
.bl_col__4 + .bl_col_sm__12
.bl_col__4 + .bl_col_sm__12
.bl_col__3 .bl_col_sm__6
.bl_col__3 .bl_col_sm__6
.bl_col__3 .bl_col_sm__6
.bl_col__3 .bl_col_sm__6
モディファイア
カラム間の左右の余白少.bl_col + .bl_col__paddingLR__Min
.bl_col__6
.bl_col__6
.bl_col__4 + .bl_col_sm__12
.bl_col__4 + .bl_col_sm__12
.bl_col__4 + .bl_col_sm__12
.bl_col__3 .bl_col_sm__6
.bl_col__3 .bl_col_sm__6
.bl_col__3 .bl_col_sm__6
.bl_col__3 .bl_col_sm__6
カラム間の上下の余白大.bl_col + .bl_col__paddingTop__Max
.bl_col__6
.bl_col__6
.bl_col__4 + .bl_col_sm__12
.bl_col__4 + .bl_col_sm__12
.bl_col__4 + .bl_col_sm__12
.bl_col__3 .bl_col_sm__6
.bl_col__3 .bl_col_sm__6
.bl_col__3 .bl_col_sm__6
.bl_col__3 .bl_col_sm__6
コンテンツ両端配置.bl_col__justifyContentsSpaceBetween
基本的にはPC幅での配置制御に利用します。
スマホ幅でも両端配置にしたい場合は.bl_col__justifyContentsSpaceBetween_smを記述してください。
.bl_col__3
.bl_col__3
.bl_col__3
コンテンツ両端配置 + 一部左右寄せ制御.bl_col__justifyContentsSpaceBetween + .hp_marginXxxxx_auto
レイアウトの一部を左右どちらかに寄せたい場合、ヘルパークラスの.hp_marginLeft_auto or .hp_marginRight_autoと組み合わせると変更することができます。
寄せたい方向と逆のヘルパークラスを使用してください。
例として下記に右寄せしたい場合のレイアウトを記述しました。
.bl_col__3
.bl_col__3 + .hp_marginLeft_auto
.bl_col__3
コンテンツ中央配置.bl_col__justifyContentsCenter
基本的にはPC幅での配置制御に利用します。
スマホ幅でも両端配置にしたい場合は.bl_col__justifyContentsCenter_smを記述してください。
.bl_col__3
.bl_col__3
.bl_col__3
ボックス
グリッドレイアウトの中で利用するコンテンツを区切るための背景色が入っているボックスを用意しています。
クラス名は.el_boxです。
様々なスタイルを用意しているので組み合わせてデザインとして利用してください。
基本+ .bl_box
モディファイア
枠のスタイル
角丸+ .bl_box__rounded
ドロップシャドウ+ .bl_box__shadow
枠線あり+ .bl_box__border
ボックス内余白
余白大+ .bl_box__maxPadding
余白小+ .bl_box__minPadding
余白なし+ .bl_box__noPadding
スクロール
縦方向のスクロール（規約などに利用）+ .bl_box__scrollY
親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）
背景色変化
初期+ .bl_box__bg
ダーク+ .bl_box__bg__dark
プライマリ+ .bl_box__bg__primary
セカンダリ+ .bl_box__bg__secondary
成功+ .bl_box__bg__success
インフォ+ .bl_box__bg__info
危険+ .bl_box__bg__danger
警告+ .bl_box__bg__warning
プライマリ+ .bl_box__bg__primary_l
セカンダリ+ .bl_box__bg__secondary_l
成功+ .bl_box__bg__success_l
インフォ+ .bl_box__bg__info_l
危険+ .bl_box__bg__danger_l
警告+ .bl_box__bg__warning_l
横幅固定
横幅の最大値を固定化.bl_contBoxed
コンテンツの横幅は基本的には成り行き100%なので、最大値を固定化する場合.bl_contBoxedを利用してください。
ここにコンテンツが入ります