Responsive Web Design CSS files (using Sass)

[00:00:00]
>> [MUSIC]

[00:00:05]
>> Ben Callahan: Okay, this is actually a SAS file. It's an SAS aggregate file that generates based on CSS. So the file itself would be called base.css, okay? When my CSS preprocessor runs on this file it generates base.css. So, what we're doing here is we're using these imports are not CSS imports, these are SASS imports.

[00:00:28] Okay, this is just basically being used to build up a single CSS file, and we call these SASS partials. Okay, so these are like little subsets of CSS that we wanna pull in. You can see this viewport keyword at the top, this is what I meant when I said that meta tag previously that meta viewport tag, Apple created that.

[00:00:52] And I was I was speaking, I was doing a workshop at a conference in Atlanta a couple weeks back, Re-Mix South, and there was Microsoft was one of the sponsors and they had Surface there. So I was I was playing with it, you know, and there's a, when you're using IE on the surface there's this mode called snap, snap view or snap mode I think.

[00:01:12] And what you can do is take your browser and kinda like, toss it off to the left and it goes [SOUND]. You know and it goes over to like 400, or 300 pixels or something and it's like a position fix thing that sits on the left. It's like a frame, is really what it is, and then you can use the operating system over in the right side, the right three-quarters of the device while the browser that you had open is sort of fixed.

[00:01:34] So, I think it's like a multitasking kind of implementation. I was playing with my site on it. And I tossed it over in the SnapView and the site zoomed to out, like it wasn't responsive. Even though the viewpoint with it shrunk way down and I was like what.

[00:01:53] Okay, what's going on cuz it was responsive fine when I rotated it it did its thing it was working well in the browser out side of the SnapView. So I started doing a little digging online and I found Tim Cadillac who runs the breaking development conferences. He had just like the day before written an article about this and what he found was that Microsoft opted to not support that meta tag in SnapView only.

[00:02:20] And what they're doing is supporting what the spec says they should be doing but they're doing it with a browser prefix at this point. So like in the same way that we have this media keyword that we can use in our in line in our style sheets to specify a media query.

[00:02:34] There's also a viewport keyword and it lets you do the exact same thing but in your CSS file as opposed to in the head of the document. So in order to get your website to respond in SnapView on a Surface, right now at least, you also need to specify this.

[00:02:50] And probably it will be smart for me to do this without the browser prefix as well. Make sense? So really all this first section is doing is the exact same thing as that meta tag was doing okay. But the meat of this is happening here. So again this is a SASS import not a CSS import, so we're not making requests with these imports, okay.

[00:03:12] I would import say a reset or normalize whatever you use as a sort of a starting point for your CSS. And then I have a SASS partial called smallest. And I call it smallest because this is sort of everything that's applied at that initial layout, the simplest, the smallest layout that I want to support.

[00:03:33] And then I have a query block this is a SASS media query, but it generates the exact same syntax as you would see in CSS. And it's just basically what I said before is that we might have might wanna suggest do a little hiding of a navigation and a video, those kind of things for a print case.

[00:03:51] So what what I've done is built our basic stylesheet that does sort of a linear or sometimes linear, sometimes just whatever the simplest layout is that you have. And also I'm using this as a print print stylesheet with just a few little additional styles. Does that make sense?

[00:04:10] Okay, so let's take a look at the next file so we looked at base. Okay, that was what we just saw mq.css, so remember that we're linking to this only when it's not print. Okay these styles are only gonna be rendered when it's not print. So here's mq.css, so again we're using these this SASS include okay.

[00:04:32] And we're going to build up this is the SASS aggregate file which generates mq, so it would be mq.scss is what we're actually looking at and it generates mq.css. And what if inside you know min width 30m.scss, which is another SASS aggregate or partial. If inside of this I defined you know the width of an li or something that would this include would literally bring those styles right into this file and generate a single file called mq.css.

[00:05:02] All the media queries are right in line here. So this is a single css file that has blocks of media queries in it when it's when it's generated, okay. I'm using m based media queries, we use those, I'll show you guys why we do that in a few minutes here.

[00:05:16] And you can see that I'm doing this sort of additive css. So base was included which gave us smallest, the smallest layout and now I've decided I need to break it 30em's. And as when the browser viewport is 30em's or greater I include this CSS file when it's 60em's greater I include this.

[00:05:38] Questions on this? Okay so we've included base basic layouts. In cases where we're not printing, we're including styles which give us a bit more complex layouts. Okay and then when IE doesn't support media queries, what are we going to do for them? So here's a nomq, okay. It's exactly the same as mq except that there is no media queries inside of this.

[00:06:08] So right now if IE were to load this, old IEs is gonna load this, this is not gonna render any of these styles because it doesn't understand this rule, this selector, okay, this media keyword. min-width-30em's IE just doesn't get it, it's going to just ignore everything in there.

[00:06:25] So if I just do this without the media query for older versions of IE, I can build up a more complex layout with the exact same styles that I've already created. So I write on my CSS, the actual meat of what I'm doing in these partials. And inside these partials there's no media queries and that's how we're able to serve a larger resolution layout to older devices, older user agents that don't support media queries.

[00:06:51] Does that make sense? And I know that's kind of a mouthful. I want to I'm going to jump out quickly here and show you guys, the actual styles in my site.