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 Web Design 1: Media Queries & CSS Preprocessing by Paul Cheney Responsive, mobile first web design is a skill required for web developer's in today's mobile world. This course, you'll learn how to build a responsive template using SASS and a CSS preprocessor that you'll use in your next web development... 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. Let me tell you about this series of hands-on responsive design courses. At the heart of developing any responsive website is a thorough knowledge of how to use HTML5, CSS3, and SASS. In this course, you will learn the skills you need to create a mobile first responsive web page template that can be used as a basis for an entire site or even a content management system. You will learn the appropriate way to organize your SCSS partial files, how to reassemble them while including media queries, and how to use variables in math operations to quickly create standard CSS. You'll even cover HTML semantics and wayfinding so that your websites are attractive, as well as functional. When you're finished with this course, you will have a responsive template, which you built, that is ready to be used as you create your own personal or commercial websites. I hope you'll join me as we build a responsive mobile first web page template in this first of four hands-on responsive design courses from Pluralsight. Introduction Introduction Hello, and welcome to another hands-on project from Paul Cheney. This is the first in a series of four in-depth courses on responsive web design. In this course, we will focus on media queries and CSS preprocessing. If you have some basic skills with responsive web design, but you want to learn more, then this is the course for you. If you're a front end web developer and you want to go deeper into responsive web design, then you're in the right place. If you're curious about how to build a fast, awesome site for your next client, then I'm here to help. To be successful in this course, you'll need to have some web experience with HTML and CSS. It may also be helpful to have access to and know your way around Photoshop. It will also be helpful to have multiple mobile devices around to test your work. After the introduction, we will build a start file with all the essential elements you should have in every responsive website. Next, we'll demonstrate the proper semantic markup for basic HTML5 documents. Then we'll explore the best way to set your site up to take advantage of a CSS preprocessor. Next we'll build a responsive page for an auto dealership that includes several Sass features. Then we'll modify the basic code to match several common designs popular on the web today. Finally, we will run our site through several testing tools to make sure it's fast and error free. Once we get the basics out of the way, we will build a responsive page for an auto dealership that will include responsive columns, advanced CSS techniques, Sass variables and color modifications, various units of measurement, and even a dynamic clear fix solution for a multiple column layout. This is what our project will look like on small screen in both portrait and landscape orientation. Here's the same site on a medium screen in both orientations. And finally, here it is on a large desktop screen. As we move through this course, I will be testing my work on lots of different browsers and devices. I have some older technology, which I will refer to lovingly as dumb, and some newer technology, which I will refer to as smart. Our goal will be to get our site to look good on as many of these as possible. We will make sure there is a graceful degradation option for the dumb things. We will also be careful to check all of our work to make sure it passes both HTML and CSS validation tests. Unfortunately, the average page size keeps rising every year. It's up over 2,000K. However, we are going to be responsible developers and try to keep our designs under 500K using different techniques. This will make our smart phone users very happy. We will be exploring in depth some new technologies. As we do, we will examine when and where it makes sense to implement these. So that wraps up the introduction. We've just taken a look at the project we will build and how we will provide for older technologies and build valid, fast pages using newer technology where appropriate. So that's it for the introduction. In the next module, we will build a start file. Building the Start File Overview In this module, we will build a mobile first responsive start file with all the necessary pieces in place. First, we will examine the basic pieces of code needed for a page to work properly. Next, we choose how to ensure a common base for styling. Then, we need to choose a method of using media queries to target our CSS to different screen widths. Finally, we'll jump into brackets and build a start file from scratch. In order to get a basic website to work with today's browsers and devices, we need to include several HTML and CSS items. First, we need to tell the phone browsers not to lie about their real width by including a meta tag. In this style sheet, we will stop the phone resize font problem and then reset all of the elements to follow the same box model. What this means is that if you set the width of any object to add margin, it becomes larger by that amount. When you add padding, it stays the same size, but the space inside is reduced by the padding amount. Can you imagine the headaches we used to have when some browsers would remove both margins and padding from the overall size and others browsers would not? In order to keep the CSS organized, I like to create separate files. That way I don't put the wrong code in the wrong place. This CSS Reset or CSS Normalize is a series of rules that tries to level the playing field so rules you write look the same across all browsers. Small screen rules typically apply to phones. Medium screen rules typically apply to tablets. And large screen rules typically apply to large desktop browsers. Some developers will add more style sheets for finer control of the overall design, but I have found these three are typically enough. If you load the small screen rules first, and then the medium rules, and finally the large screen rules, then you're set up to do mobile first design. In our last slide, I brought up using a CSS file to remove all differences from all browsers. There are many people who have written CSS Resets and CSS Normalizers. If you select a CSS Reset, it will attempt to remove all default styling. Or if you use a CSS Normalize, it will leave some default styling in place. Both work, and you should plan on using one or the other. I personally prefer a reset. Media queries are the cornerstone of responsive design. They allow you to target your CSS at certain screen widths using breakpoints. It is possible to have a start and endpoint for any media query. For example, you could put a media query in the small screen CSS that started at, say, 320 pixels and ended about 500 pixels. In the medium screen, you could then start at 501 pixels, where the small screen ended, and continue to 960 pixels. Then in the large screen, you could start at 961 pixels and go up to, say, 1600 pixels wide. While this is possible, it is not a good way to approach styling a site. For example, what happens if the screen is less than 320 or larger than 1600? You could solve the too small and the too large problems by removing the min-width from the small screen and removing the max-width from the large screen. Even though this is an improvement, it still has some inherit problems. For example, if you wanted the footer background color to be green for all screen sizes, you would have to write that rule in every single style sheet. Now let's look at a progressive enhancement approach to styling your site. In my experience, most of the colors and styling are the same across all screen sizes. This gives your customer a unified look and feel regardless of what device they are using to visit your site. The rules in the CSS Reset should be applied across all screens and devices, so we will not use a media query in the reset. The small screen rules establish the brand and general look and feel of the site, so we want those rules to also apply across all screen width. Therefore, we will not use a media query in that file either. The rules used in the medium screen only apply after the screen is too wide to look good on a phone, and then we start adding overrides. So here we will use a min-width of, say, 500 pixels and start making changes to the design appropriate to tablets. Similarly, the rules used in the large screen only apply after the screen is too wide to look good on a tablet, and then you add overrides. So here we will use a min-width of, say, 1140 pixels. Notice that in both cases there is no upper limit to the media query. The auto dealership project is a perfect example of what we are talking about. On the small screen, we establish the look of the header, the navigation, and the footer. Once we move to the medium screen where there's a little more room, we will display the cars in two columns. Notice that the header, navigation, and footer are unchanged. As we increase the screen width, we will now add CSS from the large screens where we use rules to display the cars in four columns. Once again, the header, the navigation, and the footer are still using the same rules from the small screen. Well, there is one tiny change here to the navigation items. Here's the styling information for the auto page we just saw. Notice that most of the CSS rules are in the small screen file with less rules in the medium and large screen files. Setup I've created a start folder here on the desktop, and in that I'm going to create a css folder and an images folder. I'm going to open the Start folder in Brackets and create a new index.html file. From my snippets in the demos I have the very basic HTML for a new file. Let's create four CSS files. (Working) Now inside of the index.html, let's create links to all four of those. We will intentionally load them starting with reset, and then small, and then medium, and last large. In the body of our document, let's create an h1, and then we'll create a paragraph with some filler text in it. Let's take a look at what we have in a browser using live preview. Let's pull up a new tab and get a copy of a CSS Reset file. We'll select all of the contents of the HTML5 Reset, open our reset file, and paste it. Notice when we paste it that the size of the h1 reduces and all of the extra padding and margin disappear. The next piece of code that we're going to add will be in the small-default. This is found in our snippets.txt file, and it is two statements. The first one resets the iPhone and the Microsoft phone so they don't change the size on orientation. That's a problem with some of the phones. The second thing is the natural box model layout, which we discussed earlier, which basically means that margin is added to the outside of the box and padding is added to the inside of the box. These are two pieces of code that you need in all your responsive web design projects. Media Queries Earlier when we were talking about media queries, we decided that the resest.css was supposed to apply to all browser widths, so it did not have a media query. The small-default also applies to all browser widths, so it does not have a media query. We actually don't introduce a media query until the medium.css, which is targeted somewhere around our tablets. So let's grab a piece of code from our snippets.txt, paste it. Here's a basic media query with a start point only. It does not have an end point. Any rules that we add will be between these two curly braces here and here. Let's start by returning to the default and setting the h1 color to red, and you can see the change over here to the right. When we go to our second screen, which is medium, we'll now override that and set our h1 color to green. Notice that we do not see the change over here until we widen the browser until it passes the point of 560 pixels, and then this CSS kicks in. Let's now copy that media query, go to the large screen. This time we're going to pick up at say 1140, and instead of green, maybe we'll use orange. So now as we continue to get a wider browser, at some point that kicks to orange. So now we have all three of the rules being applied to small, medium, and large screens. Now let's do one more test. Let's go back to the small-default. In this case, we're going to set the paragraph color to aqua, and you can see the change instantly over here. Now we're not going to override that in any of the other files because we want that to be the default across all browser widths. So without any other changes to the medium or large, we can see that the aqua color stays throughout our entire design. That'd be an example of your header, or your footer, or maybe even you navigation that doesn't change across all device widths. Mobile Challenges Now we're going to take a look at our site on a mobile device. In order to properly demonstrate this, I've opened two tabs in my Chrome browsers. The first tab is going to be the standard page displaying full width. In the second tab, I'm going to access Google's inspector tools. Now they've got a really nice device toolbar up here, which allows you to show your site on many different mobile devices, and you can even create your own. Notice when I bring it up on an iPhone 5 that I'm getting the green header text. If I go to my regular tab, you can see that green doesn't kick in until after my browser crosses the width of 560 pixels. Even though my iPhone 5 has a CSS pixel width of 320 pixels, my phone is lying to the browser and pretending that it is greater than that amount, somewhere above 560. What it's trying to do is display non-mobile friendly sites so that you don't have to scroll sideways. The problem with that is you have to have a magnifying glass to read the text, so this is really not a good solution. So what we're going to do is tell the phone to not lie about its width and to not try to squeeze all of the web page content between its left and right sides. So we'll return to our index.html. From the snippets, there is a piece of code called the do not lie statement, and we're going to paste it somewhere in the head of our document. This meta tag has a name of viewport, and basically what it says is report your width as the device width, not some fake number that you're going to make up, and then set the initial scale at 100%. Now I've added an additional parameter called maximum-scale=1. This is a hotly debated topic. If you include maximum-scale 1, you will prevent your end user from zooming in and your web page. Now if it's a well-designed web page, the user shouldn't need to zoom in. That's my argument, and that's why I include it. Another reason I include it is that when users download apps from the Web Store they don't expect them to zoom in, and most regular apps don't zoom, so why should a well-designed web page zoom? So, I like to include it. If you want to be part of the crowd that wants people to zoom, remove the comma, the maximum-scale=1, and your page will start at 100%, but can be zoomed in by the end user, which then introduces horizontal scrolling, which in my book is a terrible thing. Let's save that. Let's now return to our browser, and we can see that it's now showing the red title, which is appropriate since red is for small screens. Let's now make it a little bit wider and take a look at a tablet. Tablet is showing green, which it should. And then of course, if we return to our desktop and make the screen wider so that we pass the 1140 mark, we now get orange. We have now successfully built a mobile first responsive template. First we reset all the default styling using a Reset CSS. Next, we included code to stop phones from resizing the font when rotated from landscape to portrait and back. Then we added code to standardize the box model across all browsers. Finally, we prevented phones from lying about their actual screen width using a meta tag. We are now ready to improve our start template by ensuring we have proper semantic markup. HTML Semantic Markup Overview Let's review semantic markup for a basic web page. First, we will review semantic and non-semantic elements. Then we will review why semantic markup is important. Next, we will add semantic elements to our start file. And finally, we will talk about wayfinding on the web. With the introduction of HTML5, several new elements with semantic meaning were introduced. We still have the block div element and the inline span element for general purpose. There's several advantages to using semantic elements. It makes your site meaningful to search engines. It makes your code more readable and easier to maintain. The biggest advantage is that it makes your site more accessible to people with disabilities. In the past, we would have used a div with a role to identify meaning. There were not a lot of roles to choose from. If you try and use roles with the new HTML5 tags, you'll get a warning when you try and validate your code. Now let's pull up our template from the last module and add some additional code. I've included a copy in the demos.zip file from module 3, if you need it. Between the open and closing body tags we will create four new sections. The header section, which is for the company name, the logo, and sometimes social icons. The navigation section, which is for within site links. The main element often contains section, article, aside, and other semantic elements. Finally, the footer section, which contains the copyright information, administrator links, and other stuff that typical users care a little less about. Wayfinding As long as we're talking about being organized, let's also talk about a very important design principles called wayfinding. When a user drops into a page on your site from anywhere, they should know exactly where they are. Remember that Google indexes pages, not sites. Using a company name and logo in the header of every single page will really help with this. Using a page name and activating the current menu will also help. If your user chooses to bookmark your page, this information should also be part of the bookmark. Let's take a look at a couple of websites and see how they're doing with wayfinding. Here's the team page from the Workflow Solutions website. Notice the menu item Team is a different color than the other menu items, so it's easy to tell that that's the page I'm on. If you look at the page title, it is exactly the same words as the menu item, so there's a match. If you look up in the tab, you see the company name, Workflow, and then you see Team next to it. Other pages on this site also have a direct match between the page title and the menu item that's selected to get to that page. Here's a web page I've built to demonstrate improper wayfinding. Notice that the page title says Knowing Where You Are. None of the menu items say Knowing Where You Are. If we click the What is Proximity menu item, it takes us to a page titled Being Close Together. Once again, a mismatch. What is Alignment. Well, here's a little closer Alignment of Things. I can probably make the connection between that page title and that menu item. But look up here in the title. It says Lost in the internet. Nothing on the page itself says Lost in the internet. The site name says Lost on the Web, so even there we have a mismatch. And as we go between different pages, the page title up here does not change for any of the pages that I'm on, and none of the menu items activate when you click on them. Now let's jump back to our text editor. Let's remove the default styling temporarily so that we can see the code we're doing without any CSS interference. Since the company name is the most important thing in the header, I will use an h1 tag. If my site happens to have a tagline, I will use an h2. Since the page name is the most important thing in the content of the site, I will use another h1 there. If there's subtopics on that page, I will use h2s. Remember that the title tag in the head should reflect the company name and the page name. In this module, we reviewed semantic elements and why they should be used. We added semantic elements to our start file. And finally, we discussed why wayfinding is important. Now we're ready to update our template even more using a CSS preprocessor. CSS Preprocessor Setup Overview In this module, we will update our responsive template to use a CSS preprocessor. In this module, we will review the CSS preprocessor workflow. Then we will modify our template to include an SCSS folder and move the existing style sheets around. Next, we will demonstrate two different preprocessors to create our CSS for us. Finally, we will explore using three powerful benefits of a preprocessor, partials, imports, and variables. Let's examine how a CSS preprocessor fits into the web page workflow. A typical web page consists of scripts, images, CSS, and other media all laid out in an HTML file. This file is then delivered to a web browser. A CSS preprocessor allows us to write our CSS faster and to even minify it. For example, we can use variables, combine files, perform math functions, and lots of other really cool stuff. We're going to create our design files with a .SCSS extension. Then we'll have a preprocessor combine these files and write a single minified CSS file, which will then be linked to the HTML file. There are many programs that will watch your SASS folder and automatically create a new CSS file whenever a change is detected. In this course, I will demonstrate a free application called Koala.app. Adobe Dreamweaver now has a preprocessor built into it so you don't even need an external program. If we were to run our template through an HTML speed checker, we would get a suggestion to reduce the number of HTTP requests by combing our CSS files together. This is one way using a CSS preprocessor is really going to help us. Let's jump back to our code editor and make some additional improvements to our responsive template. There is a copy of the template in the demos folder if you need it. Template Modification Here in the desktop I have a copy of the start folder from module 4. We'll start by creating a new folder for our SASS files. The folder name is going to be scss. Inside of that we'll put all of our partials, as well as our combining file. Inside our scss folder we need four partial files, a reset, a small screen, a medium screen, and a large screen. We're going to take these, which already have the appropriate names, and move them to our scss folder. We're then going to change the file extension from css to scss in all four cases. To tell our CSS preprocessor that these are partial files, we're going to start each one with an underscore. Next, we're going to create a file that combines these together in the appropriate order. Let's open up our text editor and choose File, New, and then File, Save As. We'll name it styles.scss. Notice there's no underscore at the beginning. CSS Preprocessor with Koala.app In our text editor, let's start by importing our large SCSS file. Notice that I do not have the underscore at the beginning nor the file extension at the end. That's not necessary. Now let's open our Koala app, take our start file, and drag it into the left hand pane. It then finds the scss folder and styles.scss because this file does not have an underscore at the beginning. If we select it, we can have some different options showing over here to the side. I usually turn off the Source Map and then hit Compile. Let's open our start folder and see what happened. In the css folder we don't have anything. In the scss folder we now have a map and a styles.css, both of which are in the wrong place. So let's go ahead and move those both to the garbage. Let's return to our CSS preprocessor application, and we'll reset the path. We want it to go into our css folder and be named styles.css. Click Save. Now let's compile it. We get a success message, we open up our CSS folder, and there is our styles sheet. Currently it is blank. We need to make some more changes. In our index file we currently have links to four nonexistent style sheets. Let's delete three of those and change this one to styles. Save it. We'll save this file. Now let's open up our large partial file and add something really obvious like body background-color red. Save it. Come over here, make sure it's compiled, and successfully. If we now open our styles.css, we can see that the body has a background color of red. And if we open our index file in a browser and make it wide enough, sure enough it turns red. So now we have our workflow in place, and we can see that by modifying a partial file, in this case _large.scss and then processing it through our CSS preprocessor, in this case the Koala app, it then spits out regular CSS for us in our CSS folder. Let's now go back and finish styles.scss. We do want to import large, but it's the last one that actually gets imported. The first one we're going to import is the reset. The second one we're going to import is small-default. The next one is medium. And finally, we have large. Now our Koala app is set up to auto compile, and we've done that over here, so we really shouldn't have to click the Compile button every time we make the change. Let's open our styles folder, and here we can see everything from our reset partial file all the way down to our large screen, so it is combining the contents of all of these together. So let's run one more quick test. In small-default we'll do body background-color, and we'll make it orange. Then let's go to our medium screen where we'll make it, say, green. And we already have in our large screen that it's red. We're not going to compile because we're going to hope that it did it automatically. We'll open our browser, we'll refresh the page, we'll go down to medium and to small, and we can see that those colors are coming through. Now let's take a look at the CSS that's being generated. Down at the bottom you can see everything is laid out in a nice readable fashion. Let's jump back to our Koala app. Here we have Output Styles. What we're looking at is nested. Let's click on expanded. Compile it. We can see that there's not a lot of difference, but this ending bracket has been moved down past the bottom line. Let's look at compact. Compile. There we can see the difference again. And then let's go to compressed or minified. Complete chaos, but minified is the fastest, the most efficient way to deliver CSS. So that's the one we're actually going to use for our final product. Let's come back to our styles.scss file. Here we're simply importing the partial sheets as they currently exist. One of the problems that I sometimes have is in my medium and large screens I have a media query. This media query ending curly bracket sometimes gets lost and messed up, so I'm actually going to move that media query out of the medium partial. So let's get rid of this and then remove the media query with its closing bracket. Now let's go back to our styles and actually wrap that around the medium import. So this gets cut and put inside of this media query. So there we have medium now living inside of a media query living inside of styles.scss. Let's do the same thing for large. Make sure all of our files are saved, I'll reopen our browser, hit Refresh, and everything is working just as it did before. And if we take a look at our app and actually look at it in a way that we can read, we can see that our style sheet contains the media queries for medium and large screens laid out just the way they were before. SASS Variables While we're here, we're going to add one more partial to take advantage of a very powerful CSS feature called variables. Let's make a new file. We'll save it as _ to indicate it's a partial, variables.scss. Put it in here with these. Now we need to go into our styles, and right after we do the reset we're actually going to import the variables. And then we'll use those variables throughout the other three scss files. Let's now return to our variables. Variables start with a dollar sign, and then we can make up a word. I'll call it primaryColor, and we can give it a hex value. That's going to be a green color. We can now use this primaryColor in our SCSS style sheets. So let's come down to our small one. Here we have a body background-color. Let's set a heading 1 color, and we'll set it equal to primaryColor. Here we have a warning that we've used a variable, but we have not defined the variable. And if we look over here at our variables file, we can see that I forgot to save it, so we'll return, we'll save this, and now when we compile it we get success instead of a pink warning. Let's go to our index, and inside the main we'll set up an h1 of Hello World, and that should be green. Open up our browser, hit Refresh, and there it is in green. Now let's look at our styles one more time. There's our h1 color. Notice it's written in basic CSS format, which is exactly what it should, but we on the back-end were able to set up a variable and use it. Let's do a couple more of these. In the small-default we'll set our footer color background-color also equal to the primaryColor. We then go to our index and actually put something in the footer. We then hit Refresh. We can see Copyright by me. There's that green color that matches the h1 color. So, here's the power. You go to your variables, you decide you don't like that particular shade of green, and we change it to some other random color. It's now purple. Save it. That variable is now cascaded throughout the style sheet and both colors are automatically updated dynamically. Let's take a look at a couple more things. Inside of our small-default I'm going to add a comment. I'm then going to put a bunch of space and put a section for navigation. I'll then put a bunch of space and put a section for the main part of the document, and then a bunch of more space and the footer. This is going to help me visually keep my CSS organized by inserting comments and lots of white space. This is not good to deliver to a client. But if we take a look at the CSS that's actually output, you can see that all of the comments that I put in there and all the extra space I put in there is not in my final output, so it doesn't affect the speed of my final web page, which is really cool. And then, of course, if we go down here to compressed, we can see that all comments are gone. They're stripped out, disappeared. CSS Preprocessor with Dreamweaver So far I have been using a free program called Brackets and a free program called Koala app in order to build our SCSS website. Now I'm going to demonstrate Dreamweaver just in case you want to use that one. Here I have a sandboxSRC folder, which is currently empty. I'm going to drag my start project file into there and then open Dreamweaver. Inside Dreamweaver I can see the start folder with all of the files from the previous video. Up here under the drop-down, if you choose Manage Sites and you manage the current sandbox site, which it the one I'm working in, there's a site set up, which allows you to select your local source folder. There's a Servers tab, which allows you to automatically set up FTP so that every time you hit Save on your local machine the file you're working on is automatically FTP'd to your remote site. This is really nice if you're trying to test your stuff on mobile devices. The next tab is the one we're looking at. By simply checking this box, Enable Auto Compilation, you can turn on SASS file output. Here are the same four options we saw previous in our Koala app. There's also the output, which we can set up as the same folder or, in our case, we would want to send it to the css folder. We then set our source folder as scss, and we won't worry about these other ones. Click Save, and we're done. Now we're going to open our index in a local browser. Go to Dreamweaver, and if we go into the small view, which is currently orange, and we open our small-default, which currently says background-color orange, and we'll change it to magenta. Save it. We then hit Refresh, and our change is automatically processed through the CSS preprocessor built in to Dreamweaver and then loaded in our file. Finishing the Template I've moved my start file back out here to the desktop, and I've opened it in Brackets. Let's now go clean up some of the stuff that we had in there before. Start with our index page. We're going to remove everything inside of the header, nav, main, and footer tags. Save it. Let's now start with our styles.scss. This is going to stay the same. No changes here. Let's then start with our reset, which we're not going to touch. Then we move to the variables. Let's go ahead and take out this default variable. Save it. Let's then go to the small-default. We'll leave these first two because they're part of our template, and we'll remove this default here. Save it. Let's then go to medium, make sure it's cleaned out, then large, and make sure it's cleaned out. We now have on our desktop a start folder that's ready to go for any project that uses CSS preprocessor. In this module, we looked at the workflow when using a CSS preprocessor. Then we modified our template and used two different applications to create our CSS for us. Next, we're ready to build an auto dealership web page using our responsive template. Auto Dealer Page Structure Overview Over the next two modules we are going to learn how to integrate SASS to build a realistic web page that is completely responsive. Our sample will be an auto dealership. However, as you work through the example with me, imagine how you could swap out the colors and graphics to make a page for your next client. As we build the auto dealership page, we are going to learn some advanced CSS, as well as some really cool things you can do with SASS using a CSS preprocessor. When we build the header, we will learn SASS variables and nesting. When we build the navigation and footer, we will learn SASS darken, CSS transitions, and last-child. In the next module, we will add the banner. When we add the cars, we will learn SASS math operations. When we build the blog topics, we will learn nth-child. And in the last video, we will cover box-shadow. So let's get started. Building the Header From the demos file grab a copy of the start folder and open it in your text editor. In my case I'll open it in Brackets by dragging it over here to the left side. I'm going to also open the index page inside of my browser. In this case it's Chrome. This is what we have so far. Here's the header of the document, which you can see here. We have four links in place, which you can see over here. The main part of the page is basically empty. And, of course, the footer information is in place. There is no CSS at this point, so our next step is to open up our CSS preprocessor. In this case I will be using the Koala app. I'm going to take my start folder, drag it over here to the left side to load it as a project. I will now right-click and set the output path to the css folder, and I'll change the name to styles. That matches line 12 in my index.html. Click Save. In my case, I'm going to turn off the Source Map, compile it. Now when I hit Refresh I can see that the reset.scss, which I loaded from HTML5 Doctor, has kicked in and has reduced and eliminated all of the default styling so that I'm left with just a basic text with occasional bold thrown in. Let's start by working on the header of our document. We're going to set up two colors in our variables.scss. Variables start with a dollar sign. The first one is primaryColor, the second one is secondaryColor, and I'm just making up these words. While we're here we'll also add a variable for the font-color, which will be a dark, dark blue. We'll save that and go to our small-default. Let's put in a CSS comment inside the header, let's do a background-color, and instead of using a hex value we'll go ahead and use the variable primaryColor. Let's save that, and there we can see that dark steel blue in the background of our header. Let's set the font color to be the variable secondaryColor, and there's that. We'll do one more thing, and that is push the text away from the left edge and give some space at the top and bottom of the header. Now we're going to be using this 2% value over, and over, and over throughout our site to push things away from the left edge and the right edge. So I'm going to turn that into a variable. I'm going to call it gutter. Now when we save this we should get an error, and we do. We've used a variable without first defining it. Let's switch to our variables.scss, create a new variable called gutter, and give it a value of 2%. Let's make sure we have the compiled version, hit Refresh, and there should be no difference. Now we're going to style the header 1 and the header 2. We'll do header h1, end of h1, we'll do a font-size, and we'll set it to 2rems, which is twice the base font, which by default is 16. Hit Refresh. You can see now that that is now double its previous size. But notice that I used the word header again and prepended it to h1. Instead of doing it this way, I'm actually going to use the CSS feature called nesting, which allows me to put all of the rules that are supposed to be prefaced with header inside the header selector, and it will automatically add it for me. So let's start by looking at our output CSS. If we scroll down to the bottom, we can see that the header h1 just like we typed it here. So in this case I'm going to remove it, cut it, put it inside of my header selector, save it, and now let's take a look at it. We can see here the rules for header. We can also see here the rules for header h1 and that h1 has been prepended with the word header even though in our default it wasn't actually there. Let's do the same thing for our h2. So try 1.5. That's probably going to be a little bit large. But once again, looking at our CSS we can see that header h1 and header h2 are both listed with a header in front of each one. Now it might be a little easier to read if we were to switch our processor to expanded, and now we can see them each on the left edge, and that's probably a little easier to consume. We will take these out when we're all done by switching this to compressed, and you can see all comments have now been removed from our CSS. So that's the principle of nesting. It's a great feature of a CSS preprocessor. Now let's tackle the font. I'm going to be using a Google font called Lato. So I'm going to jump into here, click the plus button, bring it up. I want to customize it because I want to load different fonts for bold and lightweight. I'm actually going to load the 300 weight and the 700 weight. Now I can switch back to Embed, copy this link, put it in the header of my index page. Now go down to Specify in CSS, copy this, and this time instead of putting it in the body I'm going to actually put it in my variables. So font-family is going to be Lato with a backup of a sans-serif. Let me turn this into a variable called defaultFont. And now when I go into my small-default and I set the body font-family, instead of typing Lato, I'm going to put the variable defaultFont. Now if I've spelled that correctly, I should not get any errors when I compile, and I did not. Let's go back to our project, Refresh it, and we can see now that it's been switched. Now there's another thing that we need to take care of in the variables. We have a normalWeight, and we're going to have a bold. If we go back to our index, we can remind ourselves that we loaded the 300 and the 700. So the lightweight will be 300 and the boldWeight will be 700. Copy that, go back here, set the font-weight to normalWeight. And down here in the h1 I will also set the font-weight to normalWeight. So then we could copy that and apply it to the h2. Now both of those are at normalWeight. Now the next thing I want to have happen is I want the second subtitle to be the same width as the h1, so I'm going to come in here and play with the font. Let's try 1.2. That's a little bit closer. Let's try 1.1. That's even closer. Let's go to plan old 1.0. That's a little too short, so we can try 1.05, and that's pretty darn close. So now I have a nice visual block up here for my logo, and my header is ready to go. Building the Navigation Now let's tackle the navigation. Once again, I'm going to start with one of these very visual headers, change it to NAVIGATION, and then we'll set up a block for the nav. Let's start by throwing a background-color at it. This time we'll use our secondaryColor, and there it is behind our four links. Now instead of being stacked, we want these to float left. Well, we do that by talking to the list items. Once again, instead of coming down here and doing nav ul li, we're going to nest it inside the nav selector and just put ul li. Well, we want those things to float to the left, and since there's four of them, we each want the width to be 25%. Now this of course wouldn't work if you had five navigation links. So now they're 25%, and they are stacked left to right, but we've lost the color, and here's why. Whenever you float something, it takes it out of the document flow, and since there's now nothing inside the nav because it's been sort of lifted up to a second layer, the nav collapses. So we need to use some CSS to stop things from collapsing. Inside the demos for this unit inside the snippets.txt file there is a piece of code that I want you to copy and paste in the bottom of your default CSS. It looks like this. Now what we have to do is assign the class clearfix to any element that's collapsing on us, and it will stay open. So back to our index. The navigation element is the one that's collapsing. It's also the one that has the background color. So class=clearfix, and now you can see it stays open and the background color shows through. Now we need to do a lot of work to these links so they look like normal navigation links and not like links inside of a document. First thing we're going to do is separate each one with a vertical line. Now we want this to be a smart line, one that we can use as an overlay on any color. So instead of doing a border-right and say red, which would be a very specific color, not exactly what we want, we're going to change it instead to an rgba color. So we're going to take whatever the base is, and we're going to overlay it with something that's dark. So we're going to do black, which is 0,0,0, comma, and then the last value is an opacity value, and I'm going to use 30% or 0.3. Now when we refresh it you can see that the line is simply a darkened version of the color behind it. We'll do a similar thing at the bottom of the navigation bar because this light gray sort of blends into the white below it. So instead of being a border-right, it'll be a border-bottom, and it will still be at 30%, and now you can see a very thin line going across the bottom separating the nav bar from the white below it. Now there's no reason to have one at the top because the contrast between the header and the navigation color's already pretty sharp. If we take a look at this on, say, a very small phone, one that's 320 pixels, we can see that there's a line between New and Used, between Used and Service, and between Location there's also, over here at the right, a very thin line, but there is not a thin line over here at the left. So that kind of bothers me a little bit. So I'm going to now remove this thin line from only the last one. So it's going to be ul li:, this is called the pseudo class, last-child. In other words, do this to the last list item inside the unordered list. And we'll simply say border-right, and we'll turn it off. And now you saw that line disappear from the right side of Location. Now we're going to talk to the links, so ul li anchors. Lots of rules for these. The first thing we're going to do to the links is make them blocks. Now watch what happens to my pointer as I move over the link Service. You can see it changes to a hand. But when I click over the area next to it, it is not clickable. But we want that entire 25% to be clickable because we're going after it with our fat finger, and we need as large a target as possible. So display: block is the solution. Hit Refresh, and you can now see a hand there, as well as all the way over there. Now let's align the text to the middle of each block. We'll set the font-weight to bold by using our variable boldWeight. We'll then add some space around them so that the text is not so smashed inside of the button. We use half an rem at the top and nothing at the bottom. Let's change the color. We use our primaryColor. And that line that's under each link we'll remove, and now we have that. Earlier, I talked to you about using rems as units of measurement. Normally up here in the body when I set the font-family and the font-weight I will also set the font-size to 16px. Now that is already the default, but I like to do it so that you know that that's what it's based on. And actually, when you go into your browser and you do a View, Zoom In or Zoom Out, what that's doing is it's changing the base font, and therefore anything that you have based on the base font, like this, is going to enlarge or shrink depending on what you do in your browser. When I mouse over these, I want the color to switch so the dark becomes light and the light becomes dark. Ul li a: hover. It's a pseudo class. We'll set the color, and we'll set the background-color. You can see here that I have an error because my CSS preprocessor is carefully watching over me to make sure I don't have any typos. In this case, I put an extra space between the colon and the hover. Let's save it, let's compile it, and it works beautifully. Refresh it. And now I mouse over I get a nice simple reverse of those two. The next problem we're going to solve is this snap that we're getting on mouse hover where the colors instantly change. We're going to smooth that out with a CSS transition. Inside of our unordered list list item anchor we'll add another rule here called transition. We'll transition the background over three-fourths of a second using a nice simple ease, comma. We'll now do exactly the same thing, but this time with the font caller. So those are the two properties that we're going to transition. Save that, Refresh, mouse over, and you can see now that over three-fourths of a second I get a nice smooth change between all of these buttons. During the last module I harped on you about wayfinding. Currently, we have a page title of New Cars. We have a menu that says New. That's close enough. New, New Cars. I think people are going to be fine with it. What I don't have is a visual indication that New is the selected menu. So let's come back to our index, and to the list item for New let's assign a class=active. If you use a content management system, they're all going to use different words. Now we can go back to our small-default. We'll add yet another rule on here, ul li.active anchor. The background for the navigation, as you can see on line 37, is the secondaryColor. I want to make the active button a slightly darker version of the secondaryColor. So I could go into Photoshop, find my secondaryColor, darken it a little bit, and use that hex value. Or, once again, I'm going to turn to the power of a CSS preprocessor and use that to darken it. I'm going to set the background-color and darken the secondaryColor by 10%. Switch to our browser, and we can see now a 10% darker for the active menu. Notice this next thing. This is really subtle. When I mouse over any of these non-active buttons, they switch to a dark background with light text. When I switch over this one, I don't get the same effect. So what I'm going to do is simply rearrange the items in my CSS stylesheet. I'm going to take the code for the hover color, cut it, and actually put it after the code for the active color. Now when I reload these are the same, but this one now responds on mouse hover, and I see the hover color switch instead of what I had before. Building the Footer Now let's tackle the footer. This should be a much simpler process. Once again, I want one of these nice in-your-face comments, and we'll start out with footer. First thing we'll do is make sure the width is 100%, we'll then set the background-color to match the header, which is the primaryColor, and there it is. Now within the footer I have a paragraph, so let's now talk to the paragraph. Once again, we use the power of nesting by putting the p tag inside the footer tag with all of its rules. We want to align the text to the center of the footer. We want to change the font color to the secondaryColor, and that gives us this. Now we need to push the text away from the edges so it doesn't look so smashed, .75rems. If the base font is 16, then that's going to give us a pixel size of about 12. Let's also reduce the font-size to slightly smaller. And there we have our footer. This works well. This does not work well. If we go back to our index, we can see that I've turned my phone number into an actual anchor with an href. The href equals tel: and then the phone number. That's so that on my smart phone, if I touch it, it'll actually make the phone call for me. So we need to handle now the styling of the anchor. Back to our small-default. We'll make another rule down here, p a color is also the secondaryColor. That should override that default blue. And there we have it, still clickable to actually make the phone call. Congratulations! You made it through the first half where we built the page structure for the auto dealership. We learned some advanced CSS, as well as some really cool things you can do with SASS using a CSS preprocessor. Now let's continue with the auto dealership page and build out the page content. Auto Dealer Page Content Overview We just finished the first half of the auto dealership page. In this module, we will continue by building out the content. As we build out the second part of the auto dealership page, we're going to learn some more advanced CSS, as well as some additional cool things you can do with SASS. In the last module, we built the header, the footer, and the navigation. In this module, we will add the banner. When we add the cars, we will learn SASS math operations. When we build the blog topics, we will learn nth-child. And in the last video, we will cover box-shadow. Building the Banner Now I'm sure you noticed when we went from the navigation to the footer that we skipped the main. We're going to jump back and tackle that now. I like to keep my CSS organized in the same order that my web page is organized. So after the body and the header and the navigation I'm going to insert a space for the main. Inside the main is the h1 representing the page name. We'll do a font-size of 2rems. We'll now set the margins so that the N on New Cars lines up with the P and the Q in our header. We have top, right, bottom, and remember the left side is 2%, but we have a variable called gutter, which is 2%. And then we'll set the color to the primaryColor, and that gives us this. We actually have a large banner image between the navigation bar and the page name. In order to do that, we need to jump back to our HTML. Inside the main tag between the opening main and the h1 for New Cars we'll set up a figure, and inside that figure we'll put an image, which has a source. Then we can go to our images, and there's the banner. Finally, we'll assign this a class=banner. We'll refresh it, and there it is. Now there's some CSS for getting an image to be scalable that's universal that works on smart and dumb devices, and this is how it works. Inside the main we'll talk to the figure.banner, and we'll simply set the width to 100%, which is the default, but that's okay. We'll still specify it. Now here's the magic, figure.banner image. The image width is always 100% of the figure width. And then later in our responsive designs we'll change the width of the figure to 50% if you want it half-width, or 30%, but the image is always going to be 100% of its containing element figure. Now let's come back here, let's reload the page, and there's our image. If we switch to Responsive, we can see that that image scales beautifully as we change our browser width. The next thing we want to do is add a visual line underneath New Cars that is solid color at the left side and fades to completely opaque at the right side. Inside of our index.html right underneath New Cars we'll insert a horizontal rule, and then we'll give it a class=fadeAway. Horizontal rules are typically forbidden in any design that I do, but in this case we're going to stylize it so it actually look decent. Inside of the main we'll go ahead and set up a horizontal rule .fadeAway. Make sure we're connected by setting the background-color to a nasty red, which we'll change here in a second. We'll set the height to 2 pixels, and then we'll turn the border to none. So now refresh it, and there we can see it. Now I want this border to end at the 2% in from the left and 2% in from the right. So, let's add a margin so top and bottom will be 0 and the left and right will be gutter. And there you can see it's popped in on the left to match the end, and it's correspondingly popped in on the right. Now the color background-color red is not going to cut it. Let's pull up a new website, do a search for css gradient, and you'll see this Ultimate CSS Gradient Generator. Now let's go ahead and switch this to be the primaryColor. Well here's the hex value for our primaryColor, and we'll drop that right in there. The other end is also going to be the primaryColor, but in this case we're going to take the opacity on the right side and drop it to 0. And instead of going top to bottom, we will go left to right. Now there's a lot of code in here to handle all kinds of browsers, but this particular effect is not very important. If it's a solid blue line for a dumb browser, I simply don't care. So rather than taking all of this nasty code, I'm simply going to take the correct code, which is background: linear-gradient left to right. Copy it. Inside my small-default I'm going to change this nasty red statement on line 85 to that. Hit Refresh. And it's hard to see, so let me go to the index, and underneath this I'll just drop in some text so it separates it, and now you can very clearly see the line starting dark and fading to nothing. Adding the Cars Gallery Since this is an automotive site, we should probably show some new cars on the New Cars page. So in our index.html I'm going to get rid of this filler text I dropped in here. We'll start with the figure tag. We'll give it a class of photo. We'll then put an image inside of it and link to one of the four cars in our images folder. We'll then add a figure caption, or figcaption, and we'll put a sale price there in dollars. This is what it looks like when we refresh our page. Notice that the image itself does not respond to my page width, so I need to add some more code in my CSS. It's very similar to what we did up here with this figure. So let's come down here, instead of banner, it's photo in both cases, save it, and now we can see the car is responding beautifully to changing browser widths. Now let's copy and paste this block of code three more times and change the car from black, to red, to silver, to blue, and then change the sale prices as well. Now if I look at it with a browser width of 320, which is the same as an old, old, old phone, you can see that it fits on the page just like it's supposed to. Now let's make some more modifications to these images down here so that the text and the image itself is not touching the left and right side of the screens. Here we have our figure as the full width of the screen. We actually don't want it the full width. We want to bring it in a little bit. So let's add margin. We'll do .5rems at the top and bottom, and then we'll go ahead and use that gutter variable, which is 2%, on the left and right sides. Now that's going to cause a problem. In order to see that problem, we'll put a temporary border red 1px solid. Save it. Hit Refresh. You can see that we have 2% over here on the left, but on the right side the image is actually going beyond the boundaries. Here's why. You've got a width of 100%, and then margin is added to the outside of that, so it's actually now 2% on the left, 2% on the right, which is 104%. So we need to reduce the width by 4%. So we could come in here and say 96%, and that would solve it. However, what if at some point we decided to change the gutter? Instead of a 2%, say we wanted a 4, or 6, or 8%. Now it's going to break our design. So let's come back to our variables. We have a gutter variable in here. Let's create a new variable called gutterdbl, and now we're going to use some math inside of our CSS preprocessor. We're going to take 2 and multiply it by the value of gutter. So now a double gutter is twice the value of a gutter. So if at any time this changes to say 3%, double gutter would instantly be 6%, and our math would still work. Let's take this variable, return to our small-default, and so now we have a width of 100% minus the value of gutterdbl. So in the case it's going to be 100% - 4%. Let's see if that works. And sure enough it does. We now have 2% left, 2% right, the figure itself is now 96%, so it fits beautifully on our small screens. Now this sale price needs to be moved over to the middle. I'm going to align the text to the center and set the color to the primaryColor. And here we can see in our inspector that the fake caption now has a color of primaryColor, hex value, and is text-aligned to the center. Now we can get rid of that nasty red line, and that's what our gallery should look like on a small screen. Modifying for Medium and Large Screens Now let's widen our screen out to represent a tablet. In this case, I don't want these images to be so large. Once we hit the tablet, I want to show two images in two columns. So in that case we need to go now to our medium.scss, and we'll add a section for main. In the interest of saving myself a lot of work, I'm going to return to the small. I'm going to copy this line of code from line 91, come to my medium screen, and I'm going to paste it. Now the width, remember I want them 2 wide, so that's going to be 50% - 4%, which is 46% in the end. This amount doesn't need to change because it's carried over from the small screen. So the only thing we really need to add is float to the left. Now we have the images stacked side by side, but the footer is now extending all the way up to just underneath the h1. Why? Because the main has collapsed, just like the navigation bar did in the beginning. But we have an easy, easy solution for that. Let's return to our index. Remember that in order to stop the navigation from collapsing we added a class of clearfix, which was tied to some CSS here in the bottom of our style sheet. So return to the index, find the main, add that same class, hit Refresh, and now the footer is down where the footer belongs, and our cars are now stacked in two separate columns. When we go to our desktop, which is the widest size, I actually want these to be four across. So let's return to medium. It's going to be very similar to what we have here, so I'll copy that, go to my large screen, paste it. I want 4 across, which is 25% minus the double gutter, which is actually 21 when it's done calculating. And Refresh. And now we can see four cars across. Now let's go look at our CSS before we jump away. Notice here the calculations of 21% and 46%. That's one of the really neat things about a CSS processor that you just, you've got to appreciate. Now we're not quite done with our desktop. This 25% for 4 menu items is great for small screens, but when we get to this wide of a screen, it starts to look a little unwieldy. So we're actually going to our large screen and turn this into a standard left aligned menu. Because the navigation comes before the main, I like to have that above it as well. The first thing we're going to do is change the width of the list items to auto instead of 25%, and that smashes them over there. Now remember, we are trying to keep some nice design going on here. Everything lines up on the left side at the 2% mark except for the menu. So now let's kick the menu over to 2%, which is our gutter value. So margin-left, and we'll use gutter, and now we have a nice alignment with the P, the Q, the N, and the N on New Cars. Those buttons need some additional space on the left and right sides. Let's do .5rem at the top and 1rem at the left and right, see if that makes them look a little better. There we go. That looks great. Now we're missing a line over here at the right of Location and a line at the left of New. So the one at the left of New is actually going to be a border-left on our unordered list. If you remember, all of our borders are simply a darkening of the color at 30%, and there's that line on the left of New. Now let's do the one to the right. And now we have a line on the right side of Location. Now as we move from large screen to medium screen you can see that our navigation switches from left aligned to justified left all the way to right. Building the Blog Columns Now that we have all of our cars in place, let's add a new section for blog articles, and we'll show you some additional CSS preprocessor tricks to make those line up nicely. If you'll open up your snippets.txt, starting around line 15 you'll see a bunch of articles. Let's copy those and paste them here on line 72. That'll save us a lot of messing around. You can see that this blog section starts with a h2, then we have a division, we have a bunch of articles, and then we close the division. And it looks like this on our small screens. Let's add a little bit of CSS to make this look decent. Now let's go in and talk to the division with a class of blog, and then we'll talk to each article inside of that, div.blog article. We'll set the margin to .5rem and our variable gutter. We'll also set the width to 100% minus the gutterdbl. Let's check the results, and we can see a 2% margin there and a 2% margin down there. Now we need to style the h2 and the h3. We'll come up here in the main section where we have the styling for the header 1, and we'll add styling for the header 2, header 3, and the paragraphs, which are inside the article tags. Here in our h2 we have a font-size of 1.5rems, we've set our margin top and bottom to .75, and on the left side we have a 2% variable, which is from our gutter. Then we take the color, and we lighten the primaryColor 10%. For h3 we do a similar thing, set the font-size and lighten the primaryColor, this time 20%. And then our paragraphs, we set a line-height of 130% to space the text out a little bit, and then we use the fontColor for the color, which is a variable we set up several modules ago. With this code in place, we're going to save it. We're going to get a CSS preprocessor error that the variable fontColor is not correct. So if I look here on line 96, I can see fontColor has a capital C for color. I switch to my variables, and here I used a different format. This should be a capital C to match the style that I've used for primaryColor and secondaryColor. I save that, recompile, I'm now successful. I reload, and now my blog topics are stacked top to bottom, they have nice spacing on the left and right, and my headings are the main color getting progressively lighter. Now let's jump out to our tablet. Here in the tablet we want them positioned side by side. So we go to our medium screens, and inside the main we're going to speak to the division with a class of blog and the articles inside of that. We'll float them left, and we'll change the width. The width is going to be the same calculation that we used up here. I'll save it, hit Refresh, and I can see that they are indeed in two columns. However, you can see that Topic 3, when it attempts to float left into this empty space, is running in to the bottom of Topic 1 because Topic 1 is taller than Topic 2. So what we need to do is set the first, the third, the fifth, and the seventh articles to all clear left. And the even ones, 2, 4, 6, and 8, which are supposed to be on the right side, should not clear left. So let's come into our medium. We'll talk to the div.blog article. But we're not going to talk to all the articles. We're going to use a pseudo class called nth-child. Well, which child are we after? Let's start with going every second child, so 2n means second. And what are we going to do? For now, I'm going to set the background color to red. Hit Refresh, and that's not what we wanted. We've got all of the even numbers, 2, 4, 6, and 8. We actually want 1, 3, 5, and 7. So now we have to offset the nth child by 1. There, now we have 1, 3, 5, and 7. So, all we have to do is add a rule in here that says clear left, hit Refresh, and now all the topics 1, 3, 5, and 7 clear left and move over just like they're supposed to. The other topics float to the right regardless of how big they are. We remove the nasty background color, save it, and our tablet is done with the blog topics. Now when we go to our largest screen, we want these to appear in three columns. Let's take what we learned here, copy it, let's go to our large screens inside of main, and instead of 50% we want 33.33%. Save it, hit Refresh, and they are now in three columns, except that the third column is completely empty. Well that's because this rule, declare every second one, is messing us up. So it should actually be third. Hit Refresh. Ew, that's even worst. Well here's what's happening. It's clearing not only the 2n+1 from this medium screen, it's also clearing the 3n+1. So almost every single one of them is being cleared, so what we need to do is undo the 2n from the tablet. So we'll switch this to 2n and say clear: none. So that'll undo what we had in the tablet, and then we'll go back and say okay, now this time we want 3n+1, and this is left. And now our articles are three across, and there's always one over here to the left. Adding the Wrapper So I've made my browser as wide as this video will handle, and all of the images continue to fill this screen. So if I had a huge 30 inch screen, you can see this would've quickly become way too big. So let's return to our editor, and let's limit the overall width of our design. Inside the index, I'm going to put a division around everything inside the body tag. I'm going to give it an id=wrapper, and I made the word wrapper up because it wraps the other four main tags, header, nav, main, and footer. This closing division needs to go down to the bottom just above the closing body tag. That's the only change I'll make to my HTML. I'll then go back to my large screen where we're having the too big problem and above the navigation I'll add a section for the body. First thing we'll do is talk to the div#wrapper. We'll start by setting its max-width to 80rems. We'll then set the margin to 2rems top and bottom, and left and right is auto. Now the auto actually means center it on the page. So hit Refresh. You can see that the auto gives us a gap on the left and a gap on the right. Now this down here sort of looks odd because it blends into the space around it. So I'm going to add a really subtle shadow offset horizontally, offset vertically, blur them out, and then a color. This should give us a glow all the way around the outside and not really a drop shadow, like that. You can see the left and right sides are identical. The top and bottom are identical. Now out here it's kind of boring, so I'm going to put in a repeating texture. Inside the body tag I'll do a background-image, go up one folder to my images folder, and I'll use this image right here. And now you can see very subtly out here on the left and right sides a picture of a car. The problem is it's now repeated behind my text, which is a poor design decision. So I'm going to come back to my editor, and I'll set the background-color to white. Now when I refresh it it's white inside with a very subtle texture on the outside. Congratulations! You made it all the way. We built the entire auto dealership page, learned some advanced CSS, as well as some cool things that you can do with SASS. Now let's look at some very simple modifications you can make to the template to accommodate your next design challenge. Modify the Design and Testing Overview Now we're going to take the auto dealership page from the last unit, and make some minor changes to give us a wider variety of possible designs. First, we will review the changes I made to the auto page. Then we will change the color scheme. Next, we will use various approaches to limit the width of main content areas. And finally, we will test our site for speed and compatibility. In the demos for this unit, you have the color scheme, which we will use to change the look of our site. You also have the Photoshop file, which we will use to add a body background, as well as the file generated by Photoshop just in case you don't have Photoshop. Finally, we have the start folder for the auto website. Changes to the Template So this is what our start file looks like now. I've added a search box in the upper right-hand corner of the header. When you click on it, it expands using CSS transitions. Here on line 30 you can see that when the import has focus its width is 8rems, up here on line 23 when it does not have focus its width is 6rems, and the transition between the two is seen here on line 28, over one half of a second. Another thing we've added is a yellow banner through the middle of our page advertising a summer sales event. Staring on line 129, you can see I have a division with a class of pop, and it has a background-color. Notice I've added an additional variable called accent, and you can see that variable right here, and I've added a new color. Then, starting on line 134 through 137, I've actually double nested several classes, a title class, a subtitle class, a copy class, which you can see here in the index on line 73 through 76. The third change is that I've removed from line 20 the division with an id of wrapper, which we ended with in the last module. That also required that I remove the closing div from just above the closing body tag. The fourth change that we've made is actually in the styles.scss. Instead of using pixel values, I've now changed the min-widths for the medium screen and the large screen to 35rems and 60rems. If you were to take 60 and multiply it by 16, that would give a breakpoint of 960 pixels, as long as the standard default font was 16 points. One advantage of using rems for your breakpoints is that if you use the Zoom In on your browser, you'll eventually be able to see the small screen version displayed in a huge browser because the breakpoints have enlarged as the base font has enlarged. Modifying the Color Scheme and the Width In the demos for this module there is a start folder, which we just looked at. There's also a color scheme.png file, which we'll open up in Photoshop. First of all, we are going to change the entire look and feel of our site by opening the variables.scss partial and changing the values for the primary, secondary, font, and accent colors. Here's what it looks like currently. It's got the blues, the light grays, and the yellow accent color. Here's the color scheme file. I'm going to start by selecting this dark red and pasting that as my new primaryColor. I'll then select this light tan, paste that as my secondaryColor. I'll then grab this deep brown, use that as my fontColor. This green color will become my accent color. I'll save it, open my CSS preprocessor, drag my start folder into the left-hand pane, right-click to set the output path, make sure it's the css styles, select it one more time and do a force compile, open up my web browser, do a refresh, and now I've got the red, the tan, and the new green for my accent color. The font color here is also the dark, dark brown. The really beautiful thing about our color variables is that the mouse over still works. The lines that divide the menu items, because they're transparent black, still look great. The darken effect used on the active menu darkens the new nav color and still looks great. Currently, everything in this page stretches at 100% to the width of the browser, and if you have a very large browser, the line length for the text or the body copy becomes increasingly difficult to read as the line length becomes longer and longer. So we're going to start by limiting the width of our design. Inside Brackets, let's open the large.scss, and up here at the top we'll list all four of the main elements in the body. We'll then set the max-width at 60rems, refresh it, and if you liked a left aligned page, you'd be done. Another modification would then be to center the page inside the browser for large screens. So we'll set the margin to 0 top and bottom and then auto left and right, and now it's centered. Currently, the header and the footer touch the bottom of the page. If you wanted to pull them away a little bit, then in the body we would set padding to let's try 1rem and 0 left and right. And now it's pushed away a little bit from the top and a little bit from the bottom. Another design I've seen frequently used is to have the header and the footer go full width and the rest of the page not. So we'll jump back to our Brackets, we'll simply remove the header and the footer from our list, save it, refresh it, and now we have that design where the header goes all the way across and the footer goes all the way across. We still have that gap here at the top above the header, which I really don't care for, and this blank space here at the bottom, which I also don't care for if the header and footer are full width. So we'll remove line 4, hit Refresh, and now the header touches the top of the page and the footer touches the bottom of the page. Navigation looks pretty good here, but we could make it stretch all the way across the page too, which is another version you could easily do by simply removing nav. That's a very nice, flat-looking page. Modifying Using Wrapper Divisions In the previous module, the search box was positioned over here at the extreme right. The company name and logo was at the extreme left, and the navigation items were also at the extreme left. The content was more centered on the page. So what if we wanted to move this search box in, the company logo in, and the navigation over so that everything was lined up, but the color still extended to the far edges? We'll start by opening our index file, and what we need to do is put a wrapper around each of these main elements. So here on line 21 the page header begins. Let me add a division with an id of headerWrapper. I'll then move that closing division down below the closing header tag and add a comment. Let me copy this one, come down to the navigation area, paste it, and simply change the word header to nav so now I have an id of navWrapper. Let me get to the main part of the page, I'll do the same thing, and this time it's mainWrapper. And at the footer do the same thing with footer. Now I'll copy the closing division with a comment and put it right after the closing nav, find the end of the main and add a closing division there, and at the end of the footer add a closing division there. That has absolutely no effect on the design of our current page. Inside the large.scss partial we'll limit the width of all four main elements starting with the header, the navigation, the main, and the footer, and we'll set the max-width to 60rems, and we'll adjust the margin to 0 and auto. So here's where we get the advantage of using a wrapper. Let's now return to small-default. Up here above the opening header selector, which has the background-color on line 18, we'll create a new div#, because it's an ID, headerWrapper. Then we'll move the background-color from the header and stick it in the wrapper and then refresh our page. So the wrapper extends on 100% of the page width, and the header only extends across this middle part so the logo and the search box stay above the page content. Now we can do the same thing with the footer. We'll create a new division with an ID of footerWrapper, we'll move the background-color from the footer to the wrapper, refresh it, and now that extends all the way across. Now if you like the navigation to be limited like this is, you're done. But you can extend it all the way across as well. Once again, we'll create a new selector for navWrapper and move the background-color and the border-bottom. So now the color and the line can be seen out here on the far left and on the far right. I'm going to go back to my Brackets editor and undo the changes I made for the navigation bar, and now the navigation bar is limited in width. This opens up an opportunity to put a graphic over here to the right and on the left when our screen is really, really wide. First thing I'm going to do is a screen capture of what I have currently in place. Here on the desktop is my screen capture, and this is what it looks like. I'm going to open this in Photoshop. Inside the demos file you have a background.psd file, which I have open, and you can work along with me if you want to modify it yourself. What I've done in this Photoshop document is first of all erase the white part on the left and the white part on the right, and then in my Layers pallet I've added a new folder called bodyimage.jpg. Within that folder I've added a white background, and then above that a stock photo over here of a happy customer driving away in a new car. I've used my Photoshop tools to blend the edges of this image from what they were to a soft white so that as the browser width increases beyond the edges of my screen it has a nice transition from the photo to white. The second image is on the left. It already has a white background, and it's a customer that's very appreciative of their brand new car. I then go in Photoshop to File, Generate, Image Assets. If I return to my desktop, I can now see my original file, which was from the demos for this module, and a new folder called background-assets, and inside of it is the body JPG with the happy ladies on each side positioned correctly. I'm going to copy that image and move it to the start folder, images folder, and now I have the bodyImage available to my editor. So in my large.scss I'll add a new selector for body and a background with a url of ../ to take me up one level, and inside my images there's the bodyImage. We'll add a new parameter called no-repeat. We also want to center the image left to right and adjust it so that it's at the top of the page. As we shrink it, it stays in position. We do have a problem though. The image is showing here underneath the main part of our page. So we will return to our editor, and in our small main we'll add a background color of white. Hit Refresh, and now this area behind here is white, and it covers up the spillage from our images. This is what it looks like on a really, really, really big browser. You can see I have a nice blend from the bottom of the shirt to white and also on the right and bottom lefts of this image. Modifying the Content In this final modification, we're going to leave the header, the navigation, and the footer alone, and we're going to limit only a portion of our main content. Let's return to Brackets editor. We need to start by making some changes to our index file. Right after the opening main tag, we're going to insert a section, and then we're going to move the closing section tag down just above this yellow banner. So let's scroll down, and there it is. Paste it. Then we have a portion of our page that we want to remain full width. And then we'll do another opening section and move that closing tag to include all of the articles for a blog just above the closing main tag. Save it. With those in place, we can now go to our large, and in the main we can add section max-width 60rems. We'll then set the margin to 0 and auto so that the content stays centered on the page. Now let's hit Refresh, and this is our new look. Our banner image, our four cars are limited in width, we have this nice pop in-your-face Summer's On Us Sales Event, and the rest of our content is limited in width. Testing the Page I've uploaded our finished auto site before we made the modifications to a public website. We're going to run four tests on it. The first will be a speed test. You can see that we got a Performance grade of A, and our page size is under the 500 kB target that we set for ourselves. The second test is a mobile friendly test provided by Google, and we passed the mobile friendly test. Now let's check the validity of our HTML, and we get a green no errors or warnings. And of course we need to check our CSS, and we get no errors found. Now let's look at several Windows-based browsers. Here we have Opera, and our page is working fine. Here we have Firefox on Windows, and once again it's working correctly. Here we're looking at Chrome on Windows, and it's acting just like it did when we were developing on our Mac. And here's Internet Explorer 10. As you can see, it does not work correctly on Internet Explorer 10. This blue area right here is the footer, and it has encroached behind all of our blog topic, and the footer is sitting over here in this empty block space. If we return to our code editor to our CSS reset, on line 34 we have a list of a whole bunch of elements that have been set to display as a block. For some reason, the element main was left out of this list, and Internet Explorer 10 does not know what the main tag is even though it's one of the foremost common ones used. So we'll save that, we'll then make sure our CSS is processed and compiled correctly, we'll then upload our new style sheet, we'll return to Windows, and refresh the page. Now we can see the footer stays at the footer of our page as it should. Let's now back up to Internet Explorer 9, which there might be some of those still around. Seems to be working beautifully. And back to Internet Explorer 8. Probably doesn't exist very much, and it's a good thing because our page doesn't work very well on Internet Explorer 8. Now let's take a look at our site on Opera on a Macintosh. Here's Firefox on a Macintosh, and here's Safari on a Mac. And we've already seen it on Chrome on a Mac. Now let's take a look at an older second generation iPad. Here's our site on Safari. And I'm using a program called Reflector 2 to show my iPad on my computer screen. And as you can see, the page presents itself just fine. In Chrome, we get exactly the same result. And in Firefox, it works there as well. Now I do own a device as old as an iPhone 4, but it doesn't have the ability to display itself on my computer screen, so instead I'm using an iPod Touch, which has a browser width of 320 pixels. And you can see here, it works fine. Over on the right, I'm using a newer iPhone 6, which has a wider display, and it works fine here as well. So that about wraps up everything. In this module, we reviewed the changes I made to the dealership page, I showed you how to change the color with only four hex values, and we looked at several modifications to the header, nav, main, and footer. And finally, we tested our site for speed and compatibility. Congratulations! You have successfully completed the first of four courses in responsive design. I look forward to seeing you in the next course where we discuss responsive images. 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 (61) My rating Duration1h 47m Released6 Jun 2017 Share course