This course has been updated! We now recommend you take the CSS Grid & Flexbox for Responsive Layouts, v2 course.
Transcript from the "Float Exercise Solution" Lesson
[00:00:00]
>> Jen Kramer: So let's go on ahead and go through the answer here to the float based grid system really quickly. Now one of the questions that we got over the break was really why are we doing floats, and that's a great question. The reason why is this, so first of all my sense of having been out there in the field and taught this material a lot is that people don't actually understand how a float-based grid system works.
[00:00:24] You guys work with them all the time. You download them on Bootstrap and Foundation and blah blah blah, but you don't actually build your own and you're not really sure how they work. So that's one, two is you have to understand the industry standard to understand where we're going in the field, so we are going to be going to flex box and grid.
[00:00:42] If you do not understand how floats work, you do not understand how we progressively get better with flex box and grid. And I feel very strongly about the fact that you should understand the technology that you are working with. So that when your go back to your manager after the end of this workshop, and you say, we need to be coding in grid.
[00:01:01] And your manager says, great, and why you actually have an answer to that question that you can make. Okay, so let's go ahead and take a look at the end state, so we're in the chapter one Intro floats folder. I'm looking at the end state of this. Now, obviously, once again, you may have some different ideas for how layouts work.
[00:01:23] You may have some different class names. You may have some slightly different code. This is my answer that doesn't negate other answers to this particular problem. So here is the CSS file, if you scroll on down to somewhere around line 32 you'll see that we have a grid system.
[00:01:41] And we're writing this mobile first, so the styles that we have listed here that are not inside the media query are what we'll have on a mobile phone, okay? As you scroll on down around line 62, this is where we have what's going on in the tablet. And then at the very bottom of the page is what's happening on desktop.
[00:02:01] So I'm gonna sorta skip from mobile down to desktop here momentarily. So what I've got going on here for the grid system is as follows. The rows are gonna work exactly the same across all the devices. So for my row here, this is a fairly common formula for how a query might work.
[00:02:22] We use the class of row, the pseudo element of after, and the following formula for doing that particular clear. Those of you who noticed that this one has two colons in it, whereas the after that we listed up here at the top of the document has one colon.
[00:02:41] You have very sharp eyes good job. What happened with this was as follows. These pseudo elements like before and after are part of the CSS 2 specification where they had one colon. In CSS 3, they introduced two colons to differentiate the pseudo selector from sorry, the pseudo element from the pseudo class which has one column.
[00:03:05] So either one of this will work or sort of compatible with browsers, all right? Then for the mobile purposes, all of my classes are going to be the same. All of my columns are exactly the same size, so what I have here is. A width of 92%, why 92%?
[00:03:25] Because I have a margin of 4% on the left already associated with the style, and then that leaves 4% left over to just sort of wind up on the right side of the page. Or actually, I guess I assigned it, so that's the margin left and right. You'll notice I have also given this a minimum height of 1 pixel that's our browser have for Internet Explorer.
[00:03:46] One of the versions of Internet Explorer that gets mad when there is no content, so, there we go, that's everything that's happening on mobile. After that I have all of may mother stewards colors here, that's what those are. And then I'm gonna skip on down to Desktop. Let's take a look at what's going on at desktop.
[00:04:03] These are the width, the width are going to change, so, the fact that were floating, the fact that I have a margin that's gonna be the same across all devices. And again, that is the design decision that I made. You as a developer may choose to make those margins smaller with a smaller devices, there's absolutely nothing wrong with that.
[00:04:22] Feel free to do that and then your values here will be slightly different. But what we've got going on here is with the column one, so in another words the individual cells, there width is gonna be 20% for those adds up to 80. And then we have five locations for the margin at 4% each, 5 times 4 is 20, add that to 80, we get 100%, okay.
[00:04:51] Column two, column three, column four, that's how the math works out for those particular items.
>> Jen Kramer: When we go to the tablet sizes here, what we've got going on is I've cancelled out my margin on the right from my mobile styles and I have different sizes here for my width.
[00:05:13] And I'll show you what's going on here in my HTML. You'll notice that I have a class that's called col-1-2 and a col-1-4. Those indicate that I have a column that is one, in other words one column wide, at say desktop dimensions it will go to either two columns wide or four columns wide.
[00:05:34] At the tablet and potentially mobile dimensions. So, and I'll show you where that happens in the HTML. So, in the first row here, these articles are all clause of column 1-2. Okay so, they’re gonna be four going across the page. When it collapses it goes to two across, right?
[00:06:00] So that’s the behavior of these yellow ones here on the top row. Four individually and then they go to two and two, all right? But, in row three here, we have a different behavior going on. I have one column wide here at desktop dimensions, but I want it to stack one on top of the other when we get down here to tablet dimensions, okay?
[00:06:25] So that is different behavior at tablet and mobile dimensions. And so I need a different style for that. So that I called that one col-1-4 and you'll see that I assign that down here on line 56, okay. So basically the markup for all of these looks pretty much the same, we have a div with a class of row.
[00:06:47] I've marked these up as articles, each one of the little content blurbs it is a title, it is a picture, it has paragraph, it has a read more link. I've call those articles because they're probably syndicatable in some method or another. The row itself is only serving as a clear and so therefore I've chosen a div tag for marking that up here.
[00:07:08] All right, are there any questions on this material at this point in time. And I'm gonna wait here for a second cuz I'm told there is like one minute lag.
>> Speaker 2: So where is the tablet media query?
>> Jen Kramer: The tablet media query is right here line 62, 63.
[00:07:30]
>> Speaker 2: Okay.
>> Jen Kramer: So 48, minimum with the 480.
>> Speaker 2: Okay.
>> Jen Kramer: Do you guys understand like the whole minimum within.
>> Speaker 2: Yes, and then the only screen end, what does that do?
>> Jen Kramer: So, that’s gonna work on the screen, but it may not necessarily work on other types of devices.
[00:07:45] It may not necessarily do that for print.
>> Speaker 2: Okay.
>> Jen Kramer: You can leave that out, remember media queries. This is a common thing we forget working in responsive design. We always use media queries in this way in terms of how big our screen is. But actually media queries also pertain to, print style sheets, we use to do a print style sheet back in the old days, now we do those by media queries.
[00:08:12] So media query can hold our print styles.
>> Speaker 3: In the floats.CSS on line 64.
>> Jen Kramer: Line 64.
>> Speaker 3: Why is the attribute selector under the mobile landscape media query?
>> Jen Kramer: Okay, so why does this selector exist here on line 64? Why is it here on mobile? So if you take a look first up here on, sorry, why does it exist here on tablet?
[00:08:41] So this outside on Line 39 is a similar selector. This is the way this is gonna display on a mobile phone. So it'll be 92% wide with a 4% margin on the left and the right. When we go to a larger screen dimension, over 480 pixels, I get rid of the margin on the right.
[00:09:00] Because now I'm gonna have multiple cells next to each other and I don't wanna have margin on the left and the right, and that adds together to 8% instead of just being 4%. And I want this to be floated to the left, remember that here on, the style here on line 39 there's actually no float that's called.
[00:09:19] We're just stacking things on top of each other for our form, so here we actually call out the float on the left. Now because of the way these media queries are written with a minimum width of 480. Any of the styles that are here inside of the tablet or as I called the mobile landscape screen size, carry down into the desktop as well.
[00:09:42] Unless we specifically override them in the desktop media query. Okay, so hopefully that helps some. Do we have other questions, Mark?
>> Speaker 3: Why not put the clear directly on the row instead of row after psuedo element?
>> Jen Kramer: Because this is typically, basically, because this is the formula. This is the way that it's typically done.
[00:10:08] If you take a look out there in the great wide world and how people do clears, it's typically done as an after like this.