Even More Secrets about Perfect Spacing

hi welcome back to chainlift in the last video we talked a lot about spacing but we didn't go too far into the details we talked about how related elements should be closer together and we briefly touched on how you can use variables to control the size of spacing increments but we can go even deeper and I intend to you see spacing is just one component of the overarching global scaling system this scaling system controls the size of everything including typography and space sping but what does that mean for us well let's start by simply establishing that spacing in lift kit at least is dynamic it's not fixed in other words you don't use spacer blocks with fixed Heights like 20 pixels instead spacing is always determined relative to the elements you are applying that spacing to for example if you want to put space between two text elements you're going to apply a margin property measured in M instead of inserting a spacer block this makes the space responsive meaning it scales proportionately according to the browser's default font size now you might be asking why is that important let's look at some sample implementations on the right is a layout using fixed spacing units measured in pixels and on the left is a layout using relative spacing if we have our browser font size set to the default and our screen is 1600 pixels wide they both look about the same but now let's say I have a vision impairment and I need to set my browser's default font size to be a little bit larger if my minimum font F size is higher at the browser level the card using the spacer blocks loses its proportions that's because the card on the right has fixed spacing of 20 pixels between the text elements and no matter how big or small your font preferences are 20 pixels is 20 pixels so to summarize relative spacing ensures your layouts display consistently at different screen sizes and zoom levels and it's able to do that because it defines space in terms of font size but why font size what about needing to define space between non-text elements like an image grid where I have to define the size of all these gaps am I really telling you that we're going to Define that based on font size when there's no text on the screen whatsoever you better believe I am and it requires us to understand something called the root font size let's take a second to review how relative units work in general and we'll start with a square all its sides are one unit long and this rectangle is three units long that's how relative units work I'm describing everything in terms of that arbitrary base that I've decided it is just whatever this one unit square is in web design our base unit is not going to be an arbitrary Square it's going to be the root font size or the default font size in your browser now this is the ideal choice for our base unit because it's the simplest unit of size that is built into the fabric of the internet and it's at the core of all user configurable scaling preferences if one Rim is 16 pixels then if I want to make a rectangle that's two rims long I can know it'll render to 32 pixels long spacing is relative to font size but we don't just have one font size and if we're defining space in terms of rims then we're just going to run into a new problem look at these three cards they're all just a title and a paragraph but they're using different styles now we know the space between two elements should be proportional to the size of those elements but if I'm defining them in terms of Rim I'm going to have a lot to keep track of I'm going to have to look at the big one and say okay so if this is 1.5 rim and then the body text is one Rim maybe 0.25 Rim looks good for the space great let's go to the next one where it's down to 1.25 and then 75 I'm going to have to find another value for that one and then for the third card the fonts change again so I'm going to have to remember a third one and if you have a type system with 12 unique class styles that gives us 66 possible unique font pairings I do not want to have to remember 66 different values here what I would love to do is just come on in and have a utility class where I can just remember oh that's a title in a paragraph doesn't matter what their actual class names are I know based on my preferences that I want these to be equal to extra small and because I'm defining these relative to the larger text element with m not rims I'm able to just reliably build utility classes like that that makes sense cool the benefit of this system is that it's not not always going to guarantee Perfection but it is going to make it difficult to look bad the math behind this is really simple in lift kit spacing is defined as any value that's applied to an element's margin padding or Gap properties and there are seven preset sizes or varibles of spacing that are baked into the framework the table below describes what their default values are and how they're derived it's pretty simple basically you start with the base unit that's what medium is it's always just one and then you scale up or down by multiplying or dividing by five the golden ratio but this is just the default configuration and its values are R whenever you're applying spacing properties to non-text elements but spacing behaves quite differently when you're applying it to actual text elements because in that scenario spacing is referring to the text element not the root font size in addition to that because we have to account for the height of the element's bounding box and not just its rendered text height or Point height we get unique Behavior which happens luckily automatically and is controlled by the global CSS at the top of the page the only special cases here are going to be for the display one text class and the body text class as well as their bold uh variants because they have different line Heights the display one needs to be a little bit shorter and body is a little bit taller so let's talk about some common questions namely what if you need something in between these seven default spacing sizes after all towards the larger side of things they definitely take some significant jumps that's okay these spacing increments are described in steps and steps work the same way as they do in musical notation a whole step is a factor of 1.618 or five a half step is a factor of 1 step which is a factor of 1.128 or the square root of the square root of five I have never needed more Nuance than a quarter step but if you do you can keep following this pattern although you may want to consult a psychiatrist let's go over some common use cases and as we do please keep in mind that just like in the real world Size Matters nine times out of 10 you should set the spacing property relative to the larger element it was designed this way and if you do make them relative to smaller units you might wind up with some unexpected Behavior first up is card padding for cards containing two or more text Styles you may remember this from the first video where we provided Optical Corrections here's the formula for how I derive the rest of the padding I'm going to say let x equal the largest font size in the container and let H equal the line height of X with that in mind we can derive padding left right and Bottom by simply setting them equal to X padding top is equal to X overh and the Border radius is equal to the padding on the top this is to provide an optical correction to the extra space on top that is caused by symmetrical padding I think that this is worth focusing on because the eye is naturally focused on the top left there's a lot more visual weight there due to the presence of the heading and so asymmetry there is more noticeable than anywhere else in the card now this is still a really small amount of space that we're talking about so don't forget that we're just splitting hairs here if you thought that was contr buckle up because we're about to talk about buttons this is a lift kit button and it can be annotated like this it spacing properties are derived from these formulas which in CSS look like this the reason I went into all of this trouble is because iOS 17 and material 3 both have asymmetries with inline buttons for inline I want it to feel like this icon has the same amount of space on all sides of it but in order to do that you need to provide Optical corrections to highlight the asymmetry we can expand these circles uh around the bounding boxes and see that the lift kit button fits very nicely into that shape but both iOS and material 3 have this little bit of extra space on the end uh that irritates me maybe it doesn't bother you but if it does this is how you fix it list items are not as convoluted thankfully you all remember this from the last one we were talking about the relations of these things and so let's just dive in here if you wanted to convert this to lift kit tight Styles you shouldn't but if we did it would look like this and then from here we could let X be the element with the largest font size let y be the element at the bottom of the card and we can set the margins accordingly using the M top extra small and M bottom small respectively and when we take away the annotations you can see that it's not necessarily better but that's how you would do it remember I mean I'm applying lift rules inside of a Mac OS system so it's going to look a little bit off but honestly it's still not that bad I mean a simpler application would be if you're adding M top Xs and M bottom XS uh to these list items which only have a single text element on the inside that definitely makes things a little bit easier all right so what's next well it's time to experiment and try it out for yourself you can get the global CSS that's available at chainlift io/ liftkit of course you can still try it in web flow that clonable is going to be the fastest way for you to get building with it and igma file is coming soon I don't know how long it's going to take but it is the next priority in the meantime thank you for watching and I'll see you in the next video

Channel: Chainlift

Views: 31,378

Keywords: chainlift

Id: r1DANFZYJDw

Length: 10min 30sec (630 seconds)

Published: Tue Apr 16 2024