Responsive Design with Custom Properties

[00:00:00]
>> Now let's look at a few applications in responsive design custom properties are immensely useful in responsive design. And it was one of the very first use cases for them it's a little bit difficult to demonstrate this appropriately with a small demo that is self contained in a slide.

[00:00:17]
Because responsive design gets exponentially more complex, the more your website gets complex. And we can't really see a very complex website. Because you won't be it will be impossible to process all of its code in the time space of a workshop. So here is a very cut down very simple example but hopefully we can still see some of the concepts and some of the strategies.

[00:00:41]
And you can apply these same strategies to the problems that you have already faced when you're designing responsive layouts. So, the most common way to use custom properties for responsive layouts is, is when. We're using multiple different measurements that are actually governed by the same measurement. Like here, we have a gap that is 0.3 m's in the regular rate layout, and 0.5 m's in the layout for larger screens.

[00:01:14]
We can resize this from the handle here to see it adapt. There's a bunch of things that adapt. So the gap adapts, the grid becomes a single column grid and the font size changes slightly as well Right, so, we have the spacing change in both places, the padding changes as well.

[00:01:39]
So essentially the padding that we have even though this is pre-computed here. What we actually wanted for the padding was to have a fixed amount plus an amount that changes based on the gap. So we could have actually written it like this. And then if we use a custom property for the gap, let's call it gutter, then we can use that right here.

[00:02:16]
And notice that I said, you shouldn't be setting custom properties right there and then using them you should instead use full box. That's components that you expect other people to style. If it's your own layout, then it's fine to set custom properties, obviously. So we override the gutter here, and that means we don't actually need this rule anymore.

[00:02:42]
It just adopts. So this is probably the most common strategy that you've already used. I imagine if you've used custom properties, you've already use them to override custom properties in a media query. And have the layout adapt this is probably the one thing that people teach when it comes to custom properties.

[00:03:02]
And responsive design but it's not the only one. So if we use that, it means that we still have to hunt down multiple places for the value of a single property. So, to make sense of what our layout looks like, we still need to look both in the media query In the base style.

[00:03:30]
let's try a slightly different approach with font size so what we could do is we could have a font size larger that is specified here. And then in the media query instead of setting it to 110%, we can set it to font size larger. That does keep the actual style declaration in the media query, but it means we can get an idea of both values by just looking at one rule.

[00:04:00]
It keeps everything together in one room. However, this also, this does mean that if we need to adjust the base font size, we would need to adjust it twice. In some cases, that is not what we want. In some cases, what we want is a relative adjustment. So in the larger layout, we don't necessarily want it to be precisely 110%.

[00:04:21]
We may want it to be, say 1.2 times the base font size. So what can we do then? We could define scaling factors in our media queries. And then we could write our CSS to account for these optional scaling factors. So we would write font size actually we would use a color here and then we would use our base font size.

[00:04:47]
Which we could use a variable for as well but I'm not going to right now. And then font size scale that would this would default to one. It's important to make a default one so that these are truly optional. And then all we said in the media query is font size scale, which we make 1.2.

[00:05:15]
And then it just works as you can see. Now, let's take a moment and try to add a custom property for the columns. So that we don't have all this grid stuff in our media query. Let's take a look. So we can move this to the base rule.

[00:05:37]
The body rule And just use the columns property. And then this one as well just uses the number of columns verbatim. So we can just take this declaration and move it here. And use the actual columns value. And now this one, we want this to be two when the number of columns is 3.

[00:06:17]
And what do we want it to be when the number of columns is one, nothing really we wanted to be one. However, the good thing is we can just still specify columns and put it here and it actually still works. Sorry, not columns. Columns- 1. Yeah. We wanna to be spanked too.

[00:06:50]
So it still works just fine, when the colons are 3, but even in the single column layout. It works just fine because 0 is actually nonsensical there. So, now we have it we eliminated all these rules that we had in the media query into just overriding 3 custom properties.

[00:07:08]
So to recap, the second strategy is to set all the values for all your different media queries as custom properties in the base rule. And then you just use these values in the media queries. So you don't actually have to hunt down in multiple media queries to see what your style is.

[00:07:31]
In the third strategy, this is specifically for relative adjustments where your base CSS multiplies by an optional scaling factor. And media queries only set the scaling factor and no actual values. Note that these techniques are actually useful every time you need to create variations of a design. Not just for responsive design.

[00:07:55]
Well, essentially responsive design is just yet another variation. For example, multipliers can be useful when you have multiple instances of a component with different content. And you need to vary some of them. In fact, these very slides use a similar technique to vary the font size of the live demos.

[00:08:11]
Like some demos that have a lot more code, use a multiplier to make the font size a little bit smaller.