Finishing the build with the Client-first style system - Live Stream - 10/28/2021

hello hello welcome everyone uh welcome to today's live stream today is thursday october 28th for anyone who's new here i do these live streams every monday through thursday from 12 p.m to 1 pm central and i go over anything related to webflow to how to build layouts and web flow using webflow in general how to create animations and interactions in webflow i also provide a super chat support via the super chat feature in youtube so if you need help with your personal project you can just drop a super chat and i'll be happy to to help with um any of your projects uh so yeah thursdays are usually the more laid back uh streams um you know i don't really have too much on the agenda today we'll continue kind of finishing this build here and we only have a few more sections here for this build but in the meantime while while i'm building you can just write anything in chat ask any questions uh thursdays we usually have more of a kind of a discussion about different topics regarding web design and development uh but yeah if you've seen my live streams the past few days we've been covering the fin suite client first system and it's just a style system to help you stay organized if you don't have a style system or class naming convention you can take a look at client first and they provide you with all the documentation and information you need to properly structure your website uh so this entire site here was built using the client first system it doesn't need to be polished up a little bit but we just you know went through i went through the style guide or this uh template here in figma and and then just built it in webflow using the client first system um so i'll go ahead and jump in we'll quickly look at the agenda for today it's going to be pretty straightforward and we're we might not stick to this agenda fully but this is what we will be covering today so from 12 to 12 30 we're going to continue building the site with the client first style system from 12 30 to 12 40 i'll field any questions about the recent build and from 12 40 to 1 we'll have a general webflow discussion and i'll take any super chats all right cool so yeah that's what's on the agenda for today and yeah let's just continue building this here and hello uh umkar uh no worries no worries yeah we've been going over the client first system the past week uh it's been a lot of fun so i'm just gonna create these few sections and then um then we'll move on and i'll just like look at different webflow projects that could be fun for today we'll look at different websites kind of get inspiration from different sites and just talk shop as far as like web design and development all right hey y'all how's it going so here let me finish out this form here so we just need to style it so i'm going to go into webflow i'll select the form let me request design control okay so we have this form i'll go ahead and label it um news letter form dash wrapper something like that i'll set it to flux and great and then for this text field we'll just say newsletter underscore text field and i'll remove this margin from the bottom and this form wrapper let's see text field and the button we have some margin or padding here at the bottom so trying to remove that let me see if i set the text field to 100 in height nope that didn't do it let's see form wrapper [Music] let me try this again 100 i'll just use a specific pixel value how about that 50 pixels and the button as well will do actually let's grab it here see how tall this is 40 pixels so we'll do 40 pixels for this text field and the button will also do 40 pixels in height so it matches up nicely and i will remove the border from this text field so it does look like it has a border but let's see it's not showing it to me uh let's see newsletter text field newsletter form no border no border where's the border at all right so i guess i'll add a border and then remove it yeah you have to add it and then remove it okay so there's no border i'm gonna add a border radius to the left and the right so we'll say eight and eight so it just has a little border there the submit button should have a border on the right i'll say eight and eight and for the submit button we'll remove the padding from the top and the bottom and we'll add more padding to the left and the right cool so then for this content wrapper i want to add some padding so i'm going to place all these elements oh wait so it does have padding uh newsletter padding extra oh this should go in here yeah and then that's centered okay newsletter form should be a hundred percent and then this heading let's see yeah let's set the max width here to max with large there we go and we'll put the heading in a div block so again this is specific to client first where margin padding is added to div blocks so i'll add margin bottom and we'll say margin large okay and yeah that looks pretty close i might set this newsletter form to maybe 80 so it's a little bit smaller and then set it to auto so it's centered cool yeah i like that that looks good um yeah and for the padding i might do [Music] instead of padding extra large i'll do let's see newsletter wrapper container large oh i see yeah so i'll just apply it to this remove class padding extra extra large yeah that's good nice so we have that section here and then we have this section right down here so for this i will create a new section and i'll call this contact section contact section we will add a div block set the padding to extra large padding extra large and we'll add the container and just give it container large so all these are preset classes from client first and then in the container it's what i yeah so then we add the component so this will be a div block and then i'll say contact underscore content dash wrapper and then we'll say div block uh contact underscore content left and then i'll copy and paste duplicate this class or just remove it and i'll say contact underscore content right okay then for the content wrapper i'll set it to flex horizontal and we already have this design here so i'm just going to copy and paste it we have it right up here so i'm going to call this um yeah i'm just going to copy this or copy this semicircle and let's see let's set this to 60 percent and this to forty percent for now and then in the content left i'm just going to paste that semicircle and then i'll paste this semicircle and for contact content left i'll set it to flex and center cool so we have that little design there that looks good and i'll set it to 50 actually so it'll be 50 50 and then this will be 50 for the contact okay so we have this heading this text and then a form so uh in the content right i'll add a heading it'll be an h2 heading and i'll say any questions [Music] then i will add a paragraph and we'll just copy this text here and i'll paste in there let me try that again and i'll paste in here and then we'll add a form so i'll say form we'll add a form block perfect and we want to add to this form block we'll add another field label place it in there and then we'll add a text area okay so it's going to be your name email address and message okay so i'll just name these so i'll say contact underscore text dash field and contact underscore text or field label and i'll just apply these to all of these because i'm going to restyle them field label contact underscore field uh label nope let me do that again contact underscore field dash label and then we have contact text field so i'll add it to this one text field and this will be contact underscore text area and then we will have contact underscore submit button cool all right so let's restyle it to look like this so this text is yeah that should be fine it's system ui which i'm using um yeah so we have to style the text field so it's gonna have a border of let's say 3f or i can use my own color here so for the border we'll set a border like this and i'll set the color to this darker black and we'll set the border radius to 5 pixels okay and for the contact text area we'll give it a border and set it to 5 pixels and we'll use this color all right and then for the min height for the text area we'll say 200 pixels just so it's a bit larger that might be too large 150. so one thing to note about text areas is that if you try to apply height just to the height it won't do it you have to add a min height so you know 150 will work here and then the button let's see here if i have in my style guide if i have buttons i think i do yeah so we have just a regular button we'll use that and so i'll select it and let me remove this clasp and just say button okay that's that looks good um button and i'll say is contact so i'll make it with a hundred percent and we'll add a border radius of five great and for the contact text field let's add some rems of margin to the bottom so i'll say to rem and for the text area i'll also say to rem from the bottom and then for this paragraph so let me add a div for the heading and i'll place the heading in this div and i'll give this div margin bottom and we'll say margin medium maybe margin small [Music] and then for this paragraph we'll also place it in a div block and i'll place it right out here put the paragraph in there and i'll say margin bottom and we'll do margin small this should be margin a bit larger maybe margin large yeah let's try that that looks good okay so we're done with the contact section um it's a bit wider than i want it to be so let's set it to 40 percent and we'll set the contact left to 60 percent okay that looks good all right um yeah i'll probably add some more padding to these sections or maybe maybe not they look pretty good um i might change the color of this newsletter to excited to white no yeah we'll just do something like that okay um yeah i'm not gonna go over the footer the footer is just a couple of elements here but yeah that's pretty much all i wanted to showcase today hey dylan how's it going i think we're done with the site let's make it responsive to that last section so let's go to um the tablet view yeah this needs some work so i would let me do is dash contact and is dash contact and we'll just make this smaller so like 200 by 300 and 100 by 200. um that should be 200 by 400 and this should be obviously 150 by 300. cool and then for the content wrapper let's set it to vertical center and yeah we'll put this we'll set it to last so it goes to the bottom and we'll make this eighty percent and content right yeah and then i'll add some margin of like two rem from the bottom or maybe four something like that yeah and you could do it either way like i could set this to first and then apply the the margin to this for rem yeah it doesn't look bad okay and yeah that looks okay on tablet this is a bit big i'd probably make this smaller so 200 by 400 and 150 by 300 cool yeah i'd add more spacing between these let's say to rem yep cool cool and then mobile landscape so i see that the text changes sizes so the text changes sizes based on the client first system so they have different text sizes for different devices and mobile portrait so this could use a bit of work it's a lot of text i would remove this margin and yeah maybe set this to 100 by 200 and this would be 50 by 100 something like that this would need a bit of work [Music] yeah something like that that looks okay that looks okay um for this i would then use letter form i would set it to vertical and one hundred percent um yeah this is where the padding gets weird so maybe s mobile and then i would remove all this padding or just set it to 1 0.5 or something like that and the submit button i would remove or add the radius to all sides and for this i would do the same and then add some margin [Music] uh yeah something like that uh for this i would content left set it to 100 and make these smaller 100 by 200. and 150 by 100 and center this and that looks okay cool so that was just a quick you know obviously i'd spend more time with this but just to showcase how i would go about making this responsive um it can be pretty quick in webflow uh they do have a responsive version here i'm not gonna spend too much time with it here but it's fairly similar you know some of the text is a bit smaller and i think i would maybe want to resize some of the text but this is how the text comes is styled out of um or is styled using the client first system so yeah don't really want to change it there just want to use their system and see how it works uh yeah some of the spacing could use some work and all that so yeah i think i'm done with this site and the client first system so yeah i guess i'll i'll do a quick review of what i think about it i personally think like yeah if i was really building this for a client i would maybe go go more in depth as far as like adding combo classes and style styling things differently uh but for me it just feels a bit limiting i don't know if i want to use these font sizes for tablet like maybe i have a different font size in mind right uh you know maybe i don't want my font size to be this size or my heading to be this size on mobile right like i want a different size and you probably can change it but then to me that starts defeating the purpose of the style system right you want a style system that you're using initially from the beginning so you're you're not constantly changing values and then you get confused if you do try to reference their documentation um so if you like the spacing the styling you know the sizes of the font then um then this could work but for me personally i i find it a bit limiting i like to use my own styles for different projects and some you know not all projects are created equal and i know you can add combo classes and custom classes and client first but if i'm going to start with the design system initially i don't want to start reinventing the design system as i'm going with it if i were to do that i might as well just start with my own system with that said if you don't have a style system if you need help organizing your classes then this could be a good starting point for you this could be a good starting point with you know understanding how webflow works if you don't like the idea of just jumping into webflow and having no idea what you're doing then this is definitely you know could definitely be a good approach to starting with webflow right because then you have a rail system you know you're not just in in the wild trying to build with webflow you have a clear style guide that you're playing off of and that could be beneficial if you're the type of person that requires that organization with any skill that you're learning so yeah that's my take on it um don't have anything i mean great to say about it and don't have anything really bad to say about it so i'm glad i spent the time with it um i will say i'm not a fan of adding you know imagine margin imagine margin and padding to parent elements uh but you know the more you work with it you probably get used to it um as far as being for clients i do think the client would have to understand a bit about web design and development to under even attempt to understand this system right and it goes with any style system right if the client's never worked with your site there would still need to be communication between you and the client or you and the team as to as to your naming convention and even if you are using the system you still have to communicate to the client like hey i'm using the client first system and what's great about it actually is that there's a lot of documentation on it so the client could just read this it is a lot but there's also a lot of videos so if the client wants to immerse themselves and really understand how the project was built they could watch all the videos but how likely is it that a client will do that i i don't know honestly you know maybe a team would do that like a whole team gets together on the same page and says hey we're going to use the client first system let's watch all the videos let's understand how this works and we're going to use this method moving forward i could see it working in that way but if you just you know your client asks you for a site and then you hand the project off to the client and say hey i use the client first system for this this is how it works if you want to make any changes you know what are the chances that the client's not going to mess up something you know or add a combo class where it's not supposed to be i mean the chances are low that that wouldn't happen in my opinion or in my own thinking um unless the client went through all this information uh so yeah there's i don't feel like there's a perfect solution if or if there ever will be a perfect solution to you know or the perfect style system it comes down to having a good understanding of web design and development first and foremost having a good understanding of class naming and web flow and at the end of the day you're still going to have to communicate with your client so however you do that you know that's up to you and i think you know the system could just be something that might facilitate or help with that it could but again it is a lot of documentation to go through and yeah you still have to be on the same page with whoever you're working with i know that was a bit vague hopefully that was helpful hopefully i communicated that clearly i'm not saying don't try the client first system in the end i think you'll just have to try it and see if it's for you i think i've done enough videos on it now that you might get the gist of how it works but you know they outlined it pretty well here's the page structure just you know make your site look like this sections page padding or page wrapper nav component main wrapper section in each section yeah make it look like this or name it section then the section identifier then add some page padding then the container and then add your components and elements in that container and then for margin and padding wrap the element in a div block and apply the margin and padding to the parent element yeah and then you have a list of global classes that you can select from as they go through here typography is all set they've sized it for you and all that good stuff text styles font weights alignment color rich text buttons spacing margin and padding um you know custom responsive spacing um so yeah i probably could use this maybe yeah this this this is kind of a part i skipped over as far as making it responsive but they do have these custom uh classes that i could have used for tab or tablet and mobile um so yeah i could have used like is tablet small as mobile as header stuff like that so i think i did try that actually so on one of these i did is mobile but i don't know if is mobile came with any preset classes now i think it's just a combo class that you add and then you can customize if i'm reading that correctly maybe i'm not let me read it real quick yeah okay they're just examples yeah so margin top margin extra large is tablet small so you just add a combo class for um for responsive design right so let me try to find an example where i might want to add more margin or padding so right here let's say for this heading so margin bottom i could say is mobile and i could say two ram here two room so it adds more margin at the bottom but yeah now we have three combo classes so i i never have this many combo classes in my builds to be honest um the most i i rarely have two combo classes or two classes usually i only have one classes the only time i have combo classes is if i need a different background for different elements or a different color for different elements or something or different padding or something for different elements or i'm building different layouts and i need different spacings for specific layouts yeah so so yeah that's you know i didn't talk about this too much but you can add combo classes for tablet and mobile and customize it so that's one thing to go over so in the end i read through some of the documentation and what i got out of it like a lot of it's like you can use your own custom classes and i'm like okay well yeah that's that's what i do anyway and they just give you a nice little set of global classes that you can start with so not knocking it but you know and then they give you how to name your custom classes so i guess that's one good thing like they try to give you structure in the sense of like when you name your custom classes you know name it with a keyword and then something more descriptive like keyword underscore and then describe that element but in that case you could just search the bem model or some type of way to name your classes so anyways i know i'm talking too much about it but um yeah i guess it's because i've used webflow and i have my own system that i'm kind of like so nothing against you joe or fensuit you guys i mean the the amount of effort and energy put into this is is commendable um and hopefully it does take off because i know people are looking for structure in webflow buffalo doesn't give you structure out of the box so like i said before you're you know i would say eight times out of ten you'll find a site that's like div block one div block two div block 106 you know and that's what you definitely don't want to do so the fact that they put this together that they were aware that users need some type of structure um i think is definitely a push in the right direction uh as a more maybe uh i'm not yeah maybe intermittent intermediate advanced user i'm kind of like eh you know because i've used webflow so much i have my own ways of of naming naming things and my own way of styling and applying margin padding you know without using so many classes and basically i've gotten to the point where when i'm building i look for the path of least resistance and the path that will not add more to the site so if one class can achieve a specific thing then i only need that one class and i'll reuse classes for sure like i'll reuse the container element throughout my site that's one thing i don't want to have variations of the container if it's a specific size i'll use that container throughout the entire site but then i have wrappers right for different components i have wrappers and div blocks that i use for those components and i can always adjust the margin padding on each of those components yeah and then for sections i do name the sections i have different class names for different sections and actually a good example will be when i release my new template i can showcase how i built that right and and you'll see that i'm not using tons of classes and it it's effective you know and i do use page wrapper that's one thing that this system does it uses page wrapper i don't use main wrapper which i might start doing that was an interesting point they made because it kind of lets the the search engines know that this is the main content of the page so that's something i might consider um but yeah i think i've harped on this enough you know client client first offers you know these other classes colors components components is just a naming convention layouts they tell you they don't they don't have classes for layouts because they don't they don't want you to apply specific classes for layouts because every layout could be different so that's not really anything it's just saying hey name your own create custom classes for your layouts that's what it's that's basically what they're saying here under layouts and under components like hey create your custom classes for components and then the mindset is keywords right the mindset is keywords like just giving you a way to name your classes um so so yeah uh i think i've harped on it enough um yeah and and this is more like we're going kind of meta here not meta but for us more intermediate users and advanced if you're new to webflow you know probably some of what i'm saying isn't super important or maybe it is if you want that structure but for us who've used webflow a lot this is like some meta talk about like just the space of web design and development in general so um so yeah i've harped on it enough uh so cool that'll be my last uh thing i build with client first and maybe maybe i'll revisit it who knows who knows uh so [Music] they wrote are you interested in the membership beta absolutely we'll see if i join it but i do want to show how to use memberships if there's a beta now definitely pablo i'm with you john client first is not for everyone or for every project for sure eunice wrote i'm pretty in line with you john on client first fin fin suite should have named it differently it's rather a good design system for an agency or a freelancer not every client could go through it yeah definitely um i haven't looked through the forums or have read what other users are saying about it but i'd be curious actually i might do that today and just see what the sentiment is around this system right and i'm sure there's going to be people that are all for it and people are going to be maybe like me who are going to be like you know and people who might just not like it at all like i'm not in that camp where i'm like oh this is horrible but i'm just like eh you know so so yeah uh cool so let's see um let's go to the webflow showcase i mean there's always some good stuff in the webflow showcase we're just gonna have a free kind of free forum now like of discussion or if you have any questions or you want to share your experiences with webflow uh feel free to do that i'm not going to cover anything too in depth now it's thursday it's the last day of the week as far as my live stream so i just want to open it up to any discussion or anything related to webflow web design or web development and by the end of thursday i'm kind of fried a little bit too so i'm like after building every day and you know i'm not just you do building in the live stream afterwards i do have my own projects that i work on so i work on web in webflow quite a bit so by thursday i'm kind of like oh like i don't want to build anybody else i don't want to add any div blocks or anything like that let's just get inspired and and be refreshed for for next week um cool so yeah i'll just go through some of these webflow projects let's look at we're looking at popular and this one's by by not another tm that's a cool name and that's a nice animation looks like lottie cool very nice [Music] uh the contrast here so this text is white uh hey excellent wrote um hey webbed for you eunice dillon and everyone here what's up excellence uh dylan wrote when you say membership do you mean so people can sign up save card details shipping out or stuff like that i'm not sure dylan i don't know how uh the extent of the membership feature in webflow or if there's even a beta or what announcements have been made around that you know can't say much there can you go over the webflow price plan as a freelancer it's a bit confusing absolutely great point kavita so let's go to the webflow pricing and this is something that confuses a lot of users let me just grab some water here i use a big cup for water so if you watch me drink water um it's just like a i actually use it for baking i have a lot of these um i don't know what you call them just plastic cups and i bought a set for baking and all my ingredients go inside of it and i i like it because it's big and i just put water in it i can drink out of it so every time i drink water i always have small cups so using a bigger cup i can make less trips to get water so that's that's the story behind this i know it's kind of awkward and clunky but that's the reason i use this for water all right um cool so yeah the the pricing and web flow when i was working in support this question would come up a lot um okay uh cool so that's interesting um pablo thank you for sharing that um i will talk to a few people to see if i can get access and i might want access for a specific reason but i don't know if they will yeah i'm currently a template developer so i definitely want to get on that so i can provide that i've heard that webflow might change the price system soon because it's so confusing hopefully that happens soon uh pablo john you need to get branded mugs yeah maybe i'll i'll get a merch store um i did launch my new site recently uh it is pretty basic so i'm currently going to start designing like a new site that and it might take a while but i want the site to be i didn't really like my previous site it was too dark and had too many bright colors like and maybe some people did like it but i just thought the color scheme was too much and i wanted a more simple site so now my site is just basically a white background with text and elements but i want you know my next site for web dev for you i want it to be pretty amazing so i'm going to spend time uh time designing that uh and then maybe there could be a merch store for sure um yeah so let me let me continue here with the site plans um so basically um for kavita if you're a freelancer what i would it depends what you're trying to do right like if you're a freelancer and you need more than two projects in your dashboard or you know you want to play with more than two projects i would recommend the lite account plan which allows you for 10 projects in your dashboard and those projects don't require a site plan or if you're a freelancer and you know how to use webflow you're not really interested in creating projects that are not for clients what i would recommend is a free a free account plan and just purchasing site plans because once you purchase a site plan for a project it unlocks pretty much everything you need for the project so like if you if you purchase a site plan you can then use custom code you can use the if you have a cms site plan you can use the cms um and so on and so forth and by adding a site plan you can add a custom domain to the project you have you know hosting and more yeah more hosting features but that would require that you pay for the site plan up front so as a freelancer if i was a freelancer getting started with webflow i would definitely opt for the light account plan just because i have 10 projects to work with right you're only limited to you're limited to two projects on the free account plan and two pages per project in the free account plan so that's very limiting so i would at least go with the light account plan and then every time you work for a client you can purchase a site plan for the client and you can even use client first to have the client pay for the project so or pay for the site plan so if you do client hold on one sec client first uh workflow not client first um what is it i'm so used to saying client first now what is it when your client can pay for the project client billing okay yeah client billing web flow um you can set up client billing and then you do need a stripe account and then you can charge your your client for the site plan and then you could even charge the client a little bit extra and make profit for um for four-year efforts as far as building the site um cool so [Music] c7407 wrote i thought i had to pay to use the embed feature as a designer and also pay for a site plan is that not the case no once you add a site plan you can use custom code features like the embed element so if we type in custom code [Music] webflow you know it should say it here if you have a paid webflow account or if your project has an active site plan you can add custom blocks of html code to your sites to unlock all kinds of custom functionality so yeah either an account plan or a page site plan and that's the part that confuses a lot of people in my my opinion yeah so hopefully webflow comes out with the pricing system that is a bit easier to understand um but once you get used to it you're kind of like okay this is what i need to pay for in order to use specific features but it is a pain point uh for a lot of users i know users get confused and when i was in support that would that would come up a lot like people would be like hey what plan do i need or you know how do i do this this and this um but yeah but webflow to me is like the most powerful web design tool out there so you know for the pricing to be a little bit of a pain in the butt i'm like eh okay and it's not really once you understand it you're like okay this is what i need to use webflow all right so let's go through i was going through this site here um yeah for this site you know we can see that the contrast of the text is not great because these texts are pretty bright or the the images are bright and the text is is uh is white um that's not true dylan uh it's pretty bad hero it's pretty bad you can't add custom code after purchases of ecommerce plan but you then have to buy an additional plan um now if you buy a site plan an e-commerce site plan for your site you can then add custom code and you don't need an account plan if you're saying about buying any ecommerce template and then then needing a site plan that's true okay um yeah so we have this text it's white um yeah so i'm just looking through this template here but it's not bad you know it's kind of interesting interesting image okay not sure i would use that image but sure but yeah i think this might be the designer but i'm not not a hundred percent anyway um yeah no custom code if you purchase an ecommerce site plan you can use custom code in the project any site plan you purchase you can use custom code as mentioned here um yeah paid account plan or an active site plan an active site plan could be basic uh cms business or e-commerce all right yeah that's a better picture i'll probably use that picture there sorry man his name is alex i think all right cool um yeah don't mean to be weird about that okay yeah the design design is not bad so alex did a good job so it's not another i think it's a brand agency uh let's see yeah yeah i answered a lot of those questions dylan so it's like if i got that wrong i'd i'd be a bit embarrassed because i've answered so many of those questions okay this is called launch pad by relum looks like two designers oh i like this design i like the gradient they have a video good stuff very nice looks good these pictures that make him higher quality yeah nice let's go to awards.com that might be a bit more fun see kind of want to check this one out it says are you okay okay that's fine it's funny [Music] measuring equipment for okay okay emotional readings best experienced with devices with sound turned on [Music] um let me turn down my volume [Music] we're loom um cool yeah it's very interesting i'll come back to that later we're loom let's see oh yeah [Music] this looks cool open live site oh wow that's really nice design so it's dan oh adam oh no no that's a co-founder it's good stuff yeah i'm gonna get into these gradients and these textures so maybe for next week let's focus on gradients and textures that might be really fun because this design element is really it's kind of trending now and it's a very nice design where we have these gradients and then you have like a texture to elements i like that a lot so i want to play with that a bit more so this is a clonable that's very cool go ahead and clone it and dissect it a little bit yeah that's one thing as far as webday for you i want to level up the design because i feel like some of my design is not up to par with some of these other brands so i want to level that up a little bit so here we have this is most likely position sticky let's see where do we have position stick so right here position sticky okay cool so with this they apply position sticky to this uh january uh text and they are using oh interesting so they're using a similar class naming convention oh wait yeah it's it almost looks like they're using client first for this uh if they're not it's very similar there they put the heading in a parent element so is that a is that a thing now like yeah padding vertical extra large let me look at the classes here yeah no i wonder if they used client first for this yeah they're using they're using the similar idea of client first for this we're like so we can see here it says margin bottom extra large so am i behind are are designers using this more than not like i don't know no this came out way before client first interesting that's very interesting because they're using they're using a similar idea as client first right for like the paragraphs and the headings they don't apply margin and padding and maybe they just want to retain the global classes they don't want to give the headings specific classes i i guess i could see the value in that of like not having any custom heading classes and just leaving them global and then applying margin and padding to other elements huh all right i'm gonna i'm gonna browse through more more like upscale projects like this or more like popular projects i should say just to get a feel of what people are doing i guess i mean in the end if it works and you're not using a lot of classes i think that's the goal but it's kind of an interesting thing one thing i might do is i might start adopting for my personal projects i can't do it with templates but i like the idea of having the keyword the underscore and then a more descriptive term so like here timeline underscore date text like this is timeline underscore text so you have the keyword which is the more descriptive like it describes the component or the element and then you get more detailed by adding an underscore and more information so i do like that cool so let me see how they did this they applied position sticky this timeline is a grid so the grid is that's really nice so they have a grid you know 1fr 1fr this middle piece is 180 pixels that's nice and then um yeah let's see how they did this huh how did they do this this is this is an interesting design center they have the circle i'm guessing it's it's position sticky as well oh cool so the text and the circle they always stay in the center of the screen because it's positioned sticky and then once we get here it moves up and then this one stays in the center of the screen that's clever that's very clever so i'm wondering for this line here see if i can find that line let's see what that line timeline item progress here it is so it's positioned fixed um it's position 50 from the bottom 50 vh from the bottom oh wait oh that's clever and then this bottom so we have the progress it's a hundred percent height and then progress bar let me remove this oh that's interesting huh yeah i'd have to i'd have to analyze that one a bit more so this is this is position sticky this progress bar it's a hundred percent timeline progress then progress bar is 50 vh and it's fixed huh yeah that's an interesting effect that i kind of want to study that a bit more but yeah that's they did a really good job with this responsiveness looks good well i like that they put the timeline on the left that's good design and then mobile same thing so did they just change the grid here yep the grid they just good good stuff yeah the progress bar stays in place oh yeah so it's just position sticky and let's see oh yeah it does just stay in place that is so ingenious if that's the word ingenious or just clever very clever such a interesting kind of illusion in a way or interesting visual thing where you think the progress bar is actually moving it's not it stays in place yeah and then we're just going down that's so cool um maybe i'll showcase how to do that in a interaction or something that's very cool uh let me show you guys another project by them they seem to have a lot of nice stuff this reminds me of the wizardry design that's why i want to get into like the those gradients and stuff and those textures oh that's dope yeah this reminds me of like um the wizardry site oh that is super nice wow wow so dan and adam yep good stuff yeah that's super nice design so we're loom is that the so if you go to verloom i'm guessing this is their actual website so can you clone this yeah you can clone it good stuff yeah awesome well yeah we'll we'll keep doing things like this we'll review other people's work oh this looks nice that's super nice yeah these textures i'm really liking they had a lot to to design this is like a beauty beauty site that's really nice oh man this one's not cloneable i wouldn't think that's like a somebody would pay a lot of money i think for for a design like this click request access yeah that's that's top top design stuff right there all right um yeah this is uh it's a really cool portfolio uh great work all right so that's it gonna be it for today's live stream uh thanks everyone for watching thanks for sticking uh kind of sticking through all the client first build i mean not sticking through it it was a good exercise and a good practice you know i learned a lot about class naming and yeah it's just good practice to go through these different systems and you know kind of develop as a web designer and developer so next week let's let's get more into design let's look at gradients and textures and see how we can you know bring more life to a design using these different design practices so yeah thanks everyone have a great weekend enjoy enjoy the weekend and uh yeah i'll see you next week thank you peace you

Channel: WebDev For You

Views: 202

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, webflow client-first style system, client-first style system, finsweet client-first style system

Id: yvK4xh17UpU

Length: 63min 5sec (3785 seconds)

Published: Thu Oct 28 2021