以前から使っているbulmaフレームワークですが、ドキュメントをフルで読んだことがなく、いい機会なので全て読み、ポイントをメモります。
https://bulma.io/documentation/
Columns
- 基本、columns+columnで使う。
- columnは基本的にブロック分割で使う。全ての幅が均等になる
- 自動分割やレスポンシブ時の縦並びをコントロールできる。切り替えポイントはコントール化。
- 幅コントロールはis-half,is-4などで分割ができる。is-offset–8などはmargin-leftに相当。is-centerdなどセンタリングもできる。
- is-4などの幅どりはcolumn+is-4など単独のクラスの付与でも使用できる。is-nはcolumnの時のみ使用ができる(そもそもグリッドで使う用法。)
Modifiers
- ボタン化(主にリンクの状態変化)
- is-marginless,is-paddinglessなどの幅コントロール
- 全要素への色変化ができる。
- 特定端末での変化も可能。
Layout
- containerに関しては主にheaderやsectionなどの大きいブロックないで使われ、自動的にセンタリングされる
- containerに関しては主にheaderやsectionなどの大きいブロックないで使われ、自動的にセンタリングされる端末ごとに変えたりもできる
- level あらゆる要素を水平にすることができるプロパティ 密集地区の横並びはこれがいいかも。サンプルもかなりある(*重要)
- media-object 密集地区の並びだが特に画像+本文などで効果を発揮
- hero 主にヘッダー部分で使う(自動的に横幅いっぱいになる、トップナビサンプル多数)。
- title 読んで字のごとくページのタイトルで使う。
[…] 前回に続き、bulmaフレームワークのCSSのformがらみに関して。 […]