 Rage. Okay. So the lazy I'm doing it is I'm going to hit space Y and use preview to show you some images and that will be the way I'm going to give the talk. All right, so the title for this talk is how to make responsive vertical rhythm with CSS variables and CSS count. So there are three big words over there. The first big word is vertical rhythm. So what is vertical rhythm in the first place, right? Can you see the picture properly because it might be a little bit too small? Okay, am I? This should make it big enough. Yes, big enough. Okay, basically when we start thinking about typography, there's this one thing that we are quite particular with and we call it vertical rhythm. It basically means it's the vertical white space needs to go at a consistent rhythm so we read words easily. So in this case, for example, the words, the underline is what we call the baseline of a text. And usually in print typography or print magazines, however you put it, we put the baseline at the base of the text like in this case and then we just make sure everything lies on the baseline. So it makes the reading part easier. But on the web, baseline calculation is kind of a little bit of a challenge. I won't go into details here, but we have it this way. What this means is we have a text and then we have a line height and the baseline is just like, well, top and bottom of the thing. But similarly, the idea of a rhythm exists. So each line has a specific rhythm in itself. And if you put a space kind of like with the rhythm, it makes it easier to read as you go along. So the idea of vertical rhythm is using this line height as the common spacing variable for your entire design. So in this case, it would be 24 pixels. I can use it everywhere else. Make it like 0.75 or half a multiple or two times a multiple and use that value as the space. So in that case, we are not calculating by, can you shift it by two pixels? That kind of calculations, we don't really care anymore because everything is relative then. All right? So that's what vertical rhythm is all about. Now, like I was saying earlier, if you need more spaces, you can see, I did it three times over there, so 24 times 3 is 72 and then you can use that as a space variable. So we don't have to worry about minute pixel changes. In the code way of doing it, it's kind of like that. If we write in a pixel, say if one size is 20 pixels and line height is 1.4, then the vertical rhythm is 20 times 1.4 or 28 pixels. And we just use that value 28 throughout with some multiples to the 28 depending on how you want it to. Likewise, continuing on the code side of things, if you know this value called RAM, RAM is a CSS unit that says it equals to the base font size. The base font size is the font size mentioned in the HTML. So whatever the font size in the HTML that is, one RAM. If the line height of the body text is 1.4, then we use one RAM times 1.4, so the calculation goes if you want one VR or one rhythm unit that is 1.4 RAM. So that's how the thing goes. Then there's this thing about typography where when it comes to responsive design, you want to increase font size as the screen gets bigger because we are usually further away from the screen. And in typography, there's this thing called the typography triangle where there's a delicate balance between three things. So the length of the text, if it's too long, it's hard to read. If it's too short, it's also hard to read. And the font size itself and also the line height of the text. So generally speaking, if the text is at a readable size, you kind of want to increase the font size as you increase the text size because the same amount of multiple at the larger size, you need more space to have more breathing room for the text. So Tim Brown, which is one of the typography experts came out with this thing known as a molten lading. And this is how he kind of coined it. Basically, what this means is using CSS calc, which does calculations. And he does it with 1EM plus 1VW. VW is the view pod width so it changes the font size. By the same time, you also change the line height with like say 1.2M plus 1VW. And kind of that's the thing. In practice, it looks like this. I have to open this up. Okay, so if we reduce the font size, you can see the line height reducing but at a slightly faster rate than the font size itself. So that's how when you... Well, I don't really like molten lading because, you know, you can't really control it properly. It gets to a point where the the lading is a little bit too big or lading meaning the line height. So if you want to control that, right, and still if you want to control that you have to use media queries for your line height, right. Then we come back to the problem of vertical rhythm because if you change the line height of the vertical rhythm on the HTML, you have to change the line, the rhythm unit everywhere else based on our calculation. So what that means is kind of something like this. You change the... Too small. Where is my mouse? Okay, so you change the line height and then add a different certain pixels, you change the line, you change the line height and then you have to do all the calculations for all the margin and all the other stuff that you had done before. And so far before CSS variables and before calc, we didn't have a way to do responsive algorithm because this is freaking painful. Right. Next. Where am I? So with CSS variables there is an easier way of doing this whole vertical rhythm thing but first of all, what are the CSS variables? CSS variables is kind of like normal variables but written in a custom property way so they are also called custom property. What you do is to define the CSS variable first with this double dash syntax that says, okay, color is something I want to define and this time I say it's red and the good thing about CSS variable is that you can calculate it at runtime meaning at 30 E.M., I can change this to blue and then I can write color var color which is my CSS property and at 30 E.M., it will automatically change to blue so that's what CSS variable does. Alright. Then if we think about this in the same way we can use CSS variables to create a line height. Right. So let's say a line height is 1.4 we can use this value from 1.4 and just to make it drastic, just to make it visible we can change it to 3. It's like 2 times the line height it's like huge change but in the CSS but when we calculate the whole thing we just need to say margin top we have to use calc because we want to multiply it with a multiple so if it's 1 RAM you can say var baseline times 1 RAM Alright. So this is 2 rhythm units because 2 RAMs 0.75 will be 0.75 rhythm units and so on and what we have as a demo then is this. So at a certain point I changed only the line height variable I didn't change the font size in this example but I changed the line height variable and just changing that line height variable changes the margins and the line height of the body element as well so that is how you can do CSS Responsive Vertical Rhythm in CSS yeah this is the line height oh wait I didn't do the calculation here damn it this is how you prepare I am okay so calc and then var for example so 800 pixels I changed right now there's a very big margin so it's quite obvious at 800 pixels you see that I changed in margin even though I didn't change the margin value in a middle query in this H1 declaration so that's what I want to share you can use this in production if and only if you don't have to support browsers that don't use CSS variables if you don't have to support that sorry IE can I think IE is possible as well it's just the older browsers yeah Opera Mini that's the only concern Opera Mini IE11 I don't support IE11 I don't care given Opera Mini's default you could just assume there are equal yeah but the thing about CSS variables is you can't have a CSS variable fallback easily that's the unfortunate thing if you use CSS variable as a calculation you kind of have to do that twice so I have an article I didn't talk about the just let me bring up the article I think I have some code yes I think I have some code samples for the fallback so I'm just going to refer to it yeah so basically I went into a little bit more in that in this article because I kind of made a function to do the baseline kind of thing so you don't have to do it yourself and you can use it like say margin top RVR2 or something like that where RVR means responsive vertical rhythm but if you talk about support if you want to write the unsupported variable the base support first which is you have to do the calculations yourself and then you have to it's like a double property kind of thing it's not very nice but if you want to you can write it because margins and padding and values are used so much it just kind of becomes unwieldy if you want to support this so Opera Mini I'm not concerned about using this method in real production what do you think is something a person would definitely use the opera mini that says oh it really depends on the like we won't use opera mini but opera mini is mostly used by people who don't have like good equipment and good wifi like us you know people in Africa and Nigeria probably Australia Australia yes as well so areas with no with bad network they usually have cheaper phones and opera mini is a browser that caters to that so there are a lot of people who use opera mini um the feature query is helpful sorry the feature query is helpful with like use of calp and bell because I've not written so don't understand your feature queries feature queries but feature where you check if like a certain you're still writing if you're using um you're still sleeping but you're still having to write everything twice yeah I mean I guess if you have something that owns that kind of well again if it's only opera mini you can assume small screens because that's what opera mini does actually it happens feature queries are usable but in opera mini this is something new I didn't know it previously so have you used this technique anything where i11 doesn't work like this feature that works well but even so we can't use this technique with opera mini because it's too unwieldy at this point it's just because of how the syntax for CSS variable needs to be you didn't get knowledge from you're gonna get a box get the whole box so how do you work around this right now using like less or like well even if you use less or less you can't really use it but it might be possible if you do post-css it might be possible if you do post-css but I haven't had the time and chance to dig into CSS and make know something that does that automatically if I find sometime this is probably the first thing I'm gonna do because I'm like a typography kind of thing I think we're awfully close to getting there it's it's just gonna take one good example of what to do and we'll be using CSS variables but we're awfully close I mean it's pretty near can't wait it's not as, I mean unfortunately it's not as useful as something like grid where there were fallbacks there's just no fallback we also can't use calp in Opera Mini as well so it's like two things to wait for I have no idea when Opera Mini will catch up my hope is they will catch up before I make the plugin or if I ever make that post-css thing I will hope that Opera Mini ever catches up because there will be a waste of my assets so it's a battle between those two thoughts yeah any other questions alright thank you Zell thank you