サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
猫
makotottn.hatenablog.com
4日目はデザイントークンについて見ていく。 Design Tokens(デザイントークン)とは Design Tokens are an abstraction for everything impacting the visual design of an app/platform.— Sönke Rohde (@soenkerohde) 2016年6月24日 デザイントークンとは、プロダクトのデザインに関するすべてのエンティティのこと。 マージン、テキストカラー、フォントサイズ、フォントファミリー、アニメーションの間隔、背景色、ボーダーカラーなどのデザインの情報をもつすべてのものがデザイントークンになる。 デザインシステムにおけるデザイントークンは、同じデザインシステムの上に成り立ってるプロダクト、ウェブやiOS、Androidなどのネイティヴアプリ、Sketchなどのデザインツールに
1日目は、まずデザインシステムとは何かを整理。 デザインシステムとは何か。いくつかの資料に目を通した上で、主要要素と考えるのは以下の点。 プロダクトにおけるデザインのSingle Source of Truth 従来のスタイルガイドがプロダクトのコードベースの中でプロジェクトとして扱われていたのに対して、デザインシステムはそれ自体がプロダクト 他のプロダクトにデザインのエコシステムを提供するプロダクト この点を踏まえて詳細。 共通言語 / Single Source of Truth A DESIGN SYSTEM CONTAINS WHATEVER YOUR ORGANIZATION NEEDS TO COMMUNICATE DESIGN DECISIONS Designing a Design System // Speaker Deck “A design system is…”,
npm installやyarn installで追加したcssを@importするとき、../../node_modules/normalize.css/normalize.cssのようにnode_modulesまでのディレクトリを辿っていくのは面倒。 stackoverflow.com So using the prefix ~ at the start of the path tells the Webpack loader to resolve the import “like a module”. ~をパスの先頭につけると、node_modules配下のパスを解決してくれる。 @import "~normalize.css/normalize.css"; なので、このように~付きにすればnormalize.cssがimportできるようになる。
webpackでCSSをインラインのstyleではなく、CSSファイルとして出力する場合の設定。 extract-text-webpack-pluginを使ってCSSを別ファイルに出力する。 extract-text-webpack-plugin Extract text from a bundle, or bundles, into a separate file. バンドルからテキストを抽出して別のファイルに切り出すwebpackのプラグイン。CSSはこれで別ファイルにわける。 github.com npmインストールして、webpack.config.babel.jsでimportする。 $ yarn add --dev extract-text-webpack-plugin import ExtractTextPlugin from 'extract-text-webpack-pl
3日目はInterface Inventoryについて見ていく。 An interface inventory is a comprehensive collection of the bits and pieces that make up your interface. Interface Inventory | Brad Frost Interface Inventoryとは、プロダクトのUIを作り上げている部品の包括的な収集のこと。UIパーツをカテゴリー分類することでプロダクト全体のUIパーツを俯瞰することが目的で、これによって全体のUIパーツの中で最新のデザインが反映されてないパーツや、共通化できてないコンポーネントなどを見つけ出すきっかけにできる。 Interface Inventoryのメリット Interface Inventory | Brad Frostによると、Int
デザインシステムについて学ぶ1人advent calendarを以下の予定で進める。 日付 内容 12/01 デザインシステムとは何か 12/02 デザインシステムの構成 12/03 Interface Inventory 12/04 Design Tokens 12/05 カラーパレット 12/06 タイポグラフィ 12/07 スペース 12/08 アイコン 12/09 モーション 12/10 A11y 12/11 Voice & Tone 12/12 ドキュメント 完全に継続できてない状態で年越しちゃったので、12日で断念。 日付 内容 12/13 運用 12/14 CSS設計 12/15 lighting design system 12/16 Atlassian Design 12/17 Carbon Design System 12/18 Photon Design System
stackoverflow.com $ bundle update hoge だと依存関係を持ったgemも含めて更新する。 bundler v1.13以前だと、他のgemと依存関係があっても特定のgem以外更新したくない場合、--sourceオプションを使う。 --sourceオプション自体がそういう用途で用意されてる訳ではなさそう。 $ bundle update --source hoge bundler v.1.14以降では--conservativeオプションが用意されてる。--conservativeを使うと依存関係があるgemの更新はしないようになる。 $ bundle update --conservative hoge Bundler: bundle update
このページを最初にブックマークしてみませんか?
『makotottn.hatenablog.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く