Embed Size (px)
Citation preview
@Daisuke Takayama
Agenda
ATOMIC PARTS BASE CSS
1. What is Atomic Parts Base CSS(APB CSS)
2. Atoms Style Sheet3. Molecules Style Sheet4. Multi Class (object-oriented)
5. Directory structure6. sample
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 CSS)
What is Atomic Parts Base CSS(APB CSS)
ATOMIC PARTS BASE CSS
・ Simple・ Predictable・ General versatility・ Reusable・Maintainable・ Scalable・ Interactive
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 six types of class name.
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 pagehttp://apbcss.com
https://github.com/webcyou/apbcss
Other
ATOMIC PARTS BASE CSS(APB CSS)
Other
ATOMIC PARTS BASE CSS
AuthorDaisuke Takayama
Japan
Name
Country
Job
FrontEnd Engineer Bloghttp://www.webcyou.com
https://github.com/webcyouhttps://github.com/panicdragon
@webcyou@panicdragon
ATOMIC PARTS BASE CSS
Thank You..
