Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
@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..
Prochain SlideShare
Chargement dans…5
×

APBCSS - Atomic Parts Base CSS -

5 646 vues

Publié le

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/

Publié dans : Ingénierie

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

×