CSSフレームワーク Bulmaを試してみた

2020年07月31日

CSSフレームワークのBulmaを使ってみました。node-sassを使ってビルドする方法のメモです。

Bulmaについて

BulmaはFlexboxベースで構成されたCSSフレームワークです。JavaScriptに依存しないのが特徴です。そのため、どんなJavaScriptフレームワークとでも自由に組み合わせできます。

導入方法

導入方法は公式のガイドを参考にしています。プロジェクトのディレクトリ構造は以下とします（package.jsonが存在する状態から始めます）。

public/    # 公開ディレクトリ
src/       # ソース
    sass/
package.json
package-lock.json

htmlの準備

publicの下に、index.htmlを作成します。

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My custom Bulma website</title>
    <link rel="stylesheet" href="css/mystyles.css">
  </head>
  <body>
    <section class="hero is-dark">
      <div class="hero-body">
        <div class="container">
          <h1 class="title">
            Bulma
          </h1>
          <p class="subtitle">
            Modern CSS framework based on <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a>
          </p>
        </div>
      </div>
    </section>
      
    <section class="section">
      <div class="container">
        <div class="field">
          <div class="control">
            <input class="input" type="text" placeholder="Input">
          </div>
        </div>
  
        <div class="field">
          <p class="control">
            <span class="select">
              <select>
                <option>Select dropdown</option>
              </select>
            </span>
          </p>
        </div>
  
        <div class="buttons">
          <a class="button is-primary">Primary</a>
          <a class="button is-link">Link</a>
        </div>
      </div>
    </section>
  </body>
</html>

作成したらブラウザで表示してみます。

cssがない世界。。。

確認できたらcssを用意していきます。

パッケージのインストール

以下のコマンドでインストールします。

$ npm install node-sass --save-dev
$ npm install bulma --save-dev

sassの準備

src/sassの下に、mystyles.scssを作成します。

src/sass/mystyles.scss

@charset "utf-8";
@import "../../node_modules/bulma/bulma.sass";

ビルドする

以下の3行をpackage.jsonのscriptsに追加します。

"css-build": "node-sass --omit-source-map-url src/sass/mystyles.scss public/css/mystyles.css",
"css-watch": "npm run css-build -- --watch",
"start": "npm run css-watch"

参考までにpackage.jsonのサンプルも載せておきます。

package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "src/sass/mystyles.scss",
  "scripts": {
    "css-build": "node-sass --omit-source-map-url src/sass/mystyles.scss public/css/mystyles.css",
    "css-watch": "npm run css-build -- --watch",
    "start": "npm run css-watch"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "bulma": "^0.9.0",
    "node-sass": "^4.14.1"
  }
}

package.jsonが準備できたら、以下のコマンドでビルドします。

$ npm run css-build

これでpublic/cssディレクトリにmystyles.cssが生成されます。表示を確認してみます。

それっぽいですね！

スタイルのカスタマイズ

Bulmaは高い拡張性を有していて、簡単に独自のスタイルを作ることができます。

src/sass/mystyles.scssを以下のように編集します。

src/sass/mystyles.scss

@charset "utf-8";

$purple: #8A4D76;
$pink: #FA7C91;
$brown: #757763;
$beige-light: #D0D1CD;
$beige-lighter: #EFF0EB;
$grey-darker: #1c1c1c;

$grey-dark: $brown;
$grey-light: $beige-light;
$primary: $purple;
$link: $pink;
$widescreen-enabled: false;
$fullhd-enabled: false;

$body-background-color: $beige-lighter;
$control-border-width: 2px;
$input-border-color: transparent;
$input-shadow: none;

@import "../../node_modules/bulma/bulma.sass";

編集したら、ビルドして表示を確認します。

かなり印象が変わりました。

まとめ

CSSフレームワークのBulmaを使ってみました。ユーティリティも豊富で簡単にカスタマイズできるので、とても便利だと感じました。デメリットとしては学習コストが高いので、慣れるまでが辛いかもしれません（これはBootstrap等もそうですね）。

個人的には好きなので、次に何かを作るときに使ってみようと思います。