設定してしまえばすごく簡単だったのだけど、はじめの設定につまづいたのでメモ。
環境はwindowsです。
まずは、bootstrapを準備。
http://getbootstrap.com/getting-started/#download
Download sourceをクリックして、ソースをダウンロードします。
1pxdeepのダウンロード。
http://rriepe.github.io/1pxdeep/
ダウンロード前に、seed colorとcolor wheelを設定して色変更のプレビューが出来ます。
色変更は、ダウンロードしたコードの一部を修正することであとから簡単にできるので、
とりあえずの色を決めたらDownloadをクリックしてしまいましょう。
次に、コンパイル環境のwinlessを準備。
Download.msiをダブルクリックしてインストール。
http://rriepe.github.io/1pxdeep/
CSSをコンパイル、編集するための作業ワークフォルダを作って、その下にダウンロードした
1pxdeepとbootstrapのフォルダを置きます。
├─csswork │ ├─1pxdeep-master │ └─bootstrap-3.1.1
作業ワークフォルダを、Winlessで指定します。
指定したあと、コンパイル対象のファイル指定を全て外します
csswork直下に、以下のindex.lessファイルを置きます。
Winlessで、このindex.lessファイルだけをチェックして、コンパイルするとcssが作成されます。
@import "bootstrap-3.1.1/less/bootstrap.less"; // bootstrap @import "1pxdeep-master/scheme.less"; // color scheme @import "1pxdeep-master/1pxdeep.less"; // 1pxdeep theme |
色変更したいときは、1pxdeep-master/scheme.lessの冒頭の
@seed-colorや@wheel_pos1を編集します。
ここまでたどり着けばあとは色々試すだけです。