- Overview
- Transcript
1.1 Introduction to SMACSS
Hey guys, I’m Adi Purdila. Welcome to Introduction to SMACSS.
Now, SMACSS is not a framework. It’s more of a guide that will help you rethink the way you write CSS. I t will teach you to structure your CSS in a scalable, modular way. That means you can build small or large websites that are easily maintained and updated at any given time.
In this course, I'll introduce you to all that SMACSS has to offer. We'll start with a bit of a theory, walking you through the basics, and then we'll get hands-on with an exercise in writing CSS according to the SMACSS guidelines.
Further Reading- The SMACSS website
- Scalable and Modular Architecture for CSS eBook (free for Tuts+ subscribers)
1.Introduction
1.1Introduction to SMACSS01:45
1.1
Introduction to SMACSS
01:45
2.The Basics
2.1Categorising CSS Rules04:26
2.1
Categorising CSS Rules
04:26
2.2Base Rules02:04
2.2
Base Rules
02:04
2.3Layout Rules04:46
2.3
Layout Rules
04:46
2.4Module Rules07:21
2.4
Module Rules
07:21
2.5State Rules03:04
2.5
State Rules
03:04
2.6Theme Rules03:56
2.6
Theme Rules
03:56
2.7Depth of Applicability03:29
2.7
Depth of Applicability
03:29
3.Practical Exercise
3.1The Initial State02:26
3.1
The Initial State
02:26
3.2A Bit of Clean-Up04:03
3.2
A Bit of Clean-Up
04:03
3.3Rewriting the HTML (Part 1)11:04
3.3
Rewriting the HTML (Part 1)
11:04
3.4Rewriting the HTML (Part 2)05:32
3.4
Rewriting the HTML (Part 2)
05:32
3.5Rewriting the HTML (Part 3)06:15
3.5
Rewriting the HTML (Part 3)
06:15
3.6Base Styles08:32
3.6
Base Styles
08:32
3.7Layout Styles (Part 1)07:47
3.7
Layout Styles (Part 1)
07:47
3.8Layout Styles (Part 2)08:14
3.8
Layout Styles (Part 2)
08:14
3.9Modules Styles (Part 1)07:47
3.9
Modules Styles (Part 1)
07:47
3.10Modules Styles (Part 2)06:22
3.10
Modules Styles (Part 2)
06:22
3.11Theme Styles10:25
3.11
Theme Styles
10:25
4.Conclusion
4.1What We’ve Learned01:55
4.1
What We’ve Learned
01:55
