 Now, anytime, sir. OK, let me just arrange my. OK, OK, yes. Yes, I'm ready. Go. OK, hi, everyone. Thank you so much for joining. And today, we have a very interesting topic with us. I'm going to talk about responsive layout with CSS grids. We've heard about responsive designs, but how do we actually make use of CSS grids to make responsive designs? And I'm going to start by motivating about what exactly does it mean for us to make websites responsive. So I'm going to start with that and then go on to explain about CSS grids and how you can actually make it responsive without media queries, just using CSS grids. And there is a live coding thing at the end, which I hope I don't mess up. Anyway, hi, everyone. I am Vishak. I recently graduated from NES. I came here for a one-year degree, and then that is completed now. So yeah. And before that, I was previously working as a front-end developer at Oracle in India in Bangalore. And before joining Oracle, I thought Oracle only did Java and database stuff. But turns out they have a lot of other things as well. So I was working on one front-end project with them. It was a construction-based software. If you want to know more, you can ping me later. And the third and the most important point, I really love Mala hot pot here, but I have a contingency that it has to be vegetarian because I am vegetarian. It's the only vegetarian food I can find in the Hocker Center here. So if you have any other suggestions, you should really ping me. And then you should tell me, go check this out. This place has good vegetarian food. OK. Next, here is a picture of me eating Mala hot pot. And I am proud to share that my chopstick level has reached the level of a peanut. So I have good precision now. Anyway, that's about me. Now let's get started with our talk for today. First of all, let's talk about viewports. Sorry. Let's talk about viewports. What exactly is a viewport? Viewport is basically the browser rate. And we have an interesting problem with us when we are working with our browsers. The size can be very flexible. When you open it on a phone, it's a certain dimension. When you open it on a desktop, it's a certain dimension. And in your desktop, you can actually resize it. You can resize it both horizontally. You can resize it vertically. So viewports is really important to understand for us to understand what responsive design actually means. It essentially means that we have to consider that we are looking at our website through a viewport. And how we want our website to be shown to our users, what we want to communicate with our users, we really need to think about what kind of viewports are the users using. How will it look if a viewport is small? How will it look if a viewport is large? So we have to think about these questions before we go on to make responsive designs. So I saw this tweet yesterday from Mandy. And she says that who needs breakpoints anymore, she's got grid and flexbox. So I thought this was relevant to this talk because in this talk, we're going to use grids. We're not going to use media breakpoints or anything like that. So this is the new way. And so when I talk about viewports, we actually have four sides of a viewport. So we have the side horizontal viewport, but we also have the vertical viewport. So our users are going to be changing. It could be anything. If it's a small screen, it could be shrunk in this way. If it's a large screen, it can be shrunk in this way. So we really need to consider what kind of page our users are going to see, depending on the viewport. Now, when responsive design came along a few years ago, we actually added a bunch of breakpoints and said, okay, when the browser is going to be less than 960 pixels, we want the layout to be like this. When the browser's width is going to be 320 pixels or less, it's going to be something like this. So that is a great step, right? So that made our website really responsive when people, when they opened it on their mobiles, they can actually understand what the website wants to communicate to them better. Before we had responsive websites, we have to scroll through the entire page. It was like peeping through a peephole. So now that problem is gone. So, but there was something missing still. So what that was is that we concentrated on making responsive design based on the horizontal bit, but we didn't have really any tool to make it responsive in terms of vertical alignment. Let's say this website, I'm shrinking it by 50% vertically. How do we want our website to look? Is it okay if our text is getting cut a little bit or do we want to show like a big picture? So when the user lands on our website, it's really important, right? What we want to show them. We don't want to show a broken layout. So we didn't have tools for doing that kind of designs until we had viewport units, which we'll be talking about. And okay, now after all this, let's think about what website, what a website actually is in a very, very, very basic way. A website can be related closest to, in the physical world, to posters. So let's say this tonight, you are invited to a pill party and all these things is a poster. And let's think of it as a website. This could be a website. So but what's really the difference between a poster and a website? The thing is we can look at the whole poster at once, right? We don't have a viewport. We don't have to scroll through the posters. We have the whole poster just to look and experience it that way. But we don't have that kind of flexibility when making our websites because our screen size are variable. So we have these kind of different posters, but the thing is that we don't have to scroll through it. We can look at the whole poster at once. But this is how we've been designing websites. We think we take an A4 sheet using Figma or whatever design tool we take. We take an A4 sheet and we just assume that, okay, our page is going to be an A4 size sheet of paper and then we distribute our designs to the front-end developer using a PDF. But we didn't consider that, okay, the users actually have to scroll to look through it. They don't have the entire view. So this is the important thing I wanted to highlight. There is actually a difference between designing things inside and outside a viewport. So let's take an example here. What if Amazon.com was a poster? What if we opened Amazon.com and we see this whole bunch of things lined up like this? How would our experience of Amazon.com be at that point? And the guys at Amazon would have actually thought about this. What does it mean to craft an experience when there is a frame? We have only a certain amount of frame, 800 pixels at one time and then the user has to scroll down to see the other things. What can we make so that the experience of scrolling through time look beautiful? Make communicate what they want to say, communicate what the website wants to say properly. So these are the things we should think about. And okay, there's something about storyboards that I wanted to share. So this is not a new problem for us, right? The film industry has actually been facing this problem. So they have really small camera and they have to decide how and what kind of camera angle they want to shoot the movie at. So they actually quickly prototype things like this. It's called storyboards and they quickly see, okay, let's say we keep it at this zoom at this angle. How is our movie's experience going to feel like for the user? They quickly prototype it, sketch it down and then they decide if they want to move with it or not. Now the question is, can the same be done for web? Can we quickly sketch things? How it's going to look at different viewports and different scroll lengths? How it's going to look like to our user? Can we do that for the web as well? So that's a question. And let's see some examples now. So this is one example. This is someone made by someone called Jen Simmons. She is literally the best person you should follow if you like CSS. She, I think she actually works with Apple now to works on Safari. So she has really, really great content on YouTube as well as Twitter, so you should check her out. But anyway, the example here is that, so if you see this website, the first page is full of dirt, right? So they want to convey dirt, a secret weapon to fight climate change. They want dirt to be, you know, that's what they want to communicate with us. But let's say we open this on a mobile. How does the layout change? It's going to be like this. It's still going to be 100% of your screen. What if you open it in a very, very small mobile like Moto G or something like that? And then it will still be 100%. So the experience that they want to give the feeling of the dirt is always there in whichever device you open it. So this is a really good way to make your website responsive. And here's another example. So this is a grid and how do we want it to look when we open it in different devices? So as we shrink our grid, the whole layout is going to shrink and the same with height as well. So whatever you do, you always see that kind of grid. So the experience of the website is really good. And here is another example, the Rolex website. Let's say I open this in a mobile. I still have the view of the video, right? So if I scroll down, the text automatically starts. So it's not like I have to scroll through the video because the video is like 800 pixels. They made it into like fit 100% of the viewport. And then the Ferrari does the same. I don't know why, but the designs are really similar. So if it's a full screen, it takes the whole width again. But if it's small, it takes this whatever width is available to this. So this is a really good way of making your websites responsive. Now, let's look at how we can actually achieve this. We have something called viewport units, which allows us to design in response to the fourth side of the viewport. So basically we have four properties for that. Height, width, V min and V max. Let's say we want to design a layout like this. We would give the content should be 100 VH. That means it should occupy 100% of whatever viewport is available, regardless of how many pixels it is. So the same for viewport height, viewport width and V min and V max is an additional thing that you can play around with. And okay, so now that we've talked about viewport units and how it can help us make responsive designs, let's talk about CSS grids and how we can actually combine both of this and then make really good layouts. And so I'm not sure how many of you guys have worked with Grid before, but let me give a quick introduction as to how Grid works. If you've worked with Flexbox before, Grid is something similar, but it's in 2D. Flexbox is in 1D, but Grid is in 2D. So let's take this example. Let's call this whole thing a section. We give a display of Grid. It's a display property. So display Grid and Grid template rows 50px and 100px, and then we have four elements inside this. So when we specify Grid template rows as 50px and 100px, what it tells is that the first row should be 50px, second row should be 100px, and the rest of the rows, take whatever the size the content is. If we want, we could have given 50, 100, 100, 100 so that the others are 100 as well, but we can leave it as well. This is one of the simple examples. And we can do the same for columns as well. We give display Grid, Grid template columns as 1fr2fr. Now we have a new unit here. So this fr unit is very specific to Grid right now. I think it might come to other elements later, but right now it's only on the Grid. And fr gives so much, it's like a superpower when you're making Grids. So we have three elements here inside, right? One, two, and three. So when we specify 1fr, 1fr, 2fr, what we're actually saying is, hey browser, let's take the entire free space that you have and split it like shares. This guy should have one share, this guy should have one share, and this guy should have two shares. Yeah, this guy should have two shares. So this is really like a superpower when designing with Grids. FR units are really cool. Oops, you shouldn't have seen that slide. Anyway, how do I, okay, okay. So, okay, now that we've seen about FR units, let's talk about MinMax. MinMax is another cool feature that is only available on Grids right now. Quickly, how it works is that we can actually combine Grid Template rows and Grid Template columns to make a two-day grid like this, the one that you see here. We have six elements inside. So when we say MinMax 100pxR2, what does that actually mean? So this is the first row, right? One, two, and three. We are saying that take a minimum of 100pxs. Don't go less than 100pxs. But then if the content is big enough, take the size of the content. It doesn't matter. That's what auto means. And in terms of columns, we're giving auto 50pxs, 1fr and 3em. So what does this actually mean? So this applies to the first column alone. We are seeing that take how much ever the content needs but don't cross 50% of the entire width of the element. So this is really fine-grained control and we can design layouts with ease responsibly when we use MinMax. And 1fr basically says that whatever the remaining space is, take the entire thing. And 3em is a fixed width. We only want the last column to be 3m. It's a fixed width. Don't change ever. So we can make really cool layouts by combining MinMax, by combining FR units. We can make use of Viewport units. We can make really good designs without any breakpoints, without any media queries. So let's look at an example now. So we're going to try to recreate this quickly. So this is a website made by Jen Simmons as well. But this website is really special. Let me show you why. So this website is really responsive. So if I do this, it's going to accommodate whatever width I have. But the specialty is that if I decrease the height, it's going to accommodate that as well. So if I keep reducing this, reducing this, the size of the image actually gets smaller. It doesn't really matter if the image is big or not. The idea is that we have to, whatever the device is, we need to make sure that the name is there and then the logo kind of a thing. This can be small. It doesn't matter. It has to be big. So you can go up to this and then it starts to scroll. So we have a minimum width of further image. So this is a really cool way, right? Let's say we just want to keep this open in our screen and put it in the corner. We can have any width to it, any height to it, but still it's really responsive. How do we do something like this with what we just learned right now? I have a code pen here and there is absolutely very minimal CSS that I've written now. So it's just a header and I have an image. I haven't changed the art. Please ignore that. Then I have a H1 saying I am a developer and I have a navigation with a list saying about GitHub, YouTube, Twitter, everything with this. But now it's not responsive. If I make this really small, I have to scroll and if I make it like this, I have to scroll again. So let's try to make this site responsive. So we have the outermost header here and we want to make this header as a grid. Header, going to set a display grid, right? And once this is done, this doesn't do anything still. But before that, let's set the height with a viewport unit. So height is 100 BH. So this will make sure that our height is always the 100% of whatever the viewport is. So after this, let's specify how our rows are supposed to be. So let's say we have this is one row. This image is another row. This H1 is another row. This navigation is another row. And this black space below the navigation is another row. Let's say we have five rows. How do we write this in grid? So we have grid template rows, right? Let's say... So we have to give some space for this white space, right? Let's say we can... Let's just give one FR. Take one fraction of whatever the space is available. The second one, as we saw, the image is actually decreasing, right? So we can use minmax here. So minmax, take a minimum of 100 pixels only and take a maximum of 350. Don't go more than that, right? And then we come to the H1. We want this to be max content. Let me quickly explain what max content means. Max content means that take whatever space so that the line doesn't break. We don't want this line to break. If we had given min content, this line would break and it would kind of squish and take the smallest available space. But if we give max content, it's going to take the entire row. And the next one is the nav. We give a max content again. And we have some extra space below the place, right? So let's give one FR again. So what does this actually mean? Let's say, right? So let's say after we've taken all this space, minmax, max content, max content, whatever the remaining space is, split it between the fractions. That's what we want to achieve here. So now it's still not working because our... Let's quickly inspect and see what's wrong. So we have our header here and... Oops, not this. Okay. So the problem is that we haven't actually placed the items inside the row. Let's do that now. Oh, wait, I think I found my mistake. I've been making too many JSON objects. Okay, I think the grid should be working now. Okay, great. This is a grid. Okay. So our grid is working now. So the first... But the problem is, we want some free space at the first FR rate. So we actually have the ability to place our elements inside certain rows and grids. Let's see how to do that. So the first one is an image. I want to place it in the minmax row, right? So I do grid row if I'm not wrong. And take a height of 100%. Okay. So by placing it here, it's going to take a minimum of 100 pixels, maximum of 350. And then we have the h1. We have grid row 3. And then finally grid row 4. Okay, we have some designers now. What's happening? Okay, we have to justify contents. We need to center things, right? So let's justify it. Justify items center. Okay. Now we have things in the center. Oops. Oh, shit. All my other CSS is gone. Okay. Let me quickly write it again. IMG grid row 2. Grid row 3. Take the third row. Nav. You take grid row 4. Okay. Awesome. Now let's see how our website looks like. Oh, I need to save it. Okay. Saved. Full page view. Okay. We have something now that is working. It seems to be working. As we make it smaller in this way, it is still responsive. And if we do this, our image is getting smaller. And basically we've achieved what we want. Pretty cool, right? This is a very simple example. But then we can play around with min-max and we can play around with viewport units and make really cool things. Definitely check out this website. It's called labs.gensemonds.com. She has a lot of examples here, which are really cool. So just check that out. And that's all, guys. That's my presentation. I hope you liked it. If you have any comments or if you want to reach me, you can ping me at Twitter. Yep. First of applause, everybody. Yes, please imagine the thunderous applause during audience. Thank you. Thanks, thanks. You must tell us when you're releasing new videos so we can promote the shit out of it. Yeah, I have been very lazy and I haven't been doing much. But I will definitely tell you on the next phone itself. We are your professional, unprofessional, unofficial, official promoter. Thank you so much. Let me press stop. Wait, wait, wait. I think we got a question or not. You never joined any of the live events before, right? Never mind. Even live, they look at you, you look at me, I look at you, you look at me, also no question. So much less online. Anyway, I'll just put it out there. You can probably ping Vishak on Twitter. I don't know. Yeah, that's... If you guys are wondering where I hosted my slide, I did it on Canva. I got the very, very cool things like this. Oh, nice. Like this. Oh, Canva. Yeah. A little seminar in the Ling Hall, a newsletter. Yeah, sure. You might be able to run into Vishak at some vegetarian mala place. Who knows? Singapore, not very big. Yeah. Anyway, let me press the stop record.