レスポンシブの表示も完璧に定義できる優れもの！スタイルガイドを作成するのに役立つテンプレート -Styleguide
Post on:2016年5月19日
sponsors
スタイルガイドとして見やすくて使いやすく、そして作成・編集も簡単に行え、モジュール式でカスタマイズ性にも優れたスタイルガイドを作成できるnode.jsベースのテンプレートを紹介します。
Living Styleguide Made Easy
Styleguide -GitHub
先日「デザイン要素の定義や見せ方が勉強になる最近のスタイルガイドのまとめ」を紹介しましたが、このStyleguideもかなりの優れものです。
Styleguideの特徴
もう見た目がかっこいい！ もちろん見た目はサイトのデザインに合わせて、カスタマイズが可能です。
Styleguideはブラウザベースで利用できるスタイルガイドを作成できるMITライセンスのテンプレートです。
スタイルを定義して共有することができ、作成・編集・削除も簡単、各エレメントは異なるスクリーンサイズでの表示にも対応しています。
Styleguideのデモ
デモページでは、そんな優れもので見た目も素晴らしいスタイルガイドをチェックできます。
スタイルはカテゴリに分けて管理することもできます。
まずは、ナビゲーション。
上部のプルダウンやエレメントの左右にあるバーで、サイズを変更することができます。
右上の「Show code」で実装用のコードが表示され、補足情報などを記載するエリアも用意されています。
デモ: ナビゲーション: コードを表示
デモでは、6つのカテゴリが用意されています。
表示サイズに合わせて、サイズだけが変わるのか、レイアウトも変わるのか、といったことも定義できます。
ページでよく使うエレメントはモジュールに納められており、ロゴをはじめ、2カラムや3カラム、フルサイズのコンテンツなどが定義されています。
インストール方法や使い方は、下記ページをご覧ください。
sponsors
