Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:16Length:2.6 hours

Next lesson playing in 5 seconds

Cancel

Free Preview: Become a CSS Superhero With Stylus

CSS Needs a Hero

01:17
  • Overview
  • Transcript

Stylus is one of the three leading CSS preprocessors that make CSS easier and more powerful than ever before, sharing the league with Sass and LESS. In Become a Stylus CSS Superhero you’ll learn to write code faster than a speeding bullet, create layout functionality more powerful than a locomotive, and update whole color schemes in a single bound. Let’s start your training!

Learn CSS: The Complete Guide

We've built a complete guide to help you learn CSS, whether you're just getting started with the basics or you want to explore more advanced CSS.

1. Introduction

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.

2. Stylus Superhero Basic Training

2.1 Quick and Easy Setup

Hey, welcome to the first lesson in Become a CSS Superhero with Stylus. You're about to learn how to get yourself set up to work with Stylus in the quickest and easiest way possible. We are gonna start with getting Sublime Text 3 set up as your Stylus code editor. And we're then going to show you how to work with a free application called Prepros. And Prepros will automatically compile your Stylus code, so that means you're not gonna have to worry about command line or any JavaScript task runners. Okay, so first up, Sublime Text 3. If you don't already have Sublime Text 3 installed, you can grab it from sublimetext.com. And it looks like this. And there are two versions. There is Sublime Text 2 or there's Sublime Text 3. So for this course, we'll be working with Sublime Text 3, which you can get from sublimetext.com/3. So if you haven't already got Sublime Text on your system, pause this video now and go ahead and follow the instructions to install Sublime Text 3. I'll include a link for where you can get it right below the video. [BLANK_AUDIO] The next step is to install something called Sublime Text Package Control. So, Sublime Text allows you to install these things called packages, which work a lot like extensions or plugins. They let you add extra functionality to your code editor. So if you don't already have Sublime Text Package Control, you'll need to go ahead and install that now. Again, I'll include a link below this video where you can, you can come along to this page that you see on your screen here and follow the instructions. So, I can't go through exactly how this works in this video because it changes over time with Sublime text updates. So, just head to this link. Follow the instructions. And you'll be all set with Package Control installed. And then once you've done that, come back to this video. [BLANK_AUDIO] All right, the next thing we're gonna do is just set up a really basic Stylus project. The first step to do that is create a new folder, and we'll just call it Example Project. [BLANK_AUDIO] And inside that folder, you're gonna create another folder, name it Stylus, and this is where you're gonna put all of your Stylus files. Okay, so inside that folder, let's just create a single Stylus file. We'll call it example.styl. .styl is the Stylus file extension, so you're gonna wanna make sure all of your Stylus files are ended with .styl. [BLANK_AUDIO] Now, we already have Sublime Text 3 installed, so we'll open this file up in Sublime Text. All right. So here is our empty example.styl, and I'm just going to copy and paste in a little bit of basic Stylus code that I prepared earlier. [BLANK_AUDIO] Okay, so this is some basic Stylus code, but as you can see, everything is just all in a plain white color, which makes it pretty hard to read. And this is why we installed Package Control. We're going to install a package called Stylus that will give all this proper coloring and formatting that will make it very easy to read. To do that, head up to the Sublime Text menu. Go to Preferences and Package Control. That's how you do it on Mac. Windows and Linux might be a little bit different, but it'll be roughly the same process. So we'll bring up Package Control. We choose Install Package. And you can see down here, it's loading, so just give that a second. Now we just run a search for Stylus, and you'll see this first package that comes up here is the one that you want, Stylus package for Sublime Text 2 and 3. Click that and that will initiate the install. And again, if you look down here, you'll see the progress. So now we have Stylus for Sublime Text installed. Now this still looks a little bit funny, so we'll save, and then we will just quit Sublime Text and open it up again. [BLANK_AUDIO] So now that's reloaded, and you can see that we've got all of this really nice coloring and formatting in place. And that's gonna really, really help with all of your Stylus coding. There's one more package that we wanna install, and it is called Color Picker. So again, go to Sublime Text > Preferences > Package Control > Install Package. Just wait a second, and search for colorpicker. [BLANK_AUDIO] Give it a moment to install. [BLANK_AUDIO] And what we can do now is highlight any color, open the Color Picker, and from here you can make adjustments to your color. [BLANK_AUDIO] Click Add, or sorry, Pick rather, and it'll insert the hex code for you. Now, that's not an essential step to working with Stylus, but it is really helpful, and you'll see why in one of the videos that we'll be going through a little bit later. And that's everything you have to do to get Sublime Text 3 set up to work with Stylus, too easy. Next, you are going to get yourself set up with automatic compiling. There are a couple of different ways that you can do this, some are easy, some are a little bit more complicated. Each have their pros and cons, but for the purposes of this course, we're gonna go with the quick and easy way. I want you to head over to alphapixels.com/prepros and just download the free version of this app. I have the paid version and it's really good too. But for compiling your code, you don't need it. The free version will do everything that you need, and it will take you all the way through this course. So, grab yourself a download and install the application. Start that up and when you're done, come back to this video. [BLANK_AUDIO] All right. You should now have Prepros installed and running. When you have run it for the first time, this is what you should see, just this blank area that says, Please drag and drop a folder to start a new project. And that's all it takes to add a project into this, into this application. Over here is the little example project that we already created. All you have to do literally is just grab it, drag it, and drop it. And you can see that it has automatically picked up the example.styl file that we just created. And if you have a look here, you've got this little arrow pointing across, this tells you where it's going to write your compiled CSS. Even though you haven't set up a CSS folder, it's just gonna take care of all, of all of that stuff for you. And if I click on the file entry, you can see a bunch of different options that you've also got here. Now, Auto Compile is pre-checked. That means that any time there are any changes to this file, it's just gonna automatically be compiled for you. Let's have a look at how that works in action. [BLANK_AUDIO] This is the Stylus file that we created earlier in our example project. Now all I have to do is save this file and that will automatically trigger Prepros to compile it for me. So save. And then you can see, right up here, compilation has been successful. So if we head back over to our project folder, you can see it has automatically created a css folder for us. And inside there, we see our newly generated CSS file. [BLANK_AUDIO] And here is our fully formatted, beautiful and lovely CSS. And that's it. You're all ready to go. That's about eight and a half minutes. And your coding environment is set up, your compilation is set up, everything's running automatically. Beautiful. All right, in the next lesson, we're gonna start learning how to work with Stylus syntax. And one of the coolest things about Stylus, something that I really love, is it's really flexible in what kind of syntax you choose to use. So you can wri, write in something called terse syntax, which is a really abbreviated form of writing code that is very efficient. Or if you're more comfortable using a type of formatting that you're comfortable with, you could write in fully formed CSS, or you can go anywhere in between. The choice is totally up to you. So we'll see you in the next lesson. Terse or full syntax, your choice.