レスポンシブの表示も完璧に定義できる優れもの！スタイルガイドを作成するのに役立つテンプレート -Styleguide

Post on:2016年5月19日

sponsors

スタイルガイドとして見やすくて使いやすく、そして作成・編集も簡単に行え、モジュール式でカスタマイズ性にも優れたスタイルガイドを作成できるnode.jsベースのテンプレートを紹介します。

Styleguideの特徴

もう見た目がかっこいい！もちろん見た目はサイトのデザインに合わせて、カスタマイズが可能です。

Styleguideはブラウザベースで利用できるスタイルガイドを作成できるMITライセンスのテンプレートです。

スタイルを定義して共有することができ、作成・編集・削除も簡単、各エレメントは異なるスクリーンサイズでの表示にも対応しています。

デモページでは、そんな優れもので見た目も素晴らしいスタイルガイドをチェックできます。

スタイルはカテゴリに分けて管理することもできます。
まずは、ナビゲーション。

上部のプルダウンやエレメントの左右にあるバーで、サイズを変更することができます。

右上の「Show code」で実装用のコードが表示され、補足情報などを記載するエリアも用意されています。

デモでは、6つのカテゴリが用意されています。

表示サイズに合わせて、サイズだけが変わるのか、レイアウトも変わるのか、といったことも定義できます。

ページでよく使うエレメントはモジュールに納められており、ロゴをはじめ、2カラムや3カラム、フルサイズのコンテンツなどが定義されています。

インストール方法や使い方は、下記ページをご覧ください。