5.1 Turn Style Tiles Into Style CSS

Hello and welcome back to Responsive Web Design Revisited. In our last lesson, you finished a foundational code, so you completed your vanilla version of your site. You've got all of your content in place and you got all of your responsive functionality in place, as well as all of your typography. In this lesson, you'll go through and you'll take all of the visual elements that you put together in your style tiles and you'll turn them into CSS and apply them over the top of the foundation that you created. Now what we have done is created an extra CSS file named style_01. And we then loaded that extra CSS file in after the main stylesheet that you've already created. And the reason that we're doing this as a separate stylesheet is so that you can keep the code that determines your functionality and your responsiveness separate from the code that determines the way your site looks. And that gives the ability to create many different types of styling over the top of that foundational code. So let's say that you make three or four different rounds of style tiles in Photoshop, then you can make three or four different stylesheets to go along with them and you can swap them in and out as you need to. And once more, we have Prepress running our live preview, so you'll see the changes here as we're applying our visual styles. All right. Let's start by adding the default text color. So we have our style tiles open. And the default text color is the same color that we have applied to the business name here. So we'll click on that layer and then CSS Hat will give us the code that we need. So we click that line and that copies the line of CSS we need and then we can add that in, as the default text color against body tag. And that has added that soft, slightly blue grey. Next up, we'll add our default link colors. So we want to set our colors for regular links and visited links as well as hover and active links. So we head back to our PSD and find the layer where we setup our link colors. Click that. I'm using Auto-Select Layer, by the way. Grab the line of code that gives us our color for regular links. Paste that in. And then same again for our hovers. [BLANK_AUDIO] And now when we save, you'll see the link hovers change. That's our regular links and hovers in place. Next up, we're gonna style our nav menus. First, we'll need just the default link colors and we'll add those in, in the same way that we did with our normal links, just paste in the color code. [BLANK_AUDIO] And that's our hover color. [BLANK_AUDIO] And now we should see, there we have our correct link coloring in our menus and that will also apply to our expanded nav menu. Then we need to apply some styling that is specific to the expanded menu and some that is specific to the collapse menu. So we're gonna match the media queries from our main stylesheet. And with our expanded menu, we know we want to have four pixel line underneath each of these parent menu items. So we'll setup the default border-bottom. And this code is setting a solid border, that's four pixels wide, which converts to 0.25rems and is color of white along the bottom of all of the links by default. And then what we wanna do is add in, couple of extra lines that will add these different colored lines when we're in either active or hover state. So this will control our hover state and these lines will control our active state. Now we will head back over to our PSD and we'll grab the color for the active. Now, unfortunately, Photoshop still can't give you the ability to put borders on only one side. So you have to, for a single-sided borders, just use a rectangle. And then you can still grab the color code for the rectangle that you've created to represent your one-sided border. Then you'll just have to rewrite this code, so that it says, the right thing. So we just want that to say, border-bottom-color and then we'll grab also the color for the hover underline. And same thing again, we just want to change that, so that it reads border bottom color. All right. And now when we save that and check out our expanded version of our menu, we have our underlines all in line looking just how we want. And now we can add the styling for the child menus in the expanded nav. So first, we'll grab the overall style for the whole child menu. Head back to our style tiles in Photoshop and we'll just click on the square that we've created to represent our child menu. You can just copy all three of these lines and paste them straight in here and then all you need to do. Let's just convert each of these pixel-based numbers to rem-based numbers, then we're also just going to add in a border at the bottom of zero width. And that's because each one of these list items is gonna have it's own bottom border, so it's not necessary for this overall background to have an extra bottom border down here. All right. Let's save that and see how it looks. [BLANK_AUDIO] Okay. That's looking pretty good. Then the last thing to do for our expanded menu is to add the right bottom-border underneath each of the child list items and right background-color. And we know we wanted it to have actually the same border color as the overall child menu has around the outside. So you can copy and paste that line and just change that, so it reads, border-bottom, so it only applies to that one side. And then we just need the background-color for those hover child elements. So just click the item. Copy the background-color and paste that straight in. And now, we should see our fully styled child elements. Beautiful. Now we can go through the same process with our collapsed menu. So this is the class that is applied when the nav menu is closed, the nav menu icon and this is a class when the menu is open. Now we can head back over to our style tiles. This is our closed class, so grab the background-color. Paste that in. We'll grab the color of the icon itself and paste that in. Now we also know, we want a border at the bottom that will be 4 pixels solid and we'll just grab that color. So, I'm just gonna paste in that line, so I can quickly grab the hex code and delete it and add that in there. And now, we can convert that to rem units, I'll save and there's our lovely icon. And you'll do the exact same thing for the open version and I have that code prepared already. You've already seen me that done once. You probably don't need to see me go through that process again. We'll save that and now, we have both of their icons. And while I'm at it, I'll also just paste in the card for the whole menu. So this again is the same process that you went through for the expanded version. So just going in, we grabbed all the colors from the PSD for the whole drop-down menu and the individual list items and there we have all of our coloring and styling in place. Now you'll notice that something is not quite right. We have some gaps down the side here. Now this is gonna be part of the process. You will find that when you start to apply styles, sometimes the layout won't be exactly how you want. And that's fine, because you can always go back to your base style sheet and make any adjustments that you need to along the way. So grab our vanilla style sheet and that padding is coming from the padding that we added to the wrap section, the wrap class rather. Now, all we need to do to work around that is just tell the stylesheet to ignore that padding when we're working with the header wrap element, so that has stretched out the menu. Now what we need to do is just add a little bit of spacing to the left of the logo and to the right of the nav icon and we can do that with a couple of extra media queries. So we'll drop these two media queries in to handle pushing some space to the left side of the logo. That's, that part done. And then we will also go down and find the default margin on the nav icon. And we'll add some margin off to the right side of it, so that's pushed that space in there. And now, all we need to do is just add one more media query, so that when that window shrinks in size, we have the right amount of padding off to the right side of the nav icon. All right. So that's the whole header area done. The navigation menus, both of them are working perfectly and are styled just how we want. So now we'll add in the hero unit styling. And once more, this is the same process. So we've just jumped into our PSD and grabbed the code for the background-color of the hero unit and the text color as well as the font sizing, the font weight and so on and so forth. These buttons were produced with the same process as the nav icon up here. So we went ahead and grabbed the background-color, the border-bottom color and the font color for each one. So let's see that applied. So there we go. Lovely. And that has the responsiveness in place that we already put together in the previous lessons. All right. And then we can take of our testimonials and there is not too much to do here. Because most of the styling is already in place, the only thing we are looking at is changing this to the blue color that we have laid out in our style tiles. So we'll just drop in the correct color code and that's all done. And the same thing happens here, we're just going to change the background-color, the header color and the top and the bottom-border. And those colors have all been grabbed via CSS Hat from the PSD. There's our background-color and our borders and our header color. And now we can put our feedback section coloring in. And this is also no different to what we already covered. So, it's just the same process in each case. You just jump into your PSD, grab the color codes and just apply them to the content elements in the classes that you've already created. So that's out of our dashed border around the outside. Our background-color. We've italicized this text. We have set up the header, so that it matches what we've put together in our style tiles and we've colored the source. And then the very last step is to style up our footer. So we're gonna change this background to the blue that we put together in our style tiles and we're going to change these social icons and this text to be white. So there's our background-color copied straight out of CSS Hat, white color font and our white colored social icons and that's it. Now the whole thing is completely styled up. So we've got our compact menu all looking exactly how we want it. We've got our expanded menu or working perfectly as well and looking just how we, how we design the inner style tiles and all the responsive functionality is completely in place and everything is working beautifully. So, at this point, we are almost done. The only thing remaining is to just to optimize what we've already built. So, in the next lesson, we will look at how you can use the picture HTML tag to conditionally load a retnet version of this logo. I'll see you in the next lesson.