Edited at

CSSフレームワークBulmaの概要をまとめてみた

More than 1 year has passed since last update.

bulma-banner.png


本記事の内容

簡単な文法で、モダンな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-primaryis-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/


参考