環境

Rails 5.2.2
ruby 2.5.1p57
psql (PostgreSQL) 10.4

前提条件

本記事では、Rails、ruby、PGのインストールの内容を含みません。

ruby のインストールは、こちらの記事がわかりやすかったです。
Ruby on Rails のインストールは、こちらの記事がわかりやすかったです。

Rails 5.2 で簡単なWikiサイトを作る - Part1 の続きです。
ここで作ったアプリにBulmaを入れて行こうと思います。

Bulmaってなんですか？

Bulmaは、FlexboxをベースとしSassで構築された無料のオープンソースCSSフレームワークです。モジュールされており、使いやすいです。無料で利用可能です。

無料のCSSフレームワークでは、Bootstrapがかなり有名ですが、BulmaではJavaScriptを含まないところが大きな違いかと思います。Bootstrapでは、jQueryが必須だったりします。

早速RailsアプリケーションにBulmaを導入していきたいと思います。

はじめに

git commit log

bulmaをインストール

yarn でbulmaを入れていきます。

$ yarn add bulma

./package.json はこんな感じです。

./package.json

{
...
  "dependencies": {
    "@rails/webpacker": "^4.0.2",
    "bulma": "^0.7.4",
    "normalize.css": "^8.0.1"
  },
...
}

bulma を読み込む

./frontend/init/index.css

@import "normalize.css/normalize.css";
+ @import "bulma/css/bulma.css";

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 24px;
}

確認してみる

ボタンを入れてみます。
https://bulma.io/documentation/elements/button/#colors

./app/views/pages/home.html.erb

<%= render "components/page/page" do %>
  <p>Wiki Top Page</p>
+   <a class="button is-primary">Primary</a>
+   <a class="button is-link">Link</a>
+   <a class="button is-info">Info</a>
+   <a class="button is-success">Success</a>
+   <a class="button is-warning">Warning</a>
+   <a class="button is-danger">Danger</a>
<% end %>