Atomic Design × Sketch Libraryを用いてデザインファイルを作る - Qiita
Sketch LibraryはVersion 47(2017年10月10日release)で追加されたSketchの新機能です。 Sketchファイル間で作成したSymbolを共有、同期することが出来ます。 ※Symbol: Sketchで繰り返し利用可能なページとは別で切り出された要素のこと Sketch Libraryが便利な点は、以下のように今までは、共通の要素に対して修正が入ったときに全てのデザインファイルに対して手動で修正が必要でした。(デザインファイルを画面毎に分割している場合など) 今まで Sketch Libraryを活用した場合 Sketch Libraryを活用するとLibraryの更新があった場合には差分を抽出して、画面の更新を行うのみ(ボタンクリックのみ)で完結することが出来ます。 詳しい使い方は公式を見て頂けると！ 両者のメリットを改めて考えると Atomic D
Corder's High 2017 「CSS設計方法論とその先」 レポート · Code of Duty
東京で開催された「CSS Nite LP54 Corder’s High 2017」の参加レポートです。 セッション8つめはピクセルグリッドの高津戸さん。 CSS設計方法論や各種ツールとどう向き合うか 自分が困っていれば採用すれば良い。 全部採用しようとするとコストが掛かりすぎる 多くのCSS設計方法論 OOCSS モジュール化 BEM クラスに命名規則を設け、シンプルなセレクタで書くルールに CSSの容量増えすぎてしまう問題への解決 モジュール化 ベース + スキン (OOCSS) ブロック + モディファイア (BEM) 書き方がみんなバラバラ問題への解決 コーディングガイドライン StyleLintを使う 同じコードへの対策 mixin, extendでコードDRYに Autoprefixerを使い管理をコード外に スタイルガイドで重複したモジュールの作成を回避 それで解決しない問題
Atomic Design を実案件に導入 - UI コンポーネントの粒度を明確化した結果と副産物
ここ半年開発していた動画サービスをベータ版ながらリリースしました（正式リリースは 4 月）。そのサービスの開発において、以前投稿した Atomic Design を採用しました。本記事では Atomic Design を実案件に導入した結果と感想を書いていきます。 Atomic Design の基本的な概念に関して知りたい方は Brad Frost 氏の原文、もしくは私の以前の記事↓を参照できます。 最近よくクリエイターが移住するカナダで Atomic Design を学ぶ Atomic Design を導入して正解 結論から書くと、今回 Atomic Design を導入したことは正解でした。コンポーネントの粒度を論理的に説明できるガイドラインとして十分すぎるほどの役割を果たしてくれました。 このガイドラインがあることで、デザインに関してさほど関心がない人（たとえばデザインよりもエンジニ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
