Successfully reported this slideshow.

APBCSS - Atomic Parts Base CSS -

12

Share

Upcoming SlideShare
Atomic design
Atomic design
Loading in …3
×
1 of 39
1 of 39

APBCSS - Atomic Parts Base CSS -

12

Share

Download to read offline

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

・Atomic Design Base
・new CSS Architecture

【github】
https://github.com/webcyou/apbcss

【Official Page】
http://apbcss.com/

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

・Atomic Design Base
・new CSS Architecture

【github】
https://github.com/webcyou/apbcss

【Official Page】
http://apbcss.com/

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

APBCSS - Atomic Parts Base CSS -

  1. 1. @Daisuke Takayama
  2. 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. 3. What is Atomic Parts Base CSS(APB CSS) ATOMIC PARTS BASE CSS(APB CSS)
  4. 4. What is Atomic Parts Base CSS(APB CSS) ATOMIC PARTS BASE CSS Atomic Design + OOCSS + SMACSS = Atomic Parts Base CSS(APB CSS)
  5. 5. What is Atomic Parts Base CSS(APB CSS) ATOMIC PARTS BASE CSS ・Simple ・Predictable ・General versatility ・Reusable ・Maintainable ・Scalable ・Interactive
  6. 6. Atoms Style Sheet ATOMIC PARTS BASE CSS(APB CSS)
  7. 7. Atoms Style Sheet ATOMIC PARTS BASE CSS Atomic Design http://bradfrost.com/blog/post/atomic-web-design/
  8. 8. Atoms Style Sheet ATOMIC PARTS BASE CSS Atoms Button
  9. 9. Atoms Style Sheet ATOMIC PARTS BASE CSS Atoms
  10. 10. Atoms Style Sheet ATOMIC PARTS BASE CSS Atoms Icon
  11. 11. Atoms Style Sheet ATOMIC PARTS BASE CSS Atoms
  12. 12. Atoms Style Sheet ATOMIC PARTS BASE CSS Atoms IconButton
  13. 13. Molecules Style Sheet ATOMIC PARTS BASE CSS(APB CSS)
  14. 14. Molecules Style Sheet ATOMIC PARTS BASE CSS Molecules Button + Icon
  15. 15. Molecules Style Sheet ATOMIC PARTS BASE CSS Molecules
  16. 16. Molecules Style Sheet ATOMIC PARTS BASE CSS Molecules Text + Icon
  17. 17. Molecules Style Sheet ATOMIC PARTS BASE CSS Molecules
  18. 18. Molecules Style Sheet ATOMIC PARTS BASE CSS Molecules Button + Icon Text + Icon
  19. 19. Multi Class (object-oriented) ATOMIC PARTS BASE CSS(APB CSS)
  20. 20. Multi Class (object-oriented) ATOMIC PARTS BASE CSS OOCSS + SMACSS Excerpts from the 「OOCSS」,「SMACSS 」
  21. 21. Multi Class (object-oriented) ATOMIC PARTS BASE CSS CSS Class Type Atomic Module Skin StateNumber Other
  22. 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. 23. Multi Class (object-oriented) ATOMIC PARTS BASE CSS CSS Class Type Atomic
  24. 24. Multi Class (object-oriented) ATOMIC PARTS BASE CSS CSS Class Type Module
  25. 25. Multi Class (object-oriented) ATOMIC PARTS BASE CSS CSS Class Type Skin
  26. 26. Multi Class (object-oriented) ATOMIC PARTS BASE CSS CSS Class Type Number
  27. 27. Multi Class (object-oriented) ATOMIC PARTS BASE CSS CSS Class Type State
  28. 28. Multi Class (object-oriented) ATOMIC PARTS BASE CSS CSS Class Type Other
  29. 29. Directory structure ATOMIC PARTS BASE CSS(APB CSS)
  30. 30. Directory structure ATOMIC PARTS BASE CSS SCSS Directory
  31. 31. Directory structure ATOMIC PARTS BASE CSS Base Directory
  32. 32. Directory structure ATOMIC PARTS BASE CSS Parts Directory
  33. 33. Directory structure ATOMIC PARTS BASE CSS Pages Directory
  34. 34. Directory structure ATOMIC PARTS BASE CSS Name Space
  35. 35. Sample ATOMIC PARTS BASE CSS(APB CSS)
  36. 36. Sample ATOMIC PARTS BASE CSS Github Official page http://apbcss.com https://github.com/webcyou/apbcss
  37. 37. Other ATOMIC PARTS BASE CSS(APB CSS)
  38. 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. 39. ATOMIC PARTS BASE CSS Thank You..

×