 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 and I go, haha, 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 wanted 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 Hendricksen 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. Good. 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 contents 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 say it to Flex. Put the content two of the pieces next to one other than one piece, not. 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 and nesting. Under scores 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. It 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 aside 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 CodePen. 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. All right? But this means I need your absolute attention. Now I'm going to crush through some stuff here. It'll be nice and quick. Okay? 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. I just don't appreciate you 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. 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 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. A 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. 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 is 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 layouts. 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 2 to column line 4 and from row line 2 to row line 3. That means you literally find column line 2 and column line 4 and you put the content in between those two lines. Same with rows. What? Here 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. You can just do a few more shifts or anything like that anymore. 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 and keep track of the line numbers and then what if it's responsive and you keep changing the grid? It gets kind of nuts. In my layout, I move elements, particularly the header and the footer. 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. 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? For instance, here I have the three cells at the top, our 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, 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, 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 ehhh what is happening? This doesn't actually compute yet. 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 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 had 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 sub grid 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 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's 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. It's not 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'd 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 so you have these so you they give me way too much credit there are always these 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 grid this CSS property and we can use that to ask 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 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 so that means the site won't look the same in 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 the 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 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 your 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 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 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 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 jenn 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 kuhn, 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's no RTL style sheet because with css grid you don't need it anymore I wrote an article about this that came out in smashing magazine yesterday called building production ready css grid layouts 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 I built a new building and 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 of hours to make a path 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 designing the browser is now really easy theme developers start using css grid today in all your work even if it means providing full fall backs for everything you do I have links for that if you want to 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 it means most of what page builders does will be handled inside wordpress itself so if you are building a page builder you need to get on top of this 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 it's a 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 alright number one what number three thank you very much awesome okay we're going to 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 going to be for questions if people want to come in and get into the detail expert bar and house men right okay you are going to have to ask questions if people in the room is running late they're not as sharp as we are so I need some questions on the floor why 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 back okay so are you all familiar with Gutenberg the new content editor okay 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 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 up posts 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 guy I'm not saying that this is what the Gutenberg team is working on now I'm sure if anyone in the room is 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 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? that was what I was looking for, thank you kind of mind blowing very cool come on, there must be some questions here yes, so do you want to hop to the microphone Graham, that would 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 it's an unbelievably informative presentation you mentioned Flexbox earlier do you think that with the use of grids that it's going to effectively replace the necessity for Flexbox or could you see the need to coexist 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, now we can use float for what it's supposed to be floating elements, letting flow around it flexing contents within a box to 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 okay, yes again, Mitri hi Morten, thanks for the great talk and my question is I know that the future of the web is 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? there are two questions there is there a strategy in place to make the default theme in WordPress use the CSS grid? 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 one is considering the introduction of Gutenberg, the next WordPress theme should display what it's 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 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. Thank you. Anyone else? Anyone from the floor? I think you're going to have to have a bundle at the expert bar. That would be good. Oh, yes. 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 theme I built is 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 websites, 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 more people in the 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 the next thing that comes up when I do this talk or even talk about CSS grid is what is happening to the frameworks people use? Bootstrap, foundation, all these things. Are they going to adopt CSS grid? I actually can't answer that question. I know you have it. 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 framework. 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. And 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.