Timothy, you handled this very professionally. The F'N Sweet thing would've felt a little personal to most people. You put a lot of work into this and your followers appreciate your thoughtful approach to design and functionality. Bravo.
@@JimmyTRUELOVE F'N Sweet did a video where they compared Wizardry against their Client First technique, and found some flaws with Wizardry. These were fixed in 2.0.
This is awesome, Timothy. Thank you! The way you've used the feedback from Finweet is perfect. Would appreciate the live website building video with Wizardry 2.0 for an even better understanding of working with it.
just wanted to add my voice to those who say you are a true professional. Many people would've handled such feedback differently. You just improved on it right away. Awesome as always. Keep it up!
BIG Applause to you Wizard of all! This is how champions Rise & Conquer. I LOVE the new fresh 2.0 Look&Feel and I can see that you've spent a ton of time reevaluating the system keeping in mind your followers and what F'nSweet has mentioned. The ability to save projects are also REALLY awesome! Well done and I'm looking forward to seeing this space grow! AWESOME!!!
Bro, this approach is genius! I used it to some extent myself before discovering your video and calling it wizardry. But you just put everything together so well!
Thanks Timothy! All we need now is a Wizardry class naming system 👌🔥 I got into Webflow because I didn't like coding and the lack of control of wordpress but you've shown me how code can actually really power up your websites
TImothy, thanks for working in this straitghtfoward tool. It's unbelievable what you have been making so far. This always seems so hard to get but as soon as you see one of your video explanations you see how easy it gets. Awesome work as always, so grateful for your help.
You are incredible. Thank you so much for everything you do. Signing up for your patreon. You're one of, if not the best teachers I've ever come across.
Love it, Mr. Ricks. Trying to put together an Instructional Design website in web flow for the first time and am trying to apply this technique. I wish there was a dark web flow template that incorporated this technique. I'll continue to follow your work as always.
Hi Timothy! I’m a bit late to this framework. However, within the short time of discovering this. I’ve learned that the value and time that wizardly 2.0 saves is immense and game changing in the world of Webflow. I’ve recently tried to adopt this framework in a website that I’m building. I’ve followed and referenced your videos exactly. Unfortunately, I can’t seem to get headings and text to scale and wrap properly. I’m more than grateful for any help or tips. Thanks again!
Thanks Timothy, I've been trialling this technique for a while now and about to launch my first Wizadry site. One thing I would love is if you could please modify the minimum font-size tool in the calculator to be able to 'Add Another'. So I can configure h2's etc. to have a different minimum font-size than p's, links etc. Currently I'm doing this by modifying the code post-calculator. Thanks again 🙂
finsweet: our method is better because its easier to learn and understand! now take a 7 day course and read through dense documentation to figure it out when wizardry can be explained and understood in 10 min
Hi Tim, I am a huge fan of you. I have a doubt about rem unit. I want to knw how the lemon squeeze website font responsiveness they done. Could you create a detail video about how to make automatically adjust the font size based on the responsiveness.
Hi, thanks for this. There is smth left unclear to me if you please. 1. You said that we need to divide the pixel size by 16. Would that number always be 16? I mean, no matter what width of the screen is? 2. The new Wizardry version completely replaces the previous one and from now on we can continue using only the new version. Or it actually serves different purposes than the previous version?
Hi Adam, good questions! Yes, we always divide the pixel size by 16 to get the em or rem value no matter what the screen width is. And also, this new version of Wizardry does completely replace the previous one. It serves the same purpose.
Hi Timothy, I love your stuff, this included. I've been using Wizardry 2.0 for a while but one area that confuses me is the margins/paddings of text elements that are set in ems. For example, if I use your calculation to add 48px of bottom margin to a heading, (48/16ems) the resulting em value is totally different in height to the expected pixel value. This only seems to happen for text elements and after playing around I can only assume it's something to do with the ems of the margin referencing the font size value of the element itself? Have you got any tips for how to calculate the margins etc for text elements to keep everything simple. Right now I've had to add a div with the desired pixel height as a guide then nudge the padding in ems by eye until it matches.
Hi Martin, great question! You're right that EM margins and paddings on text elements will multiply by the element's font size. To get around this, I usually wrap the heading in a div and apply the margin to the div instead. If you need to apply the margin directly to the text element, you can divide the px margin by the px font size of the element to get the EM margin. For instance, 48px margin / 32px font size = 1.5em adjusted margin
@@timothyricks thank you so much for taking the time to reply, that calculation is exactly what I was looking for! Your Webflow content is some of the best out there, the way you get straight to the pojnt and make things simple to follow is not easy to do, I've learnt loads from your videos. Thank you again!
this is a great video, now I am curious as to know it for myself, while I am not yet a developer by trade, I ask if there is easily added code that makes a site one design over the other. Or even better, combines them? Not sure if the Wizardy video goes over just this but it would be great to see a video that details universal code that provides the designer that much control. Lastly, is there a way that even when looking at a template that one can easily tell which design is which based on easily identifiable features?
Loved the tool, it's so good! I'm currently working on a freelance project and I have designed the entire website on 1920px artboard. Can I consider the design width to be 1920px and max width to be 2560px (this is the largest monitor width I have come across)? Will this make the typography too small for smaller widths?
Yes, you can! The font sizes will likely be too small on smaller widths though unless you’re using disproportional scaling. For future reference, it’s much better to design at 1440px for Webflow builds.
If you're able to post a read-only link, I'd be happy to take a look. There could a parent div of the type with a fixed font size set that's not allowing it to inherit from the body. Or there could be some conflicting CSS.
Hey T.Ricks🥳 Thanks for this video. Is there a way for someone who's using the free plan to apply this? I'm still new to webflow and I've been following your teaching on jQuery and webflow.
Hi Samuel, I’m so glad this is helpful! If you’re using the proportional option, you can set the body font size in WebFlow to whichever value the calculator shows without using custom code. For a max width, you can add a larger breakpoint and switch the body font size to whatever the calculator says to use for that screen size. The same can be done for min widths on the tablet breakpoint.
This is awesome! Thank you, would this break anything if I swap my site over to this css? I'd imagine I have to redo all my font sizes and calculations.
Thanks Josiah! If your website was built on Wizardry 1.0, you can set the design width to 1600 in the new builder to use the new css without having to adjust your font sizes.
Hello Timothy thanks for the amazing videos i wanted to ask if i can still use Wizardry 2.0 and try it on the normal version of webflow basic free plan , or i need to upgrade to use the code embed option?
Hi Ahmed, you can still use the proportional scaling option of Wizardry 2.0 on the free plan without any custom code. Just set the recommended body font sizes on three breakpoints, the max width one, the desktop default one, and the tablet breakpoint. This won’t be able to include any of the accessibility code though.
Hey man, thanks a lot for this, looks awesome. I've been using the old version for a while with the Chrome extension too. If I use the chrome extension I'm getting larger EM values than if I divide by 16. Is the Chrome extension redundant now?
Hey Tom, thank you! In the chrome extension, you can type “setbase” into any field so that it will start dividing your px value by 16 instead of by the design width. Here’s the video on the updated extension ruclips.net/video/YXAr7PxwHb8/видео.html
@@timothyricks Ah thanks for the quick reply man, saved me on a build today. I knew I had heard you mention it but couldn't find it again. Much appreciated as always.
@@timothyricks Really sorry but I have one more question. In the old version of Wizardry we would flick the body font size from 1vw to whatever PX value we wanted. This gave such easy control over scaling everything on tablet and down. But this method doesn't work with the 2.0 right? Is the only control we have now the minimum width setting? Struggling to quickly adapt on tablet and below and everything is feeling a bit too small :(
Good question! I’m assuming this is for proportional scaling. If so, you can apply the body VW font size in WebFlow instead of in a custom code embed. Then the body font size can be changed to any px or rem value on tablet, mobile landscape, and mobile portrait.
Hi Eric, we still need to set the container width to 100% and margin auto left and right. The container max width depends on the settings selected now and is set in the code so we don’t necessarily have to set it in WebFlow.
I cannot begin to imagine the amount of work that has gone into this. The fact that this is a free resource continues to boggle my mind.
Good
Timothy, you handled this very professionally. The F'N Sweet thing would've felt a little personal to most people. You put a lot of work into this and your followers appreciate your thoughtful approach to design and functionality. Bravo.
My thoughts exactly. Bravo, Timothy!
what happened?
@@JimmyTRUELOVE F'N Sweet did a video where they compared Wizardry against their Client First technique, and found some flaws with Wizardry. These were fixed in 2.0.
This is awesome, Timothy. Thank you! The way you've used the feedback from Finweet is perfect. Would appreciate the live website building video with Wizardry 2.0 for an even better understanding of working with it.
I love how straightforward Wizardry is compared to other building methods.
Thanks, Timothy!
just wanted to add my voice to those who say you are a true professional. Many people would've handled such feedback differently. You just improved on it right away. Awesome as always. Keep it up!
A true Webflow guru, I think those guys are beginning to recognise this now. Thanks for this, so useful.
That's so amazing. I tried it for one project and now I can't stop myself using this technique for every Webflow project.
Great stuff Timothy, thanks for your contributions to the community. Finsweet went after you hard and you've hit them with a counter upper-cut.
This is excellent, Timothy. Thank you for making and sharing this.
Impossible not to appreciate all of the time and effort that went into this. Thank you Timothy!
BIG Applause to you Wizard of all! This is how champions Rise & Conquer. I LOVE the new fresh 2.0 Look&Feel and I can see that you've spent a ton of time reevaluating the system keeping in mind your followers and what F'nSweet has mentioned. The ability to save projects are also REALLY awesome! Well done and I'm looking forward to seeing this space grow! AWESOME!!!
I was already using wizardry this way. I'm learning CSS and jQuery from your tools. Thank you for all the great work
I was already a big fan of the first version. now the implementation is even easier. how you solved it with the zoom is just amazing.
Great Work, Timothy.
You are making wizardry more powerful and easy to use.
Thank you so much.
Bro, this approach is genius! I used it to some extent myself before discovering your video and calling it wizardry.
But you just put everything together so well!
Thanks Timothy! All we need now is a Wizardry class naming system 👌🔥
I got into Webflow because I didn't like coding and the lack of control of wordpress but you've shown me how code can actually really power up your websites
TImothy, thanks for working in this straitghtfoward tool. It's unbelievable what you have been making so far. This always seems so hard to get but as soon as you see one of your video explanations you see how easy it gets. Awesome work as always, so grateful for your help.
You are a webflow machine dude!! Very good content!!
And please a tutorial to mute and unmute a background video in webflow please!!! because when you upload a video you can´t hear the sound of it!
Your videos are the best ones I've found to master webflow. No need to be a pro to get how much value you deliver for us
very excited to learn wizardry again, eager to see where it goes. been hooked to learn since the first version and now even more so.
Timothy, thank you for your effort. You just made my life 10x easier and better
You are incredible. Thank you so much for everything you do. Signing up for your patreon. You're one of, if not the best teachers I've ever come across.
The Wizardry (2.0) wizard at his finest! Amazing job.
My clients love Wizardry. Thanks, Tim!
Love it, Mr. Ricks. Trying to put together an Instructional Design website in web flow for the first time and am trying to apply this technique. I wish there was a dark web flow template that incorporated this technique. I'll continue to follow your work as always.
Thank you so much. This is fantastic!
Absolutely bro
Love it!! Nice work Timothy!
awesome! thank you, Tim.
Looking forward to using this on an upcoming project!
Thank you for Wizardry 2.0. This is next level thingi
Awesome! Thanks, Timothy.
the wizard himself ✨
Congrats! Looks great
Thanks for this, I'm still trying to wrap my head around this but it was incredibly helpful.
This is super cool. Thanks Timothy
Fantastic work
I love it ! Thank you for the open source and great tool !
thanks for sharing it for free, wonderful work
Excellent work Timothy! Thx a lot :)
incredible resource .. thank you
Hi Timothy!
I’m a bit late to this framework. However, within the short time of discovering this. I’ve learned that the value and time that wizardly 2.0 saves is immense and game changing in the world of Webflow. I’ve recently tried to adopt this framework in a website that I’m building. I’ve followed and referenced your videos exactly. Unfortunately, I can’t seem to get headings and text to scale and wrap properly. I’m more than grateful for any help or tips. Thanks again!
I love how you make everything up to date Timothy! Can't wait to get my hands on it for my new Webflow project 🤩
how do you even? ... great work man! thanks a lot.
Thanks Timothy, I've been trialling this technique for a while now and about to launch my first Wizadry site. One thing I would love is if you could please modify the minimum font-size tool in the calculator to be able to 'Add Another'. So I can configure h2's etc. to have a different minimum font-size than p's, links etc.
Currently I'm doing this by modifying the code post-calculator.
Thanks again 🙂
So you’ll never write a font size media query again
AMAZING!! Thank you :)
Can you clarify how this compares to Client-First?
thanks you so much !
finsweet: our method is better because its easier to learn and understand! now take a 7 day course and read through dense documentation to figure it out when wizardry can be explained and understood in 10 min
Hi Tim, I am a huge fan of you. I have a doubt about rem unit. I want to knw how the lemon squeeze website font responsiveness they done. Could you create a detail video about how to make automatically adjust the font size based on the responsiveness.
genius
You're a wizard harry
Hi, thanks for this. There is smth left unclear to me if you please.
1. You said that we need to divide the pixel size by 16. Would that number always be 16? I mean, no matter what width of the screen is?
2. The new Wizardry version completely replaces the previous one and from now on we can continue using only the new version. Or it actually serves different purposes than the previous version?
Hi Adam, good questions! Yes, we always divide the pixel size by 16 to get the em or rem value no matter what the screen width is. And also, this new version of Wizardry does completely replace the previous one. It serves the same purpose.
I love it
Hi Timothy, I love your stuff, this included. I've been using Wizardry 2.0 for a while but one area that confuses me is the margins/paddings of text elements that are set in ems. For example, if I use your calculation to add 48px of bottom margin to a heading, (48/16ems) the resulting em value is totally different in height to the expected pixel value. This only seems to happen for text elements and after playing around I can only assume it's something to do with the ems of the margin referencing the font size value of the element itself? Have you got any tips for how to calculate the margins etc for text elements to keep everything simple. Right now I've had to add a div with the desired pixel height as a guide then nudge the padding in ems by eye until it matches.
Hi Martin, great question! You're right that EM margins and paddings on text elements will multiply by the element's font size. To get around this, I usually wrap the heading in a div and apply the margin to the div instead. If you need to apply the margin directly to the text element, you can divide the px margin by the px font size of the element to get the EM margin. For instance, 48px margin / 32px font size = 1.5em adjusted margin
@@timothyricks thank you so much for taking the time to reply, that calculation is exactly what I was looking for! Your Webflow content is some of the best out there, the way you get straight to the pojnt and make things simple to follow is not easy to do, I've learnt loads from your videos. Thank you again!
Thanks so much for the kind words!! Really glad this helps!
this is a great video, now I am curious as to know it for myself, while I am not yet a developer by trade, I ask if there is easily added code that makes a site one design over the other. Or even better, combines them? Not sure if the Wizardy video goes over just this but it would be great to see a video that details universal code that provides the designer that much control. Lastly, is there a way that even when looking at a template that one can easily tell which design is which based on easily identifiable features?
Just one question, from all of these options you gave, what would you say it's the best one to go for a project?
Loved the tool, it's so good!
I'm currently working on a freelance project and I have designed the entire website on 1920px artboard. Can I consider the design width to be 1920px and max width to be 2560px (this is the largest monitor width I have come across)? Will this make the typography too small for smaller widths?
Yes, you can! The font sizes will likely be too small on smaller widths though unless you’re using disproportional scaling. For future reference, it’s much better to design at 1440px for Webflow builds.
A question do I still need to set a body all pages font size when using this technique?
Why not clamp(min, actual, max)?
what extension was that showing font details?
It's called WhatFont chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en
03:41 Although I followed all the steps, the font size is still changing after the max width.
If you're able to post a read-only link, I'd be happy to take a look. There could a parent div of the type with a fixed font size set that's not allowing it to inherit from the body. Or there could be some conflicting CSS.
Hey T.Ricks🥳 Thanks for this video. Is there a way for someone who's using the free plan to apply this? I'm still new to webflow and I've been following your teaching on jQuery and webflow.
Hi Samuel, I’m so glad this is helpful! If you’re using the proportional option, you can set the body font size in WebFlow to whichever value the calculator shows without using custom code. For a max width, you can add a larger breakpoint and switch the body font size to whatever the calculator says to use for that screen size. The same can be done for min widths on the tablet breakpoint.
Alright, I'll try this out. Glad I don't have to keep using the version 1.0
This is awesome! Thank you, would this break anything if I swap my site over to this css? I'd imagine I have to redo all my font sizes and calculations.
Thanks Josiah! If your website was built on Wizardry 1.0, you can set the design width to 1600 in the new builder to use the new css without having to adjust your font sizes.
Does this work on mobile?
Hello Timothy thanks for the amazing videos
i wanted to ask if i can still use Wizardry 2.0 and try it on the normal version of webflow basic free plan , or i need to upgrade to use the code embed option?
Hi Ahmed, you can still use the proportional scaling option of Wizardry 2.0 on the free plan without any custom code. Just set the recommended body font sizes on three breakpoints, the max width one, the desktop default one, and the tablet breakpoint. This won’t be able to include any of the accessibility code though.
Hey man, thanks a lot for this, looks awesome. I've been using the old version for a while with the Chrome extension too. If I use the chrome extension I'm getting larger EM values than if I divide by 16. Is the Chrome extension redundant now?
Hey Tom, thank you! In the chrome extension, you can type “setbase” into any field so that it will start dividing your px value by 16 instead of by the design width. Here’s the video on the updated extension ruclips.net/video/YXAr7PxwHb8/видео.html
@@timothyricks Ah thanks for the quick reply man, saved me on a build today. I knew I had heard you mention it but couldn't find it again. Much appreciated as always.
@@timothyricks Really sorry but I have one more question. In the old version of Wizardry we would flick the body font size from 1vw to whatever PX value we wanted. This gave such easy control over scaling everything on tablet and down. But this method doesn't work with the 2.0 right? Is the only control we have now the minimum width setting? Struggling to quickly adapt on tablet and below and everything is feeling a bit too small :(
Good question! I’m assuming this is for proportional scaling. If so, you can apply the body VW font size in WebFlow instead of in a custom code embed. Then the body font size can be changed to any px or rem value on tablet, mobile landscape, and mobile portrait.
@@timothyricks Yep - perfect solution. Annoyed that I didn't think of that... Thank you again man.
Do we need to set up container width to 100% and max-width 100em anymore Tim?
Hi Eric, we still need to set the container width to 100% and margin auto left and right. The container max width depends on the settings selected now and is set in the code so we don’t necessarily have to set it in WebFlow.
@@timothyricks gotcha. This is great. Thank you so much.
I liked the old design. Kinda futuristic :L
Thanks for the feedback!