Thank you! 16px is the default font size in browsers, but the user can increase or decrease their default font size. Using REM is more accessible because it allows the sizes we set to be adjusted by the user. 2rem equals 32px (2 x 16) if the user hasn’t changed their font size. So to convert 32px in Figma to REM, we divide it by 16. Using 32/16rem means Webflow will divide 32 by 16, and then add a rem unit onto the result.
Hi, good question! I use this app for all of my svgs now. SVG Import speeds up the process by automatically setting all the fills and stroke to currentColor so they can be controlled by font color. It also allows us to easily style individual paths if needed like how I was able to set the background of the circle badge to a different variable than the other paths. It’s not limited by the 10k character limit of larger svgs like embed is. And it’s easier to control the data attributes on the paths if needed instead of digging through an embed. :) webflow.com/apps/detail/svg-import#
Hey Tim! I love your tuts and I'd love to join your patreon but as it's in USD it's kinda hard for me. Do you think it's possible to create a parity pricing based on countries? Thanks!
You're doing a fantastic job! Thank you for this tutorial. However, there's one issue I couldn't fix. I couldn't paste the SVGs inside the SVG-Import app. Whenever I tried to do so, the error-message "false svg code" occured. Do you had similar issues already?
Tim do you always use button elements or do you also use link blocks and style those instead? I feel like the stock Webflow button element can be a pain to customize.
Hi Kyle, good call out! I usually use link blocks because they allow us to add other content inside them like icons if needed. The button element was just a shortcut in this case.
Great Video Timothy! Quick question, I got used to setting up projects with the lumos framework but now with webflow’s variables I’m a little conflicted on how to continue. Do you still use your lumos framework when you set up new projects or is there a new process you use with webflow’s new variables?
Thank you! I’m still using Lumos for my client sites currently, but Webflow variables have some advantages when unlinking and relinking variables across breakpoints. I’m working on an updated version of Lumos using native variables. Just hoping to see some updates from Webflow with changing a variables value across breakpoints and support for properties like font-weight
Can someone help me with this basic issue i have. I have a section that include div block. When i go to lower breakpoints, mobile portrait to be exact, div block that contains all the content doesn't expand in height along with content inside. It stays the same and then content (text) overlaps the card.
Hi, it sounds like the div block or one of its parents have a height applied. It’s better to use min-height instead on anything with text inside it. That way it can grow in height when the content wraps.
Hi Timothy! Loving all your videos so far! Just a quick question if that's ok - you keep using 16rem a lot. Is there a reason for this? Apologies if I missed in the video - thanks!
Thank you! The rem unit multiplies by the browser font size set on the root element. The user can adjust that base font size in browser settings, and everything in our site set using rem will scale up or down. The default root font size is 16px if the user hasn’t changed it. So 1rem is 16px. 2rem is 32px (2 x 16). To convert 56px in our design to rem, we just divide 56 by 16, the base font size, to get 3.5rem. So 56/16rem is a shortcut in Webflow to divide 56px by 16px and then add the rem unit behind the result. We always divide by 16 for any pixel size we’re converting to rem.
SVG import breaks the webflow editor for me. All the sidebar items disappears until I uninstall it. edit: nvm, I tried once more and came back after a coffee (roughly 10 minutes) and it was working.
![ROSÉ (로제) - number one girl [더 시즌즈-이영지의 레인보우] | KBS 241129 방송](http://i.ytimg.com/vi/A9oByH9Ci24/mqdefault.jpg)
That SVG Import app is pretty neat. I'd love to see a video in which you review your favorite webflow apps.
This is amazing. Thank you Timothy, you are a godsend
I'm so glad this helps! Thank you!
Awesome tutorial. Thank you
Great tutorial. Waiting for the interaction tutorials :)
incredibily valuable and useful to watch you build and talk it through. thanks timothy!
Thank you!
Awesome work as always. waiting for interaction video
you are awesome! Never forget that :)
Wish you a merry Christmas!
Marry Christmas 🌲🎉🎉
beautiful!
Thanks for tutorial. I have a question, What is the sidebar app you use?
It’s the Arc Browser. :) It puts tabs on the side.
@@timothyricks thank you
Nice. It would be great to make more Lumos webstie builds.
thanks for the informative tutorial! just wondering why do you divide everything by 16rem?
Thank you! 16px is the default font size in browsers, but the user can increase or decrease their default font size. Using REM is more accessible because it allows the sizes we set to be adjusted by the user. 2rem equals 32px (2 x 16) if the user hasn’t changed their font size. So to convert 32px in Figma to REM, we divide it by 16. Using 32/16rem means Webflow will divide 32 by 16, and then add a rem unit onto the result.
Hey tim. Thanks for the tut. Just wondering why you use an app to import SVG and not copying the code to an embed element.
Hi, good question! I use this app for all of my svgs now. SVG Import speeds up the process by automatically setting all the fills and stroke to currentColor so they can be controlled by font color. It also allows us to easily style individual paths if needed like how I was able to set the background of the circle badge to a different variable than the other paths. It’s not limited by the 10k character limit of larger svgs like embed is. And it’s easier to control the data attributes on the paths if needed instead of digging through an embed. :)
webflow.com/apps/detail/svg-import#
@@timothyricks Thanks
Hey Tim! I love your tuts and I'd love to join your patreon but as it's in USD it's kinda hard for me.
Do you think it's possible to create a parity pricing based on countries?
Thanks!
Hi, this isn’t a feature Patreon offers currently, but thank you so much for the feedback!
Hello, how does the 28k studio website work on webflow? Do you have a tutorial?
Hi, I don't have a tutorial for that one
You're doing a fantastic job! Thank you for this tutorial. However, there's one issue I couldn't fix. I couldn't paste the SVGs inside the SVG-Import app. Whenever I tried to do so, the error-message "false svg code" occured. Do you had similar issues already?
Hey Tim, I'm just wondering why do you use the number 16 when converting pixel to rem, I guess the number is from base font size?
Yes, the default browser font size is 16px on the html element if the user doesn’t adjust it. So 2rem is 32px (2 x 16)
Tim do you always use button elements or do you also use link blocks and style those instead? I feel like the stock Webflow button element can be a pain to customize.
Hi Kyle, good call out! I usually use link blocks because they allow us to add other content inside them like icons if needed. The button element was just a shortcut in this case.
@@timothyricks Thanks!!
Great Video Timothy! Quick question, I got used to setting up projects with the lumos framework but now with webflow’s variables I’m a little conflicted on how to continue. Do you still use your lumos framework when you set up new projects or is there a new process you use with webflow’s new variables?
Thank you! I’m still using Lumos for my client sites currently, but Webflow variables have some advantages when unlinking and relinking variables across breakpoints. I’m working on an updated version of Lumos using native variables. Just hoping to see some updates from Webflow with changing a variables value across breakpoints and support for properties like font-weight
Can someone help me with this basic issue i have. I have a section that include div block. When i go to lower breakpoints, mobile portrait to be exact, div block that contains all the content doesn't expand in height along with content inside. It stays the same and then content (text) overlaps the card.
Hi, it sounds like the div block or one of its parents have a height applied. It’s better to use min-height instead on anything with text inside it. That way it can grow in height when the content wraps.
@@timothyricks I'm afraid it's not the case. I just checked it and there's no height applied to any div in the section :(
I have managed to fix it somehow. I believe it was all because of positioning i had on div and another div inside it.
Hi Timothy! Loving all your videos so far! Just a quick question if that's ok - you keep using 16rem a lot. Is there a reason for this? Apologies if I missed in the video - thanks!
Thank you! The rem unit multiplies by the browser font size set on the root element. The user can adjust that base font size in browser settings, and everything in our site set using rem will scale up or down. The default root font size is 16px if the user hasn’t changed it. So 1rem is 16px. 2rem is 32px (2 x 16). To convert 56px in our design to rem, we just divide 56 by 16, the base font size, to get 3.5rem. So 56/16rem is a shortcut in Webflow to divide 56px by 16px and then add the rem unit behind the result. We always divide by 16 for any pixel size we’re converting to rem.
SVG import breaks the webflow editor for me. All the sidebar items disappears until I uninstall it.
edit: nvm, I tried once more and came back after a coffee (roughly 10 minutes) and it was working.
"Hey, nice tutorial! I'm looking forward to the interaction part. Merry Christmas!"
me too..
What computer are you using? Just on mine Figma and Webflow are laggy.
I'm using a 2019 Macbook Pro
Cool, do you have 16 inches on the i9 or 13 inches on the i5?@@timothyricks
Yes, the 16in one :)
please make translation on video :D i'm arabic man