Rails 5.2 & WebpackerにBulmaを導入する

環境

• 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 %>

http://localhost:5000/

こんな感じに表示されます。

最後に

git commit log

NEXT!

Contentテーブルを作っていきます。

Wikiサービス作りました

(小さく告知させてください)
簡単なWiki検索を、社内コミュニケーションチャネルから検索できるツールで、「Poii.io」と言います。

Poii.ioの名前は、キーボード配列の右上 P -> I に向けて、押しながらスライドさせるくらい簡単に検索したかったので、POII.IOにしました。

「POI いいお」って感じの親父ギャクです・・・