APBCSS - Atomic Parts Base CSS -

@Daisuke Takayama

Agenda

ATOMIC PARTS BASE CSS

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

2. Atoms Style Sheet3. Molecules Style Sheet4. Multi Class (object-oriented)

5. Directory structure6. 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

http://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 IconButton

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 StateNumber 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 pagehttp://apbcss.com

https://github.com/webcyou/apbcss

Other

ATOMIC PARTS BASE CSS(APB CSS)

Other

ATOMIC PARTS BASE CSS

AuthorDaisuke Takayama

Japan

Name

Country

Job

FrontEnd Engineer Bloghttp://www.webcyou.com

https://github.com/webcyouhttps://github.com/panicdragon

@webcyou@panicdragon

ATOMIC PARTS BASE CSS

Thank You..