Bulma Doc ( Layout ) を読んだ

Layout - Bulma を読んだ。

Bulma はサイトの幅を決めるコンテナー（.container）を持つ。どこでも使えるクラスだが、主に以下のクラスの子要素とし指定される。

• .navbar
• .hero
• .section
• .footer

コンテナーのサイズ $desktop、$widescreen、$fullhd とあり、それぞれブレークポイントから左右の余白（デフォルトでは 32px * 2 ）を引いた数値になっている。これらの数値は 12px または 16px で割り切れる数値になっている。

左にロゴ、右にナビゲーションのように、水平方向の配置を指定するためにレベルというのも用意されている。親要素に .level、子要素に .level-left と .level-right（右両側配置をしたいときに使う。なくてもいい）、孫要素に .level-item といった構成で使う。レベルの垂直ラインは常に要素が縦に対して中央に揃う用につくられている。

左に画像、右にテキスト（もしくは、あとさらに右にクローズボタン）のように、SNS のタイムラインメッセージのような見た目をつくりたければメディアオブジェクトを使う。親要素に .media、子要素に .media-left 、.media-content、.media-right を持つ。メディアオブジェクトはネストできる。

ページやサイトの重要な情報を伝えるためにはヒーローを使う。基本的には親要素に .hero、その子要素に .hero-body を持つ構成（ちなみにコンテナーは .hero > .hero-body > .container という形で指定）。さらに構造的にしたければ、ヘッダーやフッターをつけることもできる。親要素に Modifier を追加するつことで、.hero.is-primary で色を変えたり、.hero.is-primary.is-bold で背景をグラデーションにしたり、.hero.is-large でヒーローのサイズを変えたりできる。

上下の余白を取るセクション。<section class="section"> のような形で、section 要素に対して指定することが多い。上下の余白サイズは .is-medium や is-large クラスを使って変えられるが、気に入らなければ変数の値を直接カスタマイズしてもいい。body 直下の要素にだけ使うと書いてるが、Bulma でつくられたサイトを見ていると別に body 直下じゃない場所でも使われてる。

サイトのフッター。背景色と padding でとられた余白が設定されている。

グリッド上に要素を配置したければタイルを使う。基本クラス .tile と、構造的な親子関係を表す 3 つの Modifier .is-ancestor 、.is-parent 、.is-child、そしてタイルを敷き詰めていく方向を指示する .is-vertical、最後に幅を x/12 で指定する .is-1 がある。

---

インラインコードいっぱいいれたらピンクい。見にくい。どうにかしてくれ、神よ。