What do you want to learn? Leverged jhuang@tampa.cgsinc.com Skip to main content Pluralsight uses cookies.Learn more about your privacy Hands on Responsive Design Using a CSS Preprocessor by Paul Cheney Build a mobile first, responsive website using the power of a CSS preprocessor so you can use variables, functions, calculations, shorthand, and minification in your web design workflow. Start CourseBookmarkAdd to Channel Table of contents Description Transcript Exercise files Discussion Learning Check Recommended Course Overview 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. CSS Preprocessor Overview Introduction Hello. This course will give you hands-on practice using a CSS preprocessor to design responsive websites. My name is Paul. Let's get started. In this unit, I will share with you foundational information to help you not only understand what a CSS preprocessor is, but also how a CSS preprocessor fits into the web development workflow. So what is a CSS preprocessor? To answer that question let's look at the structure of a typical web page. First, there is someone in the world who wants to view your web page on their phone, tablet, or laptop browser. The browser requests the HTML file from a web server. Within that HTML page, there can be links to JavaScript files, images and graphic files, videos and animation files, and styling information stored in CSS files. CSS files are pretty basic and don't allow for any cool stuff, but what if you could write your own CSS using variables, loops, and functions, and then have a program automatically create this CSS for us? Now that would be cool. Since you're watching this video, you must be considering a CSS preprocessor. Here are some of the reasons why you should do it. Speed, using a CSS preprocessor allows you to write less code, which speeds up the process. Organization, using a CSS preprocessor allows you to use different files for different screen widths, and then combine them into a long file for delivery to the client. Modifications, CSS preprocessors allow you to make small changes that cascades throughout the entire style sheet very quickly. Minification, a CSS preprocessor allows you to minify your CSS, which speeds up the page load time. Error notification, I love this one. Every time I have a typo in my code, I am instantly notified by the preprocessor so I can correct my mistake. A CSS preprocessor does not allow you to create rules that cannot be written in standard CSS code. So basically a CSS preprocessor takes the code you've written in the preprocess language, and converts it into the same old CSS we've been writing for years. There are many languages that you can use to write your code, which includes variables, loops, and functions. SASS, LESS, and Stylus are three of the most common ones. In this course, we will be using SASS; however, once you understand the principles of one syntax, you can easily switch to another one. Within SASS there are two different syntaxes. You can see two examples below. This .sass syntax was introduced in version 1. It uses .sass as the file extension and is indent based. Because it's not like CSS, it's more difficult to learn, it is now less common than the newer version. The .scss syntax was introduced a little bit later. It uses .scss as the file extension. It is written with colons and semicolons just like standard CSS. Because it's similar to CSS, it's much easier to learn. The .scss syntax is more common. Once we have our .scss files created, we need to convert them into standard CSS. This is accomplished by a program of some kind, Ruby, JavaScript, PHP, Node.js, and Compass are just a few of the options you have. For this course, we will be using a free and very easy to use tool called Koala. Koala is a GUI application for SASS, LESS, and other languages. It can run in Windows, Linux, and Mac. You can download a copy from koala-app.com. The last thing we need to talk about is dry versus wet coding. On the left we see CSS for two different lists. The only difference between them is the color of the text. All the rest of the statements are written twice. On the right we see a dry version, where we combine all the duplicate statements, and then style the colors separately. In this example there is no repetition of this CSS statement. A CSS preprocessor makes dry coding easier to accomplish. If you have a foundation, then it makes it easier for me to convince you to use a CSS preprocessor in your next project. Next we will discuss seven specific ways that a CSS preprocessor can simplify your life. Introduction to SASS Introduction to SASS Remember that in the last unit we decided that we'd be learning SASS in hopes that once you understand the basics of one CSS preprocessor language, you can easily transfer that knowledge to another one. My name is Paul Cheney, and I'm excited to show you some SASS. In this unit, we will take a look at eight different features of the SASS language. Partials and imports work hand-in-hand, so we will consider them together. I have to say that partials and imports are my favorite feature of SASS. This allows me to divide my CSS into multiple files, and then combine them for deployment to the web. The example site for Aspen Dental has six files. As we work through this project, I will show you how I use each one. The underscore identifies them as partial files. I also have a styles.css, which does not begin with an underscore. This file is used to combine all the other files together. We have to identify a folder where the rendered CSS is saved. Koala, the CSS preprocessor we will be using, then watches our SCSS folder, and if there are any changes to any file, it immediately creates and saves a new CSS file for us. The code in your styles.scss file will look like this. Notice that the files are listed without the underscore or the file extension. Another great feature, which I will use a lot, is variables. Being able to use variables, especially for colors, is really cool. In SCSS, a variable is defined with a dollar sign. You should use Symantec variables name, for example, say your client likes orange, so you create a variable called $orange, and then assign it a hex value for orange. This is a bad idea because later the marketing department changes the brand to purple. Now you have a variable, which does not make sense. A better practice is to use Symantec variable names like $primary-color, and assign it a hex value. Then if the marketing department change the brand color, your variable still makes sense. Another thing you can do is to create two deep variable assignments. This way you get the color name and the Symantec name. Notice in this example I have created two variables called $red and $blue, with a hex value assignment. Now I assign those colors to multiple Symantec variable names. Changing the link color to red is not only easy, but also makes sense. Selecting a darker red is one simple change as well. Variables also work well for font weights and paint gutters. The third feature of SASS we will cover is nesting. SASS allows you to nest your code similar to the way HTML is written. Here's an example of nesting an ordered list, list item, and anchor inside a navigation selector. When the CSS is rendered, you get the code on the right. Notice that all of the nested items have a nav selector added to the front. Now let's jump into mixin. A mixin is like a function in a programming language. You can place a mixin at the start of the document, and then call it from anywhere. You can even pass it values to render into your CSS. Let's take a quick look at an example. Let's start with the way you used to code your CSS. Here's the code for an orange button with brown text. It is 10 lines long. Here's the code for a brown button with orange text. It's also 10 lines long. This is an example of wet code where you write everything twice. The problem is if you want to change the radius, you have to make two different changes. Here's an example of SCSS mixin. Notice that I am looking for two incoming variables, a text color and a background color. These two variables are then inserted as values in my mixin. Now that the mixin is built, I can use it in my class. To create button1 with brown text and an orange background, I'm going to use these 3 lines of code. Notice I am sending a value for the text and the background colors. To create button2 with orange text and a brown background, I will use these 3 lines of code. Once again I am sending value to the mixin. Of course you realize that adding a third button would only be three lines of code as well. The beauty here is that if I wanted to change the button radius, I would make one change to the mixin, and all the buttons would change. The rendered CSS looks like this. The great part is that we did not have to type everything twice. The next feature that we will cover is extending SASS. Extending in SASS can be messy, and some say not to use it at all; however, if used correctly, it can dry out our CSS. There's a couple of ways we can extend SASS, let's take a look at both. First, you create a declaration block, and provide styling information. Then you create a new declaration block, and extend the previous declaration block. You can also add additional styling information. The resulting CSS looks like this. Notice that foo1 and foo2 are combined in the first declaration block. That's what you get with extend. Additional rules, or in this case overrides, are added in the second declaration block. The end result looks something like this, where all the features are identical except the color red has been superseded by the color green. A better way to extend is to create a declaration block with only the common characteristics included. We will preface this with a percent sign, which prevents it from rendering in the CSS. Then we will add two additional declaration blocks, which extend the common one. The resulting CSS looks like this. Notice that the declaration block for foo1, foo2 has only the common elements. The declaration block for foo1 and the declaration block for foo2 contain only the color changes. This is clean and dry CSS. SASS also has the ability to perform mathematical operations. I use math for column widths. For example, if I want something to be 3/22 columns wide, I can do the math when I enter the value for the property width. In this case the result is 0.25, which is missing the unit identifier, and therefore is not valid. I will have to multiply the product by 100 to get a width of 25%, which is the correct CSS value. I also use math for image widths. For example, if I want an image to be 4/12 columns wide and floated to the right, I would do the math as part of the value declaration. This is what my CSS would look like; however, I want a gap between the text and the edge of the image, so I subtract the gutter from the total width, and then add it to the margin. This is the rendered CSS, and it works great. Control directives are also a cool part of SASS, but they are for more advanced users. If, for, each, and while are all functioning inside the SASS render engine. Let's take a look at an example of for. We are going to generate six new selectors, and assign them a background color that gets lighter each time. We're going to set up a loop using for with a variable of i, which repeats six times. Next we multiply i by 10%, and assign it to the variable $howmuch. So the first time through the value is 1 x 10% or 10%, the last time through it is 6 x 10% or 60%. In the next line we dynamically create a new selector using shade, and then a number. The first time through the loop it creates a selector called .shade1, the second time it creates a selector called .shade2, and so on. We are also going to use another feature of SASS to lighten the base color of brown for each new class we create. The first time through the loop it lightens the color by 10%, the second time it lightens by 20%, and so on up to 60%. Here is the CSS that gets generated by this for loop. We'll talk more about control directives later. Well now you've seen an example of all eight of these, in theory. Next we're going to build a multi-page responsive website for Aspen Dental. We will use several SASS features for each unit to show you how they work together in a real-world setting. Setting up a New SASS Project Overview 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. Create a Project with Media Queries in the Partial Files Here on my desktop I have a folder for the Aspen Dental website, it's currently empty. I'm going to be using Dreamweaver as my code editor, and I've created a site called Aspen Dental for Pluralsight, and there's the folder that we just saw on my desktop, and it's currently empty. In Dreamweaver I'm going to do File, New, and we'll start with a basic HTML file for HTML5. We'll save that as index. Now we're ready to create a SCSS file. Now remember, SASS, or SASS, has to different languages that it can use, there's the original SASS language, and then there's the newer updated SCSS language, and that's the one we're using in this course. Choose File, Save As, the first one we're going to save is for the phone, it's also the default file for all the rest, so we'll name it _phone-default.scss, and we need to drop it in a new folder called sass, and save it. Now we don't need this comment in here, so there's our first one. Let's do File, Save As, _tablet, which will be the middle of our design between phone and desktop, and we'll save it one more time as _desktop for large monitors. So now we have three of our SCSS files in place living inside of our SASS folder. Now what we need is one that combines them all together and sequences them. So let's do another new file. Once again we don't need the comment, we'll do File, Save As, now this file, because it's the combining file, does not start with an underscore. So we'll call it styles.scss, and drop it also in this SASS folder, click Save. Now the purpose of this file is to combine these other ones and sequence them. So in our overall design, we want to load the phone default first, so let's type @import "";. In between the quotes we'll put phone-default. Notice I have not included the underscore, nor have I included the file type extension, it's not necessary. Let's now do the second one and the third one. Our second one will load, because we're doing responsive design mobile first is the tablet, and finally we'll load the desktop. Save that. Now currently nothing's happening, so now we need to pull up our Koala application. Here on the desktop I have my Aspen Dental Website, and I'm going to need one more file in here called CSS. Now this is the folder which will hold the output from Koala. So let's drag the entire site folder over here to the left side, it's going to load it, and you'll notice that I instantly get an error message that tells me that I have a typo in one of my paths, it actually tells me that it's on line 1. So if I switch back to Dreamweaver, and I take a look at my import online, which is asking for phone-default, I can see that I've got a typo when I named my file over here, I forgot the L. That's one of the things I like about a CSS preprocessor is its error notifications. Now that I've changed that file name, we'll go back to the Koala app, click on it, and tell it to recompile. This time I get this Success message. Now over here I've got some different options. Automatically compile means to watch constantly for any changes, that's a definite must. Source Map, no I don't really need that, and we will look at these other Output Styles a little bit later. Next thing we need to do is come over here and set the output path so that the results wind up in our CSS folder. Here's our CSS folder, and you can see that by default it already is putting it there, but let's say that you we're using a different program that didn't use a CSS folder, maybe it used a style sheets folder, or maybe you're using something else. This is how you would change that output path. So let's go ahead and set it to styles.css, which it already is set to, we'll click Save, Replace. Let's go back to the desktop. I can actually delete this CSS folder. Come back here, and recompile it, and it will create the folder and the file for me. If we go back to Dreamweaver, and we open this file, we can see that it's completely empty. So we really don't know if it's working or not. So let's close it, let's come back to phone, and we'll put some rules in here, but before we do that, we need to put something on our index file that we can style. So let's start with an h1. So now we have an h1 inside the body tag. Now let's go to our phone-default.scss, let's talk to that h1, and set its color to red. Now, let's take a look at our styles.css. I'll open it, you can see that it's been updated with the information from phone-default, and we didn't have to do anything, Koala just did that in the background. Now we need to go back to our HTML file, and actually attach the style sheet that's living here in this CSS folder. So up inside the head of our document we'll do a link, href, in that href we'll do css/styles.css, and we also need an rel stylesheet. That should do it. Let's Save it, open it in our Chrome browser, and there it is red. Now, we've got the phone-default importing, now let's look at changing the color when it goes to the tablet. Well, at this point you should be very familiar with media queries, and I'm going to go ahead and drop one in here because I want my tablet rules to kick in after the browser width passes a certain point. Alright, so now we need to put in here a min-width of, and we could put 720px as a breakpoint between my phone, or small screens, and my tablet or my medium screens, but instead of using 720px, we're going to make it a little bit more dynamic, and we're going to convert that to ems, so 720 divided by a default base font size of 16 gives me 45em. So instead of 720px, we'll switch that to 45em, save it. Now, between the open and closing media query, we can go ahead and throw in here an h1, and on the medium size screen, we'll change the color to green, save it. Now I just saved the _tablet file. Let's open the styles, and there it's been included, the media query and the h1 to switch to green. Close it, let's return to our browser, refresh it, there it is green. So there's my phone or small screen, there's my medium screen, now let's copy this, go to our desktop, and instead of 45em let's break this at 1028px. So we'll pull up our calculator again, 1028 divided by 16px 16px base font gives me 64.25, 64.25, and the color instead of being green, maybe we'll make it yellow. Save that, return to our browser, hit refresh, make this screen a little bit wider, there it has passed now, the 64.25, and it's yellow. So now we have a mobile first responsive website with a CSS preprocessor and four SCSS files, three of them are partials, and the fourth one imports them all, and then Koala drops that here into our styles.css. Create a Project with Media Queries with the @imports Now let's take a look at another way to set up your project where we put the media queries inside of this styles.scss, rather than in the individual files. This works too, and you can pick either method. Remember the phone-default does not have a media query, so no changes are required here, but all of the rules inside of the tablet live inside of this media query. So I need to copy this line and this line and move them out. So I'm going to cut this one, cut both of these, leave only the rule that applies to the tablet, and now go to the styles.scss. Here's my media query. I'm going to take the tablet, and I'm going to put it inside of the media query for 45em. Now let's go to the desktop. Same thing, I'm going to move this media query out, cut it, save it, and instead wrap it around the desktop import, clean it up there. So now we're importing our phone, we're importing our tablet wrapped in a media query, and we're importing the desktop wrapped in a media query. Save it, make sure all of these files are saved. Notice now that the partials have only the rules, it makes it very clean to look at. Let's trust that Koala's doing its job in the background, let's check on it though. There it is, it looks exactly like it did before, and when we pull it up in our browser, and hit refresh, let's test the small screen as red, medium screen as green, and large screen as yellow. So once again, the end result is exactly the same, it's just that you've designed it a little bit different. Take your pick, put the media queries in the styles.scss, or put them in the individual partial files, they're both going to work for you. A Demonstration of the Koala App Save Options Next I want to demonstrate some of the features over here on the right side of the Koala app. Let's start with looking at the output style. Now in order to demonstrate these, I've had to go back in and add a few more rules, and I've intentionally styled them different for each one. SO in the phone-default, I've got a color and font size, and I've stacked them so that they're on 1, 2, 3, 4, 5, different lines. I've done the same thing on tablet, but this time I've ran it all across on a single line. In the desktop, I've added a second rule, the first rule is on a single line, the second rule is on multiple lines. So with those combinations in the source files, let's take a look at what happens when Koala compresses this. Let's start by looking at the expanded version. I'll hit Compile, and then let's open up the output, and you can see that with the expanded option, all of the closing curly braces are on their own line. Now let's switch it from expanded to nested, let's rebuild it. Now you can see it's a little bit short file, and the closing curly brace follows the last rule for that particular selector. Let's now go to the compact version, Compile it. Now you can see everything's been stacked into a single line. So these are much, much tighter. Now let's go to the compressed version, we'll recompile it. Here everything is on a single line. There are no brakes, there are no hard returns, this is by far the most efficient way to send out code is the smallest file type, and will result in the fastest download time for your end users. Very difficult to read, but who cares, we're not working with the styles.css, we're working back here in these files where we can code it this way, or this way, or this way, and then end result is taken care of by the CSS preprocessor. Adding a CSS Reset as a Partial Before we wrap up this unit, I want to talk about a CSS reset, something that you really ought to do and probably are already doing, but it works great using a CSS preprocessor with partials and imports. Here in my phone_default, I've got an h1 with the color red, tablet I've switched that color to green and wrapped it inside of a media query, in the desktop is another media query, and a color of brown, and a change in the font size. Now let's go do File, New, we'll do another SCSS file, and we'll save it as _reset, and put it in the same folder as the other ones. Click Save, we don't need this comment. There are many CSS reset files that you can use. I use the one by Eric Meyer, it's free, it's a really basic file, and he's got the code here, he talks about it, and you can copy the file right here free of charge. So select all of that, copy it, return to Dreamweaver, and drop it inside our reset.scss file, and we just save that. That's part one, part two now is to open up the styles, remember this is the one who combines everything all together, and we're going to load that as the first part of our project. So, we'll load the reset, and then we'll load the phone, and then the tablet, and then the desktop, Save it. Koala is still running, so let's take a look at our browser. Notice the large font size that typically comes with an h1 has now been wiped out. The red color is still there, the green color is still there. Remember that on the desktop, we had not only a color, but also a font size change. That's why this font size gets a little bit bigger. So that's incorporating now a fourth partial file. We'll add a couple more in the next units. In this unit we saw how partials and imports work together to simplify our life as developers. In the next unit, we will build a site header using two more features of a CSS preprocessor. Building the Site Header Overview of Variables and Nesting 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. Using Photoshop Generate Assets Let's take a minute and take a look at Photoshop's generate image assets feature. Here is the Photoshop file that I used to create the content for my website. This is the finished website. Notice on the homepage that we have some triangular-shaped graphics here and one down here. We also have our logo and some social icons up here to the top right. Those images are all laid out here in Photoshop for me. I've color coded them over here on the right inside of the Layers palette. These two green ones represent the open and closed position for our menu. So if I shrink my window down, I can see that my navigation has a MENU, and a MENU with an X. Our current design just has three hamburger bars and the X, so I've improved that a little bit. So here's how it works, all you have to do is in the Layers palette, name a specific layer with a .png or a .jpg file extension, and it will automatically create a graphic from that layer or group of layers. So in this case, I have a folder called logo, inside of that folder I have a leaf, I have an apple, I have an Aspen Dental text, and a subtext. I've combined all of those in a folder, and the folder is named logo.png. It exports then all of those layers as a single graphic. Over here on the left you see a checkmark and a cross. We take a look at our website, you'll notice that I've used those under Advantages and Disadvantages, but the size of the output is half the size that I created it. I'll create these graphics at double size, so it's easier for me to build them, and then in the Layers palette I'll use 50% space, and then the name of the graphic, and then Adobe Photoshop will automatically reduce it to that percentage. You could put any percentage in here you wanted. So let's take a look at the generate assets feature in action. Here on the desktop I have my interface, it's a PSD file, it's saved in a folder. In Photoshop I simply do File, Generate, and select Image Assets. You can see that it's now selected. I don't even have to save my document. I come back here and I have a new folder that's been created with the name of my file with a -assets. When I open it up, there's all my graphics ready to drop into my web tool. Now this is a neat feature. Let's take a look at say the Facebook icon. Let's say that instead of this gold color, maybe I wanted to change my social icons to blue. So there's my Facebook, over here I have Facebook, I'll simply Option, Delete to change the color. I haven't saved, I haven't exported, I haven't done anything, and it's changed. So Adobe Photoshop watches you work, and if you make any changes, it automatically saves a new graphic for you. Come back here, Edit, Undo, boom, you saw it get changed and resaved right there. So that is the neat feature of Photoshop generate assets. I'd encourage you to use it, I have included this file as part of the downloads, so that you can open it up and play around with it. Now that we have all of our assets created, let's open our interface-assets folder, and put them in the appropriate place inside of our website. So I like to put all of my photo-type graphics that go inline in a photos folder, and then I look to put all of the graphics, which are part of the overall interface in my images folder. So all of these are going to go into here. I already have a close-icon-large and a menu-icon-large from my mobile dropdown menu. I'm going to replace those with my new ones for my menuClose and menuOpen. Examining the Start File We're going to be building the header for this using some features of a CSS preprocessor. I've already put some of the HTML and CSS in place that is not specific to a CSS preprocessor so that we can focus our time and attention on those features. I've already download the mobile dropdown menus from Matt Everson, and they're here on my desktop. I've included into my file in the images, his graphics. He has this large one here and this large one here. We will be replacing both of those with our own graphics. So there's a modification that we're going to have to do. I've also included in my sass folder the _mobilemenu.css that he provides in his ZIP file. I've added an underscore to the beginning, and I've simply changed the extension to .scss instead of .css. Remember that the second version of the SASS language, SCSS, is written almost identical to CSS, so converting a file from one to the other works great. Also in my styles, I have included his _mobilemenu as the last import. Let's switch to Dreamweaver, let's open the _mobilemenu, and take a look at some of the changes we've had to make. I've tried to indicate those with a comment that says changed by Paul, so if you pull up his generic version, and then you look at the one from the demos, you can see kind of the changes that I've had to make. In the CSS provided by Matt, there's a couple of illegal characters. The first one is on line 103, it's this dash inside of a comment. For some reason, our Koala app throws a fit when we try and use a CSS preprocessor on that. The second thing is this triangle right here. It doesn't like that character. So in our modified code, I've had to take the dash out of line 96, and I've had to change the content from a triangular graphic to the hex code that represents it, which is /25BC. This now compiles beautifully with our CSS preprocessor. Also at the top of the CSS provided, there's a breakpoint of 475px, that's not what I want. I'm going to break this at 64.25, which is the same as the breakpoint for my desktop, 64.25. That way the mobile menus disappear at the same time the desktop takes over. In addition to the modifications to the _mobilemenu, I've also added a bunch of stuff to our default index.html file. Here we have a statement that prevents our phones from lying about their width. I've also added the latest version of jQuery, and we've added a Google font, which I mentioned earlier of Quicksand, a weight of 400 for normal and 700 for bold. Here's a link to the style sheet. Here's this script that's provided in our _mobilemenu, that allows the menu to open when it's touched, and close when it's touched. I've also got this Internet Explorer hack to make old Internet Explorer function properly. Down in the body, I've added a header. I've got a section here for the logo, it contains an h1 and an h2, which are both hidden by the CSS. I have my social icons, which float to the right, and are linked to the images that we created earlier. My navigation is set up as standard unordered list with links to not only index page, but future pages we will build during this course. And then there's the nav button, which you can see on the mobile, when I shrink down that right there is that nav button. Notice that the navigation in this particular site is contained inside the header. Sometimes I put it below the header, in this case I wanted it to appear on the desktop, over here to the right, so the graphic logo's here, the navigation's here all inside of the header area. I've got a main section, which contains basically nothing, and I've dropped in the footer information, which we've styled a little bit as well. Inside our phone-default, we have a statement here that stops text from resizing in WebKit, or in other words on iPhones. For some reason when you rotate from landscape to portrait back, the font size changes, so this prevents that. I've also applied the natural box layout model to everything. This is critical if you're going to be a serious designer because it eliminates the problems of some browsers adding padding to the outside, and other browsers adding padding to the inside. My basic body font is set to 16, that's a default, I always put that in there as just to remind me. I have the CSS in place for the social icons and for the navigation. On my tablet, I have the logo changing size a little bit, and I'm changing the social icons position. And on the desktop, I've limited the overall width of my page, and then once again tweaked the position of the header just a little bit. And that's all we've got. At this point it's just basic CSS. Next we're going to start adding our CSS preprocessor stuff that I promised awhile back. Implementing Variables for the Header In our Photoshop template, we've got some colors over here, and let's start by converting those into CSS variables. I'm going to select this brown color, copy the hex value, jump to Dreamweaver, and in my variables partial, I'm going to start with $brown: and then paste that hex value. And I'm going to put a comment up here because I like to keep things organized. We're also going to be doing the colors for $orange, $blue, $dkgrey, and $ltgrey in a similar manner. Now let's create some variables that'll actually get used in our code. Let's create a new variable for $text=color, and let's assign it the value of #dkgrey, and then we'll have a $menu-color, and we'll use the $blue color for that. We'll also have a $body_color and a $link_color done in a similar fashion. Now the body color is just white, so it's kind of unnecessary, but I just put it up here because, assign it a value of FFF. I'll use it for some crazy reason I decide not to use white, I just simply change this variable and it's done, but I did not create a variable up here called white, and then reuse it here because that just doesn't make sense to me. In addition to colors, we can also use variables for fonts. So let's create a new section, and we'll have a variable called $default_font_family, and the font that we're using is Quicksand, and if for some reason the font doesn't load, we'll just default to the sans-serif. We're also going to be having two different weights, and this is really, really useful. Notice in my index when I load the font Quicksand, I load 400 and 700. So we're going to change those to make a little bit more sense. We're going to have a font weight called normal and one called heavy. Normal will be the 400 value, and heavy will be the 700 value. We're also going to have a gutter and margins, and set that up as well. So I'll create a new variable, let's use $gutter as the variable name, and then I like to use 2% for my spacing. Simply if you want a tighter look you could use 1%, if you want more open space, you know, change it to 3 or 4%. Now as soon as I attempt to save this, our CSS preprocessor is going to look for any mistakes that I may have made, and you can see my little error menu popping up here reminding me that I forgot to put a semicolon after that one and a semicolon after that one. So let me save it again, recompile it, this time I get a success with no red warning, so everything's good to go. At this point there has actually been no change to our CSS because this stuff is all variables, but we're going to use it right now to make some changes to our menu. In Photoshop, we can see that this is kind of a light baby blue. If we take a look at our existing color, we can see this is a darker blue, it's the wrong version of the color. So let's go back to Dreamweaver, and let's pull up our _mobilemenu, let's jump dump down to line 48 or thereabouts. Let's change this value from a hardcoded hex value to our variable called $menu-color. Here on line 64, we have our font-family assigned to Arial, but we want it to match our website, and if you'll remember, our font family is Quicksand, so let's take this variable and use it instead of Arial for the $default_font_family. So now we should have two changes coming in to play. I haven't refreshed the page yet, so this is Arial, and that's the old blue. Let's hit refresh. There's the new blue, and there's the new font. While we're messing around with our _mobilemenu, let's make some more changes. Earlier I promised you that we would switch out the graphics, so if we come up here to line 18 and line 34, we can see the default graphic provided by the download ZIP file that we had earlier. We want to change those to menuClose and to menuOpen. So the first one is going to be menuOpen, and Dreamweaver does a little preview up there for it showing us that it is correct, and this one is changed to menuClose, mouse over it, and that one's working, so let's save that. On line 16 we can see that the width of the nav button is 50px, that's the width of this little box right. Our new graphics don't fit in there, they're way, way too small, so let's double that size from 50 to 100 so that our button is now twice as wide. There it goes. We can see here on line 21 that the background-size has been set to a fixed value. We're just going to change that to auto, so it uses the default size of the graphic. Same thing down here on the line 37 for the close button. We'll take a look at it, and we can see that the menu icon is now bigger and works nicely. Notice the gap between the edge of the browser and the edge of this button. As I make my page smaller and larger, it does not change. I want it to be 2%, so it slides in a little bit as the page gets wide, and then smaller for the phone. Come back here to line 15. Here we have a left fixed value of 5px. Well if you remember in our variables we used a $gutter of 2%, and we assigned it a variable name. So let's copy that, let's drop that in place of that hardcoded 5px, save it, take a look at it, as the page gets wider, the $gutter stays 2%. Notice when we activate this menu that these buttons are the full width of the page. On a phone, you know, that looks great, but on a tablet, it's probably a little bit much to have a menu item that big. So, let's once again return, here on line 46 we have a fixed width for our primary-nav, and this is 100%. We're just going to change that to a fixed value of 200px. Save it, hit refresh, and now that menu has a width of 200. We would like this blue to continue all the way across the top, but only at the height of 44px. We'll take care of that in our _phone-default.css, not inside the _mobilemenu.css. So we have our _phone-default.scss up, and we've got a spot here for the background color. And remember we want to use the variable, so I'm going to switch to my variables, and grab the $menu-color variable, drop it in, save it, refresh, and that menu color is now identical to the menu color over here. Now this is really cool. So I'm back in my variables, and I decide that I don't want the menu to be blue at all. Instead, I want it to be orange, so I switch out one variable name, that variable is cascaded throughout my entire style sheet. So this is orange, and that whole thing is orange. Implementing Nesting for the Header Now we're going to work on our header using the CSS preprocessor feature of nesting. We'll return to Dreamweaver. Inside our _phone-default.scss, underneath the HEADER category, we're going to kind of block this out. Remember we're going to be nesting these features. Start with the header, open curly, come down a ways, and then close curly, and I'm just going to put a comment in here, end of header. Now we're going to have a couple of rules for the header itself. The first will be padding. Remember padding can take four variables, top, right, bottom, and left. We'll do top as 1em, and then we'll do the right side as our variable $gutter so it can be changed, and then we'll do a bottom of .5em, and then a left side of $gutter. So now we've used our variables inside our nesting, which we'll look at here in a sec. We've also go a border-bottom, and it's going to be a solid line, it's going to be 1px tall, and it's going to be the color of $ltgrey, once again a variable in play here. Save it, make sure we don't get any nasty errors, and we did, it looks like I spelled $ltgrey incorrectly. It's hard to type and talk at the same time, we'll try it again, error has gone away. Now, that's going to render what you'd typically expect as header, a couple of rules. What we want to do though is we want to talk to the h1 and the h2, which live inside the header, and we want to preface them with header space, but instead of doing it manually, we're going to nest them in here, h1, h2, and here's the rules for those, and then we've got our logo, which has a class of logo, and then we're going to talk to the logo, which has an image inside of it. So if we take a look at our HTML, we can see that the logo is a division containing an image, and h1, and h2. So what do we want to do with the h1 and the h2? Well we simply want to display: none, so they're gone. The logo we want to float to the left, and we want to set the image with a width of 200px. We've got to shrink it down for our phone. Now let's take a look at the results, there's our 2% margin, watch it change as I slide to the left. I've got a 2% margin also here to the right of the social icons. So that $gutter variable is working beautifully. There's the shrunken graphic, there's the enlarged graphic. So let's take a look at this code in our exported styles.css. In Koala I've switched it to nested so we can actually read it. If we scroll down here to the bottom, we can see there's the HEADER section, there's the header with the rules, and there's the next, notice it has header space h1 and header space h2, we didn't have to type that, it did it for us. So header's been added in front of each one of these. Here's what we have so far. Our site looks great on small devices, on medium devices, but once we hit this breakpoint for desktops, our navigation should appear down here in this space, and it's not. There's a lot of rules that we're going to be adding to our _desktop.scss file, and rather than making you watch me type all this stuff and all the potential errors that come with it, I've provided the code for you, and we're just going to talk about it. It's in your demos in the code.txt file, here's what it looks like. So here's the rules for the navigation. I have four rules, which apply specifically to the nav. I'm positioning it relative, I'm changing the blue color to transparent so it's see through, I'm clearing it to the right so that it floats below my social icons, and then padding it a little bit from the top. The unordered list, which contains all of my menu items, I'm floating the entire list to the right, and then I'm floating the list items within that to the left. And then I'm styling all of the buttons. Here I'm providing a background transition of 0.3s, which is going to slightly darken as I mouse over those, and then on the active menu item, I'm adding a fat 3px border to the top, once again using the variable $menu-color. So let's save that, take a look at the results, make sure it's going to work. There it is floated to the right, see that slight grey color, that's my RGBA, added 0.3s transition, there's my fat 3px bar for the active menu item. And let's take a look at our styles, should be down near the bottom, there's our nav. Notice all of these are beautifully nested, each one of them prefaced properly with a nav at the beginning. Building the Footer Now let's take a look at styling the footer. Once again we're going to use nesting and variables, so we'll start with footer, open, close, comment here, end of the footer. Now the footer is going to have a whole bunch of rules, but it's also going to have a sub-rule of footer anchor for any links that happen to be in there. So we'll do an a, open and close. So that's now nested inside of my footer. Once again I've provided all of the code for you inside of the demos.ZIP. Here's what we have so far, there's my footer, here's all of the default rules, notice I'm missing the color. We're going to use the variable $brown for the color of the text, and we also have to use it for the anchor color, otherwise the default blue and purple color shows up. Our font-weight is going to be the default, the variable of $heavy, which if you'll remember is a value of 700, so let's save that. So let's open our styles.css, let's go down to around line 100, there's our complete footer rules, and here is the footer anchor rules with footer prefacing it. Take a look at our site, hit refresh, there's the footer, the anchor's also brown, and everything looks ready to go. In this unit we learned to use variables and nestings to simplify our life as a developer. In the next unit, we'll build the first page using operators and inheritance. Building the Main Rows and Columns Introduction 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. Building the HTML Rows and Columns Prior to coding, we need to make sure that our CSS preprocessor's up and running. In this case you can see that I actually have three different projects in process right now. This first one, Aspen Dental, is the one we are working on, these other two are for other clients. So with the Koala app running and watching these folders, this is what we have so far, we've got our header, footer, and nothing here yet. If we go to our text editor, which in my case is Dreamweaver, you can see the nothing here yet, and we can delete that. Now inside our opening and closing main is where all the content for our page is going to live. Let's start by creating an open div and a closing div. Now this one will be a row, so class = row, and then I like to tag all of my closing ones so that I don't forget what they're related to. Within our opening row is our page title, so it's going to be a single column. In addition to the class of column, which is going to have some padding and stuff assigned to it, we're also going to have another class called width, and the number associated with this class is going to be the number out of 12. I'm using a 12 column grid, so a column that I have designated as a width of 12 is going to take all 12 columns, or in other words full width or 100%. Inside this column, we're going to have an h1 with Repair Options that will be the page title. And we could put the paragraph immediately under that, that's one way to do it, and it would be fine as long as we always wanted that paragraph to be full width, or we could do as I described in the PowerPoint, and create a second row column combination, and change this to a paragraph. I've got the text for that already set up, it's in the demos.ZIP file, let's copy it, and drop it in. Now we have our page title and our opening paragraph. We're now ready for several subtopics, so these will be h2s. Let's go ahead and copy our row column combination up here. Instead of an h1, we're going to have an h2, and this will be called Bridges. This time let's go ahead and put the paragraph with this because it's also going to be 12/12 columns, so we can see it done both ways. This will be a paragraph like that. So let's save it, and take a look at our work thus far. Nothing here yet, let's hit refresh, we now have our page title un-styled, the paragraph, our h2, there'll be several h2s on this page, and then the description of bridges. Now we're ready to go into the advantages and disadvantages of bridges. So in this case we want to set up a multiple column, so we'll still have the row, but the column part will be different. So I'm going to start with this simple one up here, we'll paste it, remove the h1, and instead of the column being a width of 12, it's going to be 6/12, or in other words 50%. We've got one column and a second column, both living inside of a single row. On a small screen, these two columns will be stacked top to bottom. On wider screens, this column will take the left side, and this column will take the right side. Once again I have some text there for you in the demos. We have Advantages, which there are three of, and there are Disadvantages, which there are also three of. The Advantages will be h3s, and then each of these are going to be a list item, and so I'm going to style them with paragraph tags, and then I'm going to use one of the only affects I use from the design view of Dreamweaver, and that is to take these 3, and format them as an unordered list, so that when I go back to my code view, I can see that I have a ul with 3 list items in each case. Save that, take a look at it, there's the Advantages and the Disadvantages. Now we're ready to use some CSS to make this look nice. Styling the Text Using Nesting and Variables Let's now open our phone because we're going to start by designing the small screens, and then make modifications on the larger screens. Down here in the main area of the page, you can see it's completely empty. We're going to use a CSS preprocessor feature of nesting, so we'll start by doing a main, open, come down a ways, close it, and then put a comment that says this is the end of main. Within main, there's a couple of rules that we need to have. Thanks to Internet Explorer, we have to have a display of block in order for main to function properly on that browser, all other browsers, of course, works great. The second thing we want to do with main is set a min-height, and I'll just choose 25em. So that's the end of rules for main. Now within main, we want to have some rules for h1, and h2, and h3. So I'm going to do some copy paste to speed this up a little bit. Each of these headings are going to have basically the four same things. We'll have a font-size, we're going to have a color, we're going to have padding at the top to push them away from previous elements, and we'll have a font-weight. So let's take the rules for our h1, and we use the same 4 things for h2, same 4 things for h3, and actually our paragraph will have the same 4 things as well. Now the h1, we'll give it a font-size of 3em, for h2 we'll drop it down to 2em, and for our h3, we'll do 1.5em, and for the paragraph, we'll just leave it at 1em. This is not really necessary, but I like to put it just to keep everything consistent. Now the color of our h1, if we go back to our variables, I have created a variable for h1_color, h2 or heading 2, and h3 heading 3 color. I already had a variable for text-color, so we're going to use these variable names inside of our phone-default. So the heading 1 will be the $h1_color, this will be the $h2_color, and this will be the $h3_color. And the paragraph is going to be the text color. So now that we've assigned the font-size and the color, now we'll do some padding. For the h1 let's do 0.75em, for the h2 we'll drop it down to 0.5em, and we'll leave the h3 at 0.5em, and the paragraph 0.4em. Now the font-weight, remember font-weights are also listed in our variable, so we have $normal, and we have $heavy. I want all of the headings to be $heavy. So h1 font-weight, font-weight, and then this one will be $normal. The paragraphs are a little bit smashed together. I like to have spacing between the lines. In print this is called leading, in the web it's called line height. So let's go back, and for the paragraph, let's add line-height of 130%. Almost every font that I use, I have to add line height because they're designed too tight together. So let's save that, keep an eye on this when I hit refresh, see it space out just a little bit, it makes it a little bit easier to read. Now there's a couple more things that I'll be adding later in my other pages, and one is going to be bold or strong, and the other's going to be the anchor color. So strong is going to have a font-weight of heavy, and my anchor is going to have a color, and if we come back to our variables, I can see that I've already defined a link-color. Now even though these two are not currently being used, I anticipate that they will be used, and so I'm putting them inside of my main so that they're already to go, let's save that. These two lists for Advantages and Disadvantages are not styled at the current time. We're going to do that in another unit. For now though, we want to set them up to display stacked on small screens and side-by-side on larger screens, and we'll do that next. Styling the Columns Using Nesting and Operations Before we do this next part, I want to show you the problem that we're trying to solve. While this looks great on a really wide screen, as I shrink my screen down, you'll notice that the text actually touches on the left side and the right side of my screen. That's an unacceptable design, it looks really bad, so we're going to add some padding to push this away so that it lines up with the menu button and the left side of our logo, which is 2%, as described by our $gutter variable. So let's go back to Dreamweaver. We have our MAIN section up here, and I could add these rules to main, but I'd like to keep my CSS a little bit separated so I can make sense of it. So I'm going to add a new category called COLUMNS, and inside there I'm going to set up a new main, open and close, and within main we're going to have two rules that are nested, one will be a .row, the second will be the column. The row is going to have a clear both, it's all it's going to do, make sure all rows stack below previous rows. The column, we're going to do padding, and we're going to set the top and bottom padding to 0 because we've handled padding in our main area up above with the paragraphs and the headings, but we do want to set our side padding to the variable defined here as $gutter, which is 2%. We'll save that. Our CSS preprocessor's already done its magic, so we hit refresh, and we can see that pop over 2% gap on the left side, 2% gap on the right side. So we've just taken care of the phone version, which sort of looks like this once you muck it up. Now let's open up our tablet partial, and we'll create a new section also for columns, and we'll have main. And this time we're going to talk to the width of 6. So width6, we'll set to float to the left. Next we need width. Now each of these is supposed to be half, so we could do 50%, and in this case that would probably be a whole lot easier, but the point of this lesson is to demonstrate CSS operations because you may find an instance later where this is not the simplest solution. So in this case we have a 12 column grid that we're working with. This particular column is supposed to take 6 of the 12 columns. Let's take a look at it, and we can see that Advantages is not half, and Disadvantages is not half. They're just taking up the space that they need. So let's inspect those. We're looking for the division width of 6. We can see here that we do have a width of 6/12, but the invalid property value warning is up because 6/12 is not a valid width, 6/12 is actually 0.5, so let's times that by 100 so that 0.5 becomes 50. Save it, let's try it one more time, we'll refresh it. Once again we're looking at width6. Now we have a width of 50, but it's still invalid because it's missing the value. It needs to be 50px, 50em, 50% something, so let's come back to our code, and we'll add the percent sign, so it has a unit value, save that, refresh it again, and now our width column 6 has a valid value of 50%, and each of these is now taking half the page. Now that's great. We could do 4/12 columns, and without doing any math in our head, we automatically have 33.3333%, so a third Advantages, Disadvantages, whatever would fit right there beautifully. We'll go ahead and put that back to 6, and now you know a little bit about operations in a CSS preprocessor. Well now you've seen examples of operators, as well as another look at nesting and variables. In the next unit we will build a tabbed to navigation using inheritance. Building the Tabbed Navigation Introduction In the last unit we created the repair page using operations, nesting, and variables. In this unit we will use extend or inheritance to create a tabbed navigation. We'll also review variables. So here's where we're headed. Notice that I have finished filling in the repair page with these three additional dental repair options. In this unit, we will be adding the within page navigation tabs that scroll to different parts of the repair page. The active tab looks the other three with minor changes. We will be using extend to accomplish this task. Inheritance can work in a couple of different ways. Let's demonstrate using an anchor styled like a button. In this case the anchor is green. Next we create a new class for the second button, which will look very much like the green button. We will copy all the features of the green button using @extend. Then we'll change the background color to red. The background color red overrides the background color green. The resulting CSS looks like this. Notice that both button green and button red are combined in the first set of rules. The button red then overrides the previous background color. The second way to implement inheritance is to use a placeholder. A placeholder is a percent sign, and it replaces the dot that we use for a class designation. You put all the rules that are the same for both buttons in a selector that starts with a percent sign instead of a dot. We will call this %button_default. This block of code will not render into CSS unless it's extended into another selector. Next we create two selectors, one for the green class and one for the red class. These both extend the default class and then add their own background color. The final code still uses a multiple class selector, but it only contains the common characteristics. The differences are then separated into their own classes, which add to the previous selector. I prefer the second solution, as it makes more sense when reading the CSS. So let's go build something. Building the Navigation in HTML Let's make sure our CSS preprocessor is up and running. Let's take a look at our repair.html page. The demos file reflects several changes from our last unit. In addition to the Bridges with Advantages and Disadvantages, I've also added Partials, Replacements, and Implants, so there's a total of four sections on the repair options page. Here on line 93 is the repair options page heading, then we've got a quick description. Down here on line 108 is where the actual content that we're concerned about starts. Notice on line 106 we have added to the row an id of bridge. This allows us to target with an anchor to move to that portion of the page. Each of the other three sections have similar ids, all the way down to line 211 where we have an id of implants. In your demos.ZIP I have provided four anchors, which are already set up to link to each of these. So let's scroll up to the top one, inside of the row, inside of the full-width column, we're going to hit Return a few times, and then we're going to paste the code that was provided in the demos.ZIP. Notice there's a href to each of the four links on this page. There's also a class. We have a subnav-active and then three subnav-links. These will be styled differently than this top one. Then I've sort of done something different here, I've broken up the link names, so the link name of bridges is broken up so that I'm going to hide on phones all but four of the letters, and we'll take a look at that more in a minute. So there's the first one in place, let's scroll down to the second one, which is dentures. Once again, inside the column, before the name of the h2, let's paste it. We now need to change this link to link, and change this one to active, since we will be at partial dentures, and partial dentures will be the link we just clicked on. Down here on replace, just inside the column, paste it again, we're looking for replacement, here's replacement, change the word link to active, and then we'll style this one as a regular link, and then implants is our final one, so our implants link will be styled as the active-link, and we'll change this back to a regular link. So with that in place, let's take a look at what we've got. Here's the four links, if I click Bridges, it scrolls to Bridges, if I click Partial Dentures, that becomes the top, Replacements, Replacements won't slide up because our page is too small. So let's shrink it down, go back to Bridges, notice there's Bridges, Partial Dentures. So this is working as a within page navigation, just doesn't look very nice at this point. Styling the Navigation Using Inheritance/Extend Now that we have the HTML taken care of, and we've got places for two classes, one called link and one called active, let's now jump to our phone-default partial, and do some coding. Down here under the main section, I'm going to add a new section for SUB NAV. Now this is going to be blocked out. Remember we're using the second approach I showed you in the PowerPoint. So we're going to start with a placeholder, and we'll just title it subnav, open curly, have a bunch of rules, and close that one off. Then we're going to have a class selector called subnav-link, and it will have some additional rules, and then we'll have a subnav-link, and then when they put the mouse over it, we'll use the pseudo class hover, and style that a little bit different. Then we'll have a .subnav-active. Now each of these three are going to extend to this one up here. So let's start with @extend, and then we'll use a percent because it's a placeholder, %subnav. Alright let's try this thing out. Let's start by setting the background-color to a nasty purple color. Let's open our browser, hit refresh, and that nasty purple color is working on all of our buttons. So, let's come down to the hover now, let's add a rule for hover. Set the background-color to pink. Hit refresh, and now our link is switching from purple to pink on hover. Now there's a lot of rules that actually go up here with the basic button styling. I've provided those rules for you in the demos.ZIP, and here they are. Let's delete that. Because it's an anchor, we must first display it as a block. We're going to float all of these buttons to the left. The idea is when we're done, that all four will fit on a screen from phone all the way up to a large desktop, and they'll each take 25% of the available space. Then we're going to style them with some space outside, some space inside, we'll set the color to $dkgrey using a variable, we'll put a border around it using a variable, we'll turn off the default underline. And then look at border-radius, 10px on the top-left corner, 10px on the top-right corner as square corner bottom-right, as square corner bottom-left, and then we're going to do a transition, which means the background-color is going to change over half of a second. What are the characteristics now of our subnav? Well first of all, it contains all of this stuff, plus we want the background-color to be a variable of $ltgrey. That's it. The hover color, instead of being a nasty pink color, is going to be our variable of $orange. Our active state is going to have a background-color, once again it will be a variable of $blue. Let's take a look at it, refresh, there's our round corners on the top-right, top-left, square corners on the bottom. There's our hover color to orange. Notice this one doesn't hover because I've set it up as the active one, only these hover, indicating their click-ability. When I click a non-active one, it takes me to that part of the page. In large screen they're taking 25%, they're looking great. Medium screens are also looking great. Small screens are not working very well. There's just too much information here to fit on a screen that has a width of 320px. So that's where we get into that weird link name that I showed you earlier. Let's go back to repair. If I shorten each of these to four letters, they'll actually fit on a small phone. So I'm going to hide the hideSmall class. So let's go back to phone-default, display none, it's gone. Save it, let's preview it. The four letter links are working great on a very narrow screen. As I widen it out though, I have room for the full name, I need to turn that back on. Let's open up our tablet-partial.scss file, and under the subnav category, instead of displaying these as none, we'll display them as inline. Save it, hit refresh, and now our link names are showing up full width on large, medium, and on small they're shrunk to four characters. If we open up styles.css, and we scroll down to around line 130 something, we can see the output where subnav-link, and subnav-link hover, and subnav-active all share the same set of characteristics. And then we have the link, and the hover, and the active each having their own separate background color. And of course there's the hideSmall, which has a little different purpose. There's one more thing here that's kind of bugging me, and that is this space between our h2 and the sub navigation elements above it. It's a little bit too tight. So to fix that problem, we need to go into our editor, go to our phone-default, and find the h2, and we need to tell the h2 to clear both, which means stay below those buttons so that your padding top functions correctly. Save it, return to our browser, reload it, and now we've got a nice space between the tops of these and the navigation links above them. Well now you've seen examples of inheritance using extend, as well as a review of variables. Next we'll use mixins to style our Advantages and Disadvantages lists. Style Lists with Custom Bullets Introduction 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. Styling the Lists with Mixins So here's our Repair Options page. We have Advantages listed here on the left side and Disadvantages listed on the right side. Each of these is an unordered list with three or four list items. Let's take a look at our code. Here's the Advantages, and down here's the Disadvantages. The unordered list currently does not have a class, so we're going to set up class=, and this first one are the Advantages, so we'll set that up as class yes, and then we'll come down to the Disadvantages, class= no. So now that we've assigned those two, I'll go ahead and assign those to the other three items in our web page. Now that our classes are all set up, we can jump back to our CSS. With our phone-default partial opened, let's start by creating the mixin. The mixin has to have name, open curly, and close curly. Now let's create two classes. The first one is an unordered list, which has a class name list-check-yes, and we're going to talk to the list items within that unordered list, and the first thing we're going to do is @include all the rules from the mixin. So the mixin name, followed by a semicolon. Now the checklist for no is identical with one simple change, and that is the yes becomes a no. Now at this point we have nothing styled, so let's start by adding a background-image, and we're going to find check1 in the images folder. In our no list, we'll also have a background-image, and it's going to be check2, which is an X. Let's switch to our browser, and this is what we have so far. That background is being repeated horizontally and vertically. So both the Advantages and the Disadvantages need to have the background repeat set to no-repeat. Because we're using a mixin, we can do this with one command instead of two. So up here on the mixin, we'll add no-repeat, save it, hit refresh, and it's now been applied to both the left and the right sides. Now the checkmark graphic is currently overlapping our list item text. Let's add some padding, and we're going to space these apart from each other, as well as slide the text in. So let's do 0.5em down, the right doesn't need any, the bottom will match with 0.5em, and the left side will kick over 1.5em to make room for the graphic. So now you can see that the text is now being kicked to the right in both cases. Now this one, you can see the checkmarks are looking a little bit too high. Over here when you've got a double line, the graphic is really too high, so we need to slide that down so it's centered. So once again, in our mixin, we'll set the background-position to left, which is default, and then center, which is going to slide it down to the middle. Let's refresh that, that kicks it down. Now the checkmark is currently lined up with the left edge of the A, and the X is lined up with the left edge of the D, that would be okay, but I'm going to add an additional rule for margin-left, and I'm going to kick it over 1em, so it's indented a little bit. Just add a little bit more styling to the page. So refresh that, and now you can see those are kicked over nicely. Let's open our output. Here on line 157 we start the LISTS code, you can see that all of these common rules are repeated here, and then the difference is up here in the checkmark being used. So that was a quick example of a mixin. Next we're going to pass values to mixin to make it more useful. Trust me, you're going to love this one. Build Newspaper Style Columns Introduction 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. Passing Values to a Mixin If we open our Aspen Dental Pluralsight project, the demos.ZIP, and we take a look at the new prevention.html page, down in the main, we have a row column combination, which contains the page name. We also have a second row column combination, which contains 10 different ways to prevent disease, and that's the end of the page. We're going to add an additional class to this column with 12 called multicol or multicolumn. We'll save that. We're done with our HTML modifications. I've opened up the variables partial where we have all of our variables set up. We're going to be using this mixin in multiple places throughout our site. If you'll open up code.txt from the demos.ZIP file, and paste it in the bottom of the variables, you've got a partial mixin set up, I have not completed this. The mixins name is columns. And then are two different vendor prefixes for multiple columns, as well as the standard for columns. We've got two different vendor prefixes for the gap between the columns, as well as the standard. And then there's the line that separates the column, once again in vendor prefixes and then the standard. So we're going to set up two incoming variables for this mixin. The first one will be the number of columns, we'll call it $count, put a comma. The second variable will be called $line_color. The number we pass in for the number of columns needs to be used for the column-count, the column-count, and the column-count. The color needs to be used down here for the color of the rule. Now this is very much like a border. You've got the width, you've got sort of wear, and then you have to have a color value. So we'll set that up as $line_color as the third value for the column rule. Now the column gap already exists as a value right here, so I'm just going to put that value, even though it's not passed in, it is being used, and it's dynamic so that if we ever change this $gutter value, our columns will automatically respond to that change. So now our mixin is built. Let's save it. Now on the phone there is not going to be multiple columns, it will just be a single column because the phone is so skinny, but once we hit our tablet, we want to make some changes. The columns we're creating are different than these columns we set up here, so let's come down a little ways, and we'll set up a NEWSPAPER STYLE COLUMNS because that's really what they look like. Remember the class that we used was called .multicol, so put a dot, multicolumn, open it and close it. So we'll start with @include, and then we go and put the name of it, which is columns, then we need to send two values with our columns so that when it gets to here, it can bring those two values in. So we need a $count and a $color. So the number of columns on a tablet's going to be 2, we could do F00, which is bright red, let's do that for now, save it. Let's preview our Prevention page, and there it is in two columns, and there's that red line. As we go back to phone, notice there are not two columns, and there's our break, and there's the line. Now the red line doesn't really work with our design, so let's go back. In our variables we have a color called $dkgrey. It's already assigned a hex value. Let's pass it that variable instead of the nasty red color. Save it, reload it, and now we've got a grey line separating our two columns. Now we need to go into the desktop and turn it into three columns. So we've already go this set up. We'll copy the NEWSPAPER STYLE COLUMNS from the tablet, and we'll open our desktop partial file. Down here under MAIN we'll drop in our new section, simply change this from a 2 to a 3, reload it, and now we have 3 columns on the desktop, 2 columns on the tablet, and 1 column on the phone. Now let's take a look at the results of our CSS preprocessor output. I'm going to open styles.css, down around line 219 we have our NEWSPAPER STYLE COLUMNS, there's the class that was created in our tablet, and notice I've got three different declarations for the number of columns. There's my column gap, and there's the color. All of that was generated with one line of code in my tablet. If we move on down to around line 280 something, here is the columns for the desktop once again. All of this code was generated in a single statement, multicolumn send at a 3, send at a color. So that was an example of a more complex mixin being used for the tablet and the desktop. Next we're going to use control directives to set up a fancy multicolumn grid like you would get with a CSS framework like Foundation 5 or Bootstrap. Using a for Loop for a 12 Column Grid Introduction In this unit we are going to use control directives to build a new page for our dental website. This is the last lesson on using a CSS preprocessor. Let's take a look at everything you have learned so far. In this unit, we will be learning control directives and reviewing variables and math operations. When you download the demos file for this module, you will see that I have added a homepage with four dental topics. We want to be able to use columns to layout this page in a variety of ways. Rather than coding all 12 column selectors manually, we are going to use control directives with some variables thrown in. Remember that there are four control directives that work inside the SASS render engine. We're going to build two 12 column grids using 4. We are going to take this a step beyond by creating two sets of column selectors just like you might get in a CSS framework. In the phone partial, we are going to create 12 classes for small, 1-12. Then in our tablet we are going to create 12 classes for large, 1-12. As you can see from the final CSS, if we code this by hand, there are many lines of code and a potential to make several mathematical miscalculations. This is the basic layout of a control directive for a for loop. We are going to create a variable called i, and then have that variable start at 1, and count up until it reaches 12. Basically that means the CSS preprocessor will repeat this loop 12 times. Now we need to use some math operations to calculate the width of each column. Remember this code form unit 5, where we divided by 12, and then multiplied by 100% to get a percentage? The first time through our loop, our width should be 1/12, or 8.33%. The second time through the loop it should be 2/12, or 16.666%, and so on. So here's what we have so far. We are going to create another new variable called w for width, followed by a colon, which means assign. Next we will divide i by 12, and then multiply by 100% to get the correct value for each loop. Each time we go through the loop, the variable W will have a new value expressed as a percentage. Remember that the class names are .small-1, and .small-2, etc. We can divide the class names into two parts. The beginning is the same for all class selectors. Well the second part increments up one each time. For the second part, we will use the variable i, and wrap it in curly braces. Then we will apply SCSS glue to connect the first and the second part together, this is called interpolation. We are now ready to create a dynamic selector and declaration block. Our selector has both parts we just discussed, and our declaration block uses the variable w for width and a standard float:left. As you can see, we have used the variable i three different places, and the variable w twice. Now that the difficult part is done, we will also implement some SCSS that allows you to wrap text around non-square shapes, which is actually pretty cool. Let's start coding. The Demo File Once you've downloaded the demos for this module, you will see that we have a new homepage with four dental topics, X-rays, Sports, and Fluoride, and Pregnancy. Each of these has an h2 with a triangular-shaped graphic, followed by a paragraph of information. Now if we look at the back-end, we can see that the homepage is something we've done before. It's got a row, it's got a column. Notice it has a width of 12/12, which is 100%. Once we get down to the new stuff, we start with the row, we have a class of column, notice there is no width specified, we'll do that a little bit later. Then we have our h2, followed by our graphic, and then once again there's the paragraph text. There are three columns in this first row. And then just to give us an option to kind of break things up a little bit, I've created another row starting with an empty column, then there's the Pregnancy column in the middle, followed by another empty column on the right, followed by the end of the row. So that's what we have to work with for this module. Building a for Loop Here in our phone-default partial we're going to put our code underneath the columns that we've already started. Let's begin with @for, we'll create a new variable called i, then we'll type from 1 through 12, open curly, and close curly. Now let's test this loop to make sure it's working. We'll put a comment that says hello. Save it, we'll open our styles.css, which is the output. Down here around line 180 we can see 12 instances of hello, so our loop is repeating correctly. Now let's replace that with a class declaration and some properties. Small-1, and we'll do float: left, save it. Once again we'll check our output. Here we have 12 instances of small-1, so it is repeating, we do have our float: left, but what we really need instead of 12 small-1s is we need a 1, a 2, a 3, a 4. So let's go back here, and let's get rid of this 1, and we'll replace it with curly braces, inside of that we'll put our variable i. Now we need to glue this part to this part, and we do that with a pound sign. Save it, check our output one again, here's our output for styles.css. We have 1, 2, 3, 4, 5 all the way through 12. So that variable is working correctly. Now we need to get some values in here for width that are dynamically generated. So let's put width: 50%; and float: left was already there. If we save it, we can see that all of those 1 through 12 have a 50% width. Now that we have both rules in place, we simply need to change this to be a dynamic value. Let's create a new variable called w, we'll then assign it to be the incrementing value, which is $i, and then divide that by 12, and then let's take that dynamic value, and instead of 50%, we'll reuse it as $w. Let's save that, open our output. Here we can see that we are indeed getting a width expressed as 0.08333, 0.166, but those are not percentages, they're just nicely divided numbers. We need to change each of these widths to express them as percentages instead of as decimals like they are. So we'll switch back. We'll simply times this value by 100%, that'll move the decimal place over 2, and add the percentage for our value. Let's take a look at it one more time. So here on line 180 we have a small-1, it has a width of 8.333%, float: left, there's number 2 expressed correctly, and so on all the way up to 12. Now that we have the code done for our phone-default, let's copy it, let's open our tablet.scss file. Once again under the columns, we're going to repeat that same block of code, but instead of using the class small, we're going to change it to large. So now we'll have a second set of values for column widths. Let's save that, open our output, here on line 180 we have our 1-12, here on line 266 we have large 1-12. Now let's take a look at how we can use these different columns in our phone and our tablet to create different layouts depending on the browser width. Using 12-column Grids to Design a Layout Let's jump back to our code editor, and assign some of these columns a width. Remember there are three columns in this initial row. So we'll do a space, which means a second class, small-4. Remember they're 12 columns wide, so we'll use 4 for that one. Come down to the next one, small-4, and then down to the third one, small-4. So if each of these are 4 for a 12, that should be the full width on devices. We'll save that, pull up our browser, let's hit refresh, and on a desktop we have 4, 4, and 4, nice even division. However when we go to our smaller screens, we can see that our words are being chopped off, and three columns just isn't quite going to cut it. So, let's make one of them full width and the other two side-by-side. We can see that the first column is the longest, so let's make it 12, and then let's make the second one 6, and the third one 6. So here's X-rays, on a small screen it will be 12 or full width, that will then force the next column down to the next row, which will take half of the second row and the other half of the second row. Let's now refresh, so there's X-rays full width and side-by-side Sports and Fluoride. Once again when we go all the way out, it still doesn't look too bad, but we want to change it up a little bit. That's why we have the second set of large 1-12. Back to our editor. We'll add another class to each of these called large-4, let's copy that one, paste it there, and paste it there. So this means that once we hit the tablet or the larger size, each of those should jump to a third of the available space. Let's check it out, and there it is. Three even columns. We go to small, we have the wide, followed by two 50%-ers. Now as we take a look at this one, we could balance this out a little bit better because there's a lot more text here on the first one, than there is in the second and third one. So instead of giving them a third, a third, a third, or in other words 4/12, 4/12 4/12, let's mix it up a little bit, and give this one 1 extra, and take 1 away from this one. Back to our code editor. So the first one has lots of text, let's give it an extra, which is 5, and the total still needs to be a multiple of 12, so we'll drop this one from 4 to 3, so 5 plus 3 is 8 plus 4 is 12, that should fill the full width of the screen, refresh it, and there it is. X-rays, Sports, and Fluoride line up really close at the bottom to be even, and we still have the same result on our phone. Now that we have the first row styled, let's go down to the second row where we're going to mix things up a little bit. On our small screens, we don't want to have the first column or the last column show up at all. So, we'll set them to small-0, and then we'll have the middle one take up all 12 columns. So it should be full width. Now that's the way it already is because these two are empty. Once we get to a larger screen though, we want to make this Pregnancy one come in a little bit, it's sort of like a block quote. So we'll set this to large-1, and then right side to large-1, and if we have 12 columns total, we have 1 for the left, 1 for the right, this one has to be large-10. Save it, see if it works. Here's our small screen rendering, you can see that this text goes all the way from the left to the right. As we widen it out, there's an empty column there, an empty column there, and 10 in the middle. So now we've got another way to lay out a page. Textwrapping Using Shape Outside Now let's take the text and wrap it around these triangular-shaped graphics. In our text editor, we're going to add a class to each of the images. I'm going to copy that class of triangle, and paste it, and paste it. Here on our phone default we'll create another section called IMAGES, and we'll start with the class triangle. First thing we want to do is float: left. That you've probably been doing for years, it looks like that, nice and square, but we want it to be triangular in shape. So now we need to add a little bit to it. We'll start with shape-outside: polygon. In here we're going to set up three corners on a standard X and Y grid axis. So we're going to start in the upper-left corner of our image, so that's 0 0,. Now we're going to move to the right, so our X axis is now at 100% the width of the image, and our down value is still 0,. Our third value has now descended to the bottom-left corner, so the X axis is back to 0, and the Y axis is now 100% down, and then it returns to the 0 0 point. So there are the three points, upper-left, upper-right, skip the bottom-right, go straight to the bottom-left. Now we're going to need that same thing with a vendor prefix of -webkit. So let's try that out. Now the text wraps nicely around our triangular shape, but we have some more work to do. Notice each of these triangle shapes are little too high, it sticks up above our body text, so we need to push it down with some margin. We also want to push the text away from this edge a little bit, so it doesn't look quite so squished. So in our image.triangle we'll add some margin, and we'll put four values. The first value is going to push it down so that it matches the line height of the text. Now the next two values are a little bit tricky, so let me use some really large values to demonstrate what's going on here. Let's use say 50px, and then for the bottom side let's leave it at 0, and of course we already know the left needs to be 0, so let's save that. Here you can see the 50px at the top, and it sort of makes a triangular shape to 0 at the bottom. So if you are after sort of a triangle wedge, you'd have it, but we're not. Instead we want to make the second and third values match so that we get a parallel line between our text and the edge of the triangle graphic. So if I put 50px here, now we get an even 50px separating these 2. Now that's a little bit too much for my design taste, so I'll drop it back to say 20, and there you have it. Testing for Multiple Browsers and Mobile Devices So let's open up windows and take a look at our work. Here's Internet Explorer 10. You can see that it does not recognize the shape outside. Here's Chrome on Windows, it works great. Firefox on Windows does not recognize it, and Opera, it works great. My guess is in a few months these will all work beautifully across all platforms. And here's the result for the current state of affairs for Macintosh browsers. As you can see from our work so far on this project, Chrome is working fine. Here we have Safari, it's also recognizing the shape outside. Firefox, once again does not pass the mustard on that one. Opera on Macintosh works fine. So here's the results of our work on an iPad. You can see that the columns are recognizing shape outside, and the text is wrapping properly. If we change to our Repair Options page, we can click on each of these sub-navigation items, and be taken directly to that portion of our page. We also have our Prevention page, which is two columns where the text wraps kind of like a newspaper style. When we flip our tablet the other way, it's still two columns for the Prevention page, and the Repair Options page squishes so that each of the items still takes 25% of the total available space, and of course our homepage still works beautifully. Here we have our website showing up on a phone. If you can see, the triangular shape wrap did work fine. Remember that we had small set up so that the X-rays was full width, and Sports and Fluoride was partial width. Pregnancy was also full width. On our Repair Options page, the names used for each of these tabs is shortened so that they fit the width correctly, and still we can get four across. Touching them of course works beautifully. In our Prevention page, we have a single column, whereas on the tablet we had two columns, and on the desktop we had three columns. So that wraps up our discussion of using a CSS preprocessor for responsive mobile first design. I hope I've convinced you to use a CSS preprocessor on your next project. Course author Paul Cheney Paul Cheney is a professor of Web Design and Development at Utah Valley University, where he teaches Responsive Design. He also owns his own web design company, which allows him to keep current in... Course info LevelIntermediate Rating (34) My rating Duration2h 0m Released14 Mar 2016 Share course