Ruby on Rails Twitter Bootstrapの設定
昨日は、Twitter Bootstrapの導入まで出来たけど、カスタム設定ができなかった。
全部はいらないよね？bootstrap-sassをカスタマイズして使う方法 - Qiita
のおまけ部分。
ちなみに、何回もフォルダ開いて Git Bush Here！ってするのめんどい。
調べてみた。
１．プログラムファイルにある、Gitフォルダをクリック
２．git-bash.exeを右クリックでショートカットを作成
３．ショートカットを右クリックでプロパティを開く
４．作業用フォルダーの部分に、対象の作業フォルダのパスを追加
５．ショートカット名を変更し、スタート画面にピン留めする。
これで、毎回フォルダにアクセスしなくても、スタート画面からGitを開けるぞっと。
ついでに、 git add -A commit とかショートカットできないかも調べてみよう。
うん。よくわからないので、愚直に git add -Aってしていこうかな・・・
どんまい俺。
さて、カスタマイズ方法をやっていこう。
「中身はココのコピペ。」って書いてあるのを無視して、一部分だけコピーしたのが原因だったっぽいな。。
あとはこの変数をBootstrapで初めから設定されている変数に
ぶち込んでやればサイトのカラーはこれで完結できる。
むむむ・・・scssをちゃんと理解していないため、この言葉を理解していない。
ひとまず、カスタムCSSは使えているっぽい。あとはscssの中身をどうしたら良いのかをチェック。
その前に、今のところうまくいっているので、GitにPushしよう。
マージは、Atomを閉じなければいけないので、あとでしよう・・・
さて、カスタムscssを利用して、Twitter Bootstrapを思うように変更させてみたい。やってみたい。
ボタンの色を自由自在に操作できるようにする。
$btn-primary-color: #fff !default;
$btn-primary-bg: $brand-primary !default;
$btn-primary-border: darken($btn-primary-bg, 5%) !default;
とかが怪しい。
$brand-primary: darken(#428bca, 6.5%) !default; // #337ab7
というところから引用しているのか。
そうかそうか。という事はここの色を変更すると、変わるんだな。
・・おお！変わった。
shade と tint の違いがわからなかったけど
Shadeは暗く
Tintは明るく という意味みたいだ。
今回色は６つ欲しいので、６つ設定してみよう。
青・赤・オレンジ・緑・黒・紫
$btn-blue-color: #fff !default;
$btn-blue-bg: $blue !default;
$btn-blue-border: darken($btn-blue-bg, 5%) !default;
を追加してみたが、動作せず。
btn-info とかって、どこで呼び出しているんだ・・・。
overrrideしか書いていないなぁ。
自分で、scssを追加して読み込ませてみよう。
_ ←アンダーバーの意味ってなに？
.scss(.sass)ファイル名の先頭にアンダースコアを入れると、コンパイルしてもcss ファイルが作成されないという仕様があります。
Sassではファイルを分割して管理するが、コンパイル後に生成されるCSSファイルは１つだけ。ということが出来るのでとても便利です。
また、インポート専用ファイルの見分けがつきやすくなるという利点もあります。前に書いていますが、読み込むときの@importでは拡張子とアンダーバーを省略することが出来ます。
だってさ。
ということは、追加していくScssはアンダーバーをつけて追加し、importで読み込めばOKということか。
なんとなく理解。
_original.scssを追加し、importする。
css - Change navbar color in Twitter Bootstrap 3 - Stack Overflow
これをコピペして ナビゲーションの色は変更できた。
でも俺がしたいのはボタンの色を変えること！
_original.scssに
@import "bootstrap-custom/variables";
.btn-blue{
color: #fff;
background-color: $btn-blue-bg;
border-color: $btn-blue-border;
}
としたら、ボタンの色を変えれた・・・！
SCSSで作るといくらファイルつくてもまとまるみたいなので、originalフォルダを作り
application.css.scssに @import "original/*"; を追記して読み込みする事にした
ボタンはめでたく作れた！！
けど、ホバーした時の文字の色が黒くなるので、その設定をしよう。
色を管理するとき、ちょっとめんどいので色々と調べてみる。
マップというものを試してみよう。
・・・やめた。
Twitter Bootstrapの中にヒントが有ると思ったけど、うーむ。
ちょっともう一回やり直し！
くそぉ。
@importもshadeも無し。
originalフォルダの_button.scssの中に関数を直接書くことにする。
Sassのカラージェネレーター。よさげ。
_button.scssをこんな感じにして、完成した！！
//色の指定
$blue: #00acf0;
$orange: #bd853f;
$green: #31947c;
$red: #b9403e;
$black: #4a4a4a;
$purple: #8B008B;
//それぞれのボタンの設定。$colorは$btn-colorで設定されているものを引数とする。
@mixin btn-hover($color) {
color: #fff;
background-color: lighten($color,5%);
border-color: $color;
&:hover,
&:focus,
&.focus {
color: #fff;
text-decoration: none;
background-color: darken($color,5%);
}
}
//ボタンの設定
.btn-blue{
$btn-color: $blue;
@include btn-hover($btn-color);
}
.btn-green{
$btn-color: $green;
@include btn-hover($btn-color);
}
.btn-black{
$btn-color: $black;
@include btn-hover($btn-color);
}
.btn-purple{
$btn-color: $purple;
@include btn-hover($btn-color);
}
.btn-orange{
$btn-color: $orange;
@include btn-hover($btn-color);
}
.btn-red{
$btn-color: $red;
@include btn-hover($btn-color);
}
の引数を使う部分を参考にした。
こんな感じで、自分のしたようにTwitter Bootstrapを変えていけるかも・・・！
とりあえず、git add しておこう。
git push herokuも忘れずにね。
git checkout master
git merge ブランチ名
git push heroku master
でHerokuにアップロードを確認。
またブランチで作業しよう。
git checkout ブランチ名。
ボタンの部分に active と disabled を追加しておこう。
activeは、若干濃くなる。
disabledは、クリックできなくなる。
うーん、うまく動作しないな。
お！うまく行った！
色が若干気に入らないので、調整して今日は終わろう。
うーむ、色が気に入らない。
カラーレベルを統一したい。明日調べよう。
ひとまず、これで動作は確認出来ている。
//色の指定
$blue: #0099cc;
$orange: #daa520;
$green: #008000;
$red: #ff1919;
$black: #4a4a4a;
$purple: #8B008B;
//それぞれのボタンの設定。$colorは$btn-colorで設定されているものを引数とする。
@mixin btn-hover($color) {
color: #fff;
background-color: lighten($color,5%);
border-color: $color;
&:hover,
&:focus,
&.focus {
color: #fff;
text-decoration: none;
background-color: darken($color,5%);
}
// .activeが追加された場合＋5%暗く
&:active,
&.active {
background-color: darken($color,10%);
&:hover,
&:focus,
&.focus {
background-color: darken($color,15%);
}
}
// .diabledが追加された場合＋5%明るくする
&.disabled,
&[disabled],
fieldset[disabled] & {
background-color: lighten($color,5%);
}
}
//ボタンの設定
.btn-blue{
$btn-color: $blue;
@include btn-hover($btn-color);
}
.btn-green{
$btn-color: $green;
@include btn-hover($btn-color);
}
.btn-black{
$btn-color: $black;
@include btn-hover($btn-color);
}
.btn-purple{
$btn-color: $purple;
@include btn-hover($btn-color);
}
.btn-orange{
$btn-color: $orange;
@include btn-hover($btn-color);
}
.btn-red{
$btn-color: $red;
@include btn-hover($btn-color);
}
