Inside Frontend #2 / 動的デザインガイドラインのつくり方 / Masanari Hamada @nairirou / #InsideFE
![動的デザインガイドラインのつくり方](https://cdn-ak-scissors.b.st-hatena.com/image/square/da76f554cf0ce04c8f706d083c4d3ce3e4a25b14/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2Fa2b6f8d9262a47bfa3ad6e2a0249a6fd%2Fslide_0.jpg%3F9400587)
Inside Frontend #2 / 動的デザインガイドラインのつくり方 / Masanari Hamada @nairirou / #InsideFE
こんにちは!2016年に新卒で入社した、SUUMOのフロント開発グループでエンジニアをしているやなぎさわです。 入社早々SUUMOのCSSを再設計をする機会があり、CSS/SASSのスタイルガイドを研究していたのですが、JavaScriptのスタイルガイドで有名なAirbnbがCSSのスタイルガイドを公開しているのを見つけました。 一人で開発していたり、CSS/SASSを書く人が少人数である場合は意外とその重要性に気付きにくいのがこのCSS/SASSのコーディング規約です。CSSは単純な言語であり単にスタイリングを当てるだけであればわりと簡単にできてしまうのですが、大規模開発や修正が頻繁に必要となる運用フェーズになるとその単純さがゆえにバグを作り出しやすくなってしまいます。 特にCSSでは全てのセレクタのスコープがグローバルであり、気を抜くとすぐにクラス名などが被ってしまいます。BEMとO
ZackはUXPinのUXデザインライターです。彼の仕事はUX Magやawwwards、 Speckyboyで出版されています。 デザインシステム、パターンライブラリ、スタイルガイドという言葉が、同じような意味で使われていることがあります。 これら3つのコンセプトには繋がりはあれども、決して同じものではありません。 この記事では、定義を明確にして、それらがどのように繋がっているかを視覚化します。そしてデザインシステムを構築するための、主なガイドラインについて紹介します。 デザインシステムの定義 まず直接の定義を理解しましょう。そうすることで、これらの概念がどのように繋がっているかを学び、より良い製品作りに活用する方法を考えることができます。 デザインシステム―デザインの基準やドキュメント、原則、および基準を達成するためのUIパターンやコードコンポーネントなどのツールキットを、すべて含んだ
A collection of identity style guides from around the worldSee the grids, layouts, and details designers include in brand identity style guides for clients worldwide. Browsing identity style guides helps me learn what to include for my clients, so I collated a number of samples for reference. I hope you find the resource helpful, too. Audi CI Belfast brand identity guidelines Berkeley brand identi
Revision 2.1 This style guide contains many details that are initially hidden from view. They are marked by the triangle icon, which you see here on your left. Click it now. You should see “Hooray” appear below. Hooray! Now you know you can expand points to get more details. Alternatively, there’s a “toggle all” at the top of this document. This document defines formatting and style rules for HTML
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く