APBCSS - Atomic Parts Base CSS -

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

APBCSS - Atomic Parts Base CSS -

You are reading a preview.

Check these out next

APBCSS - Atomic Parts Base CSS -

More Related Content

Recently uploaded (20)

Featured (20)