CSSフレームワークのBulmaを使ってみました。node-sassを使ってビルドする方法のメモです。
Bulmaについて
BulmaはFlexboxベースで構成されたCSSフレームワークです。JavaScriptに依存しないのが特徴です。そのため、どんなJavaScriptフレームワークとでも自由に組み合わせできます。
導入方法
導入方法は公式のガイドを参考にしています。プロジェクトのディレクトリ構造は以下とします(package.json
が存在する状態から始めます)。
public/ # 公開ディレクトリ
src/ # ソース
sass/
package.json
package-lock.json
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
を作成します。
@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
のサンプルも載せておきます。
{
"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
を以下のように編集します。
@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等もそうですね)。
個人的には好きなので、次に何かを作るときに使ってみようと思います。