 Just before I get started, the slides for this talk are on my website right now. I'm telling you this because there's a ton of content, and we have a short period of time here. So I'm going to cram through it, and you will want to review later, so now you know where to find it. I have a book in my bag. And on that book, I draw all sorts of layouts all the time. That's how I design websites. I start with a piece of paper, and I just draw some stuff. This would be super cool. So a couple of years ago, I made this design. And when you look at it, you go, yeah, this looks like a standard web design. It's fairly basic. It has some interesting stuff. Like there's the categories and title at the top, and then you have the featured image, and then you have the meta content on the left-hand side, or right-hand side, right-hand side, and then the content itself. And you go, yeah, sure. This is relatively easy to do, except on smaller screens, I wanted to make a slight change. Move the meta content from next to the content up above the featured image. And then on even smaller screens, I wanted to move the featured image up above the rest of the content. And at this point, you go, this is not so easy. You see, any one of these three on their own is a piece of cake. Combined on one website with just CSS and HTML, impossible, because you'd have to change the markup structure to get this to work with old layout tools. So instead, you'd have to go with JavaScript and you'd have to change everything, which is not great because then you're changing everything, and it shouldn't be like that. Today, I want to talk to you about a whole new way of thinking about layouts on the web. And this whole new way of thinking about layouts will truly change the way we design websites from here on forward. I'm not talking about emerging technologies that are coming two or three years from now. I'm talking about technologies that are here today that you need to start using today. It's called CSS Grid. I'm Morten van Hendriksen, and let's get cracking. So just to prove to you that I'm not making things up, this is the layout I drew built purely in HTML and CSS and WordPress, running in the browser today. And all the stuff that you saw is happening plus a bunch of other things. This website you're seeing here is my website. So if you go to morten.com, grab the site of your browser and start doing this. You'll actually see the content jumping around on the page. And your brain will say, there's some JavaScript happening here, or this might be bootstrap? It's not. It's just pure, simple CSS. And in fact, the HTML behind it is cleaner than any HTML you'll ever see from WordPress before this point. So instead of going through the entire WordPress theme, which will take way too long, I decided to make a slightly simpler example. So I made this little web page for the room we're in. So this is the speaker track for today. And when you look at it, I want you to think about how you would make this layout using only HTML and CSS. No frameworks, nothing else. Just look at it for one second, I think. How would I mark this up? All right? It's here. So first, you're probably going to do something like draw boxes around the main items. So here we have some sort of header thing. And then there's a huge section on the side with all the content. And then on the other side, there's like a logo. And then there's some other sidebar stuff. So we have those boxes, and we'll mark that up in HTML. Then because we have to lay this out, we need to start grouping elements. So below the main header thing, there's a bunch of content. But the content is displayed in two columns. So we need to put a box around them so we can float them left to right or use flex to put them left and right. Then in the sidebar, we have another grouping of content. And since we're floating that, we need to put a box around that. And then inside the sidebar itself, there's two more pieces of content that need boxes around them. So we end up with something like this. The blue sections are semantic markup, things that are required for the document to work. This is the actual content. The red sections are boxes that we drew around content solely to say this is a thing that will go next to another thing and this is another thing that will go next to another thing. And you can see that the markup is full of that stuff. When you start looking at responsive layouts, that gets super complicated because in this responsive layout, you see that thing, the black box that's on the sidebar? That's actually the header. And the small box on the far right-hand side that has some address information, that's actually the footer. And on a mobile display, the semantic structure is as it should be on the other end of the scale, everything has been moved around. And then you say, I can do this. Bootstrap is my friend. Everything is fine. The problem is what Bootstrap does to fix this and all the other frameworks is take the HTML and apply some JavaScript and move the HTML around in the document to get this stuff to work. That means for accessibility reasons, the whole document is now jumbled, which is not great. It also means we're leaning on external technologies just to do something that should work on its own. The problem is web layouts, the way we've been doing it since the beginning of web time, have always been broken. And all we've been doing this entire time is refine how we break the layout. So we started with tables, then we had frames, then we had layers, then we had floats and clears, then we had Flexbox. And all this stuff is trying to solve this fundamental problem, which is a web document, so HTML is a document that starts at the top and ends at the bottom. And any time you want to put something next to something else, you have to somehow break the document just to do that, which goes against everything we want to do in design. Consider this super simple example. You have a box and then two boxes inside, two-column layout. Simple, right? Should be. Well, if you look at just the markup, this is what you get. Just two boxes below each other with a box around them. Then you have to put them next to one another, so you use float. You float one item to the left and the other item to the right, and then the box that surrounds it collapses. Because, of course, you're floating content, so you're pulling them out of the structure of the document and then you want content to float around it. To fix that, you then have to introduce a clear fix. So that's just empty content that you stuff in the bottom corner solely for the purpose of making that box wrap around the content again. And then you say, well, we have better tools now. We have Flexbox. And it's true, Flexbox does solve this problem, but if I make it just one element more complicated, Flexbox doesn't help us anymore. Because now, we can't save to Flex. Put the content two of the pieces next to one rather than one piece, none. Flexbox would try to treat all three as the same thing because Flexbox works in one direction, either horizontal or vertical. So now, we have to introduce an extra box. And say, can you please flex this container thing next to the other thing? And then inside the container, we'll put two things underneath one another. This is a hack. This is not the way it's supposed to be. This is truly a hack. This is how we design websites today. We cheat. We build a bunch of extra stuff just to get our layouts to work. It's nuts. If you think about it, it's totally crazy. Float and Flex force us to put extra content into our HTML for the sole purpose of layouts, which goes against everything we've learned about how to mark up websites. This is also layouts today. This is how we have to do things. Well, it is today that you are going to change all this. Just before I get into it, consider what the web looks like right now. This is Bootstrap, the official documentation, telling you how to make a layout that has two columns. Look at the HTML. Look how many nested divs are necessary to get this to work. This is WordPress theme builder plus some sort of page layouts plugin. I can tell you by looking at this HTML, all of this stuff generates a box with some content in it. But it's necessary because we have to do all this floating and clearing and nesting and nesting and nesting. Underscores does the same in the slightly less extreme version. When you look at the overall markup of underscores, there's a bunch of elements within underscores that are there solely for the purpose of layout. So the blue boxes here are the header, the main, the aside, and the footer. The red boxes are there for layout purposes. So what if we could take all that extra craft away, have just the semantic markup, and nothing else, and then solve the layout problems in CSS in a clean and simple way? Instead of this layout, we'd have this, which is easier to read. Makes way more sense. What if we didn't have to do all this crazy stuff anymore? If you look at my example, the blue items are the ones that matter. The red don't. But even if I take away the red items, the structure of this document still makes no sense. We have a heading one, then we have a main, then we have a header, then we have an aside, and then we have a footer. If I take all the extra craft away and reorganize the document, all of a sudden, it makes much more sense from a semantic standpoint. Header, H1, main, aside, footer. The problem is, up until this point, all our layout tools have been content out and one-dimensional, meaning you apply a layout to an individual item, and then you have to relate that item to other things. What we need is a two-dimensional layout that works layout in. And that's what CSS Grid gives us. So instead of doing all the boxing thing I was talking about before, what if we start by saying, here's what we want. Let's apply a grid to it. Just like you would do in design. You draw a grid on top, and then you say, we're going to place contents on this grid. So you have your semantic markup. Then you simply grab each item, the header, the H1, the main, the side buyer, and the footer. And you place them on the document. That makes sense. All of a sudden, you know that thing with the guy with the blinds that everyone shares on the internet all the time? It'll be like, zip all the blinds work. Too bad. This works perfectly. Go to Code Pen. This example is a live website. All the screen grabs are from the website. All the content restructures the way it's supposed to. You can play around with it. You can see exactly what's going on. And the craziest part is when you read the code, you'll be like, I understand what's happening here. I don't even need to understand CSS Grid. I can actually see how this works. So how does it work? I've been told that listening to my talks can be a bit like trying to capture a fire hose sometimes. So I've decided to try to structure this in such a way that it's more like strapping fire hoses on a platform and then flying. But this means I need your absolute attention. Now, I'm going to crush through some stuff here. Nice and quick. So brace yourself. Stand firm. CSS Grid needs new terminology. So we have Grid Container, Grid Item, Grid Line, Grid Cell, Grid Track, Grid Area, Grid Gap. I apologize. I know you have to do this. There's a simultaneous translator who just not appreciate me speaking fast. So Grid Container is any container in your document that you create a grid inside. You do that by simply declaring display Grid. You can do this to as many elements as you want on the page. It doesn't matter. It does not matter. A Grid Item is any direct descendant of a Grid Container. So if you create a Grid, any direct descendant automatically becomes a Grid Item that's placed inside the Grid, but only the first level descendant, just like it is with Flexbox. A Grid Line is any of the lines that you draw inside the Grid, horizontal or vertical. The Grid Lines are numbered by default. So the first edge of the Grid, either vertical or horizontal, has the line number one. And then you just count them, two, three, four, five, six. And the last one has the last number. Grid Cell is any cell inside the Grid. A Grid Area is any defined rectangular area inside the Grid that covers more than one cell. A Grid Track is either a horizontal track or a vertical track, so a row or a column. And a Grid Gap is the space between each of the cells if you choose to add basically gutters. Got that? Good. Don't worry, these slides are online. You can go look at them later. And this will become part of your vocabulary anyway. So CSS Grid in a nutshell. How does this actually work? How do we apply it today? Number one, define a Grid on an element where you want a Grid to appear. Number two, place items within that Grid where you want them to appear. Number three, make world peace. That's all there is to it. What does it look like? Well, here's my example. This is the semantic markup with no CSS apply, except for color. Then we start by grabbing just the site container, that's the container that wraps everything, and we declare display Grid. So now we have a Grid. Then we decide how many columns and how many rows we want. I mean, you do that using Grid template columns and Grid template rows. And here what we do is say the distance from the edge of the Grid to the first line, that's the first value, then the distance to the next one, it's the next value, and so on, and so on. So you're declaring the width between each of the lines and then another line is drawn. This comes with new features like the FR or fraction value that allows you to say, take one fraction of the available space and then put a line there. So you can make truly dynamic layout. Do the same with rows. You just declare a list of where you want the rows to appear, and they will appear automatically. Once you've drawn rows, you have cells, and your browser automatically places all the direct descendants of the Grid element in those cells, from the top left to the bottom right. Then for each individual element, you can, if you want to, declare a Grid column and a Grid row property and say, I want this element to appear from column line two to column line four and from row line two to row line three. That means you literally find column line two and column line four, and you put the content in between those two lines. Same with rows. What? I hear you see what I'm talking about. We're doing layout in. So we create the layout first and then we just dump content where we want them to appear. When you look at this, you realize there are all these new things you can do. Like, for instance, create actual white space on a layout. You can just choose not to populate cells. Then you have white space. No spacer, GIFs or anything like that anymore. And once you know this, you can then place any of your elements anywhere you want in the Grid. Looks promising, right? But you have to do all this counting stuff. I keep track of the line numbers and then what if it's responsive and you keep changing the Grid? It gets kinda nuts. In my layout, I move elements, particularly the header and the footer. Keeping track of that with numbers would be a pain. And to be fair, you can actually give each of the track lines a name and refer to them by name instead of by number, but that's still quite a lot of stuff to deal with. So we have this new property called Grid Template Areas. And Grid Template Areas is nuts. It's almost like ASCII. You declare Grid Template Area and then you write out each of the cells in your Grid and you say, what is the name of the cell? So for instance, here, I have the three cells at the top are title, title, title. And then we have main header header and main sidebar footer. Then you use the Grid Area property on individual child items and you just declare the name of the area you want that element to appear. So if you say Grid Area Header, well that's wrong, oh no, it's right. If you say Grid Area Header, the element goes to the header area. If you say Grid Area Title, it goes to the title area. And this allows us to do crazy responsive web design. Because that means instead of doing a bunch of crazy stuff, all you have to do is change the Grid Template Areas and then the items that you've already said this is going in the title area, this is going in the header area, it will just move around in the grid. So your responsive code and your media queries become very, very simple. And anyone who reads this code can see, okay, so we have a grid that has two columns and then we put the title and title and main and header and main and sidebar and then when the screen gets wider, we have three columns and here we have title, title, title, main header, header. The CSS actually visibly declares what's going on. No more, no more, everything just works. This is that point where your brain will start going like, what is happening? This doesn't actually compute yet. And trust me, I've been working with this for over a year. Every time I sit down and do a new Grid Layout, my brain keeps telling me to do things the old way and I have to keep throwing my brain out and then replacing it with a new one. Which means my kid is walking around in the background there making noises when he grows up, he won't think the way I do and he'll be like, this is super simple and then I'll tell him about floats and clears and he'll be like, why would you do it like that? That's so crazy. There's also this weird little thing called nested grids. Now, in the original grid specification from a couple of years ago, you have the ability to create a grid and then have an element within the grid inherit the grid so you would get consistency. That never happened in browsers. So instead what we do is we declare multiple grids inside one another and it turns out that's actually a huge benefit because then you can say I have an overall layout grid where I lay out my header, my footer, my sidebar and so on, then you can have a subgrid just for the main content layout and you can even have a grid inside that grid for something else and you have detail control of every single component within your layout. And as you know, the new trend in web design is to work on component level. Well, nested grids allow you to literally work on component level and this means, for example, if you're making a WordPress theme, you can make individual content grids for individual types of content. So if you apply a certain class to any element then you can change the grid completely using pure CSS. No more fancy templates and crazy PHP, just use CSS. But older browsers. This is the absolute biggest argument against CSS grid. First of all, all modern browsers support CSS grid now. Every single one of them, there is an issue but I'll get to that in a second. Before we get to that, there's also the question of I think it's too soon. This is emerging technology, it's not mature yet. True, it's emerging technology but small websites like the New York Times have started using them so I would say any client that says we're not ready for this yet because no one is using it can be urged forward. This is something we can do today but there are two elephants in the room, right? So you have these, so you give me way too much credit. There are always these things that don't work the way we want to. So we have Internet Explorer 10 and 11 and we have Edge who are not currently following the spec exactly. Point of order, if it wasn't for Internet Explorer 10 we wouldn't have CSS grid. CSS grid was invented for Internet Explorer 10. And the reason why these two browsers are lagging behind is because the other browsers decided to change the spec but the spec is built into Windows. So Microsoft has to update all of their operating systems to get this to catch on. However, Edge is probably a couple of weeks away from getting full grid support. And I'll show you how to create proper backwards compatibility for all of the browsers. There's this other thing that has nothing to do with CSS grid that's called a feature query that we can use now to ask a browser do you support this CSS property? And we can use that to test whether or not the browser supports grid. The canonical best practice is to ask at support display grid works exactly like a media query. So if it says yes then we run the code inside. The problem is Edge does support grid it just supports the wrong spec. So if you're testing for grid support in Edge test for something that Edge does not support within the grid spec for example grid area auto. Then Edge won't try to run the grid. My recommendation here is actually to serve up the mobile experience on all browsers that don't support grid. And this is where people fall off the horse, right? This is like, wait, wait, wait, wait, wait, wait. So that means the site won't look the same at all browsers? That's exactly right. The thing is we've been doing responsive web design for 10 years now. No, we have not. We've been doing responsive web design since 2010. And that we've established an entire language around not serving up the same experience across all browsers because on a mobile browser the website looks totally different from what it does on a large desktop browser. There is no actual reason why a website should look the same across all browsers except that we keep saying they should. So we can change our methodology around this. Making everything look the same across all browsers is a bad habit. We should be making things look the best they can on whatever browser they're supported in. Responsive web design allows us to do this. We just have to migrate it from not just saying responsive web design is about the width of a screen to also say we can make it responsive to the age of the browser. Accessible mobile-first layouts work well on all browsers. If you don't believe me, go look at the mobile version of Wikipedia on your desktop browser. You will never use regular Wikipedia again. The mobile version on the desktop browser is so much better. I don't understand why they just don't move forward. This is progressive enhancement. This is our responsibility. We progressively enhance the web because if we don't, then we'll get stuck in the past forever. So practical approach to CSS Grid right now so you can use it when you walk out of this room. First, build accessible mobile-first layouts without Grid. That is your baseline. So make it work on a mobile phone. Make it sure that it still works when it's on a widescreen. Then use that mobile-first layout as the fallback. So if everything goes to hell, mobile-first works. Then use Add Support to detect grid support at the appropriate breakpoint. When everything starts looking weird, add a grid, then keep scaling up the width of the screen. Add another grid, add another grid, and another grid because people have screens that are this wide right now. So you need to account for that. If you don't believe me, go to my brother's house. He has a ridiculously huge screen. So remember the layout I drew that was impossible? If you apply Grid to it, it's not only impossible. It's something that makes sense and just works. And it's the layout that's in the new theme on my website. And you can go check it out on GitHub and put it on your own site as well. Your path to CSS Grid starts here today right now. Number one, use Firefox when you develop because Firefox has a grid inspector. So anytime you find an element that has grid on it, there's a little hashtag-type thing that's supposed to look like a grid. And if you click on that in the inspector, the grid lines appear in your browser and you can actually see the grid while you're working with it. I'm sure the other browsers will catch up, but right now Firefox has it. Second, Rachel Andrew has a website called Grid by Example. This is basically doctrine. Rachel Andrew is by and large the reason why we have CSS Grid in browsers today. She's been pushing it for years and years and years and she's documented absolutely everything. So we want to know how it works. Go to Grid by Example. Mozilla Developer Network has tons of documentation, most of it written by either Rachel Andrew or Jen Simmons. It is a great resource. It's documented every single property and everything that's going on. CSS Tricks has a complete guide to CSS Grid, which is just like the complete guide to Flexbox, which is also the same content over again. Koon, my new theme, which is running on my website, is on GitHub and you can go check it out, pick it apart, send pull requests, complain about the lack of internationalization. What you'll notice is CSS Grid respects text direction. So there is no RTL style sheet because with CSS Grid you don't need it anymore. I wrote an article about this that came out in the smashing magazine yesterday called the Building Production Ready CSS Grid Layout today that covers what I talked about here plus how I designed the theme plus a bunch of other stuff. Go read it. Go where you want to go. Go where you want the web to go and the rest will follow. We in this room control a large percentage of the web and if we all adopt CSS Grid now and do it properly, the web will follow. Don't believe me? This is the LinkedIn office in Carpentria that I go to occasionally. They built a new building and then they put this huge patch of grass directly in front of the entrance. So if you look at the image here, there's a building here. So everyone walks like this and I saw the patch of grass and this was taken on the first day and I'm like, this is insane. Whoever designed this was not thinking about the end user. So I just started walking across the grass and I was walking across the grass for a couple hours to make a path and then a couple of months later someone sent me this picture and then a week ago someone sent me this picture. If you pave cow paths, meaning walk where you want everything to head, eventually someone put paving stones down. So designers in the room, CSS Grid means you can finally use proper grid systems in your designs. And it also means the design of the browser is now really easy. Theme developers, start using CSS Grid today in all your work, even if it means providing full fallbacks for everything you do. I have links for that if you wanna talk to me later. Framework people, CSS Grid cures your dividers. So you should take a strong inoculation right now. Page builders, this is make or break time. CSS Grid plus Gutenberg and WordPress means that most of what page builders does will be handled inside WordPress itself. So if you're building a page builder, you need to get on top of the spec and figure out how it fits into your business model. Set best practices be responsible because CSS Grid allows you to mess around with the structure order of your content and can make sites really inaccessible. So don't do that, but use it for good. Build the web you want to see and repeat after me. Make it accessible, make it fancy, and make sure the fancy doesn't break accessibility. Oh, come on, stand up. Every one of you stand up. Come on, every one of you stand up. This is your mantra, all right? Number one, what? Number two, number three, thank you very much. Awesome. Okay, we're gonna take five minutes of questions now. Do we have questions in the room? Because I guess the alternative is everyone piles on Morton in an expert bar or somewhere like that. Where do you think you're gonna be for questions if people wanna come in and get into the detail? Expert bar enhancement? Right, okay, you are gonna have to ask questions. The other room is running late. They're not as sharp as we are. So I need some questions on the floor. While you're thinking about that, I have got a question to get started with. What really is the Gutenberg implications with CSS Grid? Can you give some really nice examples straight off the bat? Okay, so are you all familiar with Gutenberg, the new content editor? So there's a new content editor coming to WordPress called Gutenberg that works on the principle of block elements. So instead of saying you write a bunch of content and you add an image and you write a bunch of content and there's just one big blob, you are now able to say add a block that is a quote, add a block that is a regular text, add a block that is something else, add a block that is a video, add a block that is an inline something. And the idea over time is that Gutenberg will evolve to have things like columns and things like other types of layouts which is completely new to us in the WordPress community. If you take that idea that all the stuff that you put into a blog post or eventually all the stuff you put on the entire view because Gutenberg will likely evolve to the point where you can customize the entire view including your header and your sidebar and everything else. And then combine that with CSS Grid. There's a door that opens to customization within WordPress that is truly mind breaking, which is, imagine if you go into the content editor of WordPress and you're writing a post or some other type of content and then you say, for this content I want to have an extra sidebar and then you can go in and just draw out a guide and place content to the left or the right of that guide. I'm not saying that this is what the Gutenberg team is working on now. I'm sure if anyone in the rooms from the Gutenberg team they're like, what are you talking about? This is not part of, I haven't written this article yet. I have crazy ideas, but the thing is, once we have CSS Grid, all the layout components of a layout are handled by the CSS. And that means you can provide different style rules for individual types of content on the page. And it also means that WordPress can generate different layouts in pure CSS because Gutenberg outputs everything at block levels. So you can target each individual block that's added to the content as a grid item. So this opens the door for WordPress itself to become a page builder. It also opens the door for WordPress itself to allow for custom layouts for each individual piece of content to create across a WordPress site. This could happen. It should happen. It should also be in the hands of theme developers to control how much of this customization is possible. But this is one of those times when all paths are open and whatever we do decides where we end up going. Yes? Yeah, that was all I was looking for. Yeah, okay, thank you. Kind of mind-blowing. Very cool. There, come on. There must be some questions here. Yes, so do you want to hop to the microphone, Graham? That'd be awesome if you could do that. There's another microphone on the other side as well. But Graham, your question, please. Yes, thanks Morton. That is an unbelievably informative presentation. You mentioned Flexbox earlier. Do you think that with the use of grids that it's gonna effectively replace the necessity for Flexbox? Or could you see the two coexisting in any situations? Will CSS and Flexbox coexist? Absolutely. CSS, grid, and Flexbox coexistence allows us to do magical things. They should be used in conjunction with each other. In fact, grid, flex, and float all have a place in layouts. It's just now we can use float for what it's supposed to be, which is floating elements next to other elements and letting content flow around it. We can use flex for what it's supposed to be, which is flexing contents within a box to either line up horizontally or vertically or break nicely. And then we can use grid for the overall layout. So one of the most interesting demos I've seen of CSS Grid so far was a grid where they used... They made an actual grid and they put content inside each of the cells and then they used flex to scale the contents in each of the cells to be consistent. So using grid and flex together makes for... That gives us extra layout tools that we previously didn't have because we can now relegate the responsibility to the right type of tool. Thanks. That was a great answer. Cheers. OK. Yes, again, Mitri. Hi, Morten. Thanks for the great talk. And my question is... I know that the future of the web is kind of influenced by what default WordPress themes do in terms of layouts, in terms of CSS, in terms of HTML. Do you have a strategy to advocate CSS grids to use them in default themes and how we as theme developers can influence that and what are step-by-step guide to use CSS grids more? OK. There are two questions there. So first, is there a strategy in place to make the default theme in WordPress use the CSS grid? Yes. I'm building a conspiracy to make that happen. I started it last year. So... But seriously, there are conversations around this because hopefully the next... Considering the introduction of Gutenberg, the next WordPress theme should display what is possible. And as far as I'm concerned, what is possible becomes more interesting if we use CSS grid for it. Of course, when WordPress ships a default theme, you have to consider the fact that WordPress is a global tool that people use all over the world and we have to account for every single type of user, including users that are on older hardware, on slower networks, on less updated browsers. So in that conversation, we have to have a conversation about backwards compatibility, about how to handle fallbacks properly and all that kind of stuff. And my scorched-earth policy on progressive enhancement might not work for WordPress core, but I think we're going to get there. As for everyone else who is not developing a core theme that ships with WordPress, you should use CSS grid in your layouts, even if it's just a progressive enhancement for modern browsers. Because a year from now, two years from now, five years from now, this is what's going to be expected and you need to learn it now because otherwise the kids that are in school now who are learning web design, who are learning this stuff, will just jump over you because this is better and easier and more performance. Thank you. Anyone else? Anyone from the floor? I think you're going to have to have a bundle at the expert bar. That'll be good. Okay. Oh, yes. Yes, sir. So for those of us who like to learn by breaking things, is there a CSS grid theme you'd recommend we start off with? So as far as I know, based on doing no research, I think the Kuhn theme, I built this probably the first WordPress theme that only uses CSS grid for layouts. I don't know if there are other things that do it. By all means, go trash it. It's on GitHub and it's even on my website, so you can just muck around with it on the website. I'm going to document that theme once it's done. It's still in its infancy. But I'd like to see more themes showing up. The thing with CSS grid is, all the things that we know about layouts are no longer relevant. This requires a completely different way of thinking about web layouts. And if you approach it that way, so you just start designing something without considering floats and clears and everything, then you can do new interesting things. And I would love to see our community start building new and interesting designs using CSS grid layout that break the norms. You'll notice that Kuhn pretty much sticks within common parameters about design because I want it to be something that people can relate to. But I think the next theme that is built should be something totally new and different. Yes? I have a question. Yes? So, one of the things that comes up when I do this talk or even talk about CSS grid is, what is happening to the frameworks people use? So, Bootstrap, Foundation, all these things, are they going to adopt CSS grid? I actually can't answer that question. I know you have it. So, that's why I'm bringing it up. I can't answer that question. I went and looked at the beta version of Bootstrap yesterday and it does not have CSS grid in it. They're doubling down on Flexbox as the layout module. I'm interested. It's interesting to think about where these frameworks will go next because the frameworks are very much rooted in this idea of using divs and containers to create these advanced layouts. And with CSS grid, a lot of that goes away. So, if the frameworks were to migrate to CSS grid, they would have to break their standard practice and retrain all the people who use it. That might mean that these frameworks will date themselves out of the game. It also might mean that you in this room can build a new, better framework based on CSS grid that may out-compete these old dinosaurs. Just think about that. It's nice to end on a call to action, isn't it? Thank you very much, Morton. That was fantastic.