In case you're unaware, CSS by itself is not very dynamic. There's no support for variables and functions, and dealing with vendor prefixes can be a nightmare! In this course, Improving CSS with Stylus, you'll learn how Stylus solves all of this and more. You can declare variables, functions, mixins, and even improve the visibility of your CSS without having to include colons, semi-colons, and braces. First, you're going to learn how to integrate Stylus within your development environment. Then, you will take a close look at Stylus from a beginner's level all the way up to an advanced level. Finally, you will create your very own project so that you can gain meaningful experience by using Stylus. After watching this course, you'll be ready to starting using Stylus to improve your workflow.
Course Overview Hi everyone. My name is Gary Simon. Welcome to my course, Improving CSS with Stylus. I've been a freelance designer for the last 15 years, and I have worked with countless clients on a wide variety of projects. What if I told you that you could speed up your workflow considerably just by changing the way you write your CSS. With Stylus, you could do exactly that. Stylus is a CSS preprocessor that offers a number of time-saving features and functionality when writing CSS. Some of the major topics that we will cover include integrating Stylus in your workflow, understanding Stylus basics, variables and mixins, functions and conditionals, and much more. By the end of the course, you will have a solid understanding of how to utilize this great CSS preprocessor. I hope you'll join me on this journey to improving CSS with Stylus, at Pluralsight.
Understanding Stylus Basics Welcome to this course on Improving CSS with Stylus. Let's start off by answering some questions you may have such as, what is Stylus? Technically, it's a dynamic stylesheet language which is compiled into Cascading Style Sheets, or CSS. In simpler terms, it provides you with another way to write CSS, and then Stylus takes the code that you write and complies it into regular CSS that you're already familiar with. So why would you even bother with learning a new language when you're already familiar with writing regular CSS? Well, Stylus offers many advantages that you can't achieve when writing CSS. First, in Stylus, braces, colons, and semicolons are entirely optional. This makes for cleaner code that's also easier to type. You can nest your role sets based on indentation, you can declare variables, making your CSS dynamic. You can also create mixins and functions, which makes things like dealing with vendor prefixes a breeze. And all of these features and more will make your life much easier as a developer. In the first two modules of this course, we're going to take a look at Stylus from beginner to advanced topics. Then in modules 3 and 4, we're going to take much of what we learned about Stylus and apply it to our own project, which consists of a well-designed layout that will give us plenty of opportunities to experience the power of Stylus. So let's get started in the next clip by setting up our development environment.
Starting Your Own Project Welcome to this module where we're going to begin a new project, in order to gain some experience with writing stylus for an actual layout. So we're going to do a quick project preview, start a new project, integrate stylus within Gulp and write the necessary HTML in this module. Now with that said, let's take a quick look at the project we're going to be completing. This is for a fictional DVD search app, and I've designed it in such a way that should give us enough diversity while writing the HTML and stylus. I've worked in some hover animation, and we have a consistent color theme from which we can utilize variables. And some of our elements such as the thumbnails and thumbnail container require vendor-specific prefixes as it's based on CSS Flexbox. Now this chart down here is mainly just for aesthetics and it's created with "chart. js", which we'll install via NPM and I'll show you how to get up and running with it just as a quick bonus. Now this layout is also structured with the Foundation 6 Flex Grid, and we will be installing that as well via NPM. All right, so if you're ready to get started, let's proceed to the next clip where we're going to get our project up and running. I'll see you then.