Going over the Wizardry layout and typography method by Timothy Ricks in Webflow - 9/22/2021

hello everyone and welcome to today's live stream for anyone who's new here or who hasn't seen my live streams um i i do a webflow live stream every monday through thursday from 12 p.m to 1 p.m central uh where i go over anything and everything related to webflow yeah i cover how to build websites in webflow how to create interactions and animations in webflow as well as provide support if you have a question about your personal project feel free to to leave a super chat and i'll be happy to take a look at your project for you and provide any insight and advice so yeah these live streams have been really great um so i have been doing my homework i definitely want to keep these live streams keep the content quality really high and provide a lot of value to the webflow community so one topic that we've been recently talking about is uh font sizes and rems and m units um hello i'm carr welcome hey what's up adrian how's it going welcome welcome nice hey karipos how's it going yeah it's always nice when uh there's there's viewers and you know there's interaction in the chat uh it kind of helps me not that i get like nervous or anything but like when you when you feel like you're just talking to a screen it's like it's a little different than when you're actually interacting with with people um maybe it's just me i don't know but uh yeah welcome uh we have a very i'm going to say a very cool live stream set up for today i'm going to go over the wizard wizardry yeah wizardry method for responsive typography and this is something we've been talking about uh in the in the past few days you know talking about rems and m units so if you haven't watched the video on this i highly highly recommend it it is such a cool method for typography and it was created by um by timothy rix he has a youtube channel and i'm definitely going to be subscribing actually just subscribed because i can see he's offering a lot of great content for webflow so one thing i'm going to get better at myself is just looking at what the community is doing in general i tend to just be in my own lane as far as like you know for me i like creating animations and interactions using after effects and lottie and uh clip path and looking at animation scripts uh but there's there's definitely a few areas of improvement for me and that's you know i definitely feel like i could improve as far as like typography and even some layout concepts i feel like i could improve so my goal for these next few live streams is to improve on typography and layout so those are probably the two biggest things when it comes to to web design and development so so yeah we're going to have a lot of fun with that today and probably the next few days so adrian wrote nice i'm very curious about your approach also finn sweet's client first approach is focused on rem i'm still doing projects in pixels and feel like i'm outdated lol no am i a sinner no you're not a sinner adrian like i love how you pose that question um no no we we all you know i think that's a pain point that we all share you know uh because it does take time and energy to wrap our heads around these new new typography concepts right right because when we're so used to doing things one way uh it's hard for us sometimes to change if or if another way seems too difficult we get comfortable with how we normally do things so uh no you're all good adrian where a lot of us are in that same boat so i'm i'm fighting between timothy's m's finn suites rams and my pixels uh yeah yeah that's uh that's basically what i found myself looking at as well because yesterday i went over finn sweets rems example and i'll do some research on rems but i really like timothy's m's method because it's straightforward and it does feel like it would be responsive and work well for different devices um and one thing i researched the other day and it was like are rem's necessary and i actually found an article that said you know they're helpful sometimes but it's not like super necessary so like i don't want to underplay the value of it because i haven't done enough research yet uh but i've you know for the past few years i've heard about rems and m's and um and yeah so in this live stream we'll go over timothy's method the the wizardry method because i really like it and then as i start doing more research on actual rems and m's and the value they provide i'll definitely be covering that as well but but yeah i like timothy's m's um i myself am inclined to go in this direction but there could be evidence to support the fact that rems are uh better you know if anyone here has like a i i just had the word uh a convincing argument i guess tour for rems just feel free to post it and i can do a quick google search in today's live stream as well um but the the thing that finn finnsuit highlighted in their client first documentation was that rems were centered around accessibility and i know accessibility is a very big topic especially for web flow and web design and development in general that i'm curious to dig deeper into that and just see what what advantages that offers what advantage does rems offer over let's say timothy's method where he's using viewport with on the body font size and then using ms for the the fonts in the body so adrian wrote so i'm also attending more on m's um even for standard generic projects uh like normal template-ish websites yeah i'm inclined to go with ems too the one thing i will say about timothy's method and you know i know this is sounding a bit abstract if you haven't seen the the video and in the website but i will cover that in just a second the one thing about the wizardry method is like i'm a template developer right so i develop templates in the webflow marketplace and um there are custom code uh snippets that you need to add in case you don't want your your your fonts to be responsive on larger screens and the unfortunate thing with that not really unfortunate but as a template developer you can't use custom code in the template so i'm a little bit locked in i feel with pixels unless i wanted to use i could use the the timothy method but i'd be a little bit concerned about larger screens unless i used larger break points so that i might i might consider that option of using larger break points and then changing the body font size across those different break points for larger screens instead of using um the max width code that that timothy provides uh so adrian wrote a question rems aren't just a multiplier of pixels uh they are yeah so if you have one rem like rem uses the browser's base font size so if the browser's base font size is 16 pixels which seems to be the the default or like the the more popular font size for browsers uh the base font size then one rem would be 16 pixels and then if you use m's on a unit inside of the parent element then you know the multiplier would be 16. so two m's would be 32 pixels right so it is uh you know hopefully we don't have too many new viewers because what i'm about to cover is like gets into the weeds of web design and development which is what we're all here for right we're here to expand our knowledge and you know especially if we're developing for clients we want to give them the best project possible and use the best practices we can so along with going over the wizardry method today i'm going to uh one thing that i really that i found today that i'm super excited to to share with everyone and this is going to help us in our live streams because it's going to help help us uh i'm looking for the right adjectives to describe this is going to help us level up our webflow game because we're just going to be building layouts right so in the past few live streams i've built entire websites but moving forward uh with the next few live streams uh we're just gonna be building uh layouts like and then we're just gonna go and pick our own images so we'll have fun with design as well we'll have fun with colors with images but i found this figma file and uh i'm part of envato elements uh it's a great place to find design assets if you're not uh if you need design assets i know there's things like uh adobe has like their own thing as well for design assets but i really like envato elements and i have a link in the description area below i'm an affiliate with envato elements so if you need design elements definite definitely feel free to click on the link below and you know if you want to subscribe to envato you can but they have so many good templates like figma templates like i could create live streams for years just based on the amount of content provided by envato elements like the figma files they provide are just so great you know like i could click here to see more and they just have tons of things icons digital assets images and it's all good quality like the the stuff i find here is like really impressive for to me sometimes it feels like going through a really dope dribble page full of great content that i can use for my projects and all of it once you subscribe you can use you can download as many assets as you want and i just really really like it and the icons is and everything is just really great so that's my little plug there i am an affiliate with envato elements i really like what they provide and yeah it's just great stuff um so i found this figma kind of wireframe ui kit and i thought it was just perfect for for these live streams right like i could go through each live stream and let's say hey today let's build let's build out this hero section you know it's very simple we can just probably add a background image but it could help us develop in webflow like the simpler we can keep it and the more repetitive we can keep our uh like yeah the more repetitive we can be with how we approach webflow the easier these concepts will stick in our mind and the faster we'll be able to build in web flow and take on projects and just you know build out really nice things for clients and for our own personal projects and things like that so i haven't decided what we're going to build today maybe we'll build this looks like there's a slider here um but yeah even this this looks cool i like this so maybe we'll we'll build this hero section today all right so the first thing we're going to cover is the wizardry uh method so they do have uh if you go to documentation and i already had it opened here but there's this nice notion doc that just covers it in full detail so essentially what i'm going to do here in this live stream he does have a cloneable project that you can just download here and he has a video that you can watch but i'm just going to start from the beginning and kind of cover what he covered in his video and follow just follow these instructions because they're very straightforward and just easy to follow so implementing wizardry let's just go through it on desktop we're going to set the body all pages font size to 1vw how about this i got an idea let's follow these instructions along with building this hero section that could be cool and then we also want not only a hero section but we might want a container section so yeah we'll build out a hero section along with actually no we'll we can add a container for this um this will be in a container yeah that's fine so we'll add a container for this content here uh the clamp function doesn't work in webflow it is a little shame for responsive typography and padding um yeah the clamp so wizardry does have a workaround on this so i'm not too familiar with the clamp function i think it's a css property if i'm not mistaken css clamp uh property which probably sets a min width to the um yeah it sets a an upper and lower bound yeah okay uh yeah so the let me go back to my thing here yeah so that's a great point run um or renee i think uh let me know if i pronounce that correctly wizardry does have a way to clamp or set a a min width to the typography so rem is easier than m just like pixel the difference is accessibility so you can scale up in your browser nice thanks thanks for that point so if that's the case then i think the wizardry method might suffice and it could be fairly similar to the rum method so i know i've done a lot of talking let's just jump in but everyone feel free to to post your your ideas and and your experiences with different typography because we are learning all of this together and there's so many nuances to typography that i think the more we can learn about it the better all right so i'm just gonna go through these steps i know i mentioned that before but let's just let's just go for it all right so set the body all pages font size to 1vw so i have a blank project here so i'll just go to the body all pages and we'll set the font size to 1vw okay so that's done next step set all other font sizing font sizes using m and set the line height to unitless so let's just go ahead and add headings uh h1 through h6 and sorry just closed my browser there uh let me get back to chrome alright cool so yeah i'll just add a heading and we'll just add h1 through h6 and h1 h2 h3 h4 h5 and h6 obviously if i was building a real site i'd want to to base these sizes off like a style guide like a design style guide but for the purposes of this video i'm just going to quickly give them you know various sizing so h2 h3 h4 h5 and h6 all right so we have our headings and let me add a paragraph element as well so we have the paragraph element okay so let's go in and set all other font sizes using m and set line heights to unitless all right so we'll stick with the default um the default sizes that webflow has here and then we'll use the wizardry calculator to calculate the sizes in m's all right so let's uh let's go to the calculator and he has a calculator here so again he mentions all of this in his video so we can just go like this so h1 i know our max width uh yeah let's see our max width is going to be yeah we'll say 1440 for the max width and then for the h1 the h1 is going to be you know what i like using i like using 1280 for my max width that's just a personal preference so either either or is fine so i'll say 1280 h1 and the size here is 38 pixels and the line height is 44. uh and he says to set the line heights to unitless so 3844 so we're going to set it to unitless and we'll say just one for now so we'll go to the calculator and it was 38 38 pixels so 2.97 m's so i'll go back into my site and i'll set this to 2.97 m's and there we go so it does look a little bit larger but all right so artboard width okay and then the line height is going to be um it was what was it 44. all right let me put this here so line height uh font size is 38 line height is 44. so 1.16 all right uh so uh ren reen uh it's easier just to set the base font size to 62.5 percent for rem then you can set the base font size to 1.6 rem and he said the base font size body six to two point five percent and then paragraph to one point six rem i renee i'm not quite there yet as far as typography um i'm gonna look up that method for sure just to see what the value is for that but that does sound very interesting so the line height 1.16 and here let me okay so right here and we'll say 2.97 m's for this okay so that's our heading so heading 2 32 and 36 so let's add our h2 h2 and it's 32 and 36 2.5 m's and the line height we'll say 32 so 32 and 36 okay and unit list 1.13 so we'll set it to unit list which is this dash here and we'll just paste that in there all right so oh yeah and i have to make sure i'm styling the global class oh shoot okay so i'm going to try to move a bit quicker i know i'm going a little slow here okay 1.16 unitless all right cool so heading two we want to apply to the global class so applying it to the global class just makes it easier every time we add a a heading to the site okay 38-44 um h2 2.5 m's and 1.13 all right unitless okay all right so i'll try to move a bit quicker here so h3 let's go ahead and add our h3 so something that you could probably prep beforehand here for your project h3 24 and 30. so 24 1.88 m's all headings here m's and then we'll add a new one font size 24 1.5 okay and then i made a mistake there so this is 2.5 ms okay h3 h4 so 1824 18 1.41 m's the one thing i'm curious about is well well once we add our container our font sizes will change a bit so i definitely want to test that in a second h4 1824 which is 1.41 m's and style the alt the global tag and we're gonna go down here how's everyone doing by the way i know i'm taking my sweet time here ah you know what i'm doing i forgot to put the proper line height here uh okay i'm not gonna worry about that for now uh h4 24 okay there we go there's a lot to typography okay 1.33 okay and h5 okay h5 1420 so 14 pixels m's all headings and the line height is 14 14 20. so i'm just using the default webflow line heights and pixels here line height unit lists and boom okay last heading okay we're getting there all right click the plus label this h6 all right and 12 and 18. so 12 pixels copy this the and tag place that in there and line height is 18. okay all right so the headings are done and we just have the paragraph left so the paragraph is one vw okay so yeah if i change the paragraph here it's using vw and we'll change the line height to unitless so we'll leave the paragraph like it is or let's change the line height to 1.6 and yeah we can we can leave the paragraph at vw here all right so we've done that let's go ahead and add the section and yeah so i'll go ahead to navigator we'll add a section and yeah we just place the section at the top and i'll place all this inside of this section actually it's going to go inside of a container so make command k add a div block we're going to call this the container and for the container we're going to set a max width of 1280 which is what we set for uh the artboard here the artboard width was 1280 and i'll set the spacing to auto so it's centered and i'll place the container up here and we want to place these in here all right so i don't think it changes the font size there but yeah it still looks the same all right cool so we have our container and this is where [Music] timothy talked about adding m's for the padding so if we go to the uh to the the style guy here oh yeah so let's continue here so set all other font sizes using m and set line heights to unit list so step two is done so add in a section with no padding so step three is done add a container inside the section set padding using ms so set padding using ms so let's look here at the container so we added the container and for the padding let's do like one m and one m on each side so just to see how much padding i want so this this i guess would just have to be like how big you want the container to be um you know and you can make the screens larger so let's say i was on a 2 2 25 60 screen i could just gauge you know how much padding i want to add on the left and the right here right so this would this would actually be 2 v w because 2 m's because inheriting the wait is that true i'm curious about that actually does the padding does two em's equal to vw because we just applied the vw to the font size not the width uh would you use m or m exclusively for typography or also for width height dimensions and margin and padding of any element that's a great question manuel so timothy actually wrote here what units to use for each css property and that's why i like this method so much because it's very organized he wrote down like what units to use for for different uh elements on the site so you could just go to the site here um it's the wizardry technique.webflow.io he has a video he has everything that goes over it so in this live stream i'm just covering how basically what he covered in his video but we're just doing it step step by step um all right so yeah so let me just go back here and read this set the body all pages font size to 1vw yeah so i'm guessing i'm guessing the padding is using uh yeah maybe it is using the vw possibly curious about that i tried to use m also for those but i got totally lost along the way and ended up using pixels again for sure uh yeah this is the same thing so adrian uh just take note of this like this is a this is not something that you're just individually experiencing like all of us experience these pain points so manuel adrian wrote back up top like he feels like he's doing something wrong because he doesn't quite understand which to use rems m's pixels vw and i just shared with him like we all share this same dilemma if you will of like trying to understand or wrap our heads around the units to use for typography and for sizing and different things like that so that's why i'm taking the time i know it's it's it's slow going at the moment as far as like what i'm doing but i'm just taking the time so we can all learn together and learn this wizardry method together as well as bring up any topics that might be confusing along the way so for me i just ran into something that's confusing and the first step i think is admitting like when you're confused i think it's totally okay to say i'm i don't quite understand this you know it's it's you know there's m's there's rems there's vws there's percentages and to for me to sit up here and tell you that i totally have a 100 grasp on all of it i wouldn't be totally honest even though i want to give the impression that i do like because you know i work with webflow so much uh i you know i that's this is an area where i definitely want to want to learn more um i do feel like i got a good grasp on interactions on animations on working with lottie and after effects that part i feel good good with as well as like building layouts in webflow you know like flexbox and and now i'm starting to use grid but as far as typography this is an area where i definitely want to improve and it's such an important part to web design you know like web like 90 of web design is typography right why do people go to a website it's to read the content and i think this is why webflow is focusing so much on accessibility as well because you want people to be able to digest the content on the website and not be mystified or have a hard time going through the content on on the site so this is definitely a worthwhile exercise i know it's probably not the most exciting thing right now especially watching me just type in units into into the designer but we will you know as we go through it it will get easier and you know we will build out this header today just to make it a bit more exciting and we'll add some images but for now let's just continue with the wizardry method and uh and yeah just just finish out the steps you know outline going through the steps here all right so give the container max width we did that so the container has a max width of 1280 which is what we used for the artboard with here add a css media query to change the body font size to pixels at the container's max width all right so so yeah let's just take a look at what's happening here and let's see if our uh fonts are responsive or like if they get larger or smaller so i'm let me see if that let me resize this so yeah you can see our font sizes are getting larger and smaller so our fonts are scaling which is yeah this is exactly what we wanted there the line heights are a bit off because as i was entering the values i wasn't really focused on line height but we can adjust that as we build the hero section um yeah so there we go the container let's look at this the container has a max width of 1280 and yeah and let's add a larger break point at 920 and just see how this looks so at 9 20 there's our site so let me see here yes we're going all the way here we're at 16 24. so we can add let's say if we made this the site 3000 so we can add a piece of code and this is the next step uh so add a css media query to change the body font size to pixels at the container's max width so we can see if if the size if the width of the screen that was being looked at was three thousand um the font size would get really large even though our container still has a max width of 1280 and let me actually go to the desktop view and and do it from here so if we had a width of 3000 you know and let me get even more extreme 5 000 we can see our font still scales up but our our max width is still 1280 all right so so yeah let's go ahead and add that piece of code which is the max with calculator so we want to grab this code and copy it so first we'll set the container max width we'll set it to 1280 and we'll copy it here so this is the max width for the desktop version on on uh on 928 920 and up you can set a different max width so i could set it to like 1440 something like that and have a different max width there but yeah let me work on desktop so we'll add an embed element so let me add an embed and [Music] uh so let's see where's the embed element oh man okay yeah embed is here here it is okay so i'll just paste that in there that code so um so when the size of the screen gets larger than 1280 pixels then the the font size will be converted to pixels instead of vw so this could be a little caveat so using this method at one point our body font size is going to be set to pixels rather than rems so i don't know if this is where rems has the advantage because with rems we're initially setting the body font size to rems rather than we we never use pixels when when using rems so this wizardry method does use pixels at some point and that's if we don't want the uh the font size to scale up past a specific max width so here i'll click save and close so notice what happened here and yes we have the this html embed i'll just hide it so let's see let me go to this larger break point here so here we're at 920 and let me try to grab it the correct way let's preview and let me grab it from here okay all right so see the the font scaling and it scales up then we get to and let me do here all right so if we're looking at this ruler i don't know if you can see it at the bottom so we're scaling up and once we get to the max width of 1280 which is right here we can see that the font stops scaling all right except the paragraph the paragraph is still scaling and why is the paragraph still still scaling i think it's because it's still set in in vw so the paragraph is scaling so we have to add some custom code for the paragraph as well so there we go and paragraph scale so after so that piece of custom code that we added stopped the the font from scaling all right so let's continue we've done that add a css meter query to change the body font size to pixels at the container's max width so step 6 is done and then size all elements using m's which we did oh so 1m does equal 1vw so that answered my question about the padding so this m equals it's the same as saying 2vw you know so here on um 1920 and up if i wanted wanted the container to be smaller i could just change the m unit here for a 1920 pixel screen so now if we set it to 3000 3000 here so on a larger screen we see that uh the the fonts won't scale on a much larger screen and i think you can add different media queries along the way to fit the design so again i think a lot of it has to do with like resizing the browser and and just making sure that your fonts are scaling appropriately depending on the screen size but this is a really cool method because it does allow us to scale our fonts and one thing he mentions that once we get to tablet for example rather than using vw for the body we can use pixels so here on the body all pages right now it's 1vw so rather than vw i could use a pixel so i could say 16 pixels and then you know if i make my pixels larger the fonts would get larger on tablet and let's say i go to mobile and i wanted smaller font sizes i could do something like this with just pixels on the body uh for the paragraph i think you didn't set the value to global let me take a look you're right thank you yep and we also didn't uh we didn't set m's for the paragraph so let's do that but did he set m's here for the paragraph yeah he set it to 1m i'll just do that here 1 m and line height we'll do 1.6 and unitless okay so that's our paragraph all right so hopefully that made sense i know i covered a lot i highly recommend checking out the wizardry technique watching his video um so let's go on to what he says here so he says on tablet and below set the body all pages font size to pixels and all elements inside will change to pixels okay so that's done we we just went over that uh change left and right container padding and larger headings to vw optional change left and right container padding and larger headings to vw optional all right so that's we can do that so i'm not sure oh because i see because we set the body to pixels now the the padding is in is in pixels right because the m's are relative to the body the body font size so if we set it to vw this will give us a bit more control over the padding on different devices so i do have to say i like this method it feel it does feel very responsive so so yeah hopefully that makes sense yeah and he does go over one last thing he goes over minimum paragraph font size on desktop which we can cover now so he has this here min with calculator so the min width when we get smaller than um yeah let's see so on tablet oh shoot or let me see here yeah so as we start scaling down we can see the font the paragraph font gets too small so i want to say if we get to less than 1280 stop scaling the paragraph because it's it's not viewable once we get to 1280 so the the screen width or we can leave it at 1200 that's appropriate there font size we'll say 1m and the class name is just going to be the paragraph element so we'll just write p so when we get less than 1200 pixels don't resize the font okay so i'll go back into my embed element in here let me make it visible and we'll just add that piece of code in there so we're saying once once we get to a min width of 1200 or max width of 1200 set the font size to 12 pixels so save and close so uh rene i think this is similar to clamping what we're doing here with this piece of code we're just setting uh what is it not barriers but we're setting uh outlines or boundaries to the scaling of the font which i think is might be similar to to clamp okay so we added that piece of code and now if we resize and we get lower than 1200 pixels notice that the paragraph now starts wrapping and the paragraph text does not get smaller it's a little bit hard to see because the scaling is very my new here but here we can see the the the font size is scaling and then we get here and then it starts wrapping because it's no longer scaling right if i took out took out this piece of code right here that we just added if i took that out and we resized notice that the text doesn't wrap it just scales down all right and let me just paste that piece of code back in there and save okay cool so i go in here the headings don't scale on the larger break points when we once we get past 1280 the the text does not scale but 1280 and below we have scaling text then we get to tablet and we can just change the size of the text by changing the body all pages font size and along with that you can control the specific font sizes individually like you can just go in and add a class to this paragraph and change the font size or add it to the parent element and change the font size as well so this is just kind of like a i would say a starter template to to starting with fonts um and yeah so hopefully that all made sense uh everyone i definitely recommend watching the video after watching what i just did and then watching the video things will start clicking probably a bit better but i just basically went over a lot with what timothy went over in this video all right so uh our pad wrote uh what's your advice for scaling up a website to like a really big monitor even tv i'm going to have a data vis project and they're going to show it on a very big screen yeah i would use this method honestly the the vw method so i would add a a 1920 breakpoint which is the largest breakpoint webflow allows and then i would probably remove um this this here i would remove this piece of code so either remove it or set the max width to something really large so let's say we had a max width on 1920 the max width for the container was 1920 uh yeah so it would it would it would fill the screen essentially but on really large screens we might want a container that large so let's just try it uh so let's say the container max width is 1920. we'll grab this piece of code in here and and just paste it in there so 1920 save and close and yeah so now if we if we have a screen that's like a tv i don't know how large or what the pixel width of a tv is but if we say 3000 we could do that and then we could also change the font size on the larger break points as well all right so let me change the max width here to 1920. i feel like the font sizes could have gotten bigger there all right so i'm definitely getting into it here um font size 19. oh yeah let's see oh no i'm setting a max width here let me try removing this code for a sec so as you can see um there's a lot being covered here in this first uh first video around fonts uh so i removed that piece of code and what this allows for is like we don't set any about any boundaries like if we have a screen that's i don't know 5 000 pixels wide and we remove the m's here let me see why isn't our font scaling all right so yeah uh i'm confusing myself a little bit so this might be a good point for me to stop and then we'll just get into a build uh but our pad uh just start working with vw and m's and just see how that goes for you because then and then just test on tv and test was setting different uh max max widths for your container um like for for 1920 a 1920 break point you could set a max width of yeah i haven't worked too much with really large break points like that so maybe you would set it to 1920 or like if you had a really large screen like a tv then you'd probably do something a little different it also depends what the browser with for the tv is because i don't know if like there's so much that goes into that i think it just requires testing like go to chrome on the tv and then just look at other sites and see like what is the viewport with of the [Music] of the tv like is it using all the entire pixel density for or what's the resolution of the tv actually that's probably the biggest question um yeah i would check out the resolution of the tv because like if you're using pixel value on a tv that's like thousands of pixels i think so i don't know there's there's a lot there like my i'm going uh down the the rabbit hole of pixels and everything but this is good i'm definitely um open to continue these conversations because like there's just so much to it so let me read a few of these chats uh by the way i'd like to warmly thank you for for the bio play series i learned so much thanks to you uh thank you eunice appreciate it i'm gonna be creating more like side videos like that so definitely stay tuned um yeah that was a fun series actually we used a lot of custom code uh i don't know how practical that design was maybe it was but i like just messing around with different effects and seeing if uh if those can be achieved and it was we we did it with webflow we we linked sliders and stuff which was super cool all right so pablo wrote before are you familiar with css clamp can you do the same thing that wizardry does with just adding custom css so yeah this is something rain wrote i'm just gonna say rin uh about css clamp uh yeah i haven't worked with css clamp too much uh so oh you just bought me three coffees thank you eunice uh wow that is awesome um yeah if you have any questions like you definitely have high priority so like if there's anything you want me to look over like you seem really proficient in webflow already but let me know i'll be happy to help with with anything uh you know like if you want me to look at projects or something but yeah super grateful for three coffees that is awesome uh yeah so so yeah i was answering pablo's question yeah um yeah so css clamp to me just seems like a way to set min width and max with boundaries uh which seems like this custom code solution covers it and you probably can add custom code css clamp to um with it within the the the embed here uh that's probably a a webflow wishlist item too so webflow wishlist css clamp i bet you it is um [Music] no i don't see it here anyways okay but yeah that's probably can be done via custom code as well uh i meant if that if you use clamp you don't need to add the jquery code okay cool cool um pablo wrote do you recommend using the bigger break point option even if you have a big external monitor in my opinion adding a bigger break point makes things more complicated um yeah that depends i think i would just test with that pablo if you feel that your max width on desktop is is sufficient for even bigger screens then maybe that's fine like me i tend to just use the desktop layout um but i'm learning you know i'm learning maybe bigger break points is something that i start using more often and and i'll definitely you know be testing more on larger screens because yeah if a user is you know viewing a site on a 2560 screen and they're using the full pixel density and let me see what my max width here is and i have a 1280 max width that still doesn't look bad right we have all the space here on the left and the right for the container and if you're using like full width images the design will still look good on the site like for example if we go to apple.com and let's just take a look here apple saw my resolution is 8 what's my resolution on my screen right now let me check to do i am using a uh 1920x1080 so let me go into here and let's just let's just make this smaller so yeah i don't know what the resolution is here but i just like zoomed out on my browser but we can see even for apple like if you're using like larger screens like they have all this white space on the left and the right um i don't know if that's actually true though yeah anyways i'm gonna dive a bit deeper into that and maybe change the resolution of my screen all right let me do that now actually so apple.com let me change the resolution this is a very advanced live stream today everyone so if you're new we don't always go over all these topics here so let's say more space oops let me go to this uh this screen more space and yeah so it's probably cut off here on my live stream but i changed my resolution for my screen to uh to 15 what is it here 50. i can't even read it to 3840 by 2160 and on apple they have white space on the left and the right so they are using like a max width on their sections even or on or maybe they're just containers but the images don't span the full 100 width so that's just one thing to know i would i would look at other sites and just compare and just see what other big websites are doing like apple was a good uh gauge for that right because like how many people go to apple.com probably millions um so so yeah that's my two cents with that uh and we can continue talking about this because it's not a one and done type of conversation there's many nuances that go into responsiveness and larger screens and font sizes and all that good stuff all right so yeah no it's uh no worries uh our pad this is something we all struggle with too like you don't need to like yeah it's all good um we want to keep learning and and uh continue to get better with responsive design all right cool so the live stream is well that's weird something in my throat uh the live stream is almost done but let's just quickly see if we can start building in webflow what i'm going to do is i'm going to duplicate this home page and we're just going to call it style guide so we have a reference for our fonts here and then we can just tweak it if we need to and then i'm going to delete this here because we're not going to use that for now and uh let's let's see if we can quickly build this hero section uh so there's no nav bar we won't go with the nav bar but let's just see oh and this is the other thing i wanted to mention uh so uh on the wizardry site here he does have a cloneable project so everything i just covered covered if you want to just uh clone the project at wizardry uh he you know like you can just grab this cloneable project and use it as a style guide for your typography and that way you can skip everything i just covered and you don't have to manually do it yourself and just use the the values that he added here and you can tweak them and change them to to fit your specific style guide all right so we won't have time to build this but we'll just start so i'm going to do a speed build so section i'm going to set the min height to 100 well let's give it a class name call it section min height 100 vh and let's go in here and let's see so 100 vh we have this left section so let me add the container so we'll add a add a div block we'll add container i'm actually going to rename this to lowercase i'm going to use lowercases for my class names so we have the container um then we have we help grow the creative industry so we have kind of a left side and a right side so let's go ahead in the container and i'm going to add a div block and i'm going to call this left side and we'll just duplicate that just copy it and i'm going to duplicate this class call it right side and then for this container i'm going to say is hero and let's set it to flex horizontal for the left side let's just say grow if possible and for the right side as well we'll say grow if possible and let me go to the desktop version i was on the larger break point that's why everything looks small oh man so things do definitely do get complicated once you start adding more break points see i wasn't used to going to that larger one and i was like designing in the larger one uh yeah so for sure okay cool so left side uh let's do that and right side that okay so we help grow the creative industry there's going to be an h1 so oops yeah okay so we'll just have time to add this heading so h1 and we help grow the creative industry we help is it capital case nope we help grow the creative industry all right so one thing i'm going to go to the style guide here and i want to change the h1 to let's say a different font let's say monster rot and also the h2 i want to change it to montserrat all right cool and we'll we'll style the style guide as we continue so we have that font that looks good and for the section i'm gonna say section that was my one o'clock bellow actually it was for something else the section i'm gonna say align horizontal center center and yeah the section min height of 100 vh all right cool we helped grow the creative industry uh so yeah this let's see this left side let's see left side uh rather than growth possible i'll do something like this for now we might use percentages for this and we have this paragraph text uh this is more like a text block or no we'll just do a paragraph all right so left side let's add a paragraph and we'll say we'll just copy this text from here in figma paste in there and we have a button alright cool and that looks good so for the left side let's just say let's use a percentage let's say fifty percent oh no sixty percent something like that all right and it's probably gonna be less so this hero section has a it looks like it's using the entire width of the browser um so we'll see no actually i want to keep things in a container there so yeah this will be a fun build we'll see how we want to approach this uh but that's it for this uh live stream um thanks everyone thanks for your input we did cover a lot of advanced topics uh we'll continue on this path you know tomorrow even the next day uh if you're new to webflow feel free to ask you know just simple questions about webflow i'm happy to cover that um we went it feels like we went around the globe on this one you know using the wizardry method using m's vws talking about rems talking about clamp setting min and max widths on containers and all that good stuff so i definitely feel like i leveled up my game just in this one live stream so i want to thank everyone who joined and and discussed this topic with me um and i want to continue building on this knowledge and uh implementing some of these new techniques in my website builds all right so i'll finish reading off here website isn't french but just design and animations are universal true that is true uh yeah sorry for that question it started you on off-site oh yeah no worries um cool awesome so i'm a bit winded um not dizzy i don't know what the word is for uh for it but we cover so many different uh topics today but it was really fun uh so again i can't think thank timothy enough because you know this is his his build he you you can tell he's a really good design designer too because the website is just really well designed and the fact that we can use you know these different options here and we can drag and drop these panels uh just shows his his skill as a web developer and designer so kudos to timothy timothy [Music] rix awesome job really love it and uh and yeah maybe we'll cover it more tomorrow and as we build some of these layouts it'll help us understand this wizardry method even more and we can we can build the layout and then we can see how it looks on different devices devices and that will give us more context for how we want to design our fonts across the different break points and if we want a large if we want to add larger break points and that'll that'll give us more practice with using the canvas settings here using the larger breakpoint settings in webflow and then i think it's going to come full circle and we're going to have a really great aha moment as we build some of these different designs along with using the wizardry style guide that we created here and using the amazon padding and the max width features in the custom code all right i think that's it for me thanks everyone so much for watching stay tuned to the uh let me find it here i'm very happy with how this build turned out it's not done the design isn't done yet but let me find it here if i can find it very quickly yeah so right here so this design here i'm going to be creating an entire video just on this but it's a clip path slider right so this was all done in webflow there is some custom code and and yeah it's just a really cool slider and the possibilities with what i'm going to show in the video i create i feel are endless like if you have this a specific design like you can style your clip path or style the slider to match the design of your site it doesn't have to be a circle like you can have a polygon like come in and like create this really intricate animation and then have the slider like have the clip path close in on the slider and then have it reveal out and then showcase another slider like it's just a lot of fun like i'm gonna geek out over the different things that you can do with this uh the the code and and the um the build how i showcase how to build this and this is actually super simple like having the text go up and down that is super simple is just a quick interaction and web flow the more complicated part is just animating the clip path and having the slide be timed with the clip path but yeah it's a very fun build i'm gonna pick out different images for this too and just design it a bit better but that's gonna be a super fun video uh once it's available and there there'll be a free cloneable project for this as well so you can go into the project and see what code i used and how i built it all right thanks everyone eunice thank you for the coffees i really really really appreciate it um you know the live streams are getting even more fun didn't expect to dive so deep into typography but this is i'm very happy we did like you know gives me even more things to talk about in my live streams and along with building out these wireframes we're just gonna be like super pro proficient in web flow and super proficient in in web design and development so super excited just just happy with how these live streams are going and thanks everyone for joining my voice just cracked a little bit that's okay um yeah thanks everyone have a great rest of the day and i will see everyone uh tomorrow spread the word if you know anyone who's new to webflow and you know wants to learn about webflow needs help with webflow spread the word about these live streams uh definitely happy with with how it's turning out and how everyone's joining i think it's going to be it's going to keep growing and it's going to be uh very fun to you know to communicate and and discuss with everyone and interact with everyone in in the live stream and in the chat and i'm kind of rambling a bit but yeah thanks everyone have a great rest of the day and i will see you tomorrow thank you

Channel: WebDev For You

Views: 434

Keywords: webflow, web design, web development, live web development, live web design, building a website, learning webflow, webflow for beginners, website live stream, webdev for you, webflow live website build, webflow flexbox, webflow layouts, webflow web design

Id: YvQGe052RXo

Length: 67min 40sec (4060 seconds)

Published: Wed Sep 22 2021