Bulmaとは

オフィシャルサイトによると以下の通り。OSSのCSSフレームワークで。Flexboxをベースにしているようです。

Bulma is a free, open source CSS framework based on Flexbox
モバイルファーストのレスポンシブデザイン。
モジュールとして組み合わせて使うことができるようです。

Flexboxとは？

FlexboxはCSS3で採用された機能で、正式名称をFlexible Box Layout Moduleといいます。

名前の通り、フレキシブルなレイアウトを簡単に実現する仕組みで、親Box・子Boxにより構成されます。小要素のBoxを横並びで表示し、親要素と小要素の横幅に応じて自動的に折り返して次の行に表示するなど、閲覧するブラウザ・端末に応じて見やすいレイアウトを自動的に生成します。

ちなみにGridレイアウトと混同しがちですが、Flexboxは1次元レイアウト、Gridは2次元レイアウトです。

ノンデザイン？

調べると「ノンデザイン」というキーワードが多くヒットしました。意味を調べてみると、パーツを組み合わせてコーディングができてしまうようです。パーツの確認には以下のBulmaswatchというサイトが良いようです。ボタン、ヘッダー、メニューバー、ページネーション等色々あります。

https://jenil.github.io/Bulmaswatch/ 言葉こそ知らなかったものの、Bootstrapと同じですね。

プロジェクトへの取り込み方

CSSを1つ取り込むだけで楽に取り込むことができるようです。CDN経由が一番楽で、以下1行で取り込み可能です。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Bulma/0.6.2/css/Bulma.min.css">

CDN経由でない方法は以下をご参照ください。 https://bulma.io/documentation/customize/with-node-sass/ # 気になったポイント ## 画面レイアウト親要素に「class=”columns”」小要素に「class=”column”」を設定することでカラムレイアウトが設定できます。レスポンシブのため、ウィンドウサイズによって小要素が自動的に改行されます。横幅のBreakpointsとしては、mobile、tablet、desktop、widescreen、fullhdの5つ。 Bootstrapはxs、sm、md、lgの4つで、px数はやや違いますがBootstrap＋fullhdの選択肢があると考えて良さそうです。（FullHDはあまり使わなそう） ## 実装方法親要素に以下を定義するだけです。簡単ですね。

.flex-parent {
  display: flex;
}

モジューラビリティ

必要に応じて個別にモジュールをimportすることができます。

以下をsassに記載すればOKです。

@import "Bulma/sass/grid/columns"

面白そうな細かい機能

チャット式のUI（RedmineやConfluenceのコメント機能が簡単に作れそう）
入力項目を増やすUI（途中経路を追加など）

所感

Bootstrap4は使ったことがあったのでおおまかにBootstrap4との違いがわかりました。

さてこれから深く使ってみますので追って追加記事も作成しようと思います。

FEATURED TAGS

aws ddd java kotlin rails ruby wordpress

ABOUT ME

温泉ソムリエエンジニア。サーバ構築からアプリケーションの開発まで手広く対応。Web系・サーバサイドの開発が特に得意

Bulmaについて調べてみた

TOC