Webデザイナーのための10のリビングスタイルガイドツール - ベストオブ

A 生活スタイルガイド です UI要素とパターンのドキュメンテーション 開発者が使用できるようにする目的でサイトまたはアプリケーションから収集されたもの プロジェクト全体で一貫したスタイル. これまで、開発者は手動でスタイルガイドを作成していましたが、これは大変な作業です。しばらくして、彼らはワークフローを自動化し始め、そしてフロントエンドのコードを変換するスタイルガイドツールを開発しました。 整然としたUIライブラリ 現れ始めた.

生活スタイルガイドは コードスタイルガイド, 後者は読みやすく保守しやすいコードを書く方法についての規則を含んでいるので、生きているスタイルガイドはそうです ボタン、ウィジェット、活版印刷要素のCSSクラスなどのフロントエンドパターンのコレクション. コードスタイルガイドで確認 コードの一貫性, 生活様式ガイドが保障している間 視覚的な一貫性 サイト全体.

この記事では、私たちはあなたを助けることができる10の便利なツールをまとめました あなた自身の生活スタイルガイドを作成する.

1.私を様式化する

このツールはとても楽しいです。分析したいWebサイトのリンクを貼り付けるだけで、マウスのワンクリックでそのスタイルガイドが生成されるのを見ることができます。あり 私を様式化する, 色、フォント、サイズ、間隔など、サイトのパターンの概要をすぐに確認できます。プロセスが完了したら、あなたはすることができます PDFでスタイルガイドをダウンロードする.

製作者

製作者 独自のUIツールキットを構築し、デザインシステムを編成し、そしてツールキットコードからスタイルガイドを生成することを可能にします。チームで作業している場合は、他の開発者が使いやすくするためにMarkdownでドキュメントを書くことができます。それはあなたを助けることができます あなたのデザイン/コーディングルーチンを整理する 好きなように.

3.フロンティフィケーション

最前線 デジタルモックアップからワイヤーフレーミングまですべてを含みます。彼らはまた面倒のないきれいなミニマルデザインプロセスを提供するスタイルガイドツールを持っています。無料でサインアップして、必要な情報をすべて手動で挿入することができます。このプロセスには、カラーパレット、フォントの選択、アイコン、ロゴ、場合によってはスローガン、または好みのWebコピーを含める必要があります。.

4.アイギス

あり アイギス, 任意のテキストファイルからスタイルガイドを生成できます（例：. .CSS, .scss, .文体, .md） Markdownでドキュメントを書き、あなたのサイトのテーマをカスタマイズすることもできます。.

ホログラム

ホログラム Truliaによって作成された、そしてスタイルガイドを生成するための素晴らしいソリューションです。それはRubyの宝石です。 CSSのコメントを解析する 素晴らしいスタイルガイドを作成するために。 Hologramはあなたのスタイルガイドをさらに簡単に生成するためにいくつかの基本的なスタイルとナビゲーションを持つテンプレートシステムを持っています.

6.スタイルダウン

あり スタイルダウン, CSSスタイルガイドは簡単に書くことができます。 マークダウンベースのスタイルガイドジェネレータ. プラットフォームに依存しないため、ほとんどのWeb開発設定で機能します。それを起動して実行するために必要な作業はほとんどありません。また、CSSに追加する必要があるコメントはごくわずかです。あなたはあなたのCSSドキュメンテーションをインラインCSSコメントとして、あるいは別のMarkdownファイルとして作成することができます。.

7. KSS

KSS（ナイルスタイルシート） は主に ドキュメント仕様 そしてスタイルガイドのフォーマットは 独自のコメント構文. KSSには、解析するRubyライブラリも含まれています。 .セス, .scss, そして .CSS KSSのガイドラインに沿って文書化されたファイルは、きれいなスタイルのガイドになっています。スタイルガイドを作成するにはコーディングの知識が必要であるため、KSSはより高度なユーザーやプロのチーム向けです。.

8. SC5スタイルガイドジェネレータ

とともに SC5スタイルガイドジェネレータ ブラウザで直接スタイルガイドを作成および編集できます。それは KSSに基づく スタイルの表示、検索、テストに役立つAngularJS搭載のUIなど、いくつかの優れた機能が含まれています。 SC5はKSSと同じ文書表記を使用しています。 SASS、LESS、PostCSS、純粋なCSSスタイルシートをサポートしています。.

9.スタイルドッコ

StyleDocco その便利なNode.jsアプリは あなたのスタイルシートからスタイルガイドを作成する. あなたはnpmでそれをインストールすることができます。生成されたスタイルガイドでは、StyleDoccoは適用したスタイルとHTMLコードの例を含むプレビューを表示します。.

StyleDoccoのホームページには、デフォルトのスタイルシートから生成されたものと、ブートストラップサイトから生成されたものの2つのスタイルガイドの例があります。これらの例は、SytleDoccoが使用している構文を理解するのにも役立ちます。.

10.パターンラボ

パターンラボ あなたが作成するのに役立つツールのコレクションです。 モジュール設計システム. Pattern Labは、サイト上のすべてのスタイル要素をステッチし、それらからテンプレートとページを形成するカスタム静的サイトジェネレータです。それはあなたのプロジェクトの役割を果たすことができます パターンライブラリ そして フロントエンドスタイルガイド. パターンラボでは、スタイルコンポーネントを同時に見ることができます 抽象的に そして 文脈で.