Lessons: 16Length: 2.6 hours
- Overview
- Transcript
3.1 Create an "Easy Update Color Scheme"
With regular CSS, whenever you want to change a color scheme you have to find and replace every instance of the altered color codes. With Stylus, variable-based color schemes make color scheme updates almost instantaneous. In this lesson you’ll create an “easy update color scheme” and learn about Stylus variables in the process.
Related Links1.Introduction
1.1CSS Needs a Hero01:17
1.1
CSS Needs a Hero
01:17
2.Stylus Superhero Basic Training
2.1Quick and Easy Setup09:19
2.1
Quick and Easy Setup
09:19
2.2Terse or Full Syntax, Your Choice05:50
2.2
Terse or Full Syntax, Your Choice
05:50
2.3Faster Child and Pseudo Element Targeting via Nesting06:50
2.3
Faster Child and Pseudo Element Targeting via Nesting
06:50
3.A Practical Intro to Stylus Variables
3.1Create an "Easy Update Color Scheme"08:02
3.1
Create an "Easy Update Color Scheme"
08:02
3.2Create a "px to rem" Converter Variable14:35
3.2
Create a "px to rem" Converter Variable
14:35
4.Practical Intro to Mixins
4.1Create a "Zebra Stripe" Mixin12:45
4.1
Create a "Zebra Stripe" Mixin
12:45
4.2Use CSS3 Easily with Prebuilt "Nib" Mixins09:07
4.2
Use CSS3 Easily with Prebuilt "Nib" Mixins
09:07
5.Practical Intro to Logic and Functions
5.1Adjust Base Font Size, Perhaps: Using Conditionals and Operators09:38
5.1
Adjust Base Font Size, Perhaps: Using Conditionals and Operators
09:38
5.2What Functions Can Do That Mixins Can't06:16
5.2
What Functions Can Do That Mixins Can't
06:16
5.3Create a "px to rem or em" Converter Function13:55
5.3
Create a "px to rem or em" Converter Function
13:55
5.4Level Up Your Color Schemes With Stylus's Built-In Functions15:13
5.4
Level Up Your Color Schemes With Stylus's Built-In Functions
15:13
6.Stylus Superpowers
6.1Variables on the Fly: Property Lookup09:32
6.1
Variables on the Fly: Property Lookup
09:32
6.2Create a "Golden" Layout14:54
6.2
Create a "Golden" Layout
14:54
6.3Generate H-Tag Styles With a Single Line: Hashes, Iteration and Interpolation16:49
6.3
Generate H-Tag Styles With a Single Line: Hashes, Iteration and Interpolation
16:49
7.Conclusion
7.1Wrapping Up02:34
7.1
Wrapping Up
02:34
