Continuing to build with the Client-first style system - Live Stream - 10/27/2021

[Music] hello what is up everyone this is john with web dev for you here to help you build awesome websites without code in webflow yeah if you're new to the live streams i do these live streams every monday through thursday from 12 pm to 1 pm central we go over everything webflow from building layouts building animations and interactions and i also provide support via the super chat feature in youtube so if you need help with a personal project or you have questions about something specific in webflow you can just drop a super chat any amount is fine i see it as more of a donation to the channel but yeah you can drop a super chat and i'll i'd be happy to to help you with your question all right so today um i think it might be the last day for building with the client first style system so the agenda for today is to continue to build with the client first style system then from 12 30 to 12 40 i'll field any questions about the build and then 12 40 to 1 we'll have a general webflow discussion and i'll field any super chats so just to recap what we've been building the last few days so i'll go to the site here so we've built this site using the client first style system if you're not familiar with client first it is by fin suite it is a style system that they've created to help you stay more organized with your class names and the structure of your site so that if you're working with a client or with somebody else you can be on the same page with that other person or team so i think they did a good job there's definitely a learning curve to it but if you're yeah but if you're willing to watch all the videos and read the content on uh on their site in the documentation section then i think you should have a pretty good understanding of how to use it also if you watch my previous live streams i cover how to use it and you know from reading the documentation i go over um how to use it and we built this site here using the method so i'll go into the site i'll go ahead and quickly get started hey dylan how's it going um i'll go go ahead and get started i'll give a quick recap of client first so basically the structure how they laid out is here so you start with the page wrapper the nav component then the main wrapper and then you have your sections the section has some page padding and then a container in the section and then you can add your components inside of the container so if we look at the structure of the site we have the page wrapper we have the nav component we add the main wrapper and inside of the main wrapper we have the section home header section about us section companies section how it works and section portfolio and then if you open each section each section has padding extra large then we have a container large in each section and then we have uh the components so the big kind of caveat or the big difference with the style system that took me a moment to get used to is applying margin to parent element and not to the actual element so this heading we're not applying any margin or padding if we wanted to add margin we'd have to place it in a parent div and apply the margin global classes to the parent div and then for components you want to use the component style naming convention so it's the the name of the component and then underscore kind of a more detailed explanation of the the element so this is the portfolio grid and then inside the portfolio grid we have portfolio underscore item uh so manuel um okay let me answer eric uh hello eric uh yes will you continue using the system or incorporate some aspects of it that's a great question eric um i'm yet to decide um i think i i'll have a better idea once i switch back to to my own system and then i'll see if there's anything i want to take from this system and apply it to my own system so tomorrow i think i'll switch back to using my own style naming convention which is pretty basic it's just you know i use a lot of wrappers and i apply margin and padding to wrappers and yeah i use sections containers and wrappers and by wrappers i mean div blocks that wrap elements inside of it and i like the idea of being able to apply margin and padding to specific elements i find it makes my build a bit faster so we'll see if i take anything away from the client first system uh someone will ask john did you submit something for the no code speed challenge um yeah that's a great question manuel i did think about it um i feel like since i was an employee at webflow i'm not sure i want to compete or participate i just think it would be a little bit weird if an if a previous employee of webflow ended up winning or something like that and maybe that's just my own idea so i'll have to kind of see if that's what i want to do or if it still feels a bit weird um but yeah it's kind of like i have a little bit of an advantage i feel having worked there for a while and you know having worked with it every single day for for a few years but it could be my own kind of thinking maybe it's okay that i i apply yeah they don't say anything about previous employees not being able to to uh compete or or participate but that's just my own thinking uh cool so yeah let's go ahead and finish out this build um we're gonna be building this section here using client first and funny it says client here that's interesting um so this is a slider you know it doesn't look like a slider but it's basically a testimonial section and or let's see this this right side is a slider i'm gonna make this right side a slider and i'm i'm gonna make these two buttons and i'm going to yeah so it's gonna be two two two elements one left and right and the right is gonna have a slider alright so let's go ahead and do that so i'm gonna call this section testimonials so in the main wrapper i'll add a section and okay yeah i'll add a section and i'll call this section testimonials and in here i'll add a div block and i'll do padding extra large and we'll add a container in here we'll do a container and i'll make this container large and then we'll add our elements so this is going to be the testimonial component so i'll add a div block in the container and i'll call it testimonials underscore content wrapper and then in here we'll add a left side so testimonial left or testimonials underscore contents left left content and we'll add another div block and i'll call this testimonials write underscore right dash content [Music] then for the testimonials content wrapper we'll set it to flex and horizontal the left let's make it forty percent in width [Music] and the right will say sixty percent okay so in the left content let's see what we have we have an h2 heading a paragraph and these buttons that i'm going to grab from the slider so let's add the heading let's make it an h2 and how our client thinks about how our clients think about our performance how our clients think about our performance okay that looks good i like the spacing let's add a paragraph and let me just copy this text okay and i'm gonna place this heading in a div block and i'm gonna give this div block so this is the what i was talking about the client first system you have to put elements inside of parent element and then you want to assign the margin to that parent element so i would say margin bottom and then i would say margin medium okay yeah it looks good and okay so now we can add the slider so yeah so in the testimonials right content i'm going to add a slider and i'm going to call this testimonials underscore slider and let's go to slide one so i'll call this testimonials slide underscore slide and basically let's see here yeah i want to s yeah this is going to be an interesting layout i'm wondering i might use grid for this yeah just trying to picture this layout so we have the paragraph we have this we have this hmm hmm i'm going to try flux first let's try flux and let's make this slider the height is 500 so we'll make the slider 500 pixels in height and yeah and then in the testimonial slide we'll add a div block so i'll add a div and we'll say testimonials slide dash wrapper we'll set it to a position of absolute and full so it fills the entire slide so so the reason i'm doing this is because you can apply a flex setting to the slide you see how it's grayed out so we have to add a div block inside of the slide and then i can set it to flex horizontal and i can add two div blocks side by side in here so here i'm going to say div div block and i'm going to say testimonial slide uh slide left okay we'll try that and then i'll add another one and we'll say testimonials under score slide rates okay and we'll do 50 we'll make them 50 and 50 i could do grow if possible but let me just add a percentage 50 and 50 percent okay so we have that okay [Music] that's good there goes my dog again right on cue so let's see here so let me grab let me go to unsplash.com and portrait images [Music] and just grab some people [Music] uh person how about that there we go that's better so we'll do this guy we'll do this this girl um not this guy i'm just looking for people that look like they're saying a testimonial okay sure um yeah so we have that and yeah let me set this up the slide background to transparent okay and then let me go into my finder and just resize these [Music] did resize all of them yeah i think it did okay this one okay yep it's resized just drop that in there okay and yeah so let me add a background image here set it to cover and center and i don't need it to be tiled okay and then for this image i'm going to give a radius of 8 pixels some rounded corners and then in the testimonial slide right i'm going to set it to a position of relative i'm going to add a text block and i'm gonna say testimonials quote um and then i'm gonna double click put quotation marks and we're going to use playfair display and it's going to be huge so it's going to be yeah those aren't the quotes i was looking for okay so i'm gonna have to export this as a svg export and we're gonna delete this testimonials quote go into webflow i'll drag and drop this in here and then i will add an image and we'll grab this svg and i'll say testimonials test millennials quote image and i'll say position absolute top right and we need to set testimonial slide left to relative so it goes inside of here and then we'll just move it to the right something like this okay so it matches this style here then we have this text here at the bottom so let's go ahead and add that to the testimonials slide right i'm gonna we don't need the slide nav so i'm just gonna say display none and let's rename it test uh o'neills underscore slide nav okay so here we have a paragraph so i'll go ahead and add the paragraph uh for this testimonial slide right i'll set it to flex and bottom position it at the bottom then we have i'm going to call that an h3 heading right here for the name [Music] and let's set this to vertical and bottom and i'm going to say h3 perfect and it's briellen gotch briellen gotch [Music] okay let me set this to left and we have a text here so a text block [Music] excuse me that was weird uh ceo of black guy okay interesting company name and it's testimonials um would this person be person title i'll just say person title and then i'll say here i'll make it italic and that's fine and let me just copy this text [Music] nope this text here and i'll paste that there okay so it's coming along it's looking pretty similar now what we have to do is yeah definitely adjust the spacing so for the paragraph i'm going to add a div block place the paragraph in there again i'm going to say margin bottom and i'll say margin medium okay we need to add some padding to this testimonials slide right so i'll add a div block and i'll place all of this inside of the div block and we will say padding yeah padding let's do large nope padding maybe small maybe medium so again i'm using the client first global classes so when i type in padding medium or padding in general we can see all the different classes we have for padding so i'll do padding yeah padding small okay yeah that'll work or did i say padding medium initially it was medium sorry about that padding medium alright cool and then we'll copy this testimonials quote image i'll place it in here and we'll say give it a comma class of two or maybe write or how about bottom right and here i'll just set it to the bottom right and move it nope that's not working let's see um yeah let's see how would i just move it down why is this over is this overflow hidden oh yeah it doesn't go outside of the slide hmm in that case let me look at the spacing hmm this should be right around here and this tag so let me change the padding to small [Music] no i liked medium how about we set this to 30 percent and we set this to 70 yeah i like that a bit more and then we will add some padding to this so i'll just add a div block place that in there and this in there and i'll say padding medium [Music] no actually padding right and we'll say padding medium no that doesn't quite work let me undo that [Music] i think that looks good unless we set this slide left to 40 percent and the slide rate to 60 percent almost about 45 and 55 yeah that's about right we do still want some padding to this though for sure so content left add a div and we'll say padding or we could add no i'll do padding padding right and let's do padding large [Music] or would margin work better here let me try margin margin right margin medium [Music] yeah we'll go with that that's fine just want a little bit more space there uh and actually when we when we view it and you know what what's causing a bit of a discrepancy is that the navigator was opened and it was kind of changing the layout a bit so let me close the navigator make sure we're viewing the site here kind of correctly so 40 that looks good okay so i definitely let's see here content margin rate now i definitely want padding [Music] padding right and padding let's do large yeah it's not bad we'll go with that okay cool and if i resize yeah i like that we'd have to change it for tablet and mobile uh thanks for help your help migrating the hosting yesterday while flow support was able to hook me up in a few hours nice hey mon what's up uh happy to hear it nick yes webflow support is awesome for sure i should know i i was there for a while um cool so so far it's looking good um let me design these buttons so for the buttons i'm gonna say testimonials uh left dash arrow i'm gonna make it a hundred by 100 and give it a background color of let's say this blue i'm going to say position excuse me absolute bottom left i'm going to move it to the left 40 percent maybe 50. and then we'll grab the right arrow i'll say testimonials underscore right arrow right dash arrow set it to 100 by 100 position it in the bottom left give it a background color here and i'll move it over so this is 20 20 so this should be maybe 30 or 40. eyeballing it there 39 okay so we have our slide we can go to the next one and nice so what i would do here is let me do something like this is i would delete the second slide and just copy this first slide a few times let's do four and then i would just go into you have to go into the element settings to change slides so i'm on the second slide i will select this image give it a combo class of slide dash 2. [Music] uh so pablo wright john i got a question for you do you ever use the header tag if so where as a parent of the navbar um i don't typically you mean like here yeah i don't typically use that pablo um i could maybe i could research that a bit more i've never used the header tag um here now we'll just uh alyssa uh johnson i don't know and then cool and then we'll go to the third slide select the image and i'll say slide three for the combo change the background image to sarah just i'm just coming up with names and the fourth image [Music] slide dash four and cool what this pablo cortez no i'm sorry you probably don't look like that pavlo uh i don't know yeah pablo sorry about that pablo um what's a good last name pablo uh no anybody got a last name pablo i don't know um why can't i think of a last name uh pablo curry uh i've been watching steph curry lately and he's he's been amazing so sure uh okay so i'll preview and we got our slider cool got testimonials uh cool and is there anything else yeah i want to see if i want to change this to crossfade let's try crossfade yeah i like crossfade that's nice pablo picasso yeah that's a good one let's do it pablo picasso there you go all right cool so we have that section done um yeah i guess i'll finish this i'll do one more section um let me read what's been written here in the chat uh that guy's beard game is hella strong facts facts i think you're referring to uh oh let me publish it that first guy he's got a strong beard game i could never grow a beard even if i tried it would take me like years to grow a beard yeah this guy i mean imagine how how long that must have taken um yeah i tried growing a fro once that did not work uh okay so let's see so probably okay yeah so the header tag i don't really use it so c7407 wrote uh just catching up on the video have i have a question by using client first do you ever add any margins padding manually or is it all done in the classes thanks uh yeah so i think the goal is to not add margin and padding manually the goal is to use their system to add margin and padding so throughout this build i do not add margin padding to any elements i always use the div blocks and apply it to the divs so just to try to stay true to this this style system so we have margin here you have the direction and then you have the size and then there's a few custom margins that you can use to create your own custom margins if you needed to and they have padding here same same thing padding direction padding size and things like that okay and they're using the four point system so i think that's why they they don't really want you to add your own spacing or margin and padding i think the point is to use their their style system uh but yeah that's what i found found a bit difficult about the system um i wasn't used to using preset margins and paddings you know and and going by a specific like large medium small size for me when i build a template or a site i usually just kind of eyeball or the the spacing is already set in the figma file so i try to stay true to that so this took me a moment to get used to as far as like using rems for margin and padding and applying it to a parent div block so eric wrote yeah hopefully that answers your question c7407 eric wrote a random question is there a difference between moving the position of the arrows like you just did and transfer transforming them to the left instead uh yeah i don't think there is um you know you probably could use margin too like there's probably many ways to do it so instead of uh negative 39 in absolute you know let me try removing that just setting it to auto i could do negative 39 for the margin and that would work as well um i don't know i just find because i'm positioning it positioning it absolute i like using this positioning here we could also go to uh transforms and just move it on the x-axis you know negative 39 percent or 39 percent i guess 30 negative 39 wouldn't work here yeah you'd have to figure out what the percentage is just keep in mind when you're using transforms and let's say you want you want to apply an interaction the transforms sometimes conflict with the interaction so there's many ways to do it sometimes using a specific method over another is preferred depending on what else you're doing with the site so yeah for me i just like using the absolute positioning uh option here uh great question though great question because yeah there's many ways to to move an element okay so dylan sent me a super chat i will check that in a second pablo escobar nice [Music] cool so let me add one more section and then we'll go to dylan's super chat uh let's see here yeah i appreciate the super chats dylan um i'll add a section so the next section we're going to add is this contact section this will be very easy oh yeah actually let's do that right now let's make this responsive for mobile so on tablet that looks like a mess so let me go into the content wrapper and here rather than horizontal i'll set it to vertical and then the testimonial left i'll set it to a hundred percent and the testimonial right i'll set it to a hundred percent okay that's looking good and then yeah this is where it gets weird uh so yeah i had difficulty with responsiveness on using client first i think what they want you to do here so for example actually you know what no it's not going to be that that difficult so for testimonials left content i'm going to give it a combo class of is tablet for example or is mobile i'll just consider tablet mobile even though i don't want to but i'm going to do the same for mobile and then i'll give some margin to the bottom of two rems maybe three rems and i'll add some spacing that way uh yeah this still looks good on tablet this this slider and then the buttons we will uh the buttons where are they left arrow we'll just say zero percent and right arrow we'll say zero percent and we'll actually move it to the right maybe 20 maybe 22. cool and i'm okay with the buttons being there that's fine so on tablet the user can view it like this uh then we get to mobile landscape it's getting a little bit tight so what i would do here is select the right side and i would say wait let me see your testimonial slide rate uh okay here we go testimonials oh wait a sec all right so we have the testimonial slider okay here it is testimonials right content so yeah we would go into the testimonial slide wrapper and we set it to vertical and slide left we have to give give it a specific height so i would say 500 pixels [Music] and 100 maybe not 500 i would do 700 no yeah 500 and the slide wrapper or the slider i would remove this i would set it to auto and the slide left 500 pixels slide right no that didn't quite work so the testimonial slider maybe i'll do like 700 pixels yeah just make it taller and then so we have that the quote i would move it to zero percent then we have this section so i might give a height to this of like 300 pixels and 100 i typically don't like adding height to elements yeah we'll remove that height and for these buttons we'll just move them up like this yes when you're working with absolute position you do have quite a bit of flexibility as far as like how elements are positioned and what i would do actually is just remove no that's not gonna work maybe i'll set it to relative nope let me undo that i might try something like this but they're not aligned so yeah i would i would work with these these buttons to make sure they're aligned correctly yeah but that's the idea you know mobile definitely doesn't look great we do have to make this responsive as well this grid so for this grid i would change it and i would make it maybe five columns yeah i would have to like completely redesign this maybe do this something like that and then go in here that looks okay and then in here that does not look okay so i would change this to maybe just two columns and then just play with this voila yeah this definitely needs more work here so on mobile here i would just set this to 50 by 50 make it smaller yeah that's better move this up a little bit these buttons yeah let me set it to 50 by 50. no we'll leave it that size here on mobile landscape we'll do 50 by 50. the icons so i'll say testimonials underscore slider arrow icon and we'll make it 0.5 rem or how about one rim and here we'll say one rem [Music] or actually just give it the same class name so testimonials slider arrow icon so here's the reason why client first wants you to use keywords for your different sections because now that i'm working on the testimonial section all i have to do is type in testimonials and i can just search for the class that corresponds to the testimonial element i'm working on so here i want to use testimonials slider arrow icon i can just click on it and use that class alright so yeah that's mobile i think it looks pretty good not bad that's tablet these buttons are not great i do not like it yeah they're a bit off here all right i would work on that so tablet i'd probably put these arrows maybe in the top right let's try that that's better use that that blank space and then these i would put in the bottom right something like that cool all right yeah that's how i would approach that i i'd obviously fine tune it a bit more but i just wanted to give you a quick overview of how i would approach the mobile build okay so i'll quickly start this next section i want to get to dylan's super chat this next section is going to be very easy so it's just going to be the i'm going to call it the newsletter section yeah newsletter section okay yes we have the section i'm gonna call it section dash news letter okay we'll add a div we'll give it the padding extra large then we'll add in here the container we'll say container large then we'll add a div [Music] and we'll say newsletter underscore background or newsletter content wrapper [Music] and we'll add some padding i'm losing my voice sorry um div and we'll say padding extra large [Music] okay the newsletter content wrapper we're going to give it a background color of let's use this color here and we'll go to border radius of 8. maybe maybe even more maybe like 30. okay and then here we're going to add a heading it's going to be an h2 and i'll just copy this want to get notification want to get notified about upcoming information want to get notified about upcoming upcoming events i like that a bit better and we'll say testimonials [Music] hmm yeah testimonials underscore heading and we'll center it and then i'm going to add a div block put this in here into the stiff block we're going to give it a max width of medium and the testimonial is heading i'm going to say auto no that's not going to work let me let me delete this div block hold on so i'm going to testimonials heading center it and give it a combo class max with medium and then set no i don't want to do that this is where it gets kind of weird um newsletter content wrapper so i think i can do flex and center yeah and then i can actually remove this alignment from the center and now i think i can add the max width max width medium [Music] no crap i still want it to be centered [Music] okay and then i'll just add a form in here so the newsletter should be vertical and centered and this form should be let's do um newsletter form and this should actually be newsletter heading [Music] okay in the form we'll set it to let's say 80 460. and then i'll just delete this here okay we'll just say email and we'll delete this field and we'll just place put some placeholder text that says enter your email address here [Music] okay and we'll work on this tomorrow with the submit button but i'll just do something like newsletter [Music] uh underscore submit dash button we'll change the background color to to this red alright so yeah cool we're done with this section i want to get to dylan's super chat so let me check my email let's preview the site in the browser yeah it's looking good nice yeah we'll work on this this needs a little bit of work but we added a slider looks good got a grid of images noise and it's pretty responsive not perfect but you know we spent a few minutes just on it so yeah these buttons should be smaller here all right and the mobile menu definitely needs work cool so yeah let's check out dylan's super chat um okay so dylan just writes he's having a bit of a few issues making the site responsive so let's work on that i'll try to help as much as i can in these last few minutes here dylan okay so i see this that looks off [Music] and desktop okay desktop you have the image the bottle content this has what has the border hmm bottle content okay that has a border right um image to block so hmm [Music] okay i'm referring to the product slider on and product description section at the top on mobile okay so the slider i would not use pixels here i would say a hundred percent for the width of the slider [Music] yeah i would say 100 percent that's already looking a little bit better and then for this diff block let's see let's look at the grid yeah i don't think that looks bad it's a little squished on mobile so maybe on mobile i would change the grid to be one column and it puts the content beneath it and then i would remove some of this padding here and i would add some bottom padding and some i would remove the negative margin and this negative margin here so i probably wouldn't need this padding i would use margin here instead okay this probably wouldn't need so much padding something like that and we have some issues here let's see so div block 61 has negative margin uh it shouldn't change on desktop now yeah desktop should stay the same because we're just we're just working on the tablet version and the the mobile so when styles cascade down they don't affect the previous layout yeah so i'll just work with the margin on some of this so basically the main things make the slider 100 width on tablet and then this becomes visible this content on the right and then on mobile landscape change the grid grid 10 change it to one column and then just work on the spacing like the margin and padding for these elements and i think you should be good to go yeah and you might want to work on some of the borders on the different elements in this form let's see this form block i was headed to a hundred percent let's see here yeah i would remove this padding on the subscribe button you know if you want to set it with maybe 100 pixels and [Music] yeah remove the padding here on the button there we go and then i can remove this width and just add padding to both sides or all around something like that uh cool yeah it's looking better that's what i thought but it doesn't apply to collectionless uh do you mean the borders dylan i'd have to spend time borders can get into in-depth yeah i'd have to spend a bit more time on the borders but yeah slider 100 width set the grid to one column on tab on mobile landscape and i think you'll start to get some better results i don't know why these images disappeared down here so that's weird all right so it is one o'clock hopefully that helped dylan uh just try that out let me know how you go um yeah i would definitely work with the spacing here oh it's the flux there we go so yeah i would change the flux setting and then there's that button there that's kind of weird is it absolute why is it stuck up there oh that's negative okay there we go what is select size yeah i will try to find these and re uh you know move them around something like this yeah there we go yeah it's kind of weird oh this size text okay and okay yeah brand doesn't need that yeah i would just work with this um yeah hopefully that helps dylan we are past one o'clock but i would just yeah i work with some of the margin and padding and the spacing and yeah hopefully the few things i mentioned helped here all right so i'm going to end it there dylan we can continue tomorrow oh the collection lists are on the first page but okay no probs um oh yeah okay yeah maybe we'll have to revisit this tomorrow um but yeah let me know just send me a message tomorrow we'll you know i'll take another look uh tomorrow all right everyone thanks for joining um yeah thanks everyone who's here i'm enjoying seeing like the viewer count go up on my live streams so it means more people are watching which is great i think webflow is an amazing and super powerful tool when it comes to web design and i'm happy to be sharing this information for those of you who have pain points with wordpress i definitely think webflow is an amazing alternative if not the alternative to to your web design um conundrums if i could put it that way uh yeah wiffle just includes everything and it's it's a great system to build sites with so yeah that's it for this live stream check out my website webdev4you.com you know i have templates i have a new template coming out soon hopefully once it gets approved and you know you can go to interactions check out the different layouts and animations for free that i've built you can check out my youtube channel that you're on i have a few resources here and you can contact me via the contact page all right thanks everyone and i enjoyed today's super chat uh if you like the client first system if you like the client first system just go to finnsuite.com client dash first and yeah and you can read their documentation watch their videos and get the cloneable for your own project and start using the client first style system for your site if you like that way of naming classes and applying margins and paddings that way and uh using the rem units and things like that so yeah hopefully that helped uh let me know if you have any questions you can yeah write it in chat tomorrow or send me a message via my contact page alright thanks everyone have a great rest of the day peace

Channel: WebDev For You

Views: 228

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

Id: qryN5vG-uSc

Length: 65min 5sec (3905 seconds)

Published: Wed Oct 27 2021