「Atomic Design」(アトミック・デザイン)という言葉がしばしば聞かれるようになってきました。実際にちょっとしたトライアルをしつつ、Atomic Design について考えてみました。
この記事は フロントエンドエンジニア Advent Calendar 2016 の10日目の記事です。 最近はずっとReact、Redux、CSS Modulesで開発していて、コンポーネントについて考えることが多かったので頭の中の考えをアウトプットしてみます。 それぞれのモジュール化 みなさん、次のようにモジュール化を行っていると思います。 HTML Reactなどのコンポーネント化のライブラリを使う 何かのテンプレートエンジンでパーシャルにする CSS パーツ毎にclassを作る SASSのmixinにする JavaScript 関数やクラスにする JavaScriptに関してはそれほど問題ないと思います。 ただコンポーネント化に関してはCSSやJavaScriptとセットで考える必要があったり、 CSSもパーツ毎にclassにするのがいいのかmixinにするのがいいのかといった論点が
最近、社内の9階フロアではインフルエンザが蔓延してバタバタと感染者が増えています…。 次は我が身ではないかと内心ビクビクしながら過ごしていますrockdです。 そんな中、今回はAtomic Designについての話をします。 簡単にいうと、デザインを設計するための手法の1つです。 2013年にBrad Frostという人がWebフロンドエンド用に開発しました。 UIの粒度を原子に置き換えて各ステージごとに管理し構築していきます。 [vimeo 109130093 w=640 h=360] Brad Frost: Atomic Design (Webdagene 2014) from Netlife Research on Vimeo. では、実際にどのようなステージに分けられるのか紹介します。 5つのステージ Atomic Designでは5つのステージに分けて管理します。 Atoms(ア
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く