LiftKit Spacing Explained (In Detail) — Transcript

Full transcript

1. 0:03hi welcome back to chainlift in the last
2. 0:04video we talked a lot about spacing but
3. 0:07we didn't go too far into the details we
4. 0:09talked about how related elements should
5. 0:11be closer together and we briefly
6. 0:13touched on how you can use variables to
7. 0:15control the size of spacing increments
8. 0:17but we can go even deeper and I intend
9. 0:19to you see spacing is just one component
10. 0:22of the overarching global scaling system
11. 0:25this scaling system controls the size of
12. 0:27everything including typography and
13. 0:29space sping but what does that mean for
14. 0:31us well let's start by simply
15. 0:34establishing that spacing in lift kit at
16. 0:36least is dynamic it's not fixed in other
17. 0:39words you don't use spacer blocks with
18. 0:41fixed Heights like 20 pixels instead
19. 0:44spacing is always determined relative to
20. 0:46the elements you are applying that
21. 0:48spacing to for example if you want to
22. 0:50put space between two text elements
23. 0:52you're going to apply a margin property
24. 0:54measured in M instead of inserting a
25. 0:56spacer block this makes the space
26. 0:58responsive meaning it scales
27. 1:00proportionately according to the
28. 1:01browser's default font size now you
29. 1:04might be asking why is that important
30. 1:05let's look at some sample
31. 1:07implementations on the right is a layout
32. 1:09using fixed spacing units measured in
33. 1:11pixels and on the left is a layout using
34. 1:13relative spacing if we have our browser
35. 1:15font size set to the default and our
36. 1:17screen is 1600 pixels wide they both
37. 1:20look about the same but now let's say I
38. 1:23have a vision impairment and I need to
39. 1:25set my browser's default font size to be
40. 1:27a little bit larger if my minimum font F
41. 1:30size is higher at the browser level the
42. 1:32card using the spacer blocks loses its
43. 1:34proportions that's because the card on
44. 1:36the right has fixed spacing of 20 pixels
45. 1:38between the text elements and no matter
46. 1:41how big or small your font preferences
47. 1:43are 20 pixels is 20 pixels so to
48. 1:45summarize relative spacing ensures your
49. 1:48layouts display consistently at
50. 1:50different screen sizes and zoom levels
51. 1:52and it's able to do that because it
52. 1:53defines space in terms of font size but
53. 1:55why font size what about needing to
54. 1:57define space between non-text elements
55. 2:00like an image grid where I have to
56. 2:01define the size of all these gaps am I
57. 2:03really telling you that we're going to
58. 2:04Define that based on font size when
59. 2:06there's no text on the screen whatsoever
60. 2:09you better believe I am and it requires
61. 2:11us to understand something called the
62. 2:13root font size let's take a second to
63. 2:15review how relative units work in
64. 2:17general and we'll start with a square
65. 2:20all its sides are one unit long and this
66. 2:22rectangle is three units long that's how
67. 2:24relative units work I'm describing
68. 2:26everything in terms of that arbitrary
69. 2:28base that I've decided it is just
70. 2:30whatever this one unit square is in web
71. 2:33design our base unit is not going to be
72. 2:35an arbitrary Square it's going to be the
73. 2:37root font size or the default font size
74. 2:40in your browser now this is the ideal
75. 2:42choice for our base unit because it's
76. 2:43the simplest unit of size that is built
77. 2:46into the fabric of the internet and it's
78. 2:47at the core of all user configurable
79. 2:50scaling preferences if one Rim is 16
80. 2:53pixels then if I want to make a
81. 2:55rectangle that's two rims long I can
82. 2:58know it'll render to 32 pixels long
83. 3:01spacing is relative to font size but we
84. 3:03don't just have one font size and if
85. 3:06we're defining space in terms of rims
86. 3:08then we're just going to run into a new
87. 3:10problem look at these three cards
88. 3:12they're all just a title and a paragraph
89. 3:14but they're using different styles now
90. 3:16we know the space between two elements
91. 3:18should be proportional to the size of
92. 3:20those elements but if I'm defining them
93. 3:22in terms of Rim I'm going to have a lot
94. 3:24to keep track of I'm going to have to
95. 3:26look at the big one and say okay so if
96. 3:28this is 1.5 rim and then the body text
97. 3:30is one Rim maybe 0.25 Rim looks good for
98. 3:33the space great let's go to the next one
99. 3:35where it's down to 1.25 and then 75 I'm
100. 3:39going to have to find another value for
101. 3:41that one and then for the third card the
102. 3:43fonts change again so I'm going to have
103. 3:44to remember a third one and if you have
104. 3:46a type system with 12 unique class
105. 3:49styles that gives us 66 possible unique
106. 3:52font pairings I do not want to have to
107. 3:54remember 66 different values here what I
108. 3:58would love to do is just come on in and
109. 4:01have a utility class where I can just
110. 4:03remember oh that's a title in a
111. 4:05paragraph doesn't matter what their
112. 4:08actual class names are I know based on
113. 4:10my preferences that I want these to be
114. 4:13equal to extra small and because I'm
115. 4:15defining these relative to the larger
116. 4:18text element with m not rims I'm able to
117. 4:22just reliably build utility classes like
118. 4:24that that makes sense cool the benefit
119. 4:27of this system is that it's not not
120. 4:29always going to guarantee Perfection but
121. 4:31it is going to make it difficult to look
122. 4:34bad the math behind this is really
123. 4:36simple in lift kit spacing is defined as
124. 4:39any value that's applied to an element's
125. 4:41margin padding or Gap properties and
126. 4:43there are seven preset sizes or varibles
127. 4:45of spacing that are baked into the
128. 4:47framework the table below describes what
129. 4:50their default values are and how they're
130. 4:52derived it's pretty simple basically you
131. 4:55start with the base unit that's what
132. 4:57medium is it's always just one and then
133. 4:59you scale up or down by multiplying or
134. 5:02dividing by five the golden ratio but
135. 5:05this is just the default configuration
136. 5:07and its values are R whenever you're
137. 5:08applying spacing properties to non-text
138. 5:11elements but spacing behaves quite
139. 5:13differently when you're applying it to
140. 5:15actual text elements because in that
141. 5:17scenario spacing is referring to the
142. 5:19text element not the root font size in
143. 5:22addition to that because we have to
144. 5:24account for the height of the element's
145. 5:25bounding box and not just its rendered
146. 5:28text height or Point height we get
147. 5:31unique Behavior which happens luckily
148. 5:33automatically and is controlled by the
149. 5:35global CSS at the top of the page the
150. 5:37only special cases here are going to be
151. 5:40for the display one text class and the
152. 5:42body text class as well as their bold uh
153. 5:46variants because they have different
154. 5:47line Heights the display one needs to be
155. 5:50a little bit shorter and body is a
156. 5:52little bit
157. 5:53taller so let's talk about some common
158. 5:55questions namely what if you need
159. 5:58something in between
160. 6:00these seven default spacing sizes after
161. 6:02all towards the larger side of things
162. 6:05they definitely take some significant
163. 6:06jumps that's okay these spacing
164. 6:08increments are described in steps and
165. 6:11steps work the same way as they do in
166. 6:13musical notation a whole step is a
167. 6:15factor of 1.618 or five a half step is a
168. 6:19factor of 1
169. 6:29step which is a factor of 1.128 or the
170. 6:32square root of the square root of five I
171. 6:35have never needed more Nuance than a
172. 6:36quarter step but if you do you can keep
173. 6:38following this pattern although you may
174. 6:40want to consult a psychiatrist let's go
175. 6:42over some common use cases and as we do
176. 6:44please keep in mind that just like in
177. 6:46the real world Size Matters nine times
178. 6:49out of 10 you should set the spacing
179. 6:50property relative to the larger element
180. 6:53it was designed this way and if you do
181. 6:54make them relative to smaller units you
182. 6:56might wind up with some unexpected
183. 6:58Behavior first up is card padding for
184. 7:00cards containing two or more text Styles
185. 7:03you may remember this from the first
186. 7:04video where we provided Optical
187. 7:06Corrections here's the formula for how I
188. 7:09derive the rest of the padding I'm going
189. 7:11to say let x equal the largest font size
190. 7:14in the container and let H equal the
191. 7:16line height of X with that in mind we
192. 7:19can derive padding left right and Bottom
193. 7:21by simply setting them equal to X
194. 7:24padding top is equal to X overh and the
195. 7:26Border radius is equal to the padding on
196. 7:29the top
197. 7:30this is to provide an optical correction
198. 7:32to the extra space on top that is caused
199. 7:35by symmetrical padding I think that this
200. 7:37is worth focusing on because the eye is
201. 7:39naturally focused on the top left
202. 7:41there's a lot more visual weight there
203. 7:44due to the presence of the heading and
204. 7:45so asymmetry there is more noticeable
205. 7:48than anywhere else in the card now this
206. 7:51is still a really small amount of space
207. 7:54that we're talking about so don't forget
208. 7:56that we're just splitting hairs here if
209. 7:58you thought that was contr buckle up
210. 8:00because we're about to talk about
211. 8:02buttons this is a lift kit button and it
212. 8:05can be annotated like this it spacing
213. 8:07properties are derived from these
214. 8:09formulas which in CSS look like this the
215. 8:12reason I went into all of this trouble
216. 8:14is because iOS 17 and material 3 both
217. 8:17have asymmetries with inline buttons for
218. 8:19inline I want it to feel like this icon
219. 8:22has the same amount of space on all
220. 8:24sides of it but in order to do that you
221. 8:26need to provide Optical corrections to
222. 8:29highlight the asymmetry we can expand
223. 8:32these circles uh around the bounding
224. 8:34boxes and see that the lift kit button
225. 8:37fits very nicely into that shape but
226. 8:39both iOS and material 3 have this little
227. 8:41bit of extra space on the end uh that
228. 8:44irritates me maybe it doesn't bother you
229. 8:46but if it does this is how you fix it
230. 8:48list items are not as convoluted
231. 8:50thankfully you all remember this from
232. 8:52the last one we were talking about the
233. 8:54relations of these things and so let's
234. 8:57just dive in here
235. 9:00if you wanted to convert this to lift
236. 9:02kit tight Styles you shouldn't but if we
237. 9:04did it would look like this and then
238. 9:07from here we could let X be the element
239. 9:10with the largest font size let y be the
240. 9:12element at the bottom of the card and we
241. 9:14can set the margins accordingly using
242. 9:16the M top extra small and M bottom small
243. 9:20respectively and when we take away the
244. 9:22annotations you can see that it's not
245. 9:25necessarily better but that's how you
246. 9:26would do it remember I mean I'm applying
247. 9:29lift rules inside of a Mac OS system so
248. 9:31it's going to look a little bit off but
249. 9:33honestly it's still not that bad I mean
250. 9:35a simpler application would be if you're
251. 9:37adding M top Xs and M bottom XS uh to
252. 9:42these list items which only have a
253. 9:44single text element on the inside that
254. 9:46definitely makes things a little bit
255. 9:47easier all right so what's next well
256. 9:50it's time to experiment and try it out
257. 9:53for yourself you can get the global CSS
258. 9:55that's available at chainlift io/
259. 9:58liftkit of course you can still try it
260. 10:00in web flow that clonable is going to be
261. 10:02the fastest way for you to get building
262. 10:04with it and igma file is coming soon I
263. 10:06don't know how long it's going to take
264. 10:08but it is the next priority in the
265. 10:10meantime thank you for watching and I'll
266. 10:13see you in the next video