サイト制作に関するメモ書き

HOME > HTML・CSS > Style Guide Boilerplateでスタイルガイドを作成してみる

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

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

準備

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

create-a-style-guide-style-guide-boilerplate01

ファイルを解凍して、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以外に項目を増やしたい場合、ディレクトリを追加することで項目を追加できます。
 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP