Bulmaをカスタマイズしてビルドする

私は、Bulmaのシステム自体は好きなのですが、角が丸すぎる点が気に入りません。

幸い、Bulmaは、ユーザーがかんたんにカスタマイズできるよう設計されていますので、
角丸を小さくした、カスタムBulmaのCSSファイルを作っていきます。

①Bulmaのダウンロード

Bulmaのダウンロード方法１・zipでダウンロード（おすすめ）

git clone はドキュメントなどついてくるので、コンパイルするだけなら公式のzipがおすすめです。

Tags · jgthms/bulma
https://github.com/jgthms/bulma/tags

から好きなバージョンを選んでダウンロード＆展開します。

Bulmaのダウンロード方法２・git clone

ドキュメントなどついてくるのでおすすめしません。

#全部クローン（重い）
git clone https://github.com/jgthms/bulma.git
cd bulma
git checkout -b my0.9.1 refs/tags/0.9.1
#or#特定のバージョンのみクローン（軽い）
git clone https://github.com/jgthms/bulma.git -b 0.9.1 --depth 1
cd bulma

②npm install で開発に必要なモジュールをインストール

npm install

③Bulmaをカスタム

bulma.sassを開き、Bulmaをカスタムしていきます。
※bulma-rtl.sassは、右から左に表示する言語用(RTL:Right To Left)

↓ここにカスタムできるsass変数の一覧があります。これを参考に編集していきます。
With node-sass | Bulma: Free, open source, and modern CSS framework based on Flexbox
https://bulma.io/documentation/customize/variables/

今回は、Bulmaの角丸を修正したいため、radiusがらみの変数をカスタマイズしてみました。

myBulma.sass

@charset"utf-8"// 追記 ///////////////////////////$radius-small:1px;$radius:2px;$radius-large:3px;////////////////////////////////////*! bulma.io v0.9.1 | MIT License | github.com/jgthms/bulma */
@import"sass/utilities/_all"@import"sass/base/_all"@import"sass/elements/_all"@import"sass/form/_all"@import"sass/components/_all"@import"sass/grid/_all"@import"sass/helpers/_all"@import"sass/layout/_all"

④Bulmaをビルド

#ビルドしたcssを出力する./cssフォルダに、もともとのBulmaが入っているので削除
npm run clean
#ビルド
npm run build
# RTLバージョンをコンパイルしたい人は以下も実行# npm run rtl

成功していれば、bulma.css、bulma.css.map、bulma.min.cssの３つのファイルが生成されます。

このbulma.cssもしくはbulma.min.cssをサイトに読み込めば、カスタマイズしたBulmaをサイトに適応できます。

意図したとおりに変更されているか確認

ルートに以下の簡単なhtmlファイルを作り、動作を確認してみます。

test.html

<html><head><metacharset="UTF-8"><linkrel="stylesheet"href="./css/bulma.min.css"><!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css"> --></head><body><div><divclass="column"><aclass="button is-primary">Button</a></div></body></html>