I would happily purchase a course where you talk about science of the topics behind all the design fundamentals rather than tooling like figma. As an engineer it would be so helpful the develop an eye for the design.
@@SumitRana-life314 I actually decided I'm not gonna do a course, I'm just gonna publish everything for free. I don't think knowledge should come at a premium.
@@chainlift.official that's amazing man. Don't hesitate to pay wallet something if you feel you might need to. But if you are fine with money, then what you are currently doing is amazing. Keep up
Normally I’m not a huge fan of watching design tutorials, but your last 2 videos about spacing are one of the best design videos i’ve ever watched. Really appreciate the effort! 🎉❤
Literally the best video I ever watched, I've been looking for something like this for months!!! If you release a course this useful, I would get it 100%
I see so much potential in your channel. Not only are you full of knowledge, the manner in which you explain it is also phenomenal. I wish you all the best. I'm eager for a full "design course" with this much detail if you have the time!
Man! Your videos are always so satisfying to watch. I’ve been waiting this video since part one. I was so amazed by the quality of your videos and the animations and overall the knowledge you are able to provide so effortlessly. It simply amazing thank you very much for your hard work and for teaching us this incredible stuff.
Play button was a nice highlight. Of course, just defining the center as halfway between the rightmost and leftmost point of the triangle is wrong, since there is “more” of the triangle to the left. So what we should be doing is using the centroid of the shape. This gives a better point to use to define the center, from which we could then define the spacing in a way that looks optically correct
These videos are very useful to me. I don't use CSS since I'm developing HMI screen interfaces (kinda GUI applications) but find the lessons here to be pure gold. Thanks
6:15 Square rooting a number is the same as taking it to the power of 1/2, so it literally is a half step, but with the notation of square root it obfuscates that property. Let's remember exponentiation by some number is repeated multiplication when positive, and repeated division when negative. If you have 3 steps up from your constant font size, c, you can represent it with the formula [c * φ^3] which is equal to [c*φ*φ*φ]. A half-step up from there would be [c * φ^3.5], equal to [c*φ*φ*φ*sqrt(φ)], and a half-step down would be [c * φ^2.5], equal to [c*φ*φ*sqrt(φ)]. Then a quarter step would be adding or subtracting 0.25 to or from the exponent to go up or down respectively, etc. You can see taking two half-steps with this in mind is equal to a full step. Going to negative values of s, all you do when expanding the exponent is to replace your mult signs with div signs, so [c * φ^-2.5] = [c/φ/φ/sqrt(φ)] Hopefully with this in mind while looking back at the chart your present, you can see how expanding [c * φ^s] to its component multiplications or divisions, it shows each step being performed, as well as that s is the number of steps from your constant font size, c, you've taken. Two half steps is equal to a full step despite the unintuitive choice of notation your source used, which can make it confusing. Basically adding or subtracting 1 to or from s is a full step, 0.5 a half step, etc. Great video btw, I just wanted to share what I found a more intuitive way of getting the math behind why its like that lol, hopefully it will translate to others too
@@chainlift.official You can still learn and understand it, trust me, doesn't matter your major, you can learn any new topic. I recommend that for the sake of your front end web dev design brain to make things easier on itself by brushing up a bit on that kind of stuff, it doesn't pop up often but it's mostly just applying high school algebra rules, so you'll probably have at least a decent place to start up on it again. Imo it'd make it easier for you in the long run where this stuff pops up in this line of work, generalizing these kinds of rules with some intuition, rather than remembering each rule like this in web design like individual weird thingies that dont really make sense. I'm sure you've had times where a general concept in English helped with what seemed like many independent unique problems, but learn the general concept, and boom, suddenly they all make sense.
Script was on point, as well as delivery and visuals. Thoroughly enjoyed this and the previous video. I'm not a graphic designer nor work on anything around this, so you can know the video is that good. Keep up the great work. Subscribed to enjoy what's next.
4:51 I see the secret sauce. 1.618 the golden ratio 😏 it's crazy how it just works but super effective. I saw your previous video and really really liked how you showed visual examples such as the one where you showed changing the font size of the browser and how that affected seemingly two identical cards. It's so subtle but super effective when it comes to understand.
Tip: For line height use 1em + this system. This is because "no space" for line height means 1ems instead of 0ems. 0ems as the line height will overlap different lines.
I appreciate all the thought that went into the system, the optical corrections really show the attention to detail; The programmer in me isn't used to using ems instead of rems, but I see where you're coming from, very fun to think about how I'd put this system into code, especially now that I can look at the global css and compare great stuff
This is amazing, didn't know you could get so complex with the spacing in a button. Could you do a video on finding line-heights and font-size scaling for device breakpoints?
Really excellent system! I've been hacking out CSS that kinda' sorta' *approximates* some of these ideas for years, but your system is so much clearer than the way I've been thinking about it. I avoid Material UI, et al, because those little inconsistencies drive me nuts, and then I end up having to rewrite half of the components anyway just to suit the specs. I usually just fiddle with the line-height of all my heading classes to achieve the equivalent optical correction, for example, but dividing the padding by the line-height feels so much more natural! Also, personally, I think those Apple and Material UI buttons look like trash, and I'm honestly kinda' shocked how bad Apple's looked in particular. I haven't used a design system other than my own, by choice, in almost a decade, but seeing that LiftKit button sold me. Using padding-top as the border-radius also seems clever, so I'd be especially interested to see how you deal with nesting rounded borders! That's a problem that I keep meaning to solve in a clever way, but then I keep finding myself manually adding distances and inner/outer radii (which might just be unavoidable). Keep up the great work! 🙌
Careful when using relative spacing on inline padding (left, right sides) --- when the user increases the font size, relative inline padding might reduce the available space for the content - sometimes resulting in broken layouts.l
please make more videos like this that is video related to "fundamentals of design" these videos actually provide value to the viewers and in return, you will gain a lot of subscribers
Hello. Don't get it. If your largest font size is 24px, a line height should be 36px (if we use 1.5 proportions), so generally your line height is always larger than your font size. So x = 24px and h = 36px. To find the top padding, divide 24/36 = 0.66. How should it work?
2 musical half steps equaling a whole step in music is multiplicative, too!! Each half step multiplies the frequency of the previous note by the 12th root of 2. (Just so you get 12 notes in an octave, which is 8 notes on a scale but 12 half steps). A whole step is two of these multiplied in succession, not added then multiplied :) So calling it a half step is totally correct!!
Gonna have to learn figma now. I’ve always been brut forcing in photoshop and manually aligning elements pixel by pixel. There’s something to be said for photoshop though, you always know where your pixels gonna be, they don’t move on you.
Thank you for both part 1 and 2 - these are great videos. Only guessing at audience here, but I don't mind the tech detail or math at all. Would love to see more. Sidenote - for iOS ListItem, in addition to your example top/bot margins, what do you think of shifting the active item text over left ( pulled tab look )?
Excellent video, and validating too, because I always work in relative units. I'm very familiar with Tailwind, and use it a lot at the moment with React/Svelte/JS. When would I use Liftkit over Tailwind? Do they have different use cases? Are they compatible? Should I use both?
You should use LiftKit instead of tailwind when you're ready to have a terrible time haha. One day LiftKit will be able to compete with tailwind. For now tho? Just use it with low stakes landing pages.
How do you approach this method in Figma? As far as I know, em units aren't currently supported in Figma. Considering all margins are based off the size of its parent container there doesn't seem to be a simple and effective way using variables to implement this.
I appreciate the way you describe the perfect spacing on a website, but I am not familiar with CSS or Webflow. I would love to understand better in a “designer” way, with Figma, for example.
Could you please showcase in Figma how do you apply spacing to the Text elements? Do you just add padding to the bottom of the element? And if it’s component and last item in the list then you will have more space in the end of the list or whatever. I currently use component spacing adding into the div/frame. Thanks.
Hi!! spacing does not changes between desktop, tablet and mobile? ex. you use xs between title and subtitle = 2.048px or 0.128em when you change to moble or tablet is it going to be 2.048px? Im still learning and I still have a lot of doubts, but resuming do you use different ratios in the typography between dektop, tablet and mobile and then the spacing will adapt with the ems or you always use the same values in the table as a "fix" value?
hi, I loved the video. Your content inspired me a lot to make properly spaced content for my college club's website... I wanted to know what the scaling factor should be for mobile devices, should it also be 1.618? That make the Display 1 and 2 fonts much more larger... So I thought about changing the scale factor to rt(1.618) or ^1/4 and so on... Is that how it is to be done? Also, I am eagerly waiting for the Figma plugin! Thank you!!!
I'm a student and new to frontend development. My team and I are going to develop a pwa as our university project. Liftkit looks incredibly clean so we'd love to use this framework. However, I'm unsure how frameworks work. Can I use the CSS code in any project? We're probably using Angular, is it possible to develop in Angular and use Liftkit for the page style?
Ah, I see you took my advice and finally explained the rationale behind your spacing. See? It wasn't that hard, was it? I'm actually kinda flattered, too. Keep up the good work, my zesty brother. 😊
At 7:21, does X = pixel height of largest font size?? How does "Font Size" works? Can you explain it a little bit better? I think font size is a core concept should prob deserve a separate video.
looks like utility classes (spaces) values for .display1, .body and all other text classes are wrong. How come "m" for body is more than "m" default? Weren't we supposed to decrease vertical spacings to compensate line-height?
And the text values aren't wrong they're correcting for the fact that when you apply margins to text elements the "em" is based on the element itself's font size, not the parent element. On a non text element you can just apply a margin of 1em and it's also 1rem right? Because it's inheriting the font size from the :root. Therefore, 1em = 1rem. But if a text element has a font size of 1.272em, and I apply a margin of 1em, it's going to calculate that 1em based on the font size of the element itself, NOT the parent, meaning instead of being 1It's an exception to the rule baked into CSS. So adding a margin of 1em to that text element will actually look the same as 1.272rem, not 1rem.
@@chainlift.official ok, if you add "m" margin to non-text element, it will be 1em = 1rem, it's clear. But if you add "m" margin to ".display1" element, according to the table, it will be 1.618em. And ".display1" has a font-size of 4.235em. Math is like this: 1.618em margin to 4.235em font-size results in 1.618 * 4.235 = 6.852rem. But the intention was to make "m" margin of ".display1" to equal 1rem, not ~7rem. I am having hard time understanding that. Whether there's an error in your table, or there's something I misunderstand fundamentally. And why all the other text elements have the same spacing values, while they have different font-sizes? Why only "line-height" matters? "em"s are calculated based on font-size, not line-height. By the way, if we really want all margins sizes to be consistent, why do we complicate things with "em"s? Why don't we just define all the margin sizes in "rem"s?
@@chainlift.official I think I got the table values meaning, it's not the actual margin value, it's the effective margin size if we do not correct it at all? But again, it's calculated based on line-height, which is relevant to font-size. And line-height does not matter, only a font-size matters for "em"s. My initial understanding was that you try to compensate line-height extra spacing, so the actual margin won't be affected by line-height. Now I see that intention was to provide margin sizes consistency for all the text elements. But still, doesn't look right to me.
@@MAVrikrrr yeah, it's still only version one after all, I appreciate you pointing this kinda thing out though so I can stay open minded about how it'll evolve from here.
Thanks and good video, How to send data [like image, product name, price and description I mean product detail ] in Firebase from webflow. How to integrate Firebase with Web Flow using Webflow logic and Webhooks step by step. Please reply me whether you will make video or not on this topic, I hope next video will be on this topic. Please upload video early
I kinda hate how you just casually drop in here on youtube like the new kid and then just release these perfect videos like it was nothing; how dare you
The biggest differences are this: tailwind is based on a 1.25 scale factor, LiftKit is 1.618. tailwind is huge, LiftKit is small. Tailwind says "build it your way!" LiftKit says "build it this way!"
Would love to see a similar one for science of "Layouts / Wireframes", "Colors", "Typography"
For sure, I need a break from spacing haha
The tutor understands design systems very well. This channel has a promising future. I'm glad I found it.
I would happily purchase a course where you talk about science of the topics behind all the design fundamentals rather than tooling like figma. As an engineer it would be so helpful the develop an eye for the design.
Can you pay for me also, I'm not trolling
He did say he was doing something similar in Patreon in first video.
@@SumitRana-life314 I actually decided I'm not gonna do a course, I'm just gonna publish everything for free. I don't think knowledge should come at a premium.
@@chainlift.official that's very kind of you
@@chainlift.official that's amazing man. Don't hesitate to pay wallet something if you feel you might need to.
But if you are fine with money, then what you are currently doing is amazing. Keep up
Normally I’m not a huge fan of watching design tutorials, but your last 2 videos about spacing are one of the best design videos i’ve ever watched. Really appreciate the effort! 🎉❤
Me with no understanding of css, just here enjoying how visually satisfying this video is
Literally the best video I ever watched, I've been looking for something like this for months!!! If you release a course this useful, I would get it 100%
I see so much potential in your channel. Not only are you full of knowledge, the manner in which you explain it is also phenomenal. I wish you all the best. I'm eager for a full "design course" with this much detail if you have the time!
God have mercy on my blood pressure I don't know if I'm ready for that haha
Bro seriously speaking your videos and your channel will be growing tremendously. Great Content!
Man! Your videos are always so satisfying to watch. I’ve been waiting this video since part one. I was so amazed by the quality of your videos and the animations and overall the knowledge you are able to provide so effortlessly. It simply amazing thank you very much for your hard work and for teaching us this incredible stuff.
That's very kind of you to say! I'm so glad you like it!
Play button was a nice highlight. Of course, just defining the center as halfway between the rightmost and leftmost point of the triangle is wrong, since there is “more” of the triangle to the left. So what we should be doing is using the centroid of the shape. This gives a better point to use to define the center, from which we could then define the spacing in a way that looks optically correct
YES, MORE MORE MORE
I WANT ALL OF THE DESIGN THEORIES
yaaaaaaas you cannot believe how excited i got when i saw that it’s part 2. thank you you’re the best ❤❤❤❤
Man see correct spacing man happy
this quality is so insanely good
this man is doing the lords work
hell yeah, part 1 was so good, glad to see a part 2
Thank you so much!
These videos are very useful to me. I don't use CSS since I'm developing HMI screen interfaces (kinda GUI applications) but find the lessons here to be pure gold.
Thanks
This is one the best videos on spacing that I've ever seen. Thanks so much!
an eye pleasing perfectionst video :) Thank you! I have learned something new as a UI Designer
This is awesome. You have a great delivery.
this is incredible! very enriching but also accesible and intuitive!
I won't try to understand everything you said but positively, E01 & E02 definitely improved my eye for Design. Thanks ❤.🇺🇬
Thank you I need this. You are a life saver, and btw incredible video editing skills!
Great job Garret! Another great video. 👏
6:15
Square rooting a number is the same as taking it to the power of 1/2, so it literally is a half step, but with the notation of square root it obfuscates that property.
Let's remember exponentiation by some number is repeated multiplication when positive, and repeated division when negative. If you have 3 steps up from your constant font size, c, you can represent it with the formula [c * φ^3] which is equal to [c*φ*φ*φ]. A half-step up from there would be [c * φ^3.5], equal to [c*φ*φ*φ*sqrt(φ)], and a half-step down would be [c * φ^2.5], equal to [c*φ*φ*sqrt(φ)]. Then a quarter step would be adding or subtracting 0.25 to or from the exponent to go up or down respectively, etc. You can see taking two half-steps with this in mind is equal to a full step.
Going to negative values of s, all you do when expanding the exponent is to replace your mult signs with div signs, so [c * φ^-2.5] = [c/φ/φ/sqrt(φ)]
Hopefully with this in mind while looking back at the chart your present, you can see how expanding [c * φ^s] to its component multiplications or divisions, it shows each step being performed, as well as that s is the number of steps from your constant font size, c, you've taken.
Two half steps is equal to a full step despite the unintuitive choice of notation your source used, which can make it confusing. Basically adding or subtracting 1 to or from s is a full step, 0.5 a half step, etc.
Great video btw, I just wanted to share what I found a more intuitive way of getting the math behind why its like that lol, hopefully it will translate to others too
This hurt my English major brain but thank you
@@chainlift.official You can still learn and understand it, trust me, doesn't matter your major, you can learn any new topic.
I recommend that for the sake of your front end web dev design brain to make things easier on itself by brushing up a bit on that kind of stuff, it doesn't pop up often but it's mostly just applying high school algebra rules, so you'll probably have at least a decent place to start up on it again.
Imo it'd make it easier for you in the long run where this stuff pops up in this line of work, generalizing these kinds of rules with some intuition, rather than remembering each rule like this in web design like individual weird thingies that dont really make sense.
I'm sure you've had times where a general concept in English helped with what seemed like many independent unique problems, but learn the general concept, and boom, suddenly they all make sense.
@@NopeNopeNope9124 Well luckily when developing the utility class abstract all of this away, but I get what you're saying.
Thanks for reaffirming that i didnt just pull that "1.618" out of thin air
Script was on point, as well as delivery and visuals. Thoroughly enjoyed this and the previous video. I'm not a graphic designer nor work on anything around this, so you can know the video is that good. Keep up the great work. Subscribed to enjoy what's next.
finally someone who can understand why i use `em` everywhere
Very interesting and nicely explained!
4:51 I see the secret sauce. 1.618 the golden ratio 😏 it's crazy how it just works but super effective.
I saw your previous video and really really liked how you showed visual examples such as the one where you showed changing the font size of the browser and how that affected seemingly two identical cards. It's so subtle but super effective when it comes to understand.
Tip: For line height use 1em + this system. This is because "no space" for line height means 1ems instead of 0ems. 0ems as the line height will overlap different lines.
That was very insightful, thanks!
I appreciate all the thought that went into the system, the optical corrections really show the attention to detail;
The programmer in me isn't used to using ems instead of rems, but I see where you're coming from, very fun to think about how I'd put this system into code, especially now that I can look at the global css and compare
great stuff
The programmers I've worked with have been more like "why did you do this to me" than "oh wow neat" so thanks! Haha
This is amazing, didn't know you could get so complex with the spacing in a button. Could you do a video on finding line-heights and font-size scaling for device breakpoints?
Really excellent system! I've been hacking out CSS that kinda' sorta' *approximates* some of these ideas for years, but your system is so much clearer than the way I've been thinking about it. I avoid Material UI, et al, because those little inconsistencies drive me nuts, and then I end up having to rewrite half of the components anyway just to suit the specs. I usually just fiddle with the line-height of all my heading classes to achieve the equivalent optical correction, for example, but dividing the padding by the line-height feels so much more natural! Also, personally, I think those Apple and Material UI buttons look like trash, and I'm honestly kinda' shocked how bad Apple's looked in particular. I haven't used a design system other than my own, by choice, in almost a decade, but seeing that LiftKit button sold me. Using padding-top as the border-radius also seems clever, so I'd be especially interested to see how you deal with nesting rounded borders! That's a problem that I keep meaning to solve in a clever way, but then I keep finding myself manually adding distances and inner/outer radii (which might just be unavoidable). Keep up the great work! 🙌
Let's goooo! I love this channel so much. You're an excellent teacher.
Thanks so much!
amazing video!! you're very underrated :)
Thank you!
Careful when using relative spacing on inline padding (left, right sides) --- when the user increases the font size, relative inline padding might reduce the available space for the content - sometimes resulting in broken layouts.l
please make more videos like this
that is video related to "fundamentals of design"
these videos actually provide value to the viewers
and in return, you will gain a lot of subscribers
What would you consider fundamentals of design?
KEEP POSTING CONTENT!
I WILL
WE WANT MOREEEE!!!!
AHHHHHHH
Just wanna appreciate the effort!
You can do text scaling way easier and quicker by setting default body font to 1vw then all your fonts using em (not rem).
That’s it. Two things.
Hello. Don't get it. If your largest font size is 24px, a line height should be 36px (if we use 1.5 proportions), so generally your line height is always larger than your font size. So x = 24px and h = 36px. To find the top padding, divide 24/36 = 0.66. How should it work?
2 musical half steps equaling a whole step in music is multiplicative, too!!
Each half step multiplies the frequency of the previous note by the 12th root of 2. (Just so you get 12 notes in an octave, which is 8 notes on a scale but 12 half steps). A whole step is two of these multiplied in succession, not added then multiplied :)
So calling it a half step is totally correct!!
I knew that if I just kept making haphazard decisions I'd be right!
Gonna have to learn figma now.
I’ve always been brut forcing in photoshop and manually aligning elements pixel by pixel. There’s something to be said for photoshop though, you always know where your pixels gonna be, they don’t move on you.
Haha you may find Figma less different than you're expecting. It uses pixels, not relative units.
Thank you for both part 1 and 2 - these are great videos. Only guessing at audience here, but I don't mind the tech detail or math at all. Would love to see more.
Sidenote - for iOS ListItem, in addition to your example top/bot margins, what do you think of shifting the active item text over left ( pulled tab look )?
I see φ, I like it 💙
Oh god. Its been forever since I havent seen one of these high queality UI explanation
The topic is extremely important, but I didn’t understand most of in depth formulas, sadly
You don't have to! They're just there for the nerds who wanna know. The utility classes do everything for you
.1:59 was trippy to see yet fun to read.
Pro-tip: if you don't want to be constantly doing the math yourself, calc() is probably gonna be your friend
Hi !
I really like the way you present everything, it’s so smooth !
What software do you use ? I mean even when you move your mouse that looks smooth.
Should the line height of text also be decided using this framework?
Excellent video, and validating too, because I always work in relative units.
I'm very familiar with Tailwind, and use it a lot at the moment with React/Svelte/JS. When would I use Liftkit over Tailwind? Do they have different use cases? Are they compatible? Should I use both?
You should use LiftKit instead of tailwind when you're ready to have a terrible time haha. One day LiftKit will be able to compete with tailwind. For now tho? Just use it with low stakes landing pages.
How do you approach this method in Figma? As far as I know, em units aren't currently supported in Figma. Considering all margins are based off the size of its parent container there doesn't seem to be a simple and effective way using variables to implement this.
I appreciate the way you describe the perfect spacing on a website, but I am not familiar with CSS or Webflow. I would love to understand better in a “designer” way, with Figma, for example.
Who create these animation 🫥 So smooth ❤
Could you please showcase in Figma how do you apply spacing to the Text elements? Do you just add padding to the bottom of the element? And if it’s component and last item in the list then you will have more space in the end of the list or whatever. I currently use component spacing adding into the div/frame. Thanks.
Hi!! spacing does not changes between desktop, tablet and mobile? ex. you use xs between title and subtitle = 2.048px or 0.128em when you change to moble or tablet is it going to be 2.048px? Im still learning and I still have a lot of doubts, but resuming do you use different ratios in the typography between dektop, tablet and mobile and then the spacing will adapt with the ems or you always use the same values in the table as a "fix" value?
Splendid.
What do you think of Framer?
Do you know if tailwind css uses these rules and if not have you thought of creating a plugin for it?
hi, I loved the video. Your content inspired me a lot to make properly spaced content for my college club's website...
I wanted to know what the scaling factor should be for mobile devices, should it also be 1.618? That make the Display 1 and 2 fonts much more larger... So I thought about changing the scale factor to rt(1.618) or ^1/4 and so on...
Is that how it is to be done?
Also, I am eagerly waiting for the Figma plugin! Thank you!!!
I'm a student and new to frontend development. My team and I are going to develop a pwa as our university project. Liftkit looks incredibly clean so we'd love to use this framework. However, I'm unsure how frameworks work. Can I use the CSS code in any project? We're probably using Angular, is it possible to develop in Angular and use Liftkit for the page style?
Wouldn’t line height help with this?
Ah, I see you took my advice and finally explained the rationale behind your spacing. See? It wasn't that hard, was it? I'm actually kinda flattered, too. Keep up the good work, my zesty brother. 😊
helped me making my site!
At 7:21, does X = pixel height of largest font size?? How does "Font Size" works? Can you explain it a little bit better? I think font size is a core concept should prob deserve a separate video.
looks like utility classes (spaces) values for .display1, .body and all other text classes are wrong. How come "m" for body is more than "m" default? Weren't we supposed to decrease vertical spacings to compensate line-height?
Body's got a taller line height, that's all.
And the text values aren't wrong they're correcting for the fact that when you apply margins to text elements the "em" is based on the element itself's font size, not the parent element. On a non text element you can just apply a margin of 1em and it's also 1rem right? Because it's inheriting the font size from the :root. Therefore, 1em = 1rem. But if a text element has a font size of 1.272em, and I apply a margin of 1em, it's going to calculate that 1em based on the font size of the element itself, NOT the parent, meaning instead of being 1It's an exception to the rule baked into CSS. So adding a margin of 1em to that text element will actually look the same as 1.272rem, not 1rem.
@@chainlift.official ok, if you add "m" margin to non-text element, it will be 1em = 1rem, it's clear. But if you add "m" margin to ".display1" element, according to the table, it will be 1.618em. And ".display1" has a font-size of 4.235em. Math is like this: 1.618em margin to 4.235em font-size results in 1.618 * 4.235 = 6.852rem. But the intention was to make "m" margin of ".display1" to equal 1rem, not ~7rem. I am having hard time understanding that. Whether there's an error in your table, or there's something I misunderstand fundamentally.
And why all the other text elements have the same spacing values, while they have different font-sizes? Why only "line-height" matters? "em"s are calculated based on font-size, not line-height.
By the way, if we really want all margins sizes to be consistent, why do we complicate things with "em"s? Why don't we just define all the margin sizes in "rem"s?
@@chainlift.official I think I got the table values meaning, it's not the actual margin value, it's the effective margin size if we do not correct it at all? But again, it's calculated based on line-height, which is relevant to font-size. And line-height does not matter, only a font-size matters for "em"s.
My initial understanding was that you try to compensate line-height extra spacing, so the actual margin won't be affected by line-height. Now I see that intention was to provide margin sizes consistency for all the text elements. But still, doesn't look right to me.
@@MAVrikrrr yeah, it's still only version one after all, I appreciate you pointing this kinda thing out though so I can stay open minded about how it'll evolve from here.
Good video Please bro, How to integrate Firebase with Webflow by web flow logic and using Firebase cloud function and HTTP request
Thanks and good video, How to send data [like image, product name, price and description I mean product detail ] in Firebase from webflow. How to integrate Firebase with Web Flow using Webflow logic and Webhooks step by step. Please reply me whether you will make video or not on this topic, I hope next video will be on this topic. Please upload video early
Hey bro, are you looking for a video editor?
Man you're (√π * crazy) but I like it.
I aspire to be the let's game it out of UI design
I kinda hate how you just casually drop in here on youtube like the new kid and then just release these perfect videos like it was nothing; how dare you
just imagine my anime backstory
Can you please compare tailwind to chainlift. isn't tailwind super good already in spacing?
The biggest differences are this: tailwind is based on a 1.25 scale factor, LiftKit is 1.618. tailwind is huge, LiftKit is small. Tailwind says "build it your way!" LiftKit says "build it this way!"
Make more vids!!!
this is just an ad for his product, smh
It's all chainlink do
I now have developed OCD after watching this
Please stop using margins to add spacing between elements but use grid or flex :)