Ruby and Rails

Ruby と Ruby on Rails のこと

Rails 5 に yarn で Bootswatch 4 beta 入れた

Rails 4 時代は

maxim/bootswatch-rails: Bootswatches converted to SCSS ready to use in Rails asset pipeline.

にお世話になったけど、Rails 5.1.4 なので yarn を使って Bootswatch 4.0.0-alpha6 を入れてみる。

Bootswatch のバージョン確認してインストール

$ yarn info bootswatch | less
yarn info v1.0.2
{ name: 'bootswatch',
  description: 'Bootswatch is a collection of themes for Bootstrap.',
  'dist-tags':
   { latest: '3.3.7',
     next: '4.0.0-alpha.6' },
  versions:
   [ '3.0.0',
     '3.2.0',
     '3.3.0',
     '3.3.1',
     '3.3.2',
     '3.3.4',
     '3.3.5',
     '3.3.6',
     '3.3.7',
     '4.0.0-alpha.6' ],
以下略

4.0.0-alpha.6 があるので入れる。

$ yarn add bootswatch@4.0.0-alpha.6

Rails に Bootswatch 導入

thomaspark/bootswatch: Themes for Bootstrap

は Bootswatch 3 の情報なので ( 2017-9-23 時点 )、Branch を v4 にする。

thomaspark/bootswatch at v4

/app/assets/stylesheets にある application.scss を application.scss に mv して

@import "bootswatch/theme/variables";
@import "bootstrap/scss/bootstrap";
@import "bootswatch/theme/bootswatch";

と書く。

application.scss に書く

なんのテーマを入れようかな。

Bootswatch: Free themes for Bootstrap

3 に比べて Litera、Lux、Materia、Minty、Pulse が増えてる。3 のテーマに飽きていたので嬉しい。

新しい Litera 試してみる。

@import "bootswatch/litera/variables";
@import "bootstrap/scss/bootstrap";
@import "bootswatch/litera/bootswatch";

反映されていい感じになった。

CSS の微調整

自分の書き方が悪いのか、リンクのホバー時に背景黒でリンク赤とか、a.btn.btn-primary のリンク色が暗いとかあったので application.scss に追記。

ほかに h1 がフォント大きすぎと body に文字くっつきすぎを調整。

h1 {
  font-size: 1.2rem;
}

body {
  padding: 1rem;
}

a.btn {
  color: white;
}

a:hover {
  background-color: transparent;
}

余談