 Hi everyone, it's been going well today. It's pretty cool to be speaking at UCI. This is my alma mater. I once was a student and now I'm a teacher here. I'm not going to back it. So today we will be talking about Death of the Media Query. From the title, I'm promising you much more than I can deliver. But we'll learn a bit about FlexBlocks and CSS Grid. And I've also, Bayden, switched you with Calc. It's in there. The slides are in there. But I think I'm going to skip the fair chunk of it. But I have been told the last presentation had frogs and I have cats. So come on. This is me. I already got introduction. Company, company. Cool. Slides are online. I had to do it at my name. So it's like harder to spell for you. But they're there. They're also referenced at the end if that is going to be for you. OK. So what is a media query? A media query is this thing that allows us, in design, to be able to create different styles at different break points in a device. So we see here a desktop version. And then eventually it will snap into whether it's a tablet version or mobile or whatever else. The designs all change. And in order to achieve this, you're writing separate styles for each version of the website, which can be tedious to update. And historically, we would do this with various measurements, like maybe percentages or these types of things, which can be a bit of a headache because 10% of spacing might create on a desktop. But when you get down to a mobile device to have 10% spacing on either side of your elements, can be really clunky or it's just an odd way to distribute space. Traditionally, or I think it might be a very early time in thinking about media queries, we think about it as desktop tablet mobile device. But as we all know, this isn't really relevant anymore because a mobile device can be quite small to a little bit bigger if you flip it into the landscape. You're doing it like 600 pixels, which is just like on middle ground where you're not at a tablet yet and get to a tablet in between a tablet and a desktop, yada, yada, yada. There's no real proper break point anymore. It's just this should look nice no matter where I'm moving my browser. So there will be no death of the media query today, fortunately. But the concept here is that we're going to look at how to use Flexbox and how to use CSS Grid. And the slides are there for Calc tucked away if you want to look at it. In an effort to create flexible design that will not require us to think so hard about our break points because the way space is being distributed or the way that we handle layout is much more elegant without us needing to be surgical and go in and think about each break point per device. So I used to do a lot of primer of this talk on like, it's so hard to learn new styling, which like, fair enough it is. And if you're comfortable with Flexbox, you can get a ton done with it if you are really curious about CSS Grid and both these things are kind of foreign to you. You can go down either route and you'll be able to achieve quite a bit. And then this image always reminds me of like, maybe you're getting like, if you're working on a project and it's something you've heritage and there's 2,000 lines of styling already existing on it and you're doing like $100 like look patch on it, not the time to go in and like rethink the framework and drop in Flexbox. And in my mind, these are like your clients calling you like Friday evening about to go to dinner and like, we got this great idea. So it's all like, in pacing and thinking about how to learn bits of it incorporated into your work, it does save a tremendous amount of time if you are templating, if you are very comfortable with these things, Flexbox and CSS Grid. OK, compatibility, this field is like much rougher like each day that goes by. If you go to caniuse.com, if you're not familiar with that, you can put in a CSS property and see how compatible it is with browsers and browser versions. CSS Grid and Flexbox are green across the board with modern browsers with like a greenish tint in the Internet Explorer realm. Morton Hendrickson, who's a big name in WordPress and also very smart and awesome. He has put forth this concept in one of the talks about no longer thinking about responsive design in terms of devices, but thinking along the lines of by browser, which I thought was like a really nice way to put Internet Explorer in the corner. Maybe it's like an ugly spin on what he was trying to say. But essentially, if the mobile version of the site is all that works on a particular browser, then maybe that's what it gets. Take it for you, well, all this stuff is very compatible at this point. And then the last bit of primer, if you're completely unfamiliar with CSS and you want to follow along conceptually, CSS happens to be syntactically a very easy language and consistent language to follow. So here is a simple CSS rule. You pick something that you want to change the style of, in this case, an age 100. You say what you want to do with it, in this case, a color, and then you give it a value, red, and you change it. Cool. OK. Tree of Serenity, your brain is clear. I'm going to show you some code. It's not so bad at all, but there is code. And hopefully it's legible. Oh, we get a key before we go there. So we're going to hop into FlexBlocks. And when we're thinking about FlexBlocks, we're thinking about spacing. And conceptualize this in your head as historically, we've done this with percentages and thinking about spacing like padding inside of an element or margins outside of an element. Right now, you are thinking about an element being whatever it needs to be, whether it's a word or an image. And then all that space that makes it difficult to design across different devices is something that FlexBlocks is putting all of its energy into handling for you. It's taking all that extra space and distributing it in different fashions that will make it look nice across devices. Okay, so in a basic tutorial of FlexBlocks, here is some markup for a navigation. And in order to enable FlexBlocks, you are thinking about a parent-child relationship in your HTML. So in this case, we have a nav wrapper around some link tags. We are going to say that that nav wrapper should display Flex. And now we have opened up all the magic of FlexBlocks to our disposal. We are going to use the property justify content. We're going to go to a value of center. And right now, we're thinking about spacing on the horizontal axis. And we are allowing FlexBlocks to control that spacing for us. So visually, when we look at this, we see that we have three elements. They are within a flex container. They are all children of that flex container. And they've been told to justify center on the horizontal axis. I'm not thinking about the space on the left or the right. I'm just saying put it in the center. And it will put it in the center regardless of the device. If you take justify content and you use the value of space between, you get a layout that is pretty common with the navigation, spread things out, left, center, right. In this case, we have three items. But if you have four, it would distribute them in quarters. Space around is a one-off of space between. And what you're getting is an equal amount of spacing left and right on each element. Cool. The beauty of this is that you aren't doing it for a particular width. You aren't thinking about how wide this device is. All of this is responsive across devices, as we see. So justify content takes in these values. This is easy to look up. CSS Tricks has a great article that goes through every property and value of FlexBlocks. It's really thoughtfully laid out. And if you were just learning it and the only real hindrance you have is just remembering the names, that article puts it all together in a really nice way to see it. When you're thinking about vertical spacing, you can use the align items property. And it has similar values that allow you to control spacing on the vertical axis. Now, there are situations where these properties do the inverse, which I'm not going to touch on for the sake of this. But you always have the ability to control horizontal and vertical spacing. OK, so here's a little chart from CSS Tricks on what align items is doing. Similar fonts at the top, bottom, center, stretch, which is pretty handy. Cover all the space equally. And then baseline, I guarantee that you're going from PSDs to creating something, a template. You're going to find a PSD that has different font sizes that are supposed to be lined up perfectly. And you won't think about it in any sort of discussion or thinking about scope or time. And also, you have to get those texts lined up with each other. Flexbox is the way to do it. Any other way to do it, we'll drive you now. So here is where I find myself using Flexbox a lot. When you are creating a template, and all the times when you're working with a content management system like WordPress, you're going to end up with these cards. And I'm envisioning a content type coming out. And I need to template it into this card consistently. So this particular content type will say it's a news article. It has a featured image. It has a title in red. It has a little body text. It has some sort of button called to action. And then another link on the bottom. Now, our first conception of Flexbox is just we can make a navigation. But there's no reason why we can't nest flex containers or use flex containers in the more elaborate ways to control spacing with content like this that's coming from the database in different formats to create layouts that are going to look really nice across devices. So what I do here is first, I think about this and I grab it in a container, everything. And then within that container, I want to create two internal containers. And at this point, I can use Flexbox to control spacing for it. I can say put one thing at the top, put one thing at the bottom. I also want both of these things to be centered. They're near the edge, but I want them to be in the middle of the card. Then I nest Flexbox and I will grab an additional element at the bottom of the page and I say split these two elements apart. So Flexbox can be really, really handy with layout. One other common problem that it solves is usually not dealing with one of these cards alone. You would have a set of them. A lot of times you get these like three columns across and you end up in these situations where you have a little bit more text than you would on other cards. Flexbox Align Item Center, or Stretch, excuse me, will create equal height for all of these elements and that's the default property for Align items. So it consistently helps with layouts. Now, I hope that you can see this, but we start off with something small like a navigation. We think about like a piece, like a card, but what you can do when templating with Flexbox is really elaborate and remember that all this is holding across different devices. At some point you're gonna have things clunk up next to each other and Flexbox actually has like a really easy means of like controlling your access. Originally you're thinking about things on horizontal, you can stack things vertically depending on what you need per device. But in terms of trying to deal with that headache from like 650 pixels up to a huge screen, this will be consistent for you. So we're looking at a template like this. We can think about our logo and our tagline as one flex container. We can move items to the bottom of that box. We can separate them out from each other. When we jump into our navigation, we can think of two separate items that we wanna spread on opposite sides of that particular row of content. We can go into each of these elements and we can create space around on the left side and we can center the item on the right side. For this image, I wanna basically put that text in the bottom corner. I want a little bit of space on the left which I can address with margin. The way that we use margin in Flexbox is a variant from CSS Grid which has a different way of dealing with spacing which we'll see which is one of not a tremendous amount of nuances between the two of them. We'll get there. Cool. Tree of Serenity. Brief moment. I know everything about Flexbox. I know everything about Flexbox. Whatever. We're going deeper. Okay, Grid. Two times the key. Little did you know that the cap on the first slide and the cap on the Flexbox slide were actually siblings. Just kidding, sorry. No, no, no, no. Okay, CSS Grid. CSS Grid is super exciting. It allows you to make art online. You can do anything. What's really cool about CSS Grid is that the way that you can control a layout, an early conception of CSS Grid versus Flexboxes. Flexbox really helps with your rows of content and that can be a little bit of a mental jump when you're still thinking about moving things on the vertical axis but you're dealing with like a row of content that you're moving on a vertical axis. Flexbox actually has a great ability to do things that span multiple rows. When you want variance within those rows, you can achieve it but there are some headaches there. CSS Grid is great when you're thinking about a broader layout of several pieces that need to be spread out in a particular manner. Or if you want to create empty spacing, CSS Grid can handle that in a way that would either not be possible or quite difficult with Flexbox. So I show the art because it's exciting. All these are from Jen Simon's labs. She has some really cool use cases for CSS Grid on the aesthetic end of things. Okay, so just like with Flexbox, we're going through the same formula or we're taking a parent container from your HTML markup. It's going to have children in order to enable the powers of CSS Grid. We're going to take our parent container, in this case, a section tag and we're going to say display grid and now we have all the magic of CSS Grid at our disposal. So we're going to look at some basic grid examples. I'm changing up our markup a little bit to just be a wrapper with some children that have the alphabet A throughout within them. And I am introducing a new property here, grid template columns. Or thinking about grid, we, a simple way to conceptualize this is to think about a table. We're creating cells, columns and rows. So right here, I'm saying give me three columns. Each column should be 100 pixels wide. Cool. So our first three elements pop into the top row. Each one is 100 pixels wide and then our next three elements implicitly create the next row of the grid and we get an additional three cells. Cool. What about this is magical? Okay. After this, we are also getting the FR unit within CSS Grid. The FR unit is effectively replacing the need for percentages and what it's doing is it stands for a fraction unit and it takes up whatever space is left over. If it's replacing percentages, what exactly are we getting? I don't know, but let's take a look at it. So we are doing the same thing, three columns, one F R, one F R, one F R instead of 100 pixels and in this case, our DOM comes in, three columns, they're spread out, they're all even. Great. The difference here is that we're getting something that is flexible across devices but how is this different than a percentage? Still nothing quite there. However, something that's kind of cool is that you can combine a static value with one F R and you could probably cheat your way to something like this using calc and some subtraction but it's so much cleaner to say give me a static column that's 250 pixels in this example and then with the rest of the space, regardless of how big this device is, create a column that is that wide. So we end up with something like this, we have six elements, they come in to our new two column grid and they go 250 pixels wide and then one F R with the rest of the space. This will yet again work flexibly will be responsive across devices. So a situation where this might be handy is if maybe you're doing a blog layout or Wes Bos has a tutorial that's referenced at the end of this where he has like an album cover with like description and there are these times where you have an element that looks really great out of particular width that would look quite funny if you let it get too small or quite funny if it gets too large. Most common would probably be something like an image and you have elements that work really well across devices stretching and shrinking like text to be able to have a static value with a fluid value next to it without thinking about this is on a mobile device this is on the desktop, it's really handy. Okay, if we wanted to take this one step further we would introduce MinMax. So MinMax is a new keyword within or any function rather within CSS Grid which allows us to provide, you guessed it a minimum value and a maximum value. So if we were to do something similar to what we were just doing where we knew that something looked good at a static value but it actually would be nice if it could grow with the screen as it gets larger it just would lose context after a certain point of getting too small we could say grid template columns give us two columns even though we're providing three values we're saying for one value here's a minimum and maximum range of don't get any smaller than 250 pixels it's gonna look silly if this image gets any smaller then if there is more space we'll have a column that can grow one of our and it's another column that's one of our so what does that mean? We have a minimum of 250 pixels so our image in this will not get any smaller than 250 pixels so the bottom's out at some point it reaches its minimum but as the device gets bigger it starts to grow with the text somewhere where this is easy to grasp some of the fluidity across columns and rows is with image galleries so in Jen Simmons labs you'll find this example where you have a seven column layout here of images now if you were to create a seven column layout it's tricky to be able to create a seven column layout that can stay seven columns but can grow and shrink as the device moves but beyond that it would be rather difficult to create the same layout that could go down to six columns on a smaller device it could go down to four columns on a smaller device all with one CSS rule so how do we do it? Okay, to get closer to it we have to learn about the repeat function so this isn't a huge conceptual leap from where we were moments ago repeat works as we see here you provide two values one is the number of times that you want your column to repeat so I'm saying I want three columns the second number that you provide is the value that you want repeated so I am saying in both rules give me one up R, one up R, one up R at this point I'm still only creating grids that have columns and it's having my rows come in okay, however when the Jen Simmons example that we're just looking at we have the ability to change the number of columns we're not getting much further with repeat because we're still providing a fixed value of three to say how many columns we want in this layout we can use the autofill keyword to automatically populate the number of columns that the device can fit and we are saying put as many 100 pixel columns as will fit here say repeat, autofill do as many columns as I want make them all 100 pixels see it visualized, made up with something like this where our DOM has letters A through L each of those elements is 100 pixels wide dependent on the device width our columns will grow and shrink within that range problem here is we want optimum fluidity and we saw in Jen Simmons example that there were seven columns in the original shot and the seven columns those images could grow for a larger device size in order to have our columns grow and shrink right now our number of columns is changing but the columns themselves are staying that static value of 100 pixels in order to achieve that fluidity where they grow and shrink with the device we have to reintroduce min, max into this formula and I know this gets kind of chunky for CSS but that's the first time you're looking at it or maybe it's not the first time you're looking at it it's not so bad so we're saying grid template columns I'm only thinking about columns though we're using repeat because we want to be able to do this in terms that aren't static we want to be able to create multiple columns for our repeat value the number of columns we're using the autofill keyword which will just magically take our DOM our HTML and say grow within this area or shrink within this area and then we're saying min, max to say this is the value of the column don't make it any smaller than 115 pixels so still giving it a static value but it can grow up to 1fr meaning that we look at essentially the same thing that we're just looking at it picks up our columns before they jump up to the next row watch it again before b you can go to a there has to be a minimum of 150 pixel space on the row above for it to jump up there so they go 150 pixels each and then they grow 150 pixels each and then they grow it's pretty cool so going a little bit further down the route of images but this doesn't have to be images this can be content cards or this can be any interesting layout that your designer is handing over to you flow in CSS Korea as we've seen it so far it's taking your HTML we've seen our alphabet A, B, C, A, B, C, A, B, C, A, B, C, A, B, C, A, B, C, A it's taking the alphabet and feeding it into the DOM top to bottom, left to right and this is how HTML always works it wants to go in this order however if you have cells that are larger and you want to make a layout that's a little bit more complex and your DOM doesn't happen to be fitting just perfectly so in this example we see A is big and then we have B, C, D and then ideally E would be the same size as B, C, D however it's too wide and it comes down a line and then we're left with this empty gap so this is the default flow of CSS Grid however there is a property in CSS Grid where you can say grid auto-flow dense and what this will do is it will go through the DOM and go the way that it wants to and go A, B, C, D, jump down a line E just like it did the first time so the next time it comes to an element that fits an empty space that it passes it will go back and fill it in pretty amazing and you end up with something that yet again is incredibly fluid across devices that will grow and shrink now this could create an amazing layout and there's no real hindrance to creating it and you don't have to think about it too hard from mobile to desktop this is what we want to achieve however in order to do this you have to sync very hard in advance like what can I crop to be these various pieces to fit this grid yet again Wes Bosch's tutorial reference at the end has a pretty cool gallery that he makes of this and he also provides some JS where you can like it's like an image gallery where you click on it and you get the modal hop-up but it looks super clean, it's very cool okay last tray of serenity okay so when we're thinking about this up to this point we're just sort of we're discussing the ability to mess with columns in CSS Grid we thought about how Flexbox is really great at spacing we thought about how CSS Grid helps us to do like broader layouts we had some fun with the columns but at the same time you can create empty cells and do a lot of magic with CSS Grid that's a little bit trickier and lots more something kind of amazing that CSS Grid can do gets enabled when you start using grid areas now early conception of where we're going and I know that this is like painfully small but the idea here is that in our left hand column we're looking at a desktop device and it's not in terms of width it's just in terms of layout and we have our elements so we have some sort of logo at the top we have a navigation we have a body and then we have a sidebar maybe I think this is advertising and then footer it's like a reading test then we have a tablet layout where our pieces kind of come together and then we have our mobile layout actually we did that completely backwards mobile is on the left but the point is that like our layout is changing across these devices now just like we learned not unique to CSS Grid it's just the way that HTML comes onto a page it goes top to bottom right whatever is first in your HTML your header and then some body paragraph in an image it's going to go straight onto the page that way and you can style it with CSS but in terms of moving it around and rearranging the border you have some ability in Flexbox to do this you have the ability to like order within both of these display types but to truly move your markup around is something that you just want to do you would write two versions of the markup and you'd have some sort of script to say load this or you would hide things and then show them I imagine everyone here has probably done that at some point but they have like a huge image and they had to swap it out with one okay so the grid template areas we are able to control the flow of our DOM even further than just saying dense and kind of counting on it filling in pieces we can hand place pieces into our DOM elements into our grid it's pretty cool same concept here we have a container a wrapper we have some children our children in this case are named header, hero, content, sidebar these are going to be our grid cells within our grid container this is the first time that we're not just creating a column but we're explicitly saying these are our rows so we're going to have a single column that's going to be the full width 1fr and then we are explicitly declaring five rows and we're going to since they're our fractions they add up to a whole so you have 1fr then 2fr to be twice as big 3fr to be three times as big that's the first then 1fr, 1fr cool going back to our layout we see that we have one column we have our row heights explicitly defined and we have five cells in this grid cool our DOM is going to want to naturally blow in header, hero, content, sidebar, butter what we want to do is assume that this is Ungola device we want to assume that on our desktop we want to move these pieces around just like we saw in that first slide of various layouts so with grid template areas you have the ability to name the cell regions within your grid so in this case we have five cells and just for sake of example they are all at this point called grid cell, grid cell, grid cell grid cell you can stack them on top of each other you get this visual representation of what your layout ends up looking like now to actually take advantage of this naming convention we want to use names that make some sense and we make up those names so we say that we want our header to be first our hero to be second our content, our sidebar, our butter cool at this point we're just mimicking what the HTML markup is doing naturally however alright okay this is more explicitly saying where these pieces are going we're telling NRCSS saying where in the layout they should go we've named each of these cells something we're saying NRCSS take the element that has a class of header put it in the grid area that I have named header however if we wanted to we could say take the hero and put it in the grid area of footer NRCSS and it would put it in the grid area of footer and we could say take our footer and put it in the hero we're nuts alright so bringing media queries back into the mix here if we were to take that same layout five cells stacked on top of each other and we were to say now for a larger device I want to create this layout that has two columns and four rows so we'd end up with something like this we now have eight cells we use grid template areas to come in our naturally our HTML markup will fall into the first five cells there are still those three additional cells because I have an explicit grid created that has eight cells two columns four rows what we can do from here is we can name our grid cells with grid template areas and I have to account for eight different cells on four rows I'm going to give them the name what you can do is you can have a template area span across two cells you can have it span across two rows if you want so I can say header header and hero hero content sidebar you can put it cells next to each other footer footer now I have five DOM elements that are going to fill into these areas once I assign them those grid template area names so I say that I want my header to go into header which means that it will span the entirety of the header I want my hero to go into hero it will span the second row content left side of the third row sidebar etc you can see this visually it's all mapped out in our CSS so flexbox versus CSS grid this is a common question I added this slide like 10 minutes ago so Wesbos does have a video in his free course that's like flexbox versus CSS grid and he goes into 20 different examples and I think they're like a little bit hard to follow but the biggest takeaway is like an early conception of this is yet again flexbox handles your rows and CSS grid handles like a broader layout I do think for broader layout challenges it's nice to use CSS grid to conceptualize like where pieces should go or to do something complicated like empty spacing or if you want things to flow in a varied pattern across rows which I'll touch on in a sec again that CSS grid has some advantages in that room flexbox can do a lot of what CSS grid is doing and as we saw in that brief mockup of the website, the choices website if you go row by row with content which most like templates require unless you have like a really elaborate chunk of content to create from PSD to a template file you can get away with using flexbox for a lot of things and it goes really smoothly so if you're comfortable with that use it one variation between the two of them is that grid has this thing called grid gap which creates spaces between cells while flexbox has no such thing as flexbox gap or flex gap so you have to bring in margin to create spacing around your elements and when you're dealing with these things that handle spacing for you in a really elegant way to bring in your own exceptions of spacing with margin, in a fashion that's not incorporated into the syntax of that particular rule can get a little bit mucky as you go down the road while CSS grid has gap built into it and it's just part of like the broader conception of this grid. We'll go back one more time to dealing with like things of span rows and flexbox if you were to say space around and you had that flow across multiple rows this is the one where you have a little bit of space on the left, a little bit of space on the right and then spacing in between as you come to the next row if you have four elements and you have three columns you're gonna have space around, space around, space around it's gonna look nice on that first row then you have the additional piece come down and it's gonna end up centered and I find this really annoying with flexbox you can target that element individually and push it over to the left so that it looks like it's like in the broader spacing and looking but you don't really know at what point it's gonna go down to the next line CSS grid on the other hand you have cells mapped out and you can create that flow across rows in an easier way that's one headache that I find myself running into with flexbox that grid solves okay, no more code calc is at the end of this if it's of any interest to you moving forward if you are scared about compatibility look into app support it's kind of like a media query but you put code that you're like scared will this run in the browser inside of that rule and it won't run if the browser does not support it food for thought so foundation which is comparable to bigstrap has rebuilt its column structure using flexbox which is really cool but historically in my personal experience I've used frameworks like bootstrap and foundation for the columns within them I don't really use columns anymore like I find flexbox or CSS grid easier to do layouts with so maybe you don't need it and if you wanna keep learning flexbox froggy CSS garden are really easy ways to just like touch it for the first time if you want something more robust Westboss has a course on flexbox and of course on CSS grid if you're excited about the world cup which may just be me you know what I'm saying yeah, yes, yes, yeah I'm sorry there is a CSS grid tutorial to lay out soccer player formation I wanna strike, go Germany from the record if you're on the next team really someone really smart talk about the same things Warren Henderson has a talk and word for us TV Jen Simmons has really cool visual examples of a lot of the stuff and then Rachel Andrews has a blog she has common examples she has a YouTube video tutorial she has an e-book and all of her stuff on CSS grid is amazing slides are at sayedobossy.com forward slash WC for camp or community great, thank you how long was that transition how long did it take you to go from using things like bootstraps and columns to flexbox and grid? so when I was using bootstrap it was like I was saying strictly for columns so I wasn't as tied into like getting button styles really quick or something like that so it would have been a harder transition out if I was like deeper into it in terms of when it like really came like why would I make a template myself and incorporate columns unless it's like very specifically done on like a 15-column grid and it's just annoying to like think about like what that equates to it came after the first time I made this presentation it was like oh I like really understand the stuff now I should use it so it sounds like each of you is one or the other to make a layout with I think my original like answer to this was like think about a broader layout and this is like the common answer people say like think of I think that's 3D news how they say it which doesn't make sense on the screen but like think about like multiple rows in CSS grid and then think about flexbox across one row I think in terms of application that's probably accurate I what you can do in flexbox and what you can do in CSS grid for most problems both can't handle so it's really only in those edge cases which was laws like defines rather well so I've used flexbox CSS grid this is the first time honestly I've seen it or whatever you should have showed some examples that showed the functions is this all needed to CSS supported now or does CSS grid go through the parser something else or is it just check so the question is this is the first time that is looked at CSS grid and we introduce all these functions like minmax and repeat et cetera does this have to go through a pre-processor like SAS would or is this native to CSS and this is all native to CSS it just works in plain CSS all right we're out of time thank you