css-workflow.md

CSS Workflow (WIP)

Steps

• Define Color Palette
• Reset Browser Default Styles
• Define Scaffold Styles
• Define Components by Atomic Design Methodology
  • Define Atoms
  • Define Molecules
  • Define Organisms
  • Define Templates
  • Define Pages

Define Color Palette

Information

• It’s Only Color
  • 決める色は基本となる3色
• Naming Colors
  • 色には名前を付ける (KromaticやSipを使う)
  • 色をあらわす変数名でローカルな変数を定義する
    • $tundora-color: #594u4u
  • 抽象的な変数名でグローバルな変数を定義する
    • $primary-color: $tundora-color
  • セマンティックな変数名でグローバルな変数を定義する
    • $link-color: saturate($primary-color, 10%)

Tools

• Kromatic
• The olá Brothers - Sip
• Color schemes - Adobe Color CC
• Color Trends + Palettes :: COLOURlovers

Reset Browser Default Styles

Normalize.cssをベースに、Bootstrap v4のRebootが採用しているルールを導入する。

• Normalize.css: Make browsers render all elements more consistently.
• Reboot · Bootstrap

Define Scaffold Styles

基本となるスタイルを定義する。

Tools

• Bitters - Predefined Styles for Bourbon

Define Atoms

基本コンポーネントとなるAtomを定義する。

Define Molecules

Atomの組み合わせで定義できるMoleculeコンポーネントを定義する。

Define Organisms

AtomおよびMoleculeの組み合わせで定義できるOrganismを定義する。

Define Templates

Bourbon Neatを利用して、ページの種別ごとのレイアウトをTemplateとして定義する。

Define Pages

Templateの具象としてPageを定義する。