StyleDoccoの導入(Windows用)
cssを構成する上でスタイルガイドを使用すると管理がかなり楽になり
メンテナンスをする際にも役に立ちます。
今回はStyleDoccoを使用する方法(Windowsにて)を書いていきます。
StyleDoccoとは？
Node.jsを使ったスタイルガイドジェネレータです。
Node.jsのインストール
公式サイトにあるバージョンでは動作しなかったので古いバージョンで試しました。
バージョンを切り替えられる「NVM」を インストールします。
https://github.com/coreybutler/nvm-windows/releasesからnvm-setup.zipをダウンロードし
「nvm-setup.exe」を起動します。
画面に従ってインストールします。
次にコマンドプロンプト画面で
nvm
と入力し、バージョン情報などが表示されていればOKです。
nvm install 5
と入力。node.jsのバージョンを5.0.0でインストールします。
nvm use 5
と入力。
node -v
と入力するとnode.jsのバージョンが確認できます。
今回だと
v5.0.0
と表示されていれば成功です。
StyleDoccoのインストール
Node.jsのインストールが完了したら
再びコマンドプロンプトで
npm install -fg styledocco
と入力。
StyleDocooを作成
StyleDocco用のCSSを作成
・ディレクトリ例
Styledocco > css > styleguide.css
そこに
/*
#ボタン類
##ボタンカラー01
`.btn01`と合わせて`.btn-color01`を付与
“`
<a class="btn01 btn-color01">ボタンカラー01</a>
“`
##ボタンカラー02
`.btn01`と合わせて`.btn-color02`を付与
“`
<a class="btn01 btn-color02">ボタンカラー01</a>
“`
[/html]
のようなコードと当てはまるCSSを書いてきます。
コマンドプロンプトにて作業ディレクトリに移動して以下のコマンドを入力します。
styledocco -n “Style Guide” css/styleguide.css
するとStyledoccoフォルダにdogsというフォルダが作成されます。
フォルダ内のstyle.htmlをブラウザで確認し、正しく表示されれば作成終了です。
