本記事の内容
簡単な文法で、モダンなWebデザインが構築可能なBULMAの概要をまとめまてみました。
以下の内容は、公式HPのOverviewをまとめたものです。
関連記事
概要ではなく、個別の機能については以下の記事にまとめています。
BULMAとは
CSS3標準のFlexboxをベースにした、オープンソースのCSSフレームワークです。
公式HP:https://bulma.io
Overview
Getting started
BULMAの利用方法は3つあります。
npm, CDN, github直接ダウンロードにより利用可能です。
ex) npmの場合：
npm install bulma
Customize
BULMAのすべてのscssクラスは、独自に上書き可能です。
ex) pink, primaryの上書き
$pink: #ffb3b3;
$primary: $pink;
Modular
BULMAのモジュールは、個別にimpot可能です。
全部で39のscssクラスがあります。
ex) クラスの個別import
@import "bulma/sass/utilities/_all"
@import "bulma/sass/grid/columns"
Responsiveness
BULMAの全要素はモバイルファーストであり、縦スクロール読みに最適化されています。
-
columns：縦に積み上がる -
level：コンポーネントの子要素を縦に積み上げる -
nav：（モバイルで）非表示される
水平なレイアウトにする場合、is-mobile modifierを追加することで強制できます。
BULMAでは、各種端末画面用のサイズ（mobile, tablet, desktop, widescreen, fullhd）がデフォルトで設定されています。
各画面の境界値は、以下参照：
https://bulma.io/documentation/overview/responsiveness/#breakpoints
Variables
初期設定された変数が、簡単な文字列により利用可能です。
ex)
- 色：$blue: hsl(217, 71%, 53%)
- フォントサイズ：$size-1: 3rem
- 幅：$gap: 32px
- 他の設定：$easing: ease-out や $radius-large: 5pxなど
Variablesの詳細は、以下参照：
https://bulma.io/documentation/overview/variables/#initial-variables
Colors
ほとんどのコンポーネントは、is-primaryやis-darkなどのmodifierにより色の変更が可能です。
Colorsの詳細は、以下参照：
https://bulma.io/documentation/overview/colors/
Functions
カスタムファンクションによって、値や色の計算が動的に可能です。
ex)
- powerNumber($number, $exp) : 累乗計算。数値を返却します。
- colorLuminance($color)
- findColorInvert($color)
findColorInvert()の具体例は、以下参照：
https://bulma.io/documentation/overview/functions/#the-code-findcolorinvert-code-function
Mixins
その他、要素のカスタマイズやレスポンシブの為の様々な機能が用意されています。
ex)
- =block :要素の最後の子要素の下部に、1.5remのマージンをセットする。
- =center($size) : 位置を親要素の中心にセットする。
- fa($size, $dimensions) : Font Awesomeアイコンのコンテナをセットする。
Mixinsの詳細は、以下参照：
https://bulma.io/documentation/overview/mixins/