Style Guide Boilerplateでスタイルガイドを作成してみる

CSSのスタイルガイドを作成できるテンプレート「Style Guide Boilerplate」を少しさわってみたのでメモ。
テンプレートはPHPファイルなので、PHPの使用できる環境が必要になります。

準備

公式サイトのDOWNLOADボタンをクリックして、GitHubのページからダウンロードします。

ファイルを解凍して、PHPの使用できる環境にファイル一式を配置します。
index.phpにアクセスすると、こちらのデモページのようなスタイルガイドが表示されます。
　

カスタマイズ

デモページにあるAbout・Base・Patternsの項目のカスタマイズをやってみます。
今回カスタマイズで変更するファイルだけ抜粋すると、以下のようなディレクトリ構造になっています。

• css/
  • style.css
• doc/
  • base/
    • ○○○.md
  • patterns/
    • ×××.md
• markup/
  • base/
    • ○○○.html
  • patterns/
    • ×××.html
• index.php

About項目のカスタマイズ

Aboutの項目はindex.php内に記述がありますので、そこを直接書き換えればカスタマイズできます。
Getting Started・Colors・Fonts以外にも項目を増やしたり減らしたりすること可能です。
　

Base・Patterns項目のカスタマイズ

BaseやPatternsの項目は、markupディレクトリとdocディレクトリ内のファイルを変更してカスタマイズします。
markupディレクトリのファイルはExampleで表示されるHTMLコード、docディレクトリのファイルは項目の説明になります。

例えばBaseの中にHeadingという項目を追加したい場合、markup/base/ 内にheading.htmlという名前のファイルを、doc/base/ 内にheading.mdという名前のファイルを配置します。

heading.html

<p class="c-ttl-l">タイトル1</p>
<p>説明文テキストテキストテキストテキストテキスト。</p>
<p class="c-ttl-m">タイトル2</p>
<p>説明文テキストテキストテキストテキストテキスト。</p>
<p class="c-ttl-s">タイトル3</p>
<p>説明文テキストテキストテキストテキストテキスト。</p>

heading.md

タイトルの説明文です。

　
CSSはcssディレクトリ内のstyle.cssに追加していきます。

CSS

.c-ttl-l {
	margin: 0 0 15px;
	border-bottom: #cccccc 2px solid;
	padding: 20px 0;
	font-size: 28px;
	font-weight: bold;
}
.c-ttl-m {
	clear: both;
	margin-bottom: 15px;
	border-bottom: #ff8300 1px dotted;
	color: #ff8300;
	font-size: 18px;
	font-weight: normal;
}
.c-ttl-m:first-letter {
	font-size:26px;
}
.c-ttl-s {
	margin-bottom: 15px;
	border-bottom: #000000 1px dotted;
	color: #000000;
	font-size: 18px;
	font-weight: normal;
}

これでBaseの中にHeadingという項目を追加できました。
他にもいくつか項目を追加したデモが下記になります。
カスタマイズしたスタイルガイドのデモページ

Base・Patterns以外に項目を増やしたい場合、ディレクトリを追加することで項目を追加できます。
　

【参考サイト】

• Style Guide Boilerplate