Embed Size (px)
Citation preview
@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. Multi Class (object-oriented)
5. Directory structure 6. 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
h"p://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 Icon Button
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 State Number 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 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
https://github.com/webcyou https://github.com/panicdragon
@webcyou @panicdragon
ATOMIC PARTS BASE CSS
Thank You..
