えっ!ビルド不要?JavaScriptで自動生成するスタイルガイドジェネレーターKalei

えっ!ビルド不要?JavaScriptで自動生成するスタイルガイドジェネレーターKalei

イメージ

娘の誕生日に、ドラえもんドンジャラDXをプレゼントしました ishida です。
娘とともにハマってしまいました。早く「ドンジャラ」って言いたいっ!

さてさて、皆さん HTML/CSSコーディングでスタイルガイド作成していますか?

スタイルガイドは、サイト内で定義されている部品を一覧化して
こんなパーツを使ってますよーとするドキュメントです。

複数人でのページ制作や新規サイト構築後の運用には欠かせません。
ジェネレーターによるスタイルガイド生成も人気になりつつあり<
最近では、StyleDocco が有名ですね。
StyleDocco 以外にもスタイルガイド生成のツールはいろいろあります。

そのなかでもビルドを必要としないスタイルガイドジェネレーターのご紹介です。

ビルド不要なスタイルガイドジェネレーターKalei

こちらのジェネレーター、コンパイルが不要で Ruby や Node.js も不要です。
ドキュメントの生成はすべてJavaScriptで行ってます。

Kaleiの使い方

まずは、githubからクローンまたはダウンロードします。
git clone github.com/kaleistyleguide/kaleistyleguide.git

次にローカルサーバーを起動します。

そして jsディレクトリ内の config.js にて対象とするCSSを指定します。
デフォルトでは http://localhost/css/styles.css が設定されてます。

CSSへの記述方法

CSSへの記述は、ほぼStyleDoccoと変わらず
コメント内にMarkdown形式および```でコードを記述します。

/*
# Kalei - 華麗に Style guide

## 見出し

各種見出しは以下のように使ってください。

```
<h1 class="ttl-a">Heading 1</h1>
<h2 class="ttl-b">Heading 2</h2>
<h3 class="ttl-c">Heading 3</h3>
<h4 class="ttl-d">Heading 4</h4>
<h5 class="ttl-e">Heading 5</h5>
```
*/

この状態で、index.html にアクセスしてみると、
おぉ!生成されてるぅー。

Kalei Style Guide スクリーンショット

実際のデモもありましたのでこちらをご覧いただければ、分かりやすいかと。

他のスタイルガイドジェネレーターに比べ導入が簡単なので、これからスタイルガイドジェネレーターを使ってみようかなぁという人には向いてますね。

Kalei

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ