Improving CSS with Stylus

Stylus offers a number of advantages over writing traditional CSS. In this course, you will learn how to harness the power of Stylus and speed up your workflow.
Course info
Rating
(12)
Level
Intermediate
Updated
Feb 7, 2017
Duration
1h 20m
Table of contents
Description
Course info
Rating
(12)
Level
Intermediate
Updated
Feb 7, 2017
Duration
1h 20m
Description

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.

About the author
About the author

Gary Simon has worked exclusively as a freelance designer and design instructor for over 15 years.

More from the author
Building Layouts with the CSS Grid
Beginner
1h 16m
Mar 2, 2018
Building Websites with Bulma
Intermediate
1h 42m
Oct 27, 2017
Building Websites with Skeleton CSS
Intermediate
1h 16m
Aug 9, 2017
More courses by Gary Simon
Section Introduction Transcripts
Section Introduction Transcripts

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.