レスポンシブの確認もできる！UIコンポーネントのデザインや実装方法をまとめて管理できるスタイルガイド -Component Styleguide
Post on:2016年10月25日
sponsors
Webサイトで実装するさまざまなUIエレメントやコンポーネントのデザインや実装方法をまとめて管理できるスタイルガイドを作成できるシンプルなフレームワークを紹介します。
必要に応じて、HTMLのテンプレート、CSSのスタイルシート、使用しているのであればJavaScriptもすべて利用できます。
Component Styleguideのデモページで、どんな感じのスタイルガイドが作成できるか確認できます。
スタイルガイドには、ボタン・見出し・テーブル・フォームなどのコンポーネントが定義されています。
スタイルガイドの操作は、上部のバーから。
上部のバーで操作
デバイスのアイコンを選択すると、そのサイズで各コンポーネントが表示されます。
スタイルガイドを幅: 320pxで表示
表示サイズの変更はかなり快適です。
スタイルガイドを幅: 768pxで表示
バーの左のアイコンからは、表示するコンポーネントを選択できます。
スタイルガイドの目次
各コンポーネントを実装するコードを表示するには、右のアイコンを選択します。
各コンポーネントのコードを表示
sponsors
