Download as PDF, PPTX
Uploaded byJyaasa Technologies
Scalable and Modular Architecture for CSS
SMACSS is a framework for organizing CSS code into categories including Base, Layout, Module, State, and Theme. The Base category contains CSS resets and default styles. Layout contains reusable parts of the design like headers and footers. Module contains reusable parts like boxes. State describes how modules or layouts look in different states like active or hidden. Theme describes how modules may look differently. The framework aims to make CSS scalable and modular.
Scalable and Modular Architecture for CSS
- 1. SMACSS http://jyaasa.comCopyright 2015. JyaasaTechnologies.
- 2. Hello ! I amNikesh Suwal Front End Developer Jyaasa Technologies http://jyaasa.comCopyright 2015. Jyaasa Technologies.
- 3.
- 4.
- 5. SMACSS is categorization ● Base ●Layout ● Module ● State ● Theme
- 6. Base CSS reset, defaultStyles Ex: h1, h2, h3, p, a, etc...
- 7. Layout reusable, modular partsof our design layou-*, l-* .l-header, .l-footer, .l-article
- 8. Modular the reusable, modularparts of our design .box .box-image Image… .box-title Title.... .box-description Description
- 9. State ways to describehow our modules or layouts will look when in a particular state .is-* is-hidden, is-active, is-show
- 10. Theme similar to staterules in that they describe how modules or layouts might look.
- 11. Thank you! Any Queries? facebook.com/nikesh.suwal github.com/nikeshsuwal http://jyaasa.comCopyright2015. Jyaasa Technologies.