2.3 Exploring a More Complex Example

Welcome back to the course in this lesson we'll build a more complex demo for container queries, let's begin. First of all, let me show you what I want to create. So it's gonna be a page with several articles displayed in a grid format and depending on the size of the parent or the container for each article, I can have three variations. So this is the largest article, this is a middle or a medium size and this is a small size, okay? Now based on that I went ahead and created this in code pen. I wrote all the HTML and by the way, you can find the links to these pens below the video, and I wrote the HTML in the following way. I'm gonna have the articles placed on the front rows and each row is represented by a div Class grid, each article is represented by the div with a class of Article card. And these article cards are wrapped in an article tag, so this is basically our parents or our container. This is one, this is the one that we're going to query, in CSS, I went ahead and wrote it, just some basic styling for what you see so far. And I left the rest of the CSS to write together right now and we're gonna start with the grid. And I chose this example for a very good reason because with grid, you can create some pretty amazing layouts thanks to something called autofit and autofit will allow the grid to automatically make items bigger or smaller depending on the available space. So, in our case, I'm gonna say a grid, we're gonna set display to grid and then this is where the magic happens, grid template columns, we're gonna say a repeat autofit. And that's actually put hyphen, min max 200 pixels one fr and we're also going to set a gap. Let's say of three ramps and I'm gonna set a margin bottom of three ramps as well. So based on that our layout now currently looks like this, the first row has only one article because that's how I set it up in HTML and let me actually show you like this. Let me collapse. See, so first row, one article, second row two articles, third row four articles that can be seen like this. See, this is the second row and this is the third row and grid does its best to place these items correctly, depending on the available space. Right now, let's work on the smaller size first, which is this one, here we just have an image, title. And this this meta information with author and date, so we'll say small, this is the default, right? Let's start by defining our containment context, container type, inline size. And while we're here, actually, let me show you two other options for creating a containment context, you can also name a container. So you can say container name, articles and then you would say container articles and then men with therapy ramps, whatever it is and you would write your CSS there or you can use a shorthand and that is simply container. The type, in line size and then slash the name, right? These two are exactly the same, so let's go with that. Next, we're gonna target the article-content and what I need to do here is move this bit to the bottom. So I need to use the order in flexbox, so I'm gonna say display flex and set column as the direction and then I'm gonna target meta and say order equals one and this is gonna Gonna put it right below that. Next let's target the Met URL, a couple of different styles here, list style none to get rid of this of these bullet points. Let's reset padding margin and let's set the display to flex, so they're one next to each other. Let's also change the font size, 14 pixels and the line height 16 pixels. Okay, so that's pretty much all we're gonna do to the matter, we got to hide this the science label and this description. So I'm gonna say h1 plus p, so the paragraph immediately following h1 and also the label display: none and then finally, h1. Let's set a much lower font-size: 18 px and set a line height: 24 px, and a margin: 1rem, top, bottom 0; left, right. All right, so that completes the CSS for the default state, right? If we look at the page, every single article has the same style. Now let's move on to the medium. So for the medium style, and it doesn't mean that this medium style will be applied to the second row. It's gonna be applied where it's necessary, where the container query dictates that it's necessary. So I'm gonna say container articles and I'm gonna set a min width of, let's say 40 reps. Now for the medium so when there's more space available, we're gonna use this version. So image on the left, and we display everything else the description here, the label, and the meta is also back at the top, really easy to do, we're gonna say article card. We're gonna display flex and we're going to set a gap of two ramps, and I'm doing this so that now let's see where it is right here, so that the image and the text content are in line. Then let's make the image smaller, so figure we'll set a max width of 20 ramps, let's say and we're gonna align it to the top. So flex start, what else let's display the paragraph after the h1 and the label. So display block and finally, we're gonna target the meta, we're gonna change the order back to zero, so it's gonna be placed on the top. And we're gonna set the display to flex here as well, so all of these elements are one next to the other. Let's central align them vertically, so align items center, like so and we'll set a gap of 1 REM. All right, so now we have the second version of our components, so this is the default, this is the second one. Notice if we increase the available space here, we might almost, let's change this just a little bit to 38 ramps, let's say. Maybe 35. Maybe 30. There we go. See, so when the parent is at least 30 rems. Which happens right about now, these two elements on the second row change to this medium size Version, of course, it doesn't look very good here. It should be a little bit bigger this minimum width, but I just wanted to show you that really quick. In this first row where the article parent is at least 40 rems, we get the updated version, of course, the rest gets the default version. And I'll finally for the larger version, I'm gonna say container articles min width. I'm gonna set this to you like a bigger value of like 60 grams, and the larger version needs to look something like this, so the content itself is positioned above the image. We also have a color overlay on the image and apart from this version, we also have this little icon next to the date there. So let's quickly go over and write the necessary styles. I'm gonna start by resetting the display of the article card because previously we set it to flex, I want it to be displayed as a block. And I want the position relative because we're gonna position some Some elements absolutely on there. Great, next, let's target the figure we'll set a max width 100% and also position relative and let me just bring this down just a little bit. So we can see the changes happen here in real time, there we go. Next, I wanna add that Color Overlay and one simple way to do that is with a pseudo element on the figure, so I'm gonna set the content to nothing. Position absolute, top zero, left zero, I'm gonna set a width to 100% height, same deal and I'm just gonna add a background color to an RGB a value of 141, 26 with a 0.8 or 80% capacity, just like that, cool. Now, that's taken care of let's move on to the article content that's gonna be absolutely positioned above the image. So, article content, position absolute, and let's set the left and bottom to eight ramps, like so. Next, let's target the h1 change the font size on that 44 pixels, line height is 56 pixels, and let's make it white. Next, let's also make the paragraph white. Next, let's target the h1 and the paragraph following an h1, and set their width to about 75%. Like that, and let's see what else, we got to hide the author. So author, display none and what else? Let's add this, this icon, that's really easy to do, I went ahead and imported a Font awesome, Version five. So, for that would you time we'll use a pseudo element for it content, that's gonna be f 017. Font family is gonna be font awesome 5 free and let's also give it a margin-right, of let's say 0.5 grams, cool, so now we have the icon too, and with that we are actually finished. Let's go ahead and save and let me change the view here so. We can see all the articles in a regular sized page. So for this first article, notice the parent is really large, it passes this minimum that we set here of 50 ramps, so it uses the large style. The parents of the articles in the second row, have that space cut in half, so they're not using the large version, they're using the medium version. And then finally, the other four articles are using the default version because their parents have limited width. And just like that, we've successfully used container queries to create three different versions of an element based on the parent size, not the viewport size, right? We didn't use any kind of media queries, we just use container queries that target the direct size of the container, super powerful and now of course, as I make the smaller The containers for each article gets smaller and smaller, so they will update as well notice the middle row articles are now using the default style and as I go smaller and smaller, You'll notice the top article will also use the middle or the medium style. And I can go as low as I want and everything will just go back to the default style, that we set previously. Alright folks, that's a quick introduction to CSS container queries, do you like them? I do, I believe they are super powerful and I can't wait until they are implemented and supported by, by all modern browsers is gonna make creating responsive websites so much easier. Now, in this course I only showed you these two examples, but there are so many more implementations for this kind of thing. Off the top of my head may be a search bar that can be displayed in the hero area, as well as in a sidebar, maybe a nav bar that has three different states for mobile tablet, or desktop. The examples can go on and on and I urge you to play around with this new feature in CSS with container queries and see for yourself what they can do and how great they are. All the links to to the code that I showed you in this course can be found below the videos in the lesson descriptions and you can use that code to play around words start your own, it's really up to you. With that said, thank you very much for watching this course I'm Adi, and until next time take care.