設定してしまえばすごく簡単だったのだけど、はじめの設定につまづいたのでメモ。
環境はwindowsです。

まずは、bootstrapを準備。

http://getbootstrap.com/getting-started/#download

Download sourceをクリックして、ソースをダウンロードします。

bootstrap

1pxdeepのダウンロード。

http://rriepe.github.io/1pxdeep/

ダウンロード前に、seed colorとcolor wheelを設定して色変更のプレビューが出来ます。
色変更は、ダウンロードしたコードの一部を修正することであとから簡単にできるので、
とりあえずの色を決めたらDownloadをクリックしてしまいましょう。

次に、コンパイル環境のwinlessを準備。

http://winless.org/

Download.msiをダブルクリックしてインストール。

http://rriepe.github.io/1pxdeep/

CSSをコンパイル、編集するための作業ワークフォルダを作って、その下にダウンロードした
1pxdeepとbootstrapのフォルダを置きます。

├─csswork
│  ├─1pxdeep-master
│  └─bootstrap-3.1.1

作業ワークフォルダを、Winlessで指定します。
指定したあと、コンパイル対象のファイル指定を全て外します

winless2

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を編集します。

ここまでたどり着けばあとは色々試すだけです。

Pocket

Comments are closed.