 I'm a little shorter than Pete. I'm pretty tall, but I'm a little shorter. Can y'all hear me? Yeah? All right, awesome. So this is like the third time I've given this talk. I started this talk in July here in Boston, the Design for Drupal. And then I tweaked it. And I just got back from Barcelona two weeks ago where I did this talk. And of course, things have already changed. So I had to update it again for this conference. But anyway, so I presented this in Barcelona at the Full Stack Fest conference. So it was two days of back-end, two days of front-end. Totally great. I had people complimenting me. And I was feeling really good that it was a great talk. And then Twitter intervened. And Twitter is, I think, just a little bit above YouTube comments these days in terms of people being nice to each other. But Twitter informed me that I was, in fact, wrong. And I have no problem being told that I'm wrong. It's sort of like the way I was told that I was wrong. But anyway, so the way I was told I was wrong, here, if you take a look at the W3C specification, there is no CSS4. How many of you actually knew that? A few of you? OK, cool. I did not know that. So there is no CSS4. We're not going to version the language going forward. We're going to version modules. So we'll have a version for animation. We'll have a version for grid. We'll have a version for whatever else. But no CSS level 4. And then the other thing that happened this week or in the last couple of weeks, maybe you all heard about HTML5.1, like is finally going to be a thing. Everybody cool with that? It's going to be great. We've got the picture tag coming. So the picture tag is the thing that's going to allow us to make responsive images directly in HTML, no more messing around with server-side solutions, JavaScript solutions, or whatever. It'll actually be in the HTML. We all psyched about that. OK, so it made me think of this graphic. So I fixed it. OK, so that's what we got going forward. No language or no version number for CSS, but yes for HTML. All right, everybody good? All right, good. So now I can really start my talk. So CSS is totally awesome. How many of you just love doing layouts with CSS? They make you happy. I get a few people more here. I got like two in Barcelona. It looks like maybe a third of the room here. Yeah, I mean, here we are landing, the European Space Agency, landing probes on comments, but we still have problems with CSS layout. And it's really important we understand CSS layout. Because if you don't understand CSS layout, it can kill you. So, so important. And as we all know, we spend an enormous amount of time on these kinds of issues in modern web design. So the second most thing that we do is trying to make the layout work. Actually, this says this is a little added data. It says make it work with CSS and then go back to using tables. So I've updated it. So it now says we try to get the layout working in Flexbox and then we go back to using floats. OK, so that's a thing. And of course, the largest part of this pie is still with many of us, we're just trying to get it to work in Internet Explorer. A few of you, I know, like you live in this wonderful world where there's only Chrome and you only have to work with the most recent version. And I'd like to be you one day. But the rest of us, we're still dealing with Internet Explorer. OK, so now that we got all that out of the way, let's talk about responsive design. And for this crowd, I should probably ask the question, how many of you have no idea what responsive design is? Would anyone here actually admit it? OK, so responsive design is this. And part of my pet peeves about responsive design is that we use this word the way our clients use this word, which is, it works on my phone, so therefore it is responsive design. And that's actually not true, right? jQuery mobile is not responsive design. It's actually a different approach, right? Server side, serving up to server side templates in different ways. That's also a different approach. It's not technically responsive design. That's responsive design. All right, so semantics important. I'm from Harvard, man. You got to use your language correctly. All right, so first of all, let's just review the industry standard about floats, OK? You all know that floats are a hack, yes? Yeah, our industry standard is a hack, good times, right after our table-based layout, which was also a hack. And so this is going to feature rows and cells when we start to put floats into a grid-based system, right? And we put these two things together. We're going to put the float on the cells. We're going to put the clear on the rows. And the source ordering is pretty much going to determine our display. So whatever order we list things in the HTML, that's pretty much the way it's going to show up from left to right on the page. We can have a little bit of minor rearrangement, and you're probably familiar with that. And then the Achilles' heel of float-based layout has always been equal column heights, equal column heights. Way back in the day, I'm just going to say this for Molly, OK? So way back in the day, you can look up Dan Cedar Home and you can look up faux columns. F-A-U-X, like the French false. We used to tile down background images and all kinds of cool things to make equal height columns. These days we usually do it with JavaScript, but that's how we're going to fix that problem. So if you take a look at our code, it's going to look like this, right? So we got a row, we got some cells, we got some HTML. Good times. We're going to write a little bit of CSS to go with that to style it. We have some kind of formula for clearing our rows. We've got some kind of floating and wits and so forth on ourselves. As we start to scrunch our page down, we change our media queries, we change around our wits. You all know this, right? OK? Good. OK. Because one of my other rants is that people don't actually know CSS. So then we scrunch the screen down a little bit further and we got this. Here's where we come into our problem. The weird thing that happens, like you turn on the floats and everything goes in the wrong direction, it's actually explainable if you know what you're doing. So if you've got a couple of things lined up, they start to wrap around. They can't go all the way over to the left-hand side. And so they get smushed over on the right-hand side. That's what happens. But it usually freaks most of my students out anyway. And so this is what I'm talking about that you can fix with JavaScript. And then we can also rearrange columns. And so relative positioning means that we're going to pull it out of the normal flow of the document and leave the space where that element had previously occupied that open, right? You all knew that. You say that in your sleep, yes? OK. And so then we push some stuff around. We can use the left-right top properties and so forth to rearrange things on the page. So that floats. So far so good? Good. Then we got Flexbox. How many of you are working with Flexbox? Good. Good. Good. All right. That's awesome. How many of you have not really gotten a grasp on Flexbox yet? Still working on it. Be proud. Be proud. It's the cutting edge. It's time to learn it. OK. So Flexbox. So this was actually not designed to lay out whole webpages either. We're still hacking, OK? We're still hacking. So welcome to the next Phrase of Hacking Layouts. It is designed to really lay out, like, if you think about a whole series of pictures coming in, you have a bunch of pictures coming in from the server. You don't know how many pictures you're going to get. You need to lay them out in some kind of layout on the page. Flexbox is awesome for this, OK? They're still going to have similar kinds of markup for this. We're going to have rows. We're going to have cells. Although this time they're going to be called Flex containers and Flex items, OK? And you have to have both of those in order to work. They're really good at vertical centering and equal heights. That's like one of the awesome things about Flexbox. That's why everybody's really excited about it. It's very, very easy to reorder boxes. Another reason that people are excited about Flexbox. But the major disadvantage is, once again, it's really designed, I'm calling it one-dimensional layout. So it's designed to take a long line of things and sort of wrap it around and display it. To actually harness it and have the browser do what you want it to do at every point along the way correctly is going to take some extra code. It's going to take some extra code. I'm going to show you that in a second. And the browser support and syntax for this can be challenging, depending on which browsers you want to support. So you may still be stuck with some prefixing, depending on how far back you have to support Internet Explorer. And I do feel bad for the people at the US Federal Government who are still supporting IE7. So these people do exist. OK? All right, so it's still a thing. All right, so three versions of Flexbox. We've gone through a couple of iterations for how the syntax works for this. Anybody for the bonus question today? Anybody know the one browser that supports the tweeners syntax from 2011? IE10. IE10. Yeah, seriously. So you have to do something special for IE10. And again, prefixing may still be required. Here's a little bit about the support, if you're interested in that. And so the way that HTML looks is as follows. So once again, basically the same thing that we had for floats in terms of how we're going to lay this out and make it work, our rows are going to have a different kind of code on them. So the notable things here is that our widths are not really widths when we work with Flexbox. So we use something called Flexbasis, which is kind of like a width, we'll say, well, here I said auto, but you may say it's like 45%. It's kind of 45%. We're going to try to smoosh it in unlike a float where it's actually going to wrap onto the next column if things don't add to 100%. Flexbox is going to kind of mush things around and try to make them work for you. This is me being lazy. This should have media queries wrapped around each one of those, but anyway. So this is how you're going to make your widths, which is actually Flexbasis, a little bit different for each one of your various devices. So you're going to change that. And then to reorder, it's really easy. We just say order two, order one. We're all done. We don't have to mess around with relative positioning or any of that nonsense. So far, so good? All right. Y'all are falling asleep again? No? OK. Good. All right. So then finally, we're on to CSS Grid. Yay. All right. So why CSS Grid? First of all, it is in development. The specification is changing all the time. We have yet another editor's working document published today. So what I say right now may be going out of date as I speak, which just makes it a challenging to do a talk on this. But anyway, the specification is under development. There's really no row markup required here, because we're not clearing things anymore. We're going to put a big wrapper around our whole page. That will be something that we'll add, but we're not necessarily going to think about things in a row-by-row kind of fashion. The grid is designed to work in two dimensions. And I'll show you a graphic here in just a moment that will explain that a little bit better, what I mean. And then finally, the big recommendation here, the big takeaway is that we ought to be using Flexbox for these UI elements, so that image gallery or the series of media boxes or whatever you got. But we're going to use Grid for the major layout on the web page. Grid for the major layout on the web page. So this is the graphic that comes from the CSS Working Group. It's explaining Flexbox here on the top. So notice, here we've got eight things. And for whatever reason, the browser's laid it out with three in one row and five in the next. It's just the browser doing math. And based on the settings that you chose for it, that's what it calculated. It may not be what you want, but that's what you're going to get. And if you take a look at the bottom here, this is the Grid layout example. So you see how we've got essentially what amounts to call spans and row spans, if you remember the table-based layout days. So we're back to that kind of thing again. All right, but what is the big issue with CSS Grid? Anybody know? How's the browser support? Zero. Awesome. Yeah, so there's no support without flags. So you need to set flags in your browsers in order to get this to work. Even if you do set flags, you're still going to run into approximately five bazillion bugs, especially if you work in Firefox. So I recommend working in Chrome, set the flag. And the spec is still not fully implemented on some browsers, and or there are bugs. So as you think you're implementing something correctly, you're reading a spec, you think you've got the code correct, it doesn't render correctly, it may not be you. It may be the browser. All right, so what does the code look like this time? So same kind of thing. I've got a div with a class of wrapper. Notice I've got individual classes for each one of these divs. Anybody annoyed by that? I'm annoyed by that. I'm so old, I remember classitis. What's wrong with you people? So we've got, coming along here, there are going to be some various types of additional selectors that will allow us to select individual elements here without dropping all these classes in. So there's pseudo classes coming in a couple of other ways. Nears I can tell, they're not really supported in browsers just yet. So this is the way we're working with it for now. Basically, each cell in that grid layout is going to have its own class associated with it. The wrapper itself is going to get this type of definition. So display of grid and then a grid gap of 10 pixels, the grid gap being the distance between the cells and the rows and so forth. And who is offended that I said 10 pixels? Anybody? Yeah, some of you are offended. That's great. You should be offended because it should be percents, but percents don't work in the browser. This is actually a known bug, and if you read the spec, it'll tell you that the fact that this should be percents is if they get to it, they'll actually try to make that work. But right now, they're just making it work with pixels. And isn't the talk after mine, the guy who's going to talk, or maybe that's tomorrow, the one who's going to talk about why we should not use pixels anymore? Yeah, that's soon. In the afternoon. Excellent. All right, so here's the way this code looks. So there's a couple of different ways to write your grid-based layout code. And this is the one that sort of resonates with me. And we're going to think about it this way. If you start counting the separator lines between each one of these cells that we have here, we can start numbering them. We count like humans, not like engineers. So we start with 1, not 0, which is really nice. And then we're going to basically write this out. So for each one of these cells, what is it going to go across? So this first one is going to go from 1 to 2. So thus, grid column 1, 2. Makes sense? The next one goes 2, 3, 3, 4, and then I ran out of room. So what's the last one? 4 slash 5, right? OK, so that's the way that's going to work. A slightly more complicated example, what happens if you have a layout like this where you're going to have things going down the page and things next to it? You can do that with the grid row property. So this thing here on the left, column 1, is going to go from 1, skip 2, down to 3. So 1 slash 3 for that. And that's going to be that's location on the page. Now there is some alternate syntax for this. Like I said, I like the numbering version of this. There's also individual property elements where you can have your grid column start and have your grid column end and have your grid row start and have your grid row end. Like nobody's going to do that, because nobody's going to be typing all that stuff. So I picked this. The alternate syntax is actually to have some named grid template areas. So you can actually define these areas inside of your code and say, here's a header, and here's a footer, and so forth, where exactly that's going to appear in your grid-based layout, and then refer to those areas inside of the rest of your styling. And I just sort of run out of time to talk about that. But if you go to Rachel Andrews site, which is gridbyexample.com, she does have an example of this. And you can take a look at how that works. All right, so then if we think about reordering, so we take sort of that kind of idea here that I have my wrapper. And inside of that, maybe I have a header, an article, and an aside. How might this kind of reordering actually work? And I'm going to show that to you right now, just to point out to you that there is some code that is posted if any of you would like to access that. And then I will go ahead and show you this in the browser. Reordering example. So here we go. So here we are. We have an aside. We have a header. We have a title. I'm not a graphic designer. I type in background color yellow, green, and blue really well. They kind of go together. And so as we start to shrink the page down here at some point in time, we can completely rearrange things. How cool is that? All right. Awesome, huh? So I've moved my header. All the way down to the bottom of the page. And I move my aside all the way over there to the right. That's really something you can't do with a float base grid. And as I shrink that down even further, then let's say that this is the mobile layout. This is actually the source order for this HTML. So the source order is really important for accessibility purposes. You want people to be able to read this very easily from top to bottom. And search engines like that also. So this is going to allow you to put the source order in exactly the way it should be to best serve those populations. And then you can make it appear anywhere on the page that you want. Now, why you would do this in real life, I have no idea. Just because you can doesn't mean you should. OK? So don't get all excited. Backend people, if we have any back-end people here today, they're like, oh, that's awesome. I'm totally doing that. Don't do that. OK? It's just an example. All right. And I guess I'll show you some of my other examples here that I've got for the moment. I have a page that I coded the same way three times, because only you guys could get excited about that. And so I just got back from Barcelona, like I said. So this is the Palau de Musica down in Barcelona. So here's a web page. Here's some pictures that I took. This is, again, a float-based layout here. And as I shrink my page down, things are going to rearrange. Things are going to stack on top of each other. They're going to resize until I get all the way down to my mobile version. Let's call that the gold standard. Yay. Then I coded the same thing again with Flexbox. So this is a Flexbox-based grid system. And I deliberately did not do a whole lot with these images down here. So this is the images displaying their regular size. And however they're going to do whatever they're going to do, we can apply a little bit more CSS to make them behave the way we want them to. So as I start to shrink the page down again here, at some point they sort of stack on top of each other like this with Flexbox. It looks a little odd, but it works. You'd still understand what's going on. And then they're going to go like this underneath. And then we're going to shrink it down again down to a single column. So that's Flexbox. And then grid. So how did I code this? What cells here are under control of grid? Yeah, the layout part. So my find website, my site over here and the article over here, how did I handle the pictures? Flexbox. Flexbox. So once again, as we shrink the page down here, that's going to go ahead and rearrange itself. So these all look fairly similar is the takeaway for that. And like I said, the HTML and the CSS are up on GitHub. What am I doing on time? I don't think I really have a whole lot of time to go through and go through all that code, but you are welcome to take a look at it. And of course I'm on Twitter if anybody wants to tweet me any questions. All right, so let's just wrap up here. That's my code example. So if you are interested in learning more, there are some really great resources that are out there on the web. Oops, except the W3C editor's draft was updated today, not September 8th. So sorry, that date is wrong. I should have changed that this morning. But anyway, these are sort of the main places you can go to find really good resources on that. And then in terms of my current recommendations as to how you ought to be laying out your web pages. So first of all, if you need the browser support, you can't go wrong with floats, people. You can't go wrong with floats. All right, you don't have to worry about browser support, it just works. And if you're okay with a few prefixes and learning something new, then Flexbox is a reasonable interim step until we get grid support in all the browsers. Flexbox is in Bootstrap 4, okay? So the grid system in Bootstrap 4 and Foundation 6 for that matter is float-based by default, but for both of those frameworks, if you go into their SAS files and you change, there's a property in there that you can toggle on and say, use the Flexbox-based layout instead, recompile. And that is going to give you a Flexbox-based grid system instead of a float-based grid system. So that's there, it's in Bootstrap 4 coming soon. So that's kind of mainstreaming Flexbox, right? It's time to learn it. And then keep waiting for CSS grid. I mean, good stuff is always five years away, so this is probably five years away. Maybe we'll get lucky, it'll only be three. I have mentioned that maybe somebody will write a polyfill for it. How cool would that be? And then I have JavaScript people come up to me and say, oh, polyfills and overhead and performance and yada, yada, yada. So there's no perfect solution. The browser world is what it is, right? And we get the support that we're going to get. So keep your fingers crossed, because it's going to be great when it gets here whenever that is. And I am around if you have any other questions. So thank you very much. Come sit for some chats. The future. Thank you. So do you teach your students this new stuff that hasn't come out yet? I do, I do. I have a two semester course at Extension, Modern Mobile Frontend Web Design 1 and 2. So in the fall, they're actually learning selectors, specificity. Actually, they learn float-based layout and they learn regular world positioning, because my feeling is that they don't actually know that. Right. How many of us know that? They don't know it. When they get done with my class, they know it. And then in the spring, we get into Flexbox, Grids, Animation, some other really hot, petting-edge stuff, which is really fun. But they got to know the basics first. You don't know the basics. It's hard to learn the fun stuff. Do you teach preprocessors as well? I do, everything. In the spring term, I teach them customer responsive design in SAS. And we do a little bit with either foundation or bootstrap. I haven't decided which one we're going to take a look at yet. But that's a nice way of, I think, it's a very important skill these days. Not only if you truly know HTML, CSS, and JavaScript, you can learn the next framework that comes along. It's just not an issue. Yeah, absolutely. And unfortunately, the way that the industry is trending, I see it as, I know Angular. So I'm hot stuff today until React is the hot thing. And then you're no longer hot stuff, right? So if you actually learn the basics of these things, then you can switch to whatever you want to do. But there's still definitely a place for knowing how these frameworks work because you've got to go read the documentation, you have to figure it out, and actually make it work. So I do incorporate either, like I said, either foundation or bootstrap, because I want students to start getting that sense of, how do I read a framework? And how do I start to implement it? Because I will not always be there for them. Yeah, absolutely. The super, I love what you're talking about the basics of understanding the core languages. And also that you teach new stuff, because I feel like that is so absent in so much web education. It's kind of like, oh, well, here's this thing that you need to know. And yeah, welcome. And then you see these hires. And you're like, what are you learning? There's so much interesting stuff that's out there. And I know we in academia have not done a good job of servicing our students. And that's actually a really serious kind of thing. Academia never figured out where web was supposed to fit. So it sort of wound up in the art department with the graphic designers who learned what Photoshop, Illustrator, and InDesign. And so therefore, how do you do web? Dreamweaver, right? And it wound up over in the business school where they go learn social media marketing and digital marketing and stuff. But they don't ever understand how to incorporate that curriculum into a web page, because that's content that drives a website. So we never get there. And consequently, also the marketers actually never learn HTML and CSS. They never know what they're doing. It's wound up in the journalism schools. So now we're getting big data into journalism schools. But at the same time, they might be learning Python, but they don't actually know how to do anything with a web page. So that's a little bit odd in some cases. So we in academia have really failed in the web department. At the Harvard Extension School, we have a digital media degree, which is where I'm teaching. Digital media. It's front-end web development, video, and instructional design. Please explain that to me. I don't know. I tried to tell the story that it is storytelling. Storytelling across media, right? So if we focus on the story, then it starts to make sense that we would put together front-end web design, video, and instructional design. We're just telling it in different media. But still, we in academia are struggling with the web, because it is so interdisciplinary and so across department. Yeah, but it's great that you're there and having folks that can champion, they can teach it, and work with other professors, and be inspirational. I mean, you've inspired me off about your career. So there was one question I want to make sure we do get to ask you. Someone asked, what happens if two elements are configured to cover the same cell? Kasha, that's a great question. Could that happen? I'm thinking it couldn't necessarily happen, because the way the grid is set up going across and down in terms of rows, you would not be able necessarily then, hmm, I'm going to have to think on that, because I have not tried that. Oh, we can do some hacking afterwards. We can do some hacking afterwards and see. And then the real question will be, is it the browser that is configured wrongly that is allowing us to do it or not do it, or is it actually in the spec? So potentially finding bugs, maybe. Essentially finding bugs, yeah. My guess would be that the way you really want that to work is the answer to that question to be no. Yes, ideally, right? That it wouldn't even be able to happen at all. That it couldn't happen. All right, well, we should find out. So if you ask that question, find Jen, do a little hack, and see what you come out with. See what happens. Amazing. Thank you so much, Jen. Love your talk. Yeah.