Lessons: 16Length: 2.6 hours
- Overview
- Transcript
1.1 CSS Needs a Hero
Stylus is to regular CSS what Superman is to Clark Kent. You’re about to learn how to break out your CSS superpowers and start building websites using faster and more powerful methods than ever before. Get a sneak peak at what you’ll learn in your Stylus CSS Superhero training.
1.Introduction
1.1CSS Needs a Hero01:17
2.Stylus Superhero Basic Training
2.1Quick and Easy Setup09:19
2.2Terse or Full Syntax, Your Choice05:50
2.3Faster Child and Pseudo Element Targeting via Nesting06:50
3.A Practical Intro to Stylus Variables
3.1Create an "Easy Update Color Scheme"08:02
3.2Create a "px to rem" Converter Variable14:35
4.Practical Intro to Mixins
4.1Create a "Zebra Stripe" Mixin12:45
4.2Use CSS3 Easily with Prebuilt "Nib" Mixins09:07
5.Practical Intro to Logic and Functions
5.1Adjust Base Font Size, Perhaps: Using Conditionals and Operators09:38
5.2What Functions Can Do That Mixins Can't06:16
5.3Create a "px to rem or em" Converter Function13:55
5.4Level Up Your Color Schemes With Stylus's Built-In Functions15:13
6.Stylus Superpowers
6.1Variables on the Fly: Property Lookup09:32
6.2Create a "Golden" Layout14:54
6.3Generate H-Tag Styles With a Single Line: Hashes, Iteration and Interpolation16:49
7.Conclusion
7.1Wrapping Up02:34
1.1 CSS Needs a Hero
Stylus is to regular CSS what Superman is to Clark Kent. In Become a CSS Superhero with Stylus, you're about to learn how to break out your CSS superpowers to make your development faster, smarter, and more powerful than ever before. By the end of this course, you'll be able to generate all the CSS your projects need, but with only half the typing and half the time it used to take you. You'll be able to update entire color schemes just by changing one color code. You'll be able to think about your designs and write them up in pixel values, but output perfect em and rem-based flexible layouts. You'll have the amazing power of never again having to write out the same code repeatedly. You'll have the ability to instantly style elements with things like zebra striping just by pasting in a single line of code. You'll learn how to create layouts that just look right without you barely having to spare a thought. And you'll have a full understanding of how to use Stylus' awesome feature set, meaning that you'll be equipped to work with it however you want in all your future projects. All right, let's get this ball rolling. I'll see you in Stylus Superhero Basic Training.
