@Daisuke Takayama - APB CSSapbcss.com/file/apb_css.pdf · Agenda ATOMIC PARTS BASE CSS 1. What is...

@Daisuke Takayama

Agenda

ATOMIC PARTS BASE CSS

1. What is Atomic Parts Base CSS(APB CSS)

2. Atoms Style Sheet 3. Molecules Style Sheet 4. Multi Class (object-oriented)

5. Directory structure 6. sample

What is Atomic Parts Base CSS(APB CSS)

ATOMIC PARTS BASE CSS(APB CSS)

What is Atomic Parts Base CSS(APB CSS)

ATOMIC PARTS BASE CSS

Atomic Design + OOCSS + SMACSS = Atomic Parts Base CSS(APB CSS)

What is Atomic Parts Base CSS(APB CSS)

ATOMIC PARTS BASE CSS

・Simple ・Predictable ・General versatility ・Reusable ・Maintainable ・Scalable ・Interactive

Atoms Style Sheet

ATOMIC PARTS BASE CSS(APB CSS)

Atoms Style Sheet

ATOMIC PARTS BASE CSS

Atomic Design

h"p://bradfrost.com/blog/post/atomic-­‐web-­‐design/

Atoms Style Sheet

ATOMIC PARTS BASE CSS

Atoms Button

Atoms Style Sheet

ATOMIC PARTS BASE CSS

Atoms

Atoms Style Sheet

ATOMIC PARTS BASE CSS

Atoms Icon

Atoms Style Sheet

ATOMIC PARTS BASE CSS

Atoms

Atoms Style Sheet

ATOMIC PARTS BASE CSS

Atoms Icon Button

Molecules Style Sheet

ATOMIC PARTS BASE CSS(APB CSS)

Molecules Style Sheet

ATOMIC PARTS BASE CSS

Molecules Button + Icon

Molecules Style Sheet

ATOMIC PARTS BASE CSS

Molecules

Molecules Style Sheet

ATOMIC PARTS BASE CSS

Molecules Text + Icon

Molecules Style Sheet

ATOMIC PARTS BASE CSS

Molecules

Molecules Style Sheet

ATOMIC PARTS BASE CSS

Molecules Button + Icon Text + Icon

Multi Class (object-oriented)

ATOMIC PARTS BASE CSS(APB CSS)

Multi Class (object-oriented)

ATOMIC PARTS BASE CSS

OOCSS + SMACSS

Excerpts from the 「OOCSS」,「SMACSS 」

Multi Class (object-oriented)

ATOMIC PARTS BASE CSS

CSS Class Type

Atomic Module Skin State Number Other

Multi Class (object-oriented)

ATOMIC PARTS BASE CSS

CSS Class Type

Based on the atom name or module name, and grant the six types of class name.

Multi Class (object-oriented)

ATOMIC PARTS BASE CSS

CSS Class Type

Atomic

Multi Class (object-oriented)

ATOMIC PARTS BASE CSS

CSS Class Type

Module

Multi Class (object-oriented)

ATOMIC PARTS BASE CSS

CSS Class Type

Skin

Multi Class (object-oriented)

ATOMIC PARTS BASE CSS

CSS Class Type

Number

Multi Class (object-oriented)

ATOMIC PARTS BASE CSS

CSS Class Type

State

Multi Class (object-oriented)

ATOMIC PARTS BASE CSS

CSS Class Type

Other

Directory structure

ATOMIC PARTS BASE CSS(APB CSS)

Directory structure

ATOMIC PARTS BASE CSS

SCSS Directory

Directory structure

ATOMIC PARTS BASE CSS

Base Directory

Directory structure

ATOMIC PARTS BASE CSS

Parts Directory

Directory structure

ATOMIC PARTS BASE CSS

Pages Directory

Directory structure

ATOMIC PARTS BASE CSS

Name Space

Sample

ATOMIC PARTS BASE CSS(APB CSS)

Sample

ATOMIC PARTS BASE CSS

Github

Official page http://apbcss.com

https://github.com/webcyou/apbcss

Other

ATOMIC PARTS BASE CSS(APB CSS)

Other

ATOMIC PARTS BASE CSS

Author Daisuke Takayama

Japan

Name

Country

Job

FrontEnd Engineer Blog http://www.webcyou.com

https://github.com/webcyou https://github.com/panicdragon

@webcyou @panicdragon

ATOMIC PARTS BASE CSS

Thank You..