So the the title for this talk is how to make rest response it, let it go redone with CSS variables in CSS cow. So there are three big words over there. The first big one is vertical rhythm. So what is for to go rhythm? In the first place right, can you see the picture properly because it might be a little bit too small in MI? This should make it big enough.
Yes, big enough: okay, basically, when we starting about typography, there’s this one thing that that we are quite particular with and we call it about the corrida. What it basically means is the vertical white space needs to go at a consistent rhythm, so we read what’s easily so in this case, for example, the words the underline is what we call the baseline of text and usually in print typography or free 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 mix the reading part easier, but on the web-based line, calculation is kind of a 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 the idea of a Breeden exists.
So each line has a specific rhythm in itself and if you put a space kind of like with the rhythm and base, it makes it easier to read as you go along alright. So the idea of what can be done is using this line. Tight-Ass, the common spacing variable for your entire design. So in this case will be 24 pixels. I can use it everywhere else, make it like 0.75 1/2, a multiple 2 times the multiple and use that value as the space.
So, in that case we are not calculating by can you ship it by 2 pixels that kind 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 space, as you can see, I did a 3 x over there so 24 times 3 72 and then you can use that as a space variable. So we don’t have to worry about my new pixel changes in the old way of doing it.
It’s kind of like that, if we were 10 pixels see one sizes, 20, 20 pixels and like highest 1.4, the end of optical rhythm is 20 times 1.4 or 28 pixels, and we just use that value 28 route 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 Ren, Ren is a CSS unit that says the equals to the base one size the base one size is the font size mentioned in the HTML.
So whatever the font size in the HTML, that is one read if the line height of the body text is 1.4, then we use 1 gram times 1.4. So the calculation goes. If you want one VR or one vertical one or one rhythm unit, that is 1.4 in so that’s how the the thing goes, then we come in then then there’s this thing about about typography, where you know like 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.
That’s this thing called the typography triangle, where there’s a delicate balance between three things, so the length of texts – if it’s too long, it’s hard to read, because 2-shot is also hard to read and the font size itself and also the line height of the text. So, generally speaking, if the Texas, 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 at a larger size, you you need more space to have more breathing room for the Text so Tim Brown, which is one of the typography experts, came out of this thing, known as molten lighting, 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 one y en +. 1, VW, VW s, the viewport width, so it changes the font size by the same time. You also change the line height with, like say, 1.2 m, +, 1, VW and kind of that’s the thing right in practice. It looks like this. I have two infinite. Okay, so if we reduce the font size, you can see that I have 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 lighting, because you know you calmly, control it properly see where it gets to a point where the the lighting is a little bit too big, oh reading, meaning the line height. So if you want to control that right and still if you’re, not control that you have these 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? Okay is kind of something like this. You change that to small. Where is my mouse? Okay, so you changed the line height and then at a different southern pixels. You change like 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 are you had done before and so far before CSS variables and before we didn’t have a way to do.
Responsive algorithms, because this is freaking painful right next, what am I so with CSS variables, there’s an easier way of doing this whole, but to cover them thing, but, first of all what is CSS variables? Css variables is it’s kinda like normal variables, but written the CS in a custom property way, so they are also called custom property. What you do is to define the CSS bill go first, with this double dash.
Syntax that says, ok, color is something I want to. I want to define – and this time is I say it’s free and the good thing must CSS variable is that you can calculate at runtime, meaning a Tem. I can change this to blue and then I can write color vah vah color, which is my CSS property and at 30 EMS it will automatically change to blue. So that’s what CSS variable does all right. Then, if we think about this in the same way, we can use CSS variables to create online height right.
So let’s say a line 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 that, like I, was like huge change, but in the CSS way of. But when we calculate the whole thing, we just need to say margin top. We have to use calc because we want to multiply with a multiple. So if it’s one gram, you can see the baseline times one rib right.
So this is two rhythm units cost two ribs 0.75 would be 0.75, wait a minute and so on, and what we have as a demo, then, is this so okay yeah. 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 a responsive, vertical rhythm in CSS yeah. This is the line height. Oh yeah. I didn’t do the calculation here, no damn it! This is how you prepare an okay, so calc and then for, for example, so in our pixels I changed right now, that’s a very big margin. So it’s so it’s quite obvious. 800 pixels! You see that change in margin, even though I didn’t change the margin value in a media query in this h1 declaration.
So that’s what I wan na share you can. You can use this in production if, if and only if, if you don’t have to support browsers that don’t use CSS rules, 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 Oprah meanie. That’s the only concern or premiering 11. I don’t supply 11. I don’t care yeah, but the thing about CSS variables is, you can’t have a CSS, we will fall back easily.
That’s done! That’s the unfortunate thing. If you use CSS, there goes 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 some code. Yes, I think there’s some code samples for the fallback, so I’m just going to refer to it rather yeah. So so, basically, oh yeah. I went into a little bit more in depth in in this article because I kind of meet assess function to do the count.
Baseline kind of thing, so you don’t have to do it yourself and you can use it like. I say much on top of your to or something like that where RvR means responsive or the career them. But if you talk about support, then you want to write the answer. Pop-Up variable the base support source, 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 and just because margins and padding’s and values Are you so much it just kind of becomes unwieldy if you want to support this, so from I mean, is my main concern about using this method in your production.
Oh, it really depends on the like. We won’t use or prominently, but of Rimini. It’s mostly used by people who don’t have like good equipment and good Wi-Fi like us. You know people in Africa and Asia are probably Australia, Australia, Australia, yes as well so areas of no with that network they usually have cheaper phones and Oprah mini, is a browser that caters to that. So there are a lot of people who use over our meaning.
So done the same feature yeah at support, still writing you’re using just thinking, but you still having to write everything yeah. Well, I mean again: if it’s only up for a mini, you can assume. Small screens is what up for mini. Does hey? Actually it happens. You know theories are usable, but it all from uni this. This is something new. I didn’t know what previously that works, that works well, but even so we can’t use this technique worth of Rimini, because it’s too unwieldy at this point.
It’s just because of how the syntax for CSS variable needs to be get holbox. Well, even if you use less or sense, you can’t really use it, but it might be possible if you do pull CSS. It might be possible if you do for CSS, but I ever had the time and chance to dig into full CSS and making all something that does that automatically. If I find some time I, this is probably the first thing I’m going to do, because I’m like a typography kind of thing guy, I think we’re awfully close to getting there.
It’s it’s just going to take one good example of what to do and we’ll be using CSS variables that were awfully close. I mean it’s that’s pretty near notice. I mean, unfortunately, it’s not as useful or something like grid where there were pull backs. We were certain. We also can’t use calc in or from me as well, so I was like two things to wait, for I have no idea went over Armenia or ketchup. My hope is, they will catch up before I make the the plugin or, if I ever make them that that for CSS thing I will hope that Oprah me never catches up, because it would be a waste of my assets.
So it’s a it’s a it’s a battle between those two thoughts, yeah, the other questions all right. Thank you. So,
Jimmy's Internet Marketing Business Blog 