- Step 1: Introduction
- Step 2: Exploring New Methodologies
- Step 1: Folder, File & Images
- Step 2: Reviewing the Initial Markup
- Step 3: Review the Images
- Step 4: Set up the base.css
- Step 1: Setting Up the Rows and Containers
- Step 2: Containers
- Step 1: Creating Columns and Cleaning Up
- Step 2: Clean Up
- Step 1: Styling the Banner Module
- Step 2: Styling the Header
- Step 3: Styling the Banner Content
- Step 1: Styling the Features and Photos Modules
- Step 2: Styling the Photos Area
- Step 1: Styling the Testimonials and Fact Modules
- Step 2: Styling the Facts Area
- Step 1: Styling the Press Area
- Step 2: Styling the Footer Area
- Step 1: Validating the HTML/CSS
- Step 2: Browser and Device Testing
Planning rows and CSS classes for website:
Good day and welcome to lesson three. This lesson is all about setting up the rows and the containers. First of all let’s look at the rows. Now, our layout contains a series of rows that wrap around entire sections of the layout, as well as inside sections of the layout. So you can see we have a row for the header, the feature, those images, we’ve got a row for the testimonials, and our recent press, as well as our footer. Inside we also have a bunch of smaller rows which wrap around different parts of the page. Now many of the outer rows seem to be unique, they’ve got different padding, different background colors, and even different text styles. In these cases, we could give each row additional modifier classes we can then use to style individual characteristics. Let’s start with different background colors. So here we have four individual types of rows, row–white, row–grey, row–blue, and row–dark-grey. Now some of the rows had different padding. And you’ll see that in some cases the top and bottom padding is wide, and some cases the top and bottom padding is many more less wide. And then we have special cases like the banner, and we could use a unique modifier, something like row–banner. So all of our classes would be things like .row for our module, and then we have modifiers, row–white, –blue, –dark-grey, and –grey. We then have our padding modifiers, row–padding-medium, and row–padding-wide. We also have our special one of row–banner. Now as you can see, at a glance we can immediately tell that they’re all related to the row model, module, and that they have modifiers.
Creating the HTML elements for rows:
Let’s open up the index file. And we’re going to create the markup for our rows. Inside we need a class of row, and we also for this one need a modifier of row–banner. And we can copy this and put it down under features. I’m going to need to change this to white, and then we need to add row. Row–padding-wide. Copy and paste that again for photos. And for this one, we just need row. For testimonials. We need wide. For facts, we need gray, and wide. For press we need blue, and medium. And for the footer. We need dark grey. So we should have banner, feature, photos, testimonial, facts, press and footer. And if we look at our classes, we’re going to have row banner, white and padding wide. Just a row, then white and padding wide. Facts is going to be grey and padding wide. Press is blue and padding medium. And footer is dark grey and padding medium. Let’s go and style at rows.
Styling the rows:
layout.css. The first thing we need to do is style the main row, the module. So we’re saying that to clear both and overflow hidden. The clear both will mean that the rows will clear any row above. And the overflow hidden will mean that the rows will wrap around any floated items inside. Next up we need to style, style the colors. Row–white background: #fff. Let’s copy that three times. And we’re going to use gray, and blue. And a third one is going to be dark grey. Now we need to change these too. So, we’re sitting at to row–dark-grey and this is a color of white, and a background of a sort of softish grey, deep grey. And we’re going to do one more, even though we’re going to take this out later on, just so we can see it, we’re going to set our row banner. Next up we need to style our padding. And we’re going to copy that. Bottom, that’s going to be the same. Now how do we get this measurement? Well it’s actually 35. 35px divided by 16px. So in the, the design presented at small screen, the padding is 35px high on the top and bottom. And so if we wanted to convert that into an em unit, we just change it to dividing by 16px. And we can copy that and use it again for the wide value. Now at this point, they’re going to stay the same but at some point we might need to come back and change them. If not, we could always move that up there. But for now let’s leave it alone. And what we need to do is to go down and create a media query.
Adding media queries for rows:
So down here. Min-width 38em. So this will mean that any rule we write in here will only take place if the view port is a minimum of 38em. Now what we can do is copy our padding medium and padding wide, put them down below. Now these are actually going to be 18px because we’ve changed the default font size. And this one is going to be. And this is the equivalent of 70px and 100px. So now I’m going to have a look in the browser and see what’s happening. And if you look at our browser, you can see that it looks a bit odd at the moment. But our banner is sitting there, our feature, our photos, testimonials, and the present footer. And if we drag this in, you’ll see that the padding goes much smaller when we’re at small screen, as soon as it hits that 30 ADM, the padding jumps up to wider size.