Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
@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. Mu...
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 CS...
What is Atomic Parts Base CSS(APB CSS) ATOMIC PARTS BASE CSS ・Simple ・Predictable ・General versatility ・Reusable ・Maintain...
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 si...
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 h...
ATOMIC PARTS BASE CSS Thank You..
Upcoming SlideShare
Loading in …5
×

APBCSS - Atomic Parts Base CSS -

5,411 views

Published on

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/

Published in: Engineering
no profile picture user

  • Be the first to comment

Show More

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

×