 conference badges. Aren't they the best? Yeah? I'm so old I remember when these were an upgrade from the previous version of these. And when I put this on today, this is what came to mind. Samuel Taylor Coleridge. So now that you've had your English literature for the day, enjoy your albatross about your neck. Let's talk about CSS and layouts. How many of you absolutely love CSS and layouts? There is not one hand. Oh, one, one in the back. Two, a few of you will admit you love CSS layouts, but very few. All right, so let's talk about a little bit about that because the European Space Agency managed to land a comment, a probe on a comment, but we still have problems with CSS layout. It's very important that we understand how CSS layout works because CSS can kill you. Very, very important. And the life of a friend and web developer is a very long one and very frustrating one, not the usual frustration with computer science, but it is very, very frustrating because this is our breakdown of modern web design. And if you take a look at it very carefully, the second most annoying thing that we do with our time is here, which is trying to get the layout to work using CSS before we give up and use tables. And of course, what is that second two? Yeah, trying to get the bastard to work in Internet Explorer. Yeah, we spend a lot of time there. All right, so let me try to help you understand a little bit more about layout. It starts these days with responsive design. So a quick little bit about responsive design, I understand we have some back-end developers here, so just a little bit of background in case. First of all, responsive design is a term that at least in the US is tossed around and used to mean a bunch of different things, but it actually means something very specific. It means that we have a grid-based layout. It means that we use media queries and it means that we're going to have images that resize in some way. We're gonna swap images in and out. And these three characteristics were defined by Ethan Markott and he wrote an article which is at a list of part. It was back in May of 2013 or so that he wrote this article. And since then, we've been building websites based on these principles. And if you look at the front-end web developers, we do this a lot, testing our responsive designs. We're a little bit whacked that way. All right, so let's first of all start by talking about our current state of the art, which is floats, floats. Really, it's a hack, okay? We use tables as a hack, floats are a hack too. Floats were never designed to be used for layout. They were designed to shove an image to the side and wrap a little bit of text around it. And somehow we've evolved them to use them for our full layout. They do feature rows and cells in a float-based grid system. So we're gonna have rows and we're gonna have cells. I'll show you some pictures here in just a moment. The rows are here to clear the floats on the cells. Again, I'm gonna show you a little bit of code in a picture. And the source ordering is gonna determine the display of your grid system for the most part. There's a little bit of, you can swap things around a little bit, but not that much. You're rather limited. One of the big disadvantages of using floats is trying to have equal column heights. And really there's two ways of doing that. If you're super old school from like 2004, you can use something called foe columns. Foe is in the French word for false. You can Google that, you'll find the article. Or you can use JavaScript and that will make your columns of equal height. So let's consider one of these examples. Here we have a row, here we have a series of cells. Our HTML markup might look like this. I'm using div tags here. Obviously you can use whatever more semantic HTML is appropriate to your particular problem. So that's what your HTML looks like. And then you're going to have a couple of styles here that go along with this. The left side there is your style for your row. That's an incantation that does a clear for a bunch of different kinds of browsers. And on the right side here, you have basically what makes your columns have your cells float next to each other. So there's a float left. We have a margin. And we have a width associated with that. And they stretch so nicely across the page. And I'm doing this desktop first just because it's a little easier to understand what happens next when you're looking at examples like this. But as with all things, it's better to start mobile first so you'd start probably with these things stacked on top of each other. All right, so then we're going to move on to this. Maybe we go to a tablet dimension. We throw a media query in here. And maybe we change the width of our cells. And then these are going to stack on top of each other very, very nicely like this. Provided that everything is a perfectly equal height. And then the floats will work very nicely, right? Because that's the world we live in. Everybody uses the most recent version of Chrome and all of our columns are always equal heights. It's a wonderful world. Then we go to our fully mobile layouts here for very small screens. Maybe the things stack on top of each other. We cancel out our float. And we go to basically a full width, right? So that's pretty much what goes on with floats. The problem that you usually run into is why your layouts blow up is usually at this stage. You have one cell that's a little taller than the other one. Things don't line up. What happens is that third cell over here on the side winds up getting pushed over. It doesn't quite go all the way over because that other cell is a bit longer, pushes down the other one. It's a total mess. And when you look at it for the first time, you freak out and say, what did I do wrong? I thought I was following the right code. And after a while, you get used to it and go, oh yeah, it's a float problem and you apply the right fixes to that. Now if we want to reorder with floats, we're going to use a little bit of code that looks something like this. So first of all, we're going to introduce relative positioning. So relative positioning takes your HTML element, pulls it out of the static flow. When that happens and you can move it elsewhere on the page via the left property in this case, of course, there's also right, top and bottom, pull it out of the flow. The space that is left behind from where it used to be remains. So then you can push in different content. So this is a wonderful way of doing things if you need to have your source order, such that you have your header, followed by maybe your main information, followed by that extra little bit of stuff that marketing says has to be on the left side of the page, whatever that happens to be, okay? So this is the formula for that. Everybody good so far? All right, awesome. How many of you have worked with Flexbox? Wow, okay, good. So maybe three quarters of you have at least done a little bit with Flexbox. So a little bit about Flexbox then. So Flexbox is designed to lay out a series of elements but really not designed to lay out a whole webpage. Once again, we're busy hacking Flexbox to lay out whole webpages and I'm gonna show you how to hack it. But once again, it's really, it is just a hack. Flexbox is best used if you have, say, a series of images coming from a database. You don't know how many images you're going to have but you need to have them lay out on a webpage in a nice little grid. Flexbox is a really great solution for those kinds of problems. So it will also feature flex containers and flex items. So similar to where we had rows and cells with floats, now we have flex containers and flex items. So once again, the markup is gonna look very similar. Flexbox is absolutely amazing when it comes to vertical centering and equal heights. It's designed to do it out of the box. So yay for that. And this is one of the big advantages of Flexbox and why a lot of front-end developers are starting to use it. It's also really easy to reorder boxes. That's all built into Flexbox as well. So instead of this weird, hacky, relative positioning, sing, swapping stuff around, we can simply change the source order, or not the source order, but the order property that's associated with Flexbox and just reorder those cells on a page. But there are some big disadvantages. So again, Flexbox really isn't designed to be locked down for layout, so though we do it that way, and it does work in one dimension only, really one dimensional. And of course, what do I mean by one dimension? It's like one line that wraps around for a long time. It's not grids with boxes that are of different heights, and I'll show you a little bit more about that in a moment. The other part about it is poor Flexbox has gone through so many syntax changes. It's very, very sad. So here's the three versions of Flexbox. When it was invented in 2009, we would just simply say display of box, and we had some browsers that supported that. Then we went on to 2011 and the W3C decided to rewrite the entire specification, and they called this display Flexbox, so the so-called tweeners syntax, and there's one browser that supports this. Does anyone know what it is? One browser, believe it or not, IE 10, okay. And then, most recently, this is the current syntax display of Flex, and a lot of modern browsers support that. So you may have to still use some prefixing in order to display in a browser, and again, if you're not familiar with prefixing is, it looks something like this. So you're going to display, these display properties are prefaced by a hyphen and something that's specifically targeting certain kinds of web browsers. Okay. So the current support for Flexbox, as usual, our old friend is the usual culprit. Less than IE 9, not supported at all. IE 11 and Edge has full support, but it's really buggy, okay. And then pretty much everything else is supporting the current syntax. You're welcome to take a look at caniuse.com, always a great resource for finding out what the most modern support is. So here's what our code looks like when we're working with Flexbox. Again, we have a row, we have cells inside of it. That HTML looks shockingly familiar because it is. It's basically the same markup that we had for floats. But the CSS, of course, is different. So on the row itself, we're going to set our display to Flex. Then we're going to set the Flex property to 01 auto. This is the grow property, the shrink property, and the Flex basis property. So this is going to determine how the boxes grow in size. As you make your screen bigger, do they grow proportionately equally or do some boxes grow faster than others? Kind of an interesting thing to think about. And then Flex flow. So it's very easy to reverse the order of Flexbox. So if you have one, two, three, four, you can easily reverse that to four, three, two, one by changing the Flex flow property. You can also center these, add a little bit of margin to make it look pretty, whatever it is you want to do. The individual cells inside of it, which are the Flex items, will probably have a series of these. This code is a little misleading. You're going to have media queries for each one of those Flex properties. I got lazy trying to write it all in one slide, so there you go. That's the mobile version, the tablet version, the phone version. Wrap them up in some media queries and you'll be good to go. So we just changed the Flex basis property here. Now this is interesting and this is really important. So normally when we work with floats, we work with the width property. You can think of the width property as being an absolute value. Even if you use 24%, you're talking about 24% of something and it never changes. With Flexbox, these numbers are flexible. So if it doesn't quite get to 24%, it'll be close to that, okay? And that's the way Flexbox works. That's the flexible part of Flexbox. If you want to rearrange the columns, the code's even easier. We take the order property and we just change the number. So take number one and number two and swap them. Done, so simple. All right, so how are you doing with Flexbox? Quick little bit. Whew, lots of CSS thrown at you all at once. All right, so then the part you've all been waiting for, of course, is the grid system. And how many of you have worked with CSS for grid? Nobody, awesome. I'll tell you why none of you have worked with CSS for grid. What's the browser support for it? Zero, like all the best CSS, it's not supported. Okay, so why CSS grid? First of all, so it's built. There's actually a CSS for specification. It's under development. There was a new version published today. So like my talks out of date already. Sorry, it's very hard to keep up with where CSS for grid is going from day to day, but I'll give you a little taste of it. No row markup required, awesome. So we don't have any floats to clear. So we don't need that row markup. We're gonna have a wrapper around everything, but we don't need a row. The grid is designed to work in two dimensions, unlike Flexbox, so it is designed to have something that stretches maybe the whole height of the page with maybe some additional things coming off the side of that. Generally speaking, the rule of thumb is this. You're gonna use Flexbox for UI elements, like that image gallery that you have to have on your webpage, but you're gonna use grid for the major layout of the webpage itself. And that is related to, hello, hello slide, there we go. That's related to this. Part of what just came out today was this wonderful diagram, okay? And this really explains, I think, the difference between Flexbox and grid very nicely, other than one supported by a browser and one isn't. If you look at the top, this is an example of how Flexbox might take eight elements and display them across a page. Without putting additional CSS constraints on it, it may just distribute them across the page in this way. As terms of the grid, though, as you see here, this is more like table-based layout where you could have multiple heights, equal heights, things call span, row span. Anybody remember those days? Yeah, it's back again, baby. Everything old is new. It's awesome. All right, so what you remember about tables and layout kind of applies to the grid specification. As I said, there's almost no browser support without setting flags. So this is something you can set inside of your browser, and if you go to this web page, you can read about exactly how to turn this on in Chrome or Firefox. Be warned that it is still very buggy in terms of looking at the display of these, putting grid in these web pages. You'll find bugs all over the place. And I'll show you some of those in a moment also. Okay. Here we go. It's buggy. And there we go. All right, so here's what your HTML might look like. Notice that there may not necessarily, actually, I left off the tag for the wrapper. Imagine there's a tag, a div tag for a wrapper around all of those divs there. You do actually still have that in place. So you have a wrapper. And this time, notice I've changed my classes. So I have individually named cells in this particular case that's gonna wind up being important for doing grid-based layout. Now there are some selectors that are under construction, some pseudo classes that are new that you'd be able to select certain cells in this particular lineup. But for the moment, this is probably one of the easier ways to select individual cells for your grid-based layout is by class. Obviously, all the usual selectors apply as well. And the wrapper div, this is what the markup is gonna look like. We'll say display of grid. And then we're gonna have something called a grid gap. How many of you go, oh my gosh, you just used pixels for the grid gap? I can't believe it. The reason I did that is because percents don't work. Ask me how I know and how long it took me to figure that out. So those are still buggy. So yeah, you're right. You should probably be using percents here, or M's or REM's or some other relative unit. But pixels are what works in browsers currently. And obviously the grid gap is what? The gap between the grid cells. So it's really, really easy to lay this out. How much space do you wanna have between each cell? And then what we're going to do is, this is one of the syntaxes that are available to you that you can use. So I'm going to have my four cells just in the interest of doing the same kind of example each time. We have our four cells here, and we're going to start counting from the left side. We're designers, so we start with one, not zero. And we count over going to the right, one, two, three, four, five. So when I say call one, the grid column is gonna start at one and go to two. When I say call two, it starts at two and it goes to three. Makes sense? Pop quiz, what is it for call four? Four to five, exactly. I ran out of room, so I just thought I'd ask you. Four to five, that would be call four. All right, so let's do a little bit more interesting example. How about we have this layout, okay? So now we need to specify both the columns and the rows. So once again, we're gonna use a similar kind of syntax. For call one, it's gonna stretch from the very top to the very bottom, one, two, three. And then the call two, we count over, one, so it's going from two to three. And the other one's going from two to three, but their heights are different. One might go from one to two, the next one from two to three. And I drew it this way specifically. It is possible that you have the first row might be a little shorter, the second row might be a little longer. Notice how they all wind up being equal heights at the end. That's not a bug, that's a feature. Woo! No more JavaScript for making equal heights. It's all built into grid, which is great. Just so you're aware, there is some alternate syntax that's available for this. If you take a look at Rachel Andrew's site, which is gridbyexample.com, she has, today I looked 35 examples. And you can take a look at all of those and it's a wonderful resource to work through. But there's another way of doing this with named grid areas. And just in the interest of time, I didn't have time to cover all of this, all of the different kinds of things. For whatever reason, the numbers make sense to me. Hopefully you designers, it makes sense to you too. In this type of syntax, what you're going to be able to say is you define what the header is and what rows and columns it's going to cover, basically. So I have a header, I have a footer, I have an aside. And you can call these by whatever names you want. So you also have George and Mary and Sarah, whatever the names are, and you can associate styles with those as well. Okay, so that's our alternate syntax. Reordering is also very easy. So here's an example. I'm gonna put this in a little bit more detail. So I have my wrapper around the whole thing. We want to be sure to put our HTML in the correct order that we want search engines to read it for accessibility purposes and so forth. And so the correct order is we want the header, the site identification, followed by the main content for whatever it is that you're reading about. In this case, I'm assuming it's some kind of article. And then at the end, we're going to put the aside. So the ads, the quotations, if you like this, you might like something else. That's all going to be in the aside that comes later, okay? But we want it to display this way, all right? So this is my reminder to show GitHub. If you want to follow along, if you come here to, oh, oh, that's better. So if you want to follow along with code, I have a repository set up at GitHub. This is github.com slash genforweb slash CSS for grid. And I have some examples here for floats, flexbox, and grid, the same page coded three different ways. Only we could get excited about that, okay? So that is available to you. And let me pull up my sublime text. This is going to get tricky. Our up here, I'm coding over your shoulder sometime. It's really awesome. Okay, so then they're going to come on down here to the bottom and not do that. This is going to be tricky, guys. I don't know if there's some way that tech people can make this a little easier for me. All right, so I'm going to open up. This is my reordering example. So here, I'll just do it this way. Here's the code. So here's my div of the class of header. Here's my header. Here's my article. Blah, blah, blah. Here's my aside. Okay, and there's the end of my HTML. So what does my CSS look like for this? So here's my CSS. So here's my wrapper displayed at the top. You can throw in whatever else you want there. So if we're in a font family. The second, you guys are familiar with that selector, wrapper, greater than star. So the star we all know as computer people means everything, right? So select all of the direct children of wrapper, which gets this header article on the side. How cool is that? So I want to give that some padding and some radius that I've got some beautiful colors. You'll find out I'm not a designer. And then I have some media queries. So I want one set of grid layout for one media query and I want another set of grid specification here laid out for the second media query. When I take a look at that inside of my web browser and we do the designer dance. So we grab the edge of the browser here and we start making the smaller. Okay, somewhere along the way here I'll hit 1,000 pixels and we can totally reorder the whole thing. How awesome is that? Thank you. Just because you can doesn't mean you should. I'm not recommending this as awesome layout back in developers, okay? But you can do that. All right, and then the last part, if you look at my media queries, you'll see that I said greater than 1,000, greater than 750 or 650, what happens below 650? Anyone know? I don't know. So we continue with the designer dance and make it even smaller. It's gonna just stack on top of each other this way because this is, I don't have any grid layout that's outside of the media queries. So this is simply gonna lay out as boxes on top of each other. So your default mobile layout is already baked into working with the CSS grid provided that you put things in the correct source order. And it's so simple to drag things around and lay them out in different places on the webpage that this is a wonderfully easy thing to do, right? Yay, how many of you like want this now? Yeah. Five years. Sorry. All right. Yeah, you know how it goes. Somebody will write a polyfill. So maybe one of you JavaScript people gets super inspired and write us a polyfill so we can use it now, okay? So since I have a little bit of extra time here, let me show you some of the code here that I have for some of these other examples. So I have a lovely page here for grid.html. I'll compare that with flexbox.html. So here's my flexbox markup for a webpage. I'll show you what that looks like. That's this one here. So this is, yeah, this is the flexbox page. So here's a nicer layout that I have going on here. This looks like a webpage you might be coding today. And as we start to shrink it down, of course, things will shift and stack on top of each other here. Okay. And as I shrink it down further, there we go. And now, of course, everything stacks on top of each other as you'd expect. So how did that get coded? That's over here. So here's my HTML for my flexbox layout. As you see here, I'm doing some, I'm calling it push and pull because I'm recycling the same HTML that I used with my floats, but we're not really pushing and pulling here. We're using the order property to reorder things. Down here, I wind up having to nest a grid. So here's my nest and grid. I have another row inside that has my four features here inside of this. And then I have my aside out here and my footer. So when I take a look at the CSS associated with that, here's what that looks like. So pretty much the elements that you saw before here, we have the flex property on the row. I've put in some margins here. We can do some reversing stuff if you want. Then we go to our different devices. So our medium devices are going to have different flex properties for their different widths. And then down here for my large devices, I wind up with a different set of numbers for those. And then, of course, I also rearrange those columns using that order property down there on the bottom. So that's the flex box side of this. So the grid side of this, just to compare, here's your HTML. Notice that I've managed to pull out all of those div class equals row. All I need here is the one div just after the body tag on line 11, that the div with a class of wrapper. And then after that, look at that beautiful semantic markup. Aren't you guys happy? Oh, so awesome, okay? And so we have our button. Down here, I've left the div with a class of row inside of it because how would you lay out these four features? Would you use grid to lay out those four features? You can use flex box to lay out those four features. Ah, so that code will be a little bit different. So I'm using flex box to lay out the four features here. And then we go to our aside. So again, nice, clean, simple markup. And so if we look at the CSS for that, grid.css, here's what that looks like. We have our wrapper, our row, our row aside. So that stuff up here, this is for that row inside of the grid system for those four feature boxes, okay? And I have to put in a media query to treat those. And then on my large devices though, notice how I did this. I did large devices. I've got an actual grid-based layout, small devices. I didn't put in anything. It's just gonna collapse. So, and that's what I thought worked for this particular layout. So when we take a look at that page, I think it's this one. All right, so here's grid.html. Looks kind of similar to the way the Flexbox page looked. All right, scrolling down, that's the way it looks. And when I start to go ahead and scrunch this down, there we go. It texts under each other very nicely here. And you can scrunch down here even more. But remember that those boxes here are getting wrapped by Flexbox, not necessarily by the grid layout. The grid layout, they're just stacked on top of each other. All right, so let's go back to the PowerPoint here to wrap up a little bit. All right, that's my code example. So, current recommendations. Current recommendations. First of all, if you need browser support, you can never go wrong with floats. Sorry. In the US, the US government still has to support Internet Explorer 7. If your governments are similar to that, floats and wait like 10 years. Maybe you can finally use Flexbox. Anyway, if you are okay with a few prefixes in learning something new, Flexbox is where to go. If you haven't started learning Flexbox yet, go learn it. This is gonna be the job skill you're gonna need to have for 2017. I think that's where the tipping point's gonna happen. I think you're gonna see a lot more Flexbox happening out there. Evidence of that. You're all familiar with Bootstrap? Yeah, love it or hate it. They just released Alpha 4. In Bootstrap 4, there is a SAS variable. You can toggle it, we'll toggle between a float-based grid system and a Flexbox-based grid system. How cool is that? Same thing is true with Zurb Foundation. If you're familiar with that framework, they also have a Flexbox-based grid system baked into their framework. So I think you're gonna see more Flexbox stuff happening here. And keep waiting for CSS4 Grid. It'll come real soon. We have to get rid of all the old browsers first as usual and in the new browsers we have to settle down the spec. The new browsers have to start running it without Flagset, so like I say, five years. But in the meantime, of course, we all know that, oh, here's my recommended resources, I apologize. So if you wanna go read more about the CSS4 Grid where it's going, where it's at currently, here's some places you can go take a look at that. And then finally, of course, we all know that CSS is awesome. So keep loving CSS. And we'd be very happy to take your questions. Thank you. I think you kind of answered this one, but somebody asked, as grids aren't available yet. Yes. Would you recommend using Floats or Flexbox right now? Yes. Floats, if the browser support is something that is really important or you have to support very old browsers, Flexbox is going to be where it's all gonna go. And like I said, I think it's gonna start pivoting in the next year or so. Probably two years from now, we'll hopefully drop Floats as a way of doing things. We'll just be using Flexbox. Now is the time to learn. Yeah, I concur with that, because last March, so March 2015, we released a new version of Opera Mini, in which we added Flexbox, because we were seeing loads of sites, particularly out of the Far East. Yes. Flexbox for mobile. Right. And of course, you can always lay it out in Floats and then override that with Flexbox. You can, absolutely. The HTML is the same. It's one of the awesome things. Great. You mentioned that the spec's changing. What is changing? Is it like huge conceptual changes, or is it largely syntax and minor naming stuff by now? Yeah, so this is the time to start talking to the W3C about the specification as it's proposed. So you guys are nerds, but the W3 people, they are nerds with a capital N, okay? And they go into a dark little room and they sit down together in little groups and they talk about what they think will make an awesome grid system. They aren't necessarily taking their specification and testing it with real-world examples. What actually makes sense in terms of the real problems that you were working on from day to day as opposed to academically speaking what are the kinds of things we need to include in a grid system. So this is, when they talk about making changes to the specification, this is what happens. You need to look at the specification as it is now, try out some sample pages, fiddle around with it, see how it works, see where it is awkward to use, see where you need something else. Like I said, I don't think it's ideal to have to put a class on every single one of my grid cells to specify how I want it to lay out. I would prefer to have some selectors that would allow me to select multiple cells at one time. And so those are the kinds of bits of feedback that the W3C is looking for right now to further hone that spec. It could be that you hate those numbers that I use, you love grid areas instead. So again, these are all things that are in flux. Now what is going to work best? What can we come together and agree is the right thing to do? I know that one of Rachel Andrew whom you mentioned, she's a friend of mine, she was suggesting that the reason that grids aren't available yet is the W3C and the browser implementers wanted to avoid the Flexbox problem of three different syntaxes out there now. Yes. I would completely agree with that. We don't want that to happen again. I mean, would it have been great? Like 2010, we could have started using Flexbox? That would have been awesome. But because of all of the issues and problems with the different syntaxes, we've wound up having to wait until now, many years later. So we want to avoid that with the grid. And I know that about 12 months ago, there was lots of talk saying that the people who write the spec, as you said, are nerds were using terminology that wasn't the same as the terminology that designers use. Yes, absolutely. Has that been resolved or...? I think that's still in Flex. We have little things, but it's the little things in life, starting with one for counting, instead of starting with zero. It's those kinds of little things that designers, as we know, think very differently from developers. And so it's often the developers who develop these specs. So we need to make sure that whatever we come up with makes sense to designers and how they think. Another question, and again, I think I know the answer to this, but I want to hear what you think. Okay. Is it possible that Flexbox might be removed like object.observe or something like that, like taken away from the specs? I doubt that. I doubt that. I doubt that highly. Flexbox has wonderful applications. Like I said, you have a database. It's full of something over and over again. You don't know how many of those things are. You need to lay it out on a web page in some kind of coherent fashion. Flexbox is perfect for that. So I don't see Flexbox going away. Now, if you read the Flexbox specification, they'll say it's still under development and it hasn't been fully adopted yet, but I think they're pretty much there. Would you tend to agree with that? I can't see it ever being removed because it would break too many sites. Yeah, it would. I mean, Bootstrap is gonna use Flexbox. I mean, that's it. We're done. Excellent. And the last question, when you were dating Neil Armstrong, did he ever sing Fly Me to the Moon to you? No, actually, he said that was the worst song ever. Yeah, if that song came on the radio, he would fly into this mad rage. Really? Yeah, it was awful. Yeah, he really preferred Boy George. You heard it here first. Ladies and gentlemen, Jen Kramer. Thank you.