This course has been updated! We now recommend you take the CSS Grids and Flexbox for Responsive Web Design course.
Transcript from the "IE Rounding and the Semantic Grid System" Lesson
[00:00:00]
>> [MUSIC]
[00:00:05]
>> Ben Callahan: So let's talk about rounding. [COUGH] Let's talk about IE and rounding. [LAUGH] Who's using IE today as they work locally? Anybody? Okay, it's actually kind of interesting what happens if you start to do some of these crazy percentages that have lots of decimal places. Older versions of I.E. I think it's like older than eight always round it up.
[00:00:31] Which if you do the math on this pretty quickly you realize that there are times when that just doesn't work. It doesn't add to one hundred it allowed to one hundred one or something. You know. And so 102 even. And so what you'll see occasionally if you've got some interesting decimal representations like this is that those columns will pop down, pop up, pop down, pop up as you adjust the width of the browser.
[00:00:52] Chrome and Safari older versions of Chrome, Safari and Opera actually did used to always round down, and then Firefox has always been pretty good about making a good decision and figuring this out. What's happening now is that all the modern browsers do a really good job of figuring this stuff out.
[00:01:11] So you go out a few decimal places and they're going to make a decision. Browsers can't render half of a pixel, right? So they have to decide and in cases where it's going to force layout shifts, usually they'll just leave one pixel out. Is kind of what's happening.
[00:01:26] And so you'll see occasionally that their things aren't necessarily perfectly aligned. This is part of the mentality of shifting away from pixel perfect layouts into more percentage based Systems. You're going to have to be okay with things not being pixel perfect. Another way to think about this is that I don't generally start with a fixed width design, a fixed width grid.
[00:01:51] You know, that maybe is where you might be, if you're just kind of getting started and you've got an existing site that you want to make fluid, but in most of the cases where you're starting over with responsive in mind you're choosing percentages that kind of make sense.
[00:02:06] So there's there are other ways to kind of avoid some of these issues. The other thing to think about is if I if I have a column say I have a even just. Well actually the example we were just looking at makes a lot of sense.
>> Ben Callahan: So here if we're looking at these, this space on the left.
[00:02:31] So I've set the body to be 50% wide right now. What that means is that twenty five percent is on the left and twenty five percent is on the right. If I were to just not define anything on the right side, that would leave space. It would still have the same appearance.
[00:02:47] But it would leave space which allows there to be a little bit of flexibility for those right edges. So that's another thing you can consider is that on the final of these elements, the final right side of these elements the margin. Just leave that off as opposed to defining it.
[00:03:02] That will give you the flexibility you need to not force these things to sync to pop down at times. So there's lots of ways to kind of address those issues.
>> Ben Callahan: Oops.
>> Ben Callahan: Okay. So, the example that I just showed you, was something that I made up just to help explain the concept.
[00:03:30] However, I'm not a huge fan of grid systems as they exist sort of in their most popular forms today, especially when you're thinking about responsive web design. So I wanted to show you guys this quickly. There's a couple of semantic grid systems. And I'm gonna explain what I mean by this but, if you're using a CSS preprocessor which we're gonna spend some time talking about later you can get some real benefit, in terms of semantics and so, let me just show you guys, an example of why this is a problem.
[00:04:06]
>> Ben Callahan: So who's heard of getskeleton? Skeleton which is a framework, boilerplate kinda framework? Okay, cool, you can see they kinda say that they're a beautiful boilerplate for responsive mobile-friendly development. It comes with this little grid system, which you can see here. Okay, so as I hover these you'll see that one column, literally these are the class names that they're asking you to use.
[00:04:28] In your markup, okay? So, you would put a class of one on an element that you wanted to be a single column. This is just a more complex version of the one we just looked at, okay? Eleven, ten, nine, those are all class names you would put that indicate how many columns that element should take up.
[00:04:44] And watch what happens as I adjust my browser width down here. Okay, that was a nice, everything is staying proportionate 11 still means that there's 11 columns in a 12 column grid. And as I go a little further down. All of a sudden, my class names essentially are lying, right.
[00:05:03] 11 is is now the same as one, is the same as four, three, nine, seven. So the semantics of my markup where I'm starting to indicate how I would like this thing to lay out are completely wrong, really. And this is in my opinion the problem with a non-semantic grid system.
[00:05:22] So how do we get around this? I mean if you look at Twitter's boot strap, it's doing the same kind of thing. All these grid systems, most of the grid systems that are out there, Do this kind of class names you know that this is kind of a common problem.
[00:05:35] Do you guys remember the CSS zen garden? Who's been out there, seen that site right? This is essentially what the same kind of stuff you know. This is where essentially building multiple designs really from a single DOM a single document. And so the more semantic we can make it, the less of these kinds of issues we're gonna run into.
[00:05:59] Let me just show you guys one of these semantic grid systems. So Semantic gs and Susy are two the systems that I've played around a bit with. We've used Semantic a bit more. This is how it's intended to work. So again this is sas instead of css. Who is using a pre-compiler of some kind?
[00:06:27] Okay, cool. A handful of you. So if you're familiar with a pre-compiler, the idea is just that it kind of gives you a bit more functionality in CSS than you would have by just using the standards. What happens is you run this process, which looks through your Sas and generates CSS for you, based on sort of that super set of the syntax.
[00:06:45] So we're defining some constants. Column-width, gutter-width, columns, and then this one rule right here. Not rule, but this one constant total-width is being set to a percentage, tells this grid system that you should start thinking in percentages instead of in pixels. And so now, I can say if I had a head or an article in an aside in my document, I could say the header I want to be 12 columns wide.
[00:07:12] This is a mixin, a SAS mixin. So it's gonna calculate what twelve columns is, and it'll apply CSS. Same thing with article and aside. So this might be the smallest resolution layout, you know, where I've got a full width header, full width, article and a full width aside.
[00:07:27] Just a single column, simple layout. And then later, when the browser is thirty eight ems or greater and wire, the viewport is that wide. I might say I want to leave the header full width. But I'd like the article and the aside to sit next to each other.
[00:07:42] Eight to four ratio. I haven't had to add any crazy classes to this stuff. This is just using your existing CSS selectors and whatever standard layout markup you would use. So this is very clean, you know. I love this kind of an idea. I think that there's a lot of benefit.
[00:08:01] Questions on that stuff, or? Okay.