Hologram | Generate a Styleguide right in your CSS
Hologram is a Ruby gem that parses comments in your CSS and turns them into a beautiful styleguide. Quick start: gem install hologram And then: hologram init View on Github Why would I use it? Hologram makes building a styleguide as easy as maintaining your CSS. It is similar to Kneath Style Sheets and Styledocco. Your documentation is written in your production CSS using a combination of YAML and
Website Style Guide Resources
Website Style Guide Resources GitHub repo Twitter updates Contributors Examples Real life pattern libraries, code standards documents and content style guides. Carbon Design System By IBM Carbon is the design system for IBM Cloud products. It is a series of individual styles, components, and guidelines used for creating unified UI. frontendcodepatternsvoiceandtone Code For America frontendpatterns
デザインシステムが作り出す明文化への道
明文化をテーマにしていた2016年 今年の初めデザイン SDK のようなものが欲しいという記事を書きました。開発者から提案されているフロントエンド寄りのスタイルガイドはコードの品質管理と、見た目の再現性を高める上で有効な手段です。しかし、これだとコードを理解していることがスタイルガイドの利用・関与の大前提になります。すべてのデザインがコードから始まるとは限らないですし、デザイナーであれば Sketch や Photoshop といった日々使うツールを活用して最低限の品質を保つ手段が必要になります。 共通言語を作っていく。 これは文字通り言葉だけでなく、UI を始めた視覚的な部分など、今まで好みや感覚で済ませていたこともきちんと言葉にすることも指しています。デザイン批評も共通言語を作り上げるために必要なプロセスです。 建築家クリストファー・アレグザンダーの著書「Pattern Languag
フロントエンドスタイルガイド： 定義と要件、コンポーネントチェックリスト
フロントエンドスタイルガイドは、デザインやテストを効率化し、UIの一貫性を高める。今回は、スタイルガイドの要件8個と、一般的なコンポーネント25個を紹介しよう。 Front-End Style-Guides: Definition, Requirements, Component Checklist by Page Laubheimer on March 27, 2016 日本語版2016年6月23日公開 フロントエンドスタイルガイドとは何か フロントエンドスタイルガイドがUXの現場でますます一般化してきている。Jeff GothelfとJosh Seidenが彼らの著書『Lean UX』で説明しているように、フロントエンドスタイルガイドはアジャイルやリーンな環境で生まれたものである。 定義： フロントエンドスタイルガイドとは、製品のユーザーインタフェースにある全要素のモジュールコレクショ
フロントエンド視点：デザイナーと協業して作るスタイルガイドの難易度を下げる
前回 Atomic Design を実案件に導入した話で触れたコンポーネントリストを作り始めたとき、個人的にいろいろと学びがありました。 コンポーネントリストやスタイルガイドは、フロントエンドエンジニアとデザイナーが協業して作る必要がありますが、この協業がなかなかうまくいかず、スタイルガイド運用をワークさせるのは難易度が高い印象がありました。 自分自身、今まで携ってきた開発プロジェクトにおいて、うまくワークしたと思えるスタイルガイド作りができなかったのですが、現在のプロジェクトで開発初期からスタイルガイドを作り、リリース後、運用フェーズまでワークさせることができました。 本記事ではフロントエンドエンジニアとデザイナーが協業してスタイルガイドを作り始めるにあたって気をつけたことについて書いていきます。 共通言語としてのスタイルガイド 開発において、スタイルガイドが欲しい理由は、開発中のコミュ
Style Guide Templates | Frontify
Future-proof your brand with digital guidelines on how to stay on-brand at every touchpoint. Use best-practice templates and over 40 customizable elements to get you up, running, and focused on developing your brand. Get rid of that PDF monstrosity. You no longer need to be a design wizard to get your company on-brand. Just use predefined templates, customizable elements, and in-line editing. Oh,
I am mitsuruog | 進化の早いフロントエンドの世界についていくために、スタイルガイドを有効活用しているという話
フロントエンドの世界では、日々新しいフレームワークやライブラリが生まれています。 初めてそういった新しいものを習得する場合に、なるべくなら近道したいと思うのが人の気持ちだと思います。 まず大変なのが、Hello World から実際のプロダクトやプロトタイプで利用する場合で、これは初めてで何もわからない土地を一人で散策するような感覚にも似ています。 今日、紹介するのは私が進化の早いフロントエンドの世界で、より早く未開の土地に慣れるためにスタイルガイドを有効活用しているという話です。 ちなみにこの記事はFrontrend Advent Calendar 2014 - Qiitaの 6 日目の記事です。 5 日目はじめての CSS 設計 - Qiita(@moschann) 7 日目CSS のプリプロセスとポストプロセス、そして Rework と PostCSS(@morishitter) 良
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SC5 Style Guide Generator
Adele – Design Systems and Pattern Libraries Repository
https://frasco.io/css-best-practices-that-you-have-not-yet-known-e629fa6598d7
Fractal
GitHub - davidhund/styleguide-generators: An overview of automatic living styleguide generators
javascript-style-guide/es5/README.md at master · mitsuruog/javascript-style-guide
Webデザインの勉強にいい！レイアウトやUIエレメントやカラーの使い方の参考になるStyle Guideのまとめ
git-style-guide/README.md at main · objectx/git-style-guide