Hands on Responsive Design Using a CSS Preprocessor

Course Overview
Hello. My name is Paul Cheney, and welcome to my course on Hands-on Response and Design Using a CSS Preprocessor. I teach digital media at UVU, and in my spare time I build courses for Pluralsight. A CSS preprocessor allows you to use many programming functions to build your CSS that you may never have thought possible. In this course, we will show you how you create many separate files for your CSS, and then automatically combine and minify them for delivery to the web. We will also show you the power of using variables, nesting your CSS, and how to use mix ins to automate code creation. We will also leverage the power of inheritance to create dry code, as well as explore math functions, and control directives. This is hands-on course, so you'll be working right alongside me to build a responsive, mobile-first website for Aspen Dental. Even if you don't like the dentist, you're going to love the final product. Before beginning the course you should be familiar with HTML5, CSS3, and media queries. I hope you'll join me, and give me a chance to convince you that using a CSS preprocessor is the way to go.

Setting up a New SASS Project
Now we're ready to build a website using the power of a CSS preprocessor. The SASS features we will explore in this unit are partials and imports. Partials allow us to break up our CSS into multiple files for organization and sanity purposes. Imports allows us to combine our separated files together for delivery to the client. Make sure you have an HTML editor, and FTP program, and the Koala. app available and ready to go. I will be using Adobe Dreamweaver for coding and for file transfer.

Building the Site Header
Now we're ready to build a website using the power of a CSS preprocessor. The SASS features we'll explore in this unit are variables and nesting. A good web designer needs many skills besides coding, so before we get started on coding the header, let's take a look at Adobe Photoshop's generate assets feature. I've included the PSD in the demos file in case you want to see this feature in action. Remember, in the SCSS version of the SASS language, variables begin with a dollar sign. In this unit we will also be assigning variables to other variables. We will also be using nesting when we build our navigation for the desktop. Remember that nesting in the SCSS results in the expanded code you see on the right, where each nested item is prefaced with the parent. In this case it's nav. We'll be using navigation for the phone and tablet built by Matt Everson. We will then design our own Suckerfish navigation for the desktop using SCSS. You can download this navigation for your next project from his website. Actually, Matt would really appreciate if you donated four bucks so he could buy a beer now and again. We have already selected and loaded the font family Quicksand for this project, so let's get started.

Building the Main Rows and Columns
In the last unit we got a good start on our site by building the header and the footer. In this unit we are going to create content for the repair page. Let's take a look at operators, and review nesting and variables. In order to continue with the natural progression of learning SASS, we are going to rename the index page to repair. html, and work on that page for the next few lessons. Later we will come back and build a new index page. You'll notice this change when you download the demos for this unit. We will use an HTML structure for page layout that is used in may CSS frameworks and content management systems. First we create a row, which is designed to fill the screen from left to right and float below any previous content. Within that row, we will create as many columns as our design calls for. The columns are typically stacked on smaller screens and then displayed next to each other on larger screens. We frequently talk about mobile first design, meaning that we build the CSS for small screens first, and then enhance for larger screens. While this is true for CSS, the opposite is true for HTML, we design the HTML for the largest screen first. In the example we are about to build, the largest screen will display a full-width page name, which lives in a row and a column set to full width. Next we have a full paragraph, which is also in a row and a column set to full width. Finally, we have two side-by-side columns, which fit in one row and two columns. Well that's enough theory, let's get to work.

Style Lists with Custom Bullets
In the last unit we created tabbed navigation using extend and variables. Since I'm still committed to getting you to use a CSS preprocessor, let's take a look at mixins. As we look at the agenda for this unit, take a look at everything you've learned so far. In this unit we will focus on mixins. Our mixin is going to allow us to style these two lists, which share CSS declarations. The only real difference is the graphic used for the bullet. As we move through this unit, you may ask yourself if we could've done this with inheritance or extend, and the answer is yes, but I want to show you mixins because they do things different, and then you can decide which one works best for you. A mixin lets you create groups of CSS declarations that belong together. A mixin is designed to be reused over and over. Here is an example of reusable code for rounding the corners. Notice that I have included all the vendor prefixes to make sure it works on as many browsers as possible. Here's the code for a blue next button, and here's the code for a green previous button. Here's the final output in our CSS. Let's try a mixin on our dental website to style a list item. Remember in unit one we exported the graphics for these lists using Photoshop to generate assets.

Build Newspaper Style Columns
Hello, and welcome back. In this unit we are going to use what we already know to build a new page at our dental website. In the last unit, we built a basic mixin that allowed us to reuse several declarations. In this unit we are going to build a mixin that accepts incoming values. Remember this mixin that allowed us to round corners? Well we're going to modify it a little bit. Let's add a variable to the mixin name, and use that variable in place of each declaration property. Now when we include the mixin, we can send the value. In this case, we will send a one-half of an em as the radius, but wait, we're not finished yet. One of the really powerful things about a mixin is that we can have multiple passed values. In addition to sending the radius, we are also going to send the button background color, which we add as an incoming variable and as a value in the include. Notice that you separate multiple items with a comma. Now we can add a new property to the mixin for background-color. In the demos file for this module, I have added the Prevention page, which is simply a list of 10 ways to take care of your teeth. We're going to use a mixin to arrange this content into multiple columns. Let's get started.