SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
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.
What is Atomic Parts Base CSS(APB CSS)
ATOMIC PARTS BASE CSS(APB CSS)
4.
What is Atomic Parts Base CSS(APB CSS)
ATOMIC PARTS BASE CSS
Atomic Design + OOCSS + SMACSS =
Atomic Parts Base CSS(APB CSS)
5.
What is Atomic Parts Base CSS(APB CSS)
ATOMIC PARTS BASE CSS
・Simple
・Predictable
・General versatility
・Reusable
・Maintainable
・Scalable
・Interactive
6.
Atoms Style Sheet
ATOMIC PARTS BASE CSS(APB CSS)
7.
Atoms Style Sheet
ATOMIC PARTS BASE CSS
Atomic Design
http://bradfrost.com/blog/post/atomic-web-design/
8.
Atoms Style Sheet
ATOMIC PARTS BASE CSS
Atoms Button
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