Transcription

Hi, I'm Una, a developer advocate on the Chrome team focusing on CSS and Web UX. Thank you for joining me today. I am super excited to get started and talk about some magical lines of CSS that do some serious heavy lifting and let you build robust modern layouts. Before we dive into that, there are a couple of key terms that will help you in your styling journeys and are super good to know about as we walk through these techniques. Most of the items I'm mentioning today are used in conjunction with grid or flexbox layout, and you can denote those as display grid or display flex on the parent element. The first key terms are fr and auto. These are used with grid layouts to denote fractional units of space, that's fr, or automatic space, that's auto, based on the minimum content size of the items within that element. For grid layout, we also have the minmax function, which lets us set a minimum and maximum value with our layout bounds to enable responsive design without media queries. We also have separate min, max, and clamp functions available in some browsers that bring logic to CSS. The browser determines which value to choose based on the function provided for min and max. And for clamp, we'd set both a min and max with a relative value in between. We'll definitely be covering these within the video with a demo. And within these layouts, we can also use autofit or autofill to automatically place child elements into a parent grid. This is another tool for dynamic responsive layouts without media queries. We're going to be going over all of those terms and more with demos galore. I'm a really big nerd. I don't know why I made that rhyme and put that in this video, but I did. So, let's just dive into the demos and one-line layouts. I made a handy little site called one-line layouts at onelinelayouts.glitch.me so that you can follow along or play on your own and have a reference for the power that CSS can bring to your layouts. For our first single-line layout, let's solve the biggest mystery in all of the CSS land, centering things. I want you to know that it's easier than you think with place item center. I call this the definitely centered layout. What we need to do is first specify the layout method, which is display grid here, and then we are going to write place item center. This is that one magical line of code, and I have these highlighted under the titles here. So, what happens here is no matter what you put in here, it is going to stay centered to that parent element. So, if we look at the HTML, we have this parent, and it's just getting background blue, and then this child with a coral background, and it's content editable, so we can actually just type in here. We can have vertical content, hello world, and even as I'm typing, this child element is staying centered within the parent box. So, I think that this is a really cool technique. Place item center will solve all of your centered dilemmas. Next we have the deconstructed pancake. This is something that we see all the time on marketing sites. You see this row of three items, and usually on mobile, we'll want that to be stacked, which is why I called this the pancake stack, but deconstructed. Because as you increase the size of the viewport, those items will start spanning into the same line. So, it starts when they're all on top of each other, and then they start to deconstruct as you increase the size of the viewport. So, the way that we're going to be doing this one is using the shorthand for Flexbox. Flex zero one base width is what we will be using for this look that you're seeing right now without the stretching, but if we did want it to stretch, we would set that to flex one one and then the flex basis. And the reason why we do this is because the flex shorthand stands for flex grow, flex shrink, and then flex basis. So, again, here we have flex zero one, 150 pixels. That is the basis here. So, as we increase the size, it is not going to be growing much. Also, when we decrease it, it's going to be staying within that 150 pixel size. When we do change that to one, I'm just going to delete the side of code here, now we see that this is going to be stretching. So, here, you can see that it stretches to fill the space, even as it wraps, and as I increase it to be even larger of a viewport size, these items are going to be filling that space. So, this is the deconstructed pancake, a really common technique that we see in marketing sites. This is usually going to be like an image with some text about the product and you can write it by using the flex shorthand. I like to call this one sidebar says, and it takes advantage of that min max function for grid layouts. So, that is the line here. We have grid template columns, min max, and then min and max value. That's pretty straightforward with min max. But what this is doing is essentially, as we are increasing the size of the viewport, it's going to be taking that 25% size, that max size, and as we decrease it, it hits this point where it's 150 pixels and where 25% is smaller than 150 pixels, so it's going to clamp it at that minimum size. So, it's going to be increasing when it can take up that viewport space, but if we have content in here that we don't want squeezed or we want it to stop being 25% and at a minimum be 150 pixels or whatever value we set here, then that is exactly what min max is doing for us. And in the grid template columns here, we are writing grid template columns, min max, that base value, and then the relative value, so 25%, and that second element is getting 1fr. So, if we look at the HTML, we have these two elements, this yellow sidebar section and this purple content section, and they are taking up the units of space that we are specifying. In this specific case, we can actually even set this to auto, and it would be looking the same because we are only setting the size to that first element. We're going to go over auto versus 1fr in the next example. But I think that this is pretty neat, a great way to set a minimum size but then let your elements stretch on larger viewports to fit those layouts a little bit better based on how your user is seeing your website. Next we have the pancake stack. Unlike the deconstructed pancake, this one does not shift when the screen changes sizes. This is a very common layout that we see for both websites and applications across mobile and desktop functions. So it looks like this as we're increasing and decreasing the size. This content is not changing. And what we are doing to create this is we are writing the grid template rows to be auto, 1fr, and auto. So what we are doing is essentially telling the first and last row to take up the space that the internal elements allow. So if this header was two lines, then it's going to increasingly take up more space within this vertical layout. With this auto section, I could have more content here, but it's not going to increase the size because what we're doing is setting the auto placed row first to take up that specific size based on the content within it. And then the remaining space is the remaining fractional units. So as we increase this also vertically, you can see that the first and last row are not growing. They're still only going to be taking the size that they need. But if I decrease the horizontal space, as footer content moves on to the next line, it is going to be taking space up within that layout. So with grid template rows, auto, 1fr, auto, you can create the pancake stack. You could even have an application toolbar down there. Again, this is one that we see really commonly. And grid template rows, it's a great one to know. Another very common layout is the holy grail layout. Does this look familiar? I think we've all seen a website or two that looks exactly like this at some point on our web journey. We've got your header, your footer, your left sidebar over here, your main content and then a right sidebar. And we can write all of this in one line of code using grid templates. So grid templates allows us to write the grid template rows and grid template columns at the same time. So that's pretty neat. It's also super responsive. Again, you see this auto content taking up what we are specifying here internally. And then this main content taking up the 1fr. And so what we are specifying here is grid template with auto 1fr for this middle space and then auto for the footer. And then we've got our columns of auto 1fr and auto. So you get the whole holy grail layout with grid template and auto 1fr, auto slash, auto 1fr, auto. This slash is what denotes our rows versus columns when we are writing the grid templates. So I think that this one is great to know. Grid template is something that I use all the time. This is not like exactly one line. I mean, all of these, you know, you have a little bit more to add. But with this, when you are writing a grid template, you can then specify grid columns and grid rows for each of these elements. So here I'm specifying what grid column I am placing the header in. I'm going all the way across all three. So 1 slash 4 to get those grid tracks from the first track to the last track. And then the left side, we have it going inside the first. So from 1 to 2, this main section going from 2 to 3. So that's going to be taking up the middle section and then the right side is from 3 to 4. So that's going all the way to the end of this grid that we've created. And then for that footer, it's going all the way across just like the header. So you do specify where items are placed when it is a little bit more of a complex UI. And in here, if we look at the HTML, I have this parent, then I have header, then I have left sidebar, then I have the main section, right section, and then the footer. So you can write all of your layouts in one line using grid template property. Next we have another classic, the 12 by or 12 span grid. You can quickly write grids in CSS using the repeat grid function. And here we're setting a repeat of 12 columns. So that looks like this grid template columns, repeat the number that we want to repeat, and then 1fr. So this would be the same as writing grid template columns, 1fr, 1fr, 1fr, 12 times. But because I don't want to do that, I'm just going to write repeat 12 and then 1fr. And then we have a 12 by grid. So now we can place our items within this grid however we want. If we want it to span all the way across the 12 columns, we would use this span 12 element. I just gave it a span 12 class and have it going from 1 all the way to 13. So taking up the full space of the 12 columns ending at the grid track of 13, which would be the end of that 12th column line. For the span 6, this is going from 1 to 7. For span 4, this is going from 4 to 9. It can go anywhere. I could start this at the first line and make it go all the way to 9. I could have this go to 5 and have it still span 4. But the cool thing is you can just place this wherever you want inside of your UI. So if I wanted to have this start from 6 and go to 10, I could do that. And then we have this span 2, and this is just going from 3 to 5. Again, that could be placed anywhere. And then a peep at the HTML. We just have this parent element. And then the inside of here, we're just giving it classes based on those span elements that we were just adjusting within that grid template. So the repeat function is very, very useful when you don't want to keep typing out 1fr or auto multiple times. It just lets you quickly write information. We're going to expand on the repeat function for number 7. And this technique is super cool, super useful. If you take away anything from this video, I think this would be a great one to keep in your repertoire. I like to call this the RAM technique, which stands for repeat, auto, and min-max. And the line of code here looks like this. You have the grid template columns, repeat, auto fit or auto fill, min-max, the base value, and then 1fr for a fractional unit. And here we have that base value as 150. I'll show you exactly what's going on. So as we increase the size here, these elements are going to fit to take up the space, these 4 boxes. As I decrease it, they're going to hit this 150 base value. And then they're going to wrap onto the next line. But here we have them auto fitting. So they're going to be spanning to take up as much space as they can. So there's some really cool algorithms at play here. Now if we change this to auto fill, this will look a little bit different. So let me just update that to auto fill. Here now, as I increase the size, it's not going to be spanning and stretching to take up the remainder of the space. It's actually going to be using that 150 pixels as a baseline and stay within that. At smaller sizes, there's no difference here, but you really see the difference at larger sizes as you have additional space. And I use this technique on the page that you're looking at here itself, this auto fill, so that these two segments would stretch and shrink, but not exceed a specific space that I wanted them to. And then I have them centered. So you can center this within the parent as it spreads to a larger size. That's always an option and a really great technique to know. For RAM, RAM, repeat, auto, filler fit, and then min-max, and you can get these responsive boxes. You can use these for images. You can use them for a lot of things. It's something that we see all the time for cards. And this is a great use of all of these fancy new grid capabilities in CSS. For our next layout, we're heading back to Flexbox land. I wanted to include this one because I just find it so useful and I use this all the time. I call it the lineup. Why? I don't know. I'm tired. If you have a better name, please let me know. Leave a comment. But the main thing that I wanted to demonstrate here is justify content for placement of items. And here specifically, I wanted to highlight justify content, space between to place items at their edges. And so in this example, we have these three cards and you can see that as I'm stretching or shrinking the size of this viewport element, they are maintaining the same height as each other. And in fact, we are having them fit to the top and bottom and this interior content. So this description, like I can keep typing here. This is then going to be centered within the remaining space. And so the reason this is happening is because for these cards, we're giving them this flex direction of column, this display flex, the Flexbox mode, and then we're justifying content space between. So because this is a column for the flex direction, the space between is going to be right here in between these three elements, this little box here, the description and the title. And so here as I'm having additional space added or removed vertically, they are centering themselves. And this just makes for a much neater layout. I've used this a lot here without that justification. It looks a lot more messy, but because of the stretching here, because the Flexbox, this justify content space between, I use this all the time. And I think it's really important to know that with Flexbox, you can change the direction and you can justify your content in unique ways. It doesn't have to be just centered. You can also do center. You can do a space around as well or space evenly. But in this case, I think that the best way to justify is space between because this way we are ensuring that the first and last element here in our layout, which is going to be this H3 and this little visual box remain flush to the top and bottom of our cards. Here's where we get into some techniques with a little less current browser support. I like to call this one clamping my style and it's a really neat trick. Remember at the beginning of this video, we talked about min, max and clamp. Well, here's where it can come into play for layout and element style. Here I'm specifying the width using this clamp function and I'm setting clamp 23CH, 50%, 46CH. What does this do? Let me show you exactly what's going on here. As I increase the size of this element, the parent container here, it is going to increase the size of this card. And as I decrease it, it decreases it. But what we are setting here is a minimum and maximum size for it to clamp to as it reaches that 50% size, this card wants to be at 50% width. But if that 50% means that it's bigger than 46CH, which stands for 46 characters, then it's going to stop getting bigger. The same thing happens with the smaller viewport size. It's going to stop decreasing in size when 50% of its parent size means that it is smaller than 23CH, which is 23 characters. And these specific character units can be used to make legibility a little bit easier. So in this case, I don't want this card to get any smaller than that because then the paragraph gets harder to read. And same thing with getting bigger than 46 characters, then it gets too long and hard to read. So you can use width, clamp, minimum size, the actual size, and the max size to create some really cool responsiveness within this element itself. And you can also use clamp for font size. That's a really great use case too. You can have this responsive, flexible typography. You could have like clamp 1.5 rems and then a, like, say, 10vw for the viewport width, and then 3 rems as the biggest size. And that way, as you resize your window, you're going to be having a minimum value of 1.5 rems, maximum value of 3 rems. And then you're going to have that grow and shrink into that remaining space. So it's pretty cool to see this actually working in a browser. Again, this doesn't have full browser support, but it is a really great technique. So if you're using this, make sure that you have fallbacks and do your browser testing. And finally, we are at the end. And this is the last layout tool. And this layout tool is the most experimental of the bunch. This was recently introduced to Chrome Canary and Chrome 84+. And there is an active effort from Firefox in getting this implemented in browser. But it is currently not in any stable browsers at the time of this recording. I do want to mention it, though, because it is such a frequently met problem. And it's just simply maintaining the aspect ratio of an image or video or of an iframe. And so what this is, is respecting the aspect. Respect for aspect. That's the name I gave it. And it is the aspect ratio property. Oh, my gosh. I'm going to be so excited when this is implemented in all browsers. What this is doing is, as I am resizing this parent element, the image here. So this is just like I gave it a class of visual for this box here. That is right here. This is getting an aspect ratio of 16 to 9. And no matter how I increase it or decrease it, it is going to keep that aspect ratio. This is something that is so needed for when you are pulling in content from a CMS or otherwise and you have a specific dimension that you have that media at. And this, for example, in the previous example, if I scroll up, as I resize here, since I'm only setting a height and it's just getting the 100% width of whatever remaining space that I'm providing here, it's actually changing the aspect ratio of the sole visual box. And that's not what we want. That is going to make you force a decision on if you want to either fit the content inside of there so it's smaller and fits within the space, or if you stretch it out and you have it fill the content and then you're only seeing a piece of that media, not the full image. And that's also going to cause all sorts of problems. So having this aspect ratio is very exciting. You can also set this to a square if you do 1 over 1. You could have this be 1 over 2 where you have this actually longer than it is wide within this parent here. So that's going to be maintaining that aspect ratio. And it's just exciting. So I wanted to mention it and let you know that it's coming down the pipeline. And those are the 10 really powerful lines of CSS that I wanted to talk about in this one-line layout video. I hope that you all learned something new. And if you're looking for these demos, check out one-line-layouts.glitch.me. Thank you all for watching. If you want more CSS content and to dive deeper into layout techniques, including all the bells and whistles of CSS Grid and Flexbox, check out the CSS podcast that I do with my co-host Adam Argyle. It is at pod.link slash the CSS podcast. Thank you again. Enjoy the rest of your web day. Thanks for watching. I'll see you next time. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye.