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

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

サイトのキャプチャ

Living Styleguide Made Easy
Styleguide -GitHub

先日「デザイン要素の定義や見せ方が勉強になる最近のスタイルガイドのまとめ」を紹介しましたが、このStyleguideもかなりの優れものです。

Styleguideの特徴

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

サイトのキャプチャ

特徴 -Styleguide

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

サイトのキャプチャ

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

Styleguideのデモ

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

サイトのキャプチャ

デモ -Styleguide

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

サイトのキャプチャ

デモ: ナビゲーション

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

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

サイトのキャプチャ

デモ: ナビゲーション: コードを表示

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

サイトのキャプチャ

デモ: 見出し

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

サイトのキャプチャ

デモ: フォーム

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

サイトのキャプチャ

デモ: モジュール

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

sponsors

top of page

©2018 coliss