StyleDoccoを利用してcssを共有する

StyleDoccoとは、css内のコメントからTwitterbootstrapのBaseCSSのようなCSSドキュメントを簡単に作成することが出来るnode製のツールです。

最近主流(?)のコンポーネントスタイルのワークフローを採用した場合、各cssコンポーネントの利用方法などが分かりやすくまとまっていると開発作業も捗ります。
仕事でデザインを起こすことは無いですが、個人サービスなどはCSSを自分で準備する事が多いのでStyleDoccoのコメント方法を勉強してみます。

StyleDoccoを使ってみよう!

ではインストールから簡単なcssコンポーネントの作成、cssドキュメントの出力まで試してみましょう。

インストール

nodejsは既にインストール済みの前提で話を進めます。
npmを利用してグローバル領域にstyledoccoをインストールして下さい。

$npm install -g styledocco

nodeがインストールされていれば問題なくstyledoccoをインストール出来ると思います。

cssコンポーネントの決定

簡単に4つのコンポーネントをcssで準備します。

• 基本背景色と丸角の.box-normal
• 黄色背景色と丸角の.box-yellow
• ボーダをつける.box-border
• 影をつける.box-shadow

cssの記述

コンポーネントのデザインが決まったのでcssを記述していきましょう。
簡単なコンポーネントなので難しく無いと思います。
余談ですが、Photoshopでカンプを書くとcssのコピーで簡単にモックcssを記述することが出来ます。

.box-normal{
  border-radius: 10px;
  background-color: rgb( 172, 213, 152 );
}
.box-yellow{
  border-radius: 10px;
  background-color: rgb( 255, 244, 92 );
}
.box-border{
  border: 3px solid rgb( 0, 0, 0 );
}
.box-shadow {
  box-shadow: 2.5px 4.33px 5px 0px rgb( 0, 0, 0 );
}

念のためhtmlで確認しておきましょう。
確認時は分かりやすいようにwidthとheightを設定してます。

大丈夫そうですね。

cssへコメント追加

cssへstyledocco用のコメントを追加していきます。
記述方式はmarkdownです。

/*
# ボックス
ボックスのスタイルを提供します。

## 背景色
* 丸角で基本の色を設定することが出来ます。
```
<div class="box-normal">.box-normalのデザインはこんな感じ!</div>
```
*/
.box-normal{
  border-radius: 10px;
  background-color: rgb( 172, 213, 152 );
}

/*

* 丸角で警告の色を設定することが出来ます。
```
<div class="box-yellow">.box-yellowのデザインはこんな感じ!</div>
```
*/
.box-yellow{
  border-radius: 10px;
  background-color: rgb( 255, 244, 92 );
}

/*
## 罫線
* 黒の罫線を設定することが出来ます。
```
<div class="box-normal">.box-borderのデザインはこんな感じ!</div>
```
*/
.box-border{
  border: 3px solid rgb( 0, 0, 0 );
}

/*
## 影
* 影を設定することが出来ます。
```
<div class="box-shadow">.box-shadowのデザインはこんな感じ!</div>
```
*/
.box-shadow {
  box-shadow: 2.5px 4.33px 5px 0px rgb( 0, 0, 0 );
}

/*
## 組み合わせサンプル
* 基本色に影をつける
```
<div class="box-normal box-shadow">.box-shadowのデザインはこんな感じ!</div>
```
*/

cssドキュメントの出力

いよいよstyledoccoの登場です!
作業ディレクトリへ移動してstyledoccoを起動して下さい。

$styledocco -n "初めてのStyleDocc" style.css

正常に終了するとdocディレクトリが作成されて、その中にindex.htmlとstyle.htmlが出力されています。
出力結果を確認してみましょう。

markdownになれるとコメントの記述はそれほど大変ではないので、積極的に採用していきたいですね!