Honokaというじゅりあん(@MITLicense)氏作のBootstrapテーマがある。
Honoka - 日本語も美しく表示できるBootstrapテーマ
サンプルを見てもらうとわかるが、日本語の表示が綺麗になっている。加えて配色も標準と変わってて、Bootstrapの触り心地をキープしつつ少し変わったCSSフレームワークを使いたい場合にはオススメ
で久々に見たらnpm対応してたのでRailsで使ってみる
環境
- Rails 5.2.1
yarn自体のインストールとrailsのひな壇はできているものとする あとWebpackerは今回使わない
インストール
yarn add bootstrap-honoka
一発。。。
以下のようになればインストール成功
yarn add bootstrap-honoka yarn add v1.9.4 info No lockfile found. [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... [4/4] 📃 Building fresh packages... success Saved lockfile. warning Your current version of Yarn is out of date. The latest version is "1.10.1", while you're on "1.9.4". info To upgrade, run the following command: $ brew upgrade yarn success Saved 4 new dependencies. info Direct dependencies └─ bootstrap-honoka@4.1.3 info All dependencies ├─ bootstrap-honoka@4.1.3 ├─ bootstrap@4.1.3 ├─ jquery@3.3.1 └─ popper.js@1.14.4 ✨ Done in 2.15s.
設定
残念ながらこれだけではCSSは読み込まれない。yarnでインストールしたものはnode_modules以下に配置されるが、Railsではデフォルトではnode_modulesを読まないからである。
ということでCSSを読むように app/assets/stylesheets/application.scssで以下を追加
*= require bootstrap-honoka/dist/css/bootstrap.min.css
JSも必要な場合は app/assets/javascripts/application.js に以下を追加
//= require bootstrap-honoka/dist/js/bootstrap.min.js
でいける
めっちゃ簡単 作者に感謝〜
