Twitter Bootstrapのカラーカスタマイズしたいと思うのに、色の知識がないと下手に色を変えることでかえって見た目が汚くなってしまいそうでどうしようか困ることがある。そういう単純にちょっと色を変えたいなーくらいのときに、とても便利だなと思ったlessライブラリがあったので紹介する。
1pxdeep | A flat Bootstrap 3 theme that changes color
bootstrapで提供されている要素(navとかformとか)にcolor1のようなクラスを追加するだけでいい感じに色を変更してくれる。ダウンロードできるファイルも至ってシンプルで
https://github.com/rriepe/1pxdeep
のデータが落ちてくるだけ。一応TOPからのダウンロードリンクからだとzipで落ちるけど、github使ってるならgit cloneでいいと思う。このサイトで何がどんな色になるのか見ることができるので、いろんな色を入れて試してみるといい。
データはlessファイルで落ちてくるので、less必須になる。まだlessをインストールしてない人はnodeインストールしてlessもインストールしておくこと。なんかよくわからん人とかはドットインストールのLESSのレッスンみたらいいと思う。あとgulpを使うと彼女ができますっていうスライドとかみると幸せになれる気がする。
読み込み順序に指定があって(http://rriepe.github.io/1pxdeep/#install)、
@import "scheme.less"; // color scheme @import "bootstrap.less"; // bootstrap @import "1pxdeep.less"; // 1pxdeep theme @import "style.less"; // your own styles
という並びでないといけない。
scheme.lessと1pxdeep.lessの内容をざっくり書くとこんな感じ。
- scheme.less
- 元になる色(seed-color)を選び、その色を基準にした色相環上の位置を選ぶことでカラースキームを生成できる。
- 1pxdeep.less
- scheme.lessで決まった色をbootstrapで使えるようにカラースキームの部分だけ上書きしてくれる。
なので、例えばbootstrap以外にも使いたいCSSフレームワークがあるなら、scheme.lessで生成したカラースキームを用いるのでも結構応用効くと思う(やってないからわからんけど)。
注意点としてはダウンロードしたファイルは必ずデフォルトのカラーで落とされるということ。サイトでいろんな色を試してダウンロードまでできるので、てっきり落としたファイルは自分が気に入った色に変わったファイルでダウンロードできると思っていたが、実際にはscheme.lessを自分で編集しないとカラースキームが変わってくれない。
といっても変更する箇所はとても少なくて
L17
// This color is used to generate the scheme @seed-color:#578562; // ←ここを好きな色に変える
L24
// Accented analogue (default) @wheel_pos1:45; @wheel_pos2:315; @wheel_pos3:180; // ↓こっから下の行に色相環から選べる位置の指定があるので、適宜コメントアウトをしたり外したりする
で色が変わってくれる。
