Rails6 blumaを使用する手順

作成日 2020.07.24
bluma rails
bluma, Rails6

Rails6でCSSのフレームワーク「bluma」を使用するまでの手順を記述してます。Gemfileに追加して利用します。

1. 環境
2. blumaインストール
3. bluma使い方

環境

OS windows10 pro 64bit
ruby 2.7.1
rails 6.0.3.2

※windows10にrubyをインストールして実行する手順はこちら
※windows10にRuby on Railsをインストールして利用する手順はこちら

blumaインストール

プロジェクト配下にある「Gemfile」に下記を追加します。

gem "bulma-rails", "~> 0.8.0"

インストールします。

bundle

bluma使い方

「app\assets\stylesheets」に、「application.scss」がなければ作成して以下を追記します。

@import "bulma";

後は、適当なテンプレートに、blumaを適応してみます。

<meta name="viewport" content="width=device-width, initial-scale=1">
<div>
    <button class="button is-primary">Primary</button>
    <button class="button is-link">Link</button>
    <button class="button is-info">Info</button>
    <button class="button is-success">Success</button>
    <button class="button is-warning">Warning</button>
    <button class="button is-danger">Danger</button>
</div>
<div>
    <button class="button is-primary is-light">Primary</button>
    <button class="button is-link is-light">Link</button>
    <button class="button is-info is-light">Info</button>
    <button class="button is-success is-light">Success</button>
    <button class="button is-warning is-light">Warning</button>
    <button class="button is-danger is-light">Danger</button>
</div>

実行結果を確認するとblumaが利用できていることが確認できます。