1.
@Daisuke Takayama

2.
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

3.
What is Atomic Parts Base CSS(APB CSS)
ATOMIC PARTS BASE CSS(APB CSS)

4.
What is Atomic Parts Base CSS(APB CSS)
ATOMIC PARTS BASE CSS
Atomic Design + OOCSS + SMACSS =
Atomic Parts Base CSS(APB CSS)

5.
What is Atomic Parts Base CSS(APB CSS)
ATOMIC PARTS BASE CSS
・Simple
・Predictable
・General versatility
・Reusable
・Maintainable
・Scalable
・Interactive

6.
Atoms Style Sheet
ATOMIC PARTS BASE CSS(APB CSS)

7.
Atoms Style Sheet
ATOMIC PARTS BASE CSS
Atomic Design
http://bradfrost.com/blog/post/atomic-web-design/

8.
Atoms Style Sheet
ATOMIC PARTS BASE CSS
Atoms Button

9.
Atoms Style Sheet
ATOMIC PARTS BASE CSS
Atoms

10.
Atoms Style Sheet
ATOMIC PARTS BASE CSS
Atoms Icon

11.
Atoms Style Sheet
ATOMIC PARTS BASE CSS
Atoms

12.
Atoms Style Sheet
ATOMIC PARTS BASE CSS
Atoms IconButton

13.
Molecules Style Sheet
ATOMIC PARTS BASE CSS(APB CSS)

14.
Molecules Style Sheet
ATOMIC PARTS BASE CSS
Molecules Button + Icon

15.
Molecules Style Sheet
ATOMIC PARTS BASE CSS
Molecules

16.
Molecules Style Sheet
ATOMIC PARTS BASE CSS
Molecules Text + Icon

17.
Molecules Style Sheet
ATOMIC PARTS BASE CSS
Molecules

18.
Molecules Style Sheet
ATOMIC PARTS BASE CSS
Molecules Button + Icon Text + Icon

19.
Multi Class (object-oriented)
ATOMIC PARTS BASE CSS(APB CSS)

20.
Multi Class (object-oriented)
ATOMIC PARTS BASE CSS
OOCSS + SMACSS
Excerpts from the 「OOCSS」,「SMACSS 」

21.
Multi Class (object-oriented)
ATOMIC PARTS BASE CSS
CSS Class Type
Atomic Module Skin StateNumber Other

22.
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.

23.
Multi Class (object-oriented)
ATOMIC PARTS BASE CSS
CSS Class Type
Atomic

24.
Multi Class (object-oriented)
ATOMIC PARTS BASE CSS
CSS Class Type
Module

25.
Multi Class (object-oriented)
ATOMIC PARTS BASE CSS
CSS Class Type
Skin

26.
Multi Class (object-oriented)
ATOMIC PARTS BASE CSS
CSS Class Type
Number

27.
Multi Class (object-oriented)
ATOMIC PARTS BASE CSS
CSS Class Type
State

28.
Multi Class (object-oriented)
ATOMIC PARTS BASE CSS
CSS Class Type
Other

29.
Directory structure
ATOMIC PARTS BASE CSS(APB CSS)

30.
Directory structure
ATOMIC PARTS BASE CSS
SCSS Directory

31.
Directory structure
ATOMIC PARTS BASE CSS
Base Directory

32.
Directory structure
ATOMIC PARTS BASE CSS
Parts Directory

33.
Directory structure
ATOMIC PARTS BASE CSS
Pages Directory

34.
Directory structure
ATOMIC PARTS BASE CSS
Name Space

35.
Sample
ATOMIC PARTS BASE CSS(APB CSS)

36.
Sample
ATOMIC PARTS BASE CSS
Github
Official page
http://apbcss.com
https://github.com/webcyou/apbcss

37.
Other
ATOMIC PARTS BASE CSS(APB CSS)

38.
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

39.
ATOMIC PARTS BASE CSS
Thank You..