 I welcome everyone. This is the CSS Grid, Gutenberg, and the feature of Layout Session. First off, thank you so much for inviting me. Thank you to the organizers. A lot of work goes into putting this together. And the thing I love the most about WordPress is its community. Thank you so much. Thank you to the sponsors. All right. A little bit about me. I'm a designer on the web, depending on the day. Sometimes I'm an imposter, sometimes I'm a web designer. Sometimes I'm a maker of things, a destroyer of things. Most of my work I do, I do a lot of WordPress work. This is a website, this is a WordPress site for a fantastic, fantastic organization here in Canada involved called Arts Everywhere. They provide artists with a voice and a room for conversation. Check it out if you have a chance. I do also do a lot of contractor work, a lot of design, a lot of graphics for the local club in New York, some graphics and email templates. Email templates. Yeah. And I'm a senior UX mentor at the oldest bootcamp online blog. Check it out if you want. All right. So I'm going to split this talk into five sessions, right? Why grid? How grid? When Gutenberg writes, how does he play into this new technology? And then most, depending on how much time we have. All right. So why? Let's start with why. Why grid? So what do we have here? We have a book, children's book. We have a, wait, wrong movie. All right. Good. So we have a Christmas movie and an artist. They might have a few things in common. The one thing they have in common is that they're all from the 80s, right? Which means they are all older than the web, which I am older than the web. So it makes me feel this way. And that's the context that I want you to treat this talk and this work of overall. How young this medium is. You know, all of these mediums have years, right? Hundreds of years, thousands of years on us. This is a really young medium that's moving, that's barely 30 years old. That's moving really fast. And right now, right now is the perfect time to start. Whether it is your first blog, your assistant, a developer, whether, you know, you went to the wedding next door and you got bored, right? Right now is the perfect time to start learning about design, the time to get excited about the design for the web. So let's take a quick step back as to how layout specifically on the web has evolved, right? So the first website by Sir Tim Berners-Lee is 1989, HTML comes around. That's the layout with no layout, right? Left to right. You hit the wall. Next block. Right? That's how it worked. That's the whole inline block thing happening. There was no fanziness, no nothing, right? 1995, HTML comes around. And this is one of the most popular websites of the time, right? Space Jam. And as you can see, the designers got really excited about this. We don't care what tables are for. We just saw an opportunity to do a grid, to have some fun, to transfer whatever we saw on paper and print to the web. So this was the first time that we saw that we wanted to do something fun with this medium. So that's 95. 95 also is when JavaScript comes around. And JavaScript is worth noting because JavaScript is amazing, right? If you're learning, it's a huge asset to have. If you don't know it, learn it as you go. It's harder for some people than others. But JavaScript is very different from CSS. As in CSS was sort of built by amateur, it was built as a very, very forgiving declarative language that the browser sees as it's being built for layout, right? It's layout, layout, layout. JavaScript does a lot of things, but JavaScript should not be used as a layout thing. And yeah. Wait. One second. Oh. All right. Enough with the pop-ups. That's the point. Yeah. So learn JavaScript. Use it. But when it comes to layouts, JavaScript is not the solution that we want. And then 96, just a year after, Flash comes around. And this is a website I built about a decade ago for a pretty awesome organization in New York called FC Harlem. Yeah. And you can see Tom Cruise right there, right? I'm moving stuff around and I'm playing around with keynotes and dragging things and keyframes and dragging things and moving things around. And then I just put my movie on the web and that was done. I had a website. But there were a few flaws with this, right? It's horrible for SEO to put a movie on the web. You have to pay to build it. And overall, it did not move on well, right? So at the time we found out, we thought that was the solution. We realized it wasn't. Someone came around, some random person and said, no, it is not, right? And then the whole thing just died. 98, 98 is an exciting year. Things change all over again, right? CSS comes around. And CSS, this, this super awesome language. Let me just, one second. That's me. There it is, all right. So ZenGarden, right? One of the most popular websites out there. You have one HTML file and you can build hundreds of websites that look different from the semi-contact. That was mind-blowing at the time. And as you can see, everyone approached this in a different way, but everyone embraced it. But the screen size looked the same, right? It was a sidebar. And it was the main content, because that's the way your screens looked. And I'll play this again. Well, then this happened, right? Things got a little bit out of head. And this, and this, right? So we started doing this, right? We said, you know what? I don't really care about the screen size. I'm going to build for device X, for device Y, and then maybe through some JavaScript, we'll figure it out. Or they just let them change their screen. I don't know. But in 2010, this brilliant man called Ethan Markott comes around and he says, we should be just a little lazy. Why are we doing all of the math and all of the exact pixels? Why can't you just let the browser do the math, right? Responsive design, where I don't care my browser is 782 pixels or 1,433. Let's just do a fluid thing, where with some media queries, we realize, where do we want to add more columns? Where do we want to change our content? And then just let it flow, right? And this was revolutionary. Again, everybody got super excited. And we started doing things very differently from that point on. And it's time to go back and say the same thing again, right? The web is 29 years old. And we have to design websites conforming to its limitations. So this is basically the way we felt doing websites, right? The content and the browser. Everything floated and then you try to push things down and it will come back up. And then you float something to the left and it will move to the right. And it was a fun thing to try, but it wasn't a very fun thing to do. So what we did is just we started building layout frameworks and layout plugins and layout boilerplates just to mask those limitations. And while they work, right? No one has time to start a project from scratch every single time, the time or money or the team. There was one big flaw, right? We started all building the same website, right? Be different and you always send out. This is one of my favorites of all time. And if you want to retweet it, maybe with a different, some have a different D, a capital D. So that's what Grid comes around, right? Grid does not hide its limitations. CSS Grid just gets rid of them. Jen Simmons, an advocate for Mozilla, she says, this new CSS revolutionizes web page layout. And I agree with her. All right, so right now you're saying, okay, J.P., we get it, Grid is awesome. What I want to know is how? How is this magical thing you speak of works? Right, so I'm going to run a few demos. Most of them are on the Firefox developer edition browser. If you're not familiar with browsers, Chrome, Firefox, Safari, they all have a version that they have for developers with some of the newer stuff, so it doesn't break. Sort of like Gutenberg, I guess. Yeah, so Firefox developer edition is one of the best when it comes to Grid to lay out stuff. It's free. If you want to download it and play around with it, I definitely recommend it. So for these demos, I'm going to be doing, basically, if you're not familiar with code, basically HTML and CSS, right? HTML does the markup, right? The content, and CSS does the styling. So all I'm doing is putting six boxes out there with HTML, and then with CSS, I'm going to give them a color so you can tell which one is which. And then that's it. All we need that is to make some magic plus Grid, right? So all right, let's get started. So what do we have here? It might be too small, but yeah, should be fine, right? Should be fine, right? Think if I should zoom in. No, it should be fine. So we have a container on the right. What's going on here? So the first thing that happens that's magical about Grid, all you gotta say is display Grid, and the browser knows. The browser is like, I know what you mean. We can get started right now. Then you just let the browser know that you want some columns, because this is a Grid, and this is the part that's the hardest to get at the beginning, but once you wrap your hair around it, it makes so much sense, right? So remember the glass of water that I showed you before, don't think about the layout that way. Think of it as a sheet of paper, would agree that you have in front of you that it has columns and it has rows. That's never happened before. We've never had a two-dimensional layout on the well. Everything has been one dimension. That's why things always float to the top. So now we do columns. We can say how many columns we want. And since we're trying to get away from, this is 20 pixels and then 30 pixels, and then this is a percent, and then you have to add it up to 100%, and then you change something and the whole thing. They came up with a pretty brilliant thing called fractions. Basically a fraction is the browser will realize for you how much space is available, and then it just breaks it down for you. So in this one, I just say, make three columns, one is one FR, one is five, one is three. The browser says, oh, I got you, it's nine FR, so one is five ninths, three ninths and one ninths. Adds it up, and then that's it. Same with rows. You can lay your rows first time ever. You see the last row is 80 pixels, but there's only have six containers. But the grid knows that I set my rows, so I have white space for the first time ever. We can do so many cool things with white space. We don't have to do the negative margins on the extra paddings. We can just have extra rows for anything whenever we want them. So that's another new thing. The last thing that's pretty new, it's a grid gap. So instead of, I don't know if any of you has done a gallery, but you have to calculate the gutter, right? It's like, huh, 33.3%, wait, it's one 1%. I gotta do something about this. All right, let's change the paddings to 15 pixels, and then you have to calculate. You have to remember, no more of that. The browser doesn't matter for you. You can do grid gap just on the columns, just on the rows. We'll get into that later, but pretty soon you'll be able to animate them with CSS. So those are the three main things that happen with grid. You have a new canvas to work with. So if I play this, this is me playing around with the settings on the side of the, I'm changing the gap, and then I'm gonna start reducing the screen size. We're changing the size of the columns, and if I reduce the screen size, you'll notice that everything is 1FR, 5FR, 3FR, and then when it runs out of content, it just gets, it goes down to zero. It's responsive from the get go. So it's another example, right? We start getting to more real life examples because the other one is, that happens, right? What happens is the client comes and says, I want a big container for my ads, the blue one, and I also want a big one at the bottom for more ads because more ads has more money. That's a math, I guess. So with grid columns, you can do fractions, and then you can do exact numbers like pixels, and then the browser just figures out how much space is left, and I'll figure out myself, everything that's left minus 100 pixels. So the first one is 3FR, the second one is harder, 100 pixels, and then the last one, whatever is left. Same with the rows, right? I use the pixels, and then I use view per height, you know, the height of my view per. If you've never used view per units, they're the best thing ever, right? They'll basically change the way you think about units, view per width, view per height, view max, view min. If you ever struggle getting your funds to work and resize properly, give it a go. Yeah, so, and then since we have a grid, right? Let's go back to the sheet of paper. We have some grid, we have blinds, and we have cells. So why can't we just place stuff on those cells? For number two, for the blue one, I can just span it to rows. It's gonna go from the first one, and then down. And then I want it to go three columns, so it'll go all the way in. And then if I animate this, the blue one, which is 100 pixels, won't move, it'll just stay there. So there's a lot of fun stuff that you can do this. You can do it here. So you don't have to stick within your cells. But we already set our main grid. So this gives us room to be very, very, very, very dynamic in what we can do. All right, so those are spans. Now, another example. So you can do, you wanna do like, I mean, the 12 column layout is quite popular, right? People do 14, then then people fight about the 980 or whatever it is that the people are fighting about these days. But you can do 100 column layout if you really feel like it. But you don't want to do grid template columns. One afar, one afar, one afar, one afar, one afar, one afar. Should I do 100? One afar, one not. But you can repeat, right? You can just say repeat 100, one afar. It builds 100 columns for you. And then you can repeat. I'm repeating four times, 10 times, the view per width. And it does them for me. And then you see there's again that pretty awesome white space. You don't only have six containers, but he knows what I want. This is the first time ever that we can do from the container out. We can build our page. We can actually build it on whatever tool we want. Photoshop, sketch, draw it. Do some grid around it and then visualize what is this going to look like? How can I place this on the grid? And then just transfer it because the layout is there. You can just put the content in however you want. This has never worked before, right? Before Flex, which Flexbox started out, relationship between parent and child, right? Before it was, you drop something and then just pray that it fits. Or if you float it, then everything else will go a little bit out of whack. Not here anymore. So I'm repeating five columns. They all want to far. They're sort of responsive, right? Let's start getting small and big as I go. So I don't really have to add many media queries. Now, this layout is a little different from the previous, but this is the same exact code. What's happening here is that, once again, we have an awesome grid set up. So we have the option to be implicit, like the rest of the web, right? You just place content. It goes from left to right and down. Or you can be explicit. I'm just telling you, hey, you, the red container, you're going to go from line two to four on the columns and line one to three. And then you, blue are going to go from three to five and two to six. And then you get the idea. You go from four to five. So you start doing stuff like this without any absolute positioning and any negative spacing and any loading. You can just be as explicit as you want with your containers. And if you think about, right, the possibilities with this is amazing. You can do so many things, so many fun things that you were not able to do before. And then if I, I mean, I probably, yeah, on this video, I'm moving them around. I'm changing the line numbers. Like, hey, why don't you go from line one to the end? Yeah. And it does not affect the other ones at all. All right, so this is perfect. I love this grid template area. So grid areas come because if you have a grid and you set up your cells, you can actually work with areas. So if you work with a team, this is pretty awesome, right? You just say a header is gonna go up there and then an ad and a content sidebar or footer. And then you just tell which container you want it to be. The header, the sidebar and the footer. And then you can just move them around. Imagine a website where you have six or seven things and as it grows, you just shuffle them around however you want. And it's super accessible, right? Because on your HTML3, you are going header, sub header, paragraph. But with the CSS, you're changing the layout a little bit. So this is a native, pretty awesome way of working. All right, so there's so much more you can, I'm doing this meme again, sorry. So you can do horizontal and vertical alignments, right? If you think of a Word document, you can justify things and with Flexbox, you can do a lot of this. Flexbox and Grid are the first two that you can do with one line of code. Align an item at the center of a container without anything else, right? Align self, boom, you go in the center. So, I forgot her name, I'll tweet her later. But she gave me a pretty awesome, I mean, I saw a talk from her which had a pretty awesome way of seeing how you can treat Justifying on Flexbox and Grid. Basically everything that's Justify is like a Word document. You justify things, space between them or space around them. And then with vertical align, you can do everything that's vertical. And then you can do writing mode. So if you think of the way the web works, we're not the only language, right? And we're not the only people that are using it. So Grid allows you to, if you do Hebrew, if you do, I guess, what's the other one that I was thinking of? Mongolian that goes left to right and bottom. Anyway, you can do a different writing mode. It's a pretty awesome way of doing it. And I'm just sharing one last one. It is my favorite piece of code that I've been using forever and ever. Once you get used to the whole repeat, there's a few things that you can do with CSS Grid. This one I'm using the repeat. And I'm saying containers, you're going to fit to the max of your size. And then the min max is also a new with Grid, which basically I'm selling my containers. You're gonna be a minimum of 120 pixels, but not bigger than the rest of them. So without media queries, I'm able to do this. Zero media queries. I just did a full gallery where things respond and as long as they know they're gonna be too small, they just break down. So this saves you so much time and so much code. I have a full example of some of my demos of how I've been using it. All right, so those are pretty basic. Now, when can you use Grid? If you haven't heard of it. So Grid, it's been on the works for a while. But March 2017 was when it was about to be released. And as you can see, this is an awesome site. If you've never seen it, canayuse.com. Every single CSS feature that you want to use, go there and see how the support is. So basically support was 0.30%. Pretty bad, don't use it. But three weeks later, for the first time ever, since, I don't know, any CSS feature, the browsers got worked together and they all came around, all of the major ones. Chrome, Firefox, Safari, they released and they were at 26%. But obviously, this being the web and us being a community that likes to complain. Jens Simon said, three weeks ago, Firefox, two weeks ago, Chrome, last week, Opera. Today's Safari, yes, CSS Grid is here. And then the comments, if you can see them is, hooray, any word on edge? Come on, edge. What about edge? How about edge? Okay, edge. Edge, Android, no, unfortunately I can't use it. But anyway, so, yeah, there's always someone that won't be able to use it. And on October 17th, Microsoft announced that they were working on it. Actually, October 17th was when they announced that it was coming, that it was on the next version. So that's it, it was here, 69.53%. On October, I've been taking these screenshots as I do these talks and February was 82, 84. So, use it now. Use it now. If you, like today's 85, if you have some analytics, if you wanna do some tests, you feel like some of your users might have older browsers. Supports is your best way to go, right? The browsers, if you do supports, you just tell the browser, hey, if you support Grid, use this code, otherwise ignore it and go back and give them a nice layout. That's accessible, right? Accessibility should be key. All right, to learn more, Jen Simmons, as I mentioned a couple of times, she's the responsible for 99% of the stuff I know about this. She has a video series called layout.lan. She has some labs that are the photos right there. I know she does some pretty awesome crazy demos. She has a podcast. And she's a developer advocate at Mozilla. And they have a pretty awesome playground where you can learn all of this in a much, much nicer way. Yeah, and Rachel Andrew. So Rachel Andrew, she helped write the spec. She wrote the book on CSS. You wanna learn CSS, get her, learn everything about her. She runs, she's the lead writer on Smashing Magazine. Pretty awesome, amazing articles. She does a newsletter called CSS Layout News, if you wanna subscribe. The CSS Workshop is the one I mean about going in and learning about CSS. It's pretty amazing. Right, so Gutenberg. How does this tie in with Gutenberg? It's a great question. So here's my journey to Gutenberg. I started like most of you, right? I was doing flash websites and somebody wanted a WordPress site and I checked it out and I didn't know what to do so I just bought a team. And the client got really happy. And then they said, whoa, this is awesome. You build this. And I was like, eh. Yeah. So my next move for my next site was like, well, let me use a default WordPress team, right? It looks like it's less cluttered and a lot, I'm getting some confidence and it lets me know what I'm doing wrong a little better and I can do some better things. And yeah, I should have read what a child. Actually, I know, rookie mistake. So then I said, you know, this is not a solution. I can't be doing updates like this. Again, some more confidence and then I just started building custom teams. I use underscores of me a lot. If you work that I know, it's a huge community behind it. It's pretty awesome. They have a started boilerplate and a WooCommerce boilerplate started that I've used there. It's pretty awesome. Yeah, so then I got more confidence. Then, you know, the tiny MC, tiny MC, what is it? MC, yes. Tiny MC is like tiny MC. Yeah, I wasn't doing it for me too, right? So I found out about advanced custom fields and it blew my mind. I was like, oh, yes, yes, as a designer, this is what I want. So yeah, I've been using it ever since. I learned about Gutenberg and I started using it. I installed it, I installed it. And I went back to advanced custom fields, right, right? So I was like, yeah, no, this is not ready. So it's cool, it's coming. And then a few releases later, there's been a lot of noise lately, so I installed it again and I checked it out. And no, let me go back to the advanced custom fields, right? So for this talk, I've been using it a little more and I've been learning about it. And you know the consensus is I'm gonna have to use it. Like everyone I get used to it. It's not that I hate it, it's a little rough to change mindsets, I guess. And I really love the way advanced custom fields treat them. But I also wanted to do a little bit of what's the difference because I definitely don't want you to get confused, right? CSS created this browser technology, right? You all have it. You all have it on your phones right now. So anybody wants to try it, anybody that you don't know what code pen is, just open an account and they start playing around with it. There's a grid, and then it's the CSS group works on it, so the updates are quite fast. And the grid layout level two is coming soon, which is exciting. This relationship between parent and child that I mentioned is gonna get stronger. There's a sub grid happening where you'll be able to target things inside deeper. So I guess you can go parent child and then grandchild. And then it's two dimensional, right? Which allows you to be implicit and explicit. No one else. No one else can you do this before. Gutenberg is a WordPress editor. You need WordPress to run it, right? It was released soon. I'm not sure, did it release? No, it was yesterday, no. It was, what, sorry? Five whole games is because it hasn't been announced yet. Oh, okay. Okay. Okay. They've been seeing our four letters for Christmas. Awesome, all right. So it is coming soon, soon is right. And then it's blocked. So this is what excites me about it, right? It's blocks. And if everything that you saw about grid, it's sales. So it's sort of the same concept, right? We get to stop thinking about the web as this just tax medium or this medium where things flow to the top. Which is more free medium. So this is what I'm really looking forward. And I wrote, should you CSS grid at some point? Because unfortunately they did not bake it in. So in a way, right? Gutenberg is already behind with what the modern browsers can do, right? It just took a couple of screenshots of working through it. You know, they do a lot of left negative pixels and position absolutes and top minus, minus negative. So all of these things will be solved with grid. You don't need to do any of that anymore. It still does, for example, calc is awesome, right? Calculate, it helps the browser. You give all of the calculations to the browser and they're using flex, which is pretty awesome, right? They're just letting the browser do most of the work. But it's still some work that you see some, instead of gutters, they're using exact pixels. At some point I saw they're using position sticky, which is one of the greatest things that's coming to the web, right? Just your browsers, I mean, your container sticks to the top when you scroll. It's a working drive so we won't see it for a while, but it's awesome that they're, I see that they're trying to implement some of the new things. So my main takeaway is Gutenberg will get much better. And the way the web is going, right? The way this technology is happening, I'm pretty sure Gutenberg will sort of catch up and get much easier to do and you'll do some pretty awesome things with it. From what I saw, nah, yeah. No, they're, they're using a lot of flex box, but I did not see any grid. I... No, no, no, but it's the CFS or the HTML, well, first kind of the block, like the HTML. Yeah, because HTML hasn't changed at all, so CSS is the, yeah. All right, so let's go through some demos. I have, just so you have a better idea as to, mm-hmm. What I'm thinking is... We want our modules to be capable of being blocks. We want the blocks to be capable of being modules, but from a layout point of view, you're creating a layout, right? Yeah. And then populate the components of the containers on layout. So are you changing that to be blocks to the population or in terms of the modules as well as... Huh, that's a great question. Well, the thing is that grid treats blocks differently. Grid gives blocks a much, much better thing to do with them because it gives them better way to work, not only widths and heights. So I'm not sure. I'm pretty sure if you're working with blocks, you do want, right? You don't want to... I think we're changing, sort of, that's the reason why we're drawing the handle. That's pretty much what the CFS grid does, right? Well, in that sense, yeah, I mean, so if the page builder is taking care of of speeding out the code, it'll speed out the much, much, much, much smaller code, right? So if someone builds a page builder that speeds out a gallery on grid, the code will be significantly less lines. And because you don't need, for example, as many meter queries, you don't need as many things. So yeah, basically, the parent can be a grid and then all of the children in it can go anywhere. So you don't have to be children and parent big. So just the parent can be a grid container and that's it, right? Well, I'll show you some demos and send. It made my more sense, real stuff that I'm working with. So let me see how do we do this. Let me see if I can... So I have all of this in Chrome. I've been working on some, so one of the things that's changed is I started using it on more projects, right? Can you see this? So this is for the FC Hardling I mentioned. Don't mind this, it's too small. Basically, this is the Firefox developer that comes up when you just right-click on the developer tools, right? You see your DOM, you see your HTML, and then your CSS. And as you can see, it's a very, very straightforward layout. If I click on it, one of the coolest things about Grid, it shows me what I did. So basically I did here one column with a bunch of rows. And then I just changed it because I wanted to have some overlap. So as you can see, this way you can really tell what is going on. It looks like negative margins, but all I did is I said, hey, where are you? Three columns. And then the second column, they both overlap. And then that's what's happening. So you can do some fun stuff with very, very little code. And then you just get smaller and then it might be comfortable. So this one I did, this got a little more crazy where I was trying to figure out how to do a map transit layout and play around. And in the past, it would have been a lot of floats or a lot of things to the left, to the right and to the left. With Grid, it's actually kind of fun. As you can see, I just did some Grids and some rows and I just started dropping stuff in there. And the greatest thing about this is that it changes. Like, boom, lessons goes to the left, but lessons on the HTML is the first thing that comes up is the header. So when accessibility, that's still the header. It's not like I'm writing it somewhere else and I'm floating it. So I just had some fun. And yeah, if you were to look at this, with a Grid, it makes much sense, right? This looks a little harder to look at to understand how it was built. But when you look at it this way, like, oh, okay, I see what you did. You cheated a little bit. You put some borders and some round radius and so let's not look at the cheating part. Just, yeah, so, yeah, so I'm working with and then the menu is the same thing. I kind of wanted it to go around. Let me see. And I have some, let the menus go, like for example, go, if you can see, the menus go here on the third column on the third row. And then when it gets small, it's gonna get too smaller. So why don't I just change around some stuff and then boom, I just move them to another column and another row and then put them on a list and it takes one media query to do all of this. And the cool thing is that semantically, again, the menu, the logo still first, the menu second, nothing really changed. So let me start closing this. This is my forever-changing website, right? We don't really change your websites unless we are looking for a job. So if you look at it, that might be some things that don't work. I'm experimenting with variable fonts. If you don't know about the real fonts, if you wanna put together a talk on variable fonts, they're amazing. They're changing the web. It's one font to rule them all, right? Fonts are vectors, so all you have to do is change a few things on it. Some of them work, some of them don't. This one's right. But anyway, this is sort of a little grid, right? It's also a grid. I did same idea, it's one column. Where are you? There it is. There you go. If you can see it, it's one column for everything. And then as we go, I just place things on my, I did a grid and then I put in whatever I want. You're gonna go from two to three, four to five, and then I can keep playing around as with as many heights as I want. As many window sizes, viewport sizes as I want. I can just keep modifying it. And it doesn't really matter how I modify the layer, right? Because HTML knows what's a header, knows what's content, knows what's an excerpt. So this one's one of the ones, this one from the website that I mentioned that I work here in Canada. They have these round tables and I'm never really sure how many round tables they'll have. So these ones are getting a little big, but this time they have seven and sometimes they have four. So what I did is, is that example that I show without media queries where it just, if I make it smaller, it actually works too. Look, if it was really big, it'll look like this. And then as he hits that target size, it just goes to the next column, zero media queries. And it does all of the work for me. I'm using it here too. The same exact, one line of code. It's a little gallery that I did or the work that I did this year. And then when it gets too big, it goes to two and that keeps it coming out. It goes to three, four, to five. Yeah, if he gets it in smaller, he knows, he respects the size that I said, hey, don't you there go smaller than that size? Don't you there go bigger than that size? Like, okay, I got you, JP. You know, I'm a computer until I take over the world. I'm here to follow your instructions. So yeah, look, it's one line of code. So greed adds a lot of possibilities. Yeah, I love this book. I just tried a lot of the stuff that we do, right? This is dumb stuff and that's where you have the most fun. And I just try to replicate it. As you can see with grid, the same exact thing, right? It's, I was playing around with, see how things can go on top of each other without not doing any of that absolute positioning. And then once you start looking at how it was built, it's the same exact idea. Things on top of things, because you can have things that are implicit and explicit and this one shows it the best. So I wanted to do a layer on top of a layer, a container on top of a container and then the bottom is fixed and then the top you can scroll. So because I love a book that goes like this, right? It's an optical illusion. So I didn't wanna do any position fixed or any absolute or any floats, anything. So there's just two containers. They're both the parent container. This is myself, the pages question, right? They all go off just one column but they both go from the first to the last and the top to the bottom. One overflows and scrolls and then the signers, you call it mistakes, we call them features, right? So this one I made a mistake and it's lights on the highway, right? It looks good and then I made another mistake and this one is snakey snake, I don't know. Yeah, so I'm playing and this is all great and I'm playing around with and they're sort of responsive-ish. This one's gonna start experiments, right? They get smaller and actually kind of fun to do and see. Yeah, and then another, I'm doing this one I actually didn't finish it it should be done in two weeks. It's basically grab a control panel and then see, hey, how can I do this? Cause I wanna learn how to do areas a little better and it's almost there. So it's just great. As you can see, it's getting started. And for example, this one has been sent there by using the span is flex and then I'm saying align item center. I don't need to float them or margin out or whatever and actually works by itself. So but justify the content. So there's very little code that's happening here. Let me see. And this is also another one what it looks like things are very different, right? It looks like I did, why if I started doing the silly thing where I just jumped and I wanted to put them together as a little gallery. And if you see the parent container it's just a wrapper with here it has three, here it has two, here it has one. And then all of the children containers have a grid of 10 by 10, like there you go. And I just positioned the photo. So if I wanted to change this photo right here, I said, you know what, you're gonna go, instead of going from two and span seven rows, you're gonna go and span eight rows. You know what nine, I don't know what six. And then you wanna start at the third row. All right, good. And then my header that's gonna start instead of starting at the ninth row it's gonna start at the eighth, right? So yeah, it's like working with papers like moving things on a container and he respects them and he knows, especially the fact that he can do vertical works so much better. And I think that's all I have on that the most. I'm building a couple more, but they're horrible at the moment. So I'll tweet them if you wanna see them when they're ready. Yeah, and I just wanna finish, I like finishing with this, especially this is a work on conference where everyone is trying to figure it out. Everyone in this medium is trying to figure it out. So I love this quote by Chris Coyote that says, you know, just a little reminder that it's about a hundred times more important what you build than how you build it. So go out, make stuff, break stuff, not client stuff, right, break your own stuff. And then if you wanna share it, let me know. I'd love to see it. I'd love to see what you come up with next. This is a really, really young medium and it's moving really fast. And usually the loudest voices in the room that the one with the mic is the loudest voices in the room that tends to wanna dictate the conversation but we're all trying to figure it out going back to that. Yeah, thank you so much. The slides are here online. I'll tweet them again if you wanna see some of the examples. Yeah, thank you so much. Thank you for having me. Any questions? Yes. Ta-da-da, ta-da-da, ta-da-da, ta-da-da, ta-da, ta-da-da. Uh, it's a little bit of an overflip on when content on top of each other. So, without ex-doing as explicit as it is ex, what item throws it at the top and what item throws it off? Great question. So, basically what you're asking is, if you do implicit, it falls down naturally. If you do explicit, things start to overlap. What gets decided? I think it follows the same exact HTML. Whatever comes next goes on top, yeah. So, search the item into the background. Yeah, basically it's a set. So, it falls off right in front of the top. Yeah, so it's a set. I assume it didn't, then it works as well. Yes, correct, yeah. So, it's cascading the same way HTML does. So, whatever comes after will go on top. I've done a lot of work with pseudos before and after and I've had to play around with them. So, those, I'm not 100% sure. That's a great question. That might be possible with subgrid that's coming. I don't think it's possible right now. Like, for example, if the one on top has a background and the one below doesn't, I don't think changing the index on the child below will top the, yeah, that's a great question. I'll have to test it, but I don't think it works yet. Yeah, yeah, because I think the Zindex relates to the parent. Oh, someone might, so it might work. It might work. I'll test that, that's actually a great question. I'm not sure if the Zindex is to the viewport or to the parent, to the parent. All right, so it might not work then. It's a parent, yeah. I've put some of them, yeah, I don't think I have them all, but I dropped them in there, yeah. And I'll share them with the slides. Are there any design packages that you can see outside as an output, like graphic design packages? Graphic design packages. Not yet, so for the mentorship I do, we use Figma a lot and it's free. So if you wanna play with, start testing how you can move away from, because Photoshop is a pixels base, right? So it's a little tough to work on today's web. So Figma and Sketch, Figma and Sketch are, Sketch is the leading in the industry, but Figma, it's coming up pretty fast, it's pretty awesome. And they do responsive really well. F-I-G-M-A, Figma, yeah. Yeah, they do responsive really, really well. They don't do great yet, because it's mostly like, they spit out some, they spit out good CSS and HTML, they're not there yet, but they're built to be responsive so that you can definitely have a better idea. As of now, I'm not sure, what I get my info, the latest is from Rachel Andrew and Smashing Magazine, amazing articles, and it's a couple of the newsletters and I see that people are starting to put some themes and some friend of mine wanted to do a WordPress theme with Fred as a hobby, so you know how long those take, but everyone wanted to do another overreact, he wanted to do all the things. Yeah, but I'm not sure, so I'll have a look, that's a great question, I haven't seen any, it's a great opportunity I guess, yeah. Yes. So what I use for my editor, you mean this, let me just go to demos, no, so that's a great, no, Figma is mostly a design tool, so if you want to do code, Figma is not the way to go. So every browser, every browser comes with tools to help you see the backend, right, how it was built. And so all you have to do is right click and then inspect and it brings everything that's on that page and then here you can definitely manipulate it and you see there's the HTML and you can actually say, like I could go right now to, let's see, let me go to, let me do it in Chrome, for example, just quickly, let's see if this works, I don't really want to work on Toronto, there it is. So I can go open work on Toronto and then I can say inspect and it shows me everything that's on the page, HTML and CSS and I can mess with it here on my computer. So I can say December 1st, I can say December 10th, we're gonna do this all over again, right, and it changes the date and I get to see it and we do a lot of work here, it's a lot of fun, especially designers, because you get to see life changes and as soon as you refresh it, it's gone, right, especially with the CSS. If you really want to learn how to code and mess around with things, you definitely need to open a free account at CodePen, CodePen.io, it's the same open source mindset as WordPress, right, it's the same sort of thing where if I see this thing right now, the first one that came out, like, the goddess is coming, this is awesome, and like, ah, I wanna learn how they did this, so if you don't know the code, all you do is you fork it, it's yours and then you reverse engineer it and see what broke and what didn't and you didn't hurt anyone, right, so this is mine now and I get to be like, huh, I wonder how they, let's see, let's remove one of the blocks, what's going on, what's gonna happen? You save it and instead of five, it's now four, right, and that's how we most of us start. Did it break, no? Good, good, good, all right. Is the client calling me? Yeah, so I have the document CodePen, what I did for my samples, it was the browser that was doing things live, yeah. I used to code, if you wanna code on your computer, I used Adam, there's about a million of them, text editors, Adam and then Microsoft as Sublime and Visual Studio Code is the cool things, the cool kids, the one the cool kids are doing now, yeah, yes. Just wanna mention that. Whoa, that's awesome. Oh, that's fantastic, yeah, they are pretty amazing because they're, so they're, the thing that they're doing really well is creating little components that you can reuse so you build a button, all you have to do is you say, this is what a button will look like, disable, enable, active, inactive, whatever, and then when you're doing your demos and your prototypes, you don't have to build every single demo, every single time, like in Photoshop, just give it the component and instance and, yeah. And then, you know, you sometimes you download little toolkits for like iOS if you're working on a project and it comes with a few things that you can get started with and, yeah, but it mostly speeds out high-five versions of a website. Does not speed a website at all, there's no code. All right, we have a time, right? In this page up, Figma for WordPress. All right, let me see, Figma for WordPress. This is great. Oh, and it's recent, the 19th. Of course I knew this, yeah, awesome, yeah. So, good, Figma offers a bunch of, I mentioned Figma a lot, it sketches the leading, but it sketches Mac only, so it gets a little bit annoying. Figma works in a browser, it works on your computer, so if you wanna learn a little bit more about what design and how it works, use it, download it, start doing some shapes and colors and see how things work, should be fun. All right, this is good to know, this is great to know. Thank you so much. I knew I was gonna learn a lot of things today. All right, anyone else? Yes, sorry. This is where it works. I'm assuming they'll come up soon. I've seen a few here and there on GitHub, like people start releasing their own that they do. I think big ones, I don't think frameworks will go away. Like I mentioned, budget time, team-wise, you can't really just start from scratch every single time, so I'm pretty sure they won't go away and I'm pretty sure they'll move to more great stuff, so they'll be definitely, definitely lighter, which is one of the biggest complaints about foundations and bootstrap. I think they'll get much better, especially the whole vertical thing that they have going on, that you need 5% of it and it's like, what do I do with the other stuff? Yeah, there are a few, I mean, send me a message and I think I have a couple bookmarks of repos that people have put together and then I'll send them to you. Yeah, you had a question, sorry. Honestly, the best tool that you have is the one, right? Like I think, I've been doing the student thing for a while and their devices are very different and some put together really great stuff, so I think it's more, so Photoshop, if it's the only thing you have, use it. Use it, love it, you can make some awesome stuff with it, but Photoshop is very pixel-based, right? And we're sort of moving away from that more and more with more vector support on browsers, right? If you zoom in on a photo, you will see the dots, right? And if you're using a vector base, when everything is more vector, things are a lot more elastic, so if you have a chance, it's a matter of time, I guess, it'll probably save you a ton of time if you start using a tool that was designed for build websites. Yeah, I mean, I use Photoshop for some of the soccer club because I have to manipulate photos and there's no other tool like it. I can do it in Sketch. And I can do some things on Figma that I can do in Illustrator, so the tool keeps on changing. I don't think there's one tool that can catch them all, but definitely if time is, turns out to be the best asset we all have, right? So as a time saver, I recommend giving it a go and you see, you start working faster and faster than you do in Photoshop, yeah. Hope that makes sense, yeah. Is that all? Thank you so much. Thank you, thank you, thank you. Thank you so much. Thank you. And now.