Client-First and CSS Tips and Tricks with Harshit Agrawal

hello everyone I hope you all are doing well in this video we are going to see some Client First tips and tricks these are basic tips and tricks very simple some of them are very simple some of them are uh using some custom CSS as well these tips are going to help you make faster with client first so if you're using Client First system uh after watching this video I hope you can speed up your build you can make more efficiently your website and yeah build faster with cl [Applause] first that's something sweet by the way the project that you see here is not really with the latest Client First v v uh 2.1 it's a older version but it's fine the tricks that we have is kind of applicable in both of them so the first tip here that I have is about naming the combo classes so when you are having the combo combo classes generally you know how you name it is for example I have this card which is about item and what what we generally do is we type is uh black right so uh one way uh one cool tip uh for you know to understand this easily would be to make it like a sentence okay so for example you when you read it it's a very subtle trick or tip basically but it helps to understand even better you know like make it more lemon I would say so for example it reads home about item is black so it it reads it as a sentence right and let's say I have a a star uh here on the right side of this and I let's say maybe this is okay this is relative right now but for example I I have something here let's say let's add a background here so I will add a background icon maybe let's try to find an icon here is codes okay cool and I want to add this code as a background in this particular use case so let's just go to the background click here we will choose the image like this and I don't want to apply it to all of them right so what I will need is I will need a combo class in this case so instead of typing only is code I can type because right now when you read it it it's not making uh you know like sentence wise sense like home about item is code right it's completely fine if you name it like that but to make it more lemon more simple to understand you can type you know you can have you can have some extra words like is with code this is very like very very basic thing that we do sometimes I also do so is with is for is with is is for you know these type of words you can add in there yeah just to make it more understandable label yeah more label more simple uh yeah so that is tip number one then tip number two is going to be about uh page loaders sometimes we have page loaders right in our website and generally we uh keep them let's say inside page rapper sometimes here some people keep it in the bottom of the page so the tip uh to keep the page rep uh page loader uh will be to keep it in the very top if possible keep it outside the page rapper as well the reason is because uh the HTML is loaded from top to bottom and when the page loader is present somewhere in between you might notice a uh like a glitch or a blink you know where you can see the web page and then the page loader is kind of loaded that happens because the page loader is present in between uh these layers in our page core structure and not in the top so I think structure-wise page P structure wise the tip will be to keep it in the very top of the page rapper or you can keep it outside the page rapper as well uh just the page loader so let's try to let's try to create a page loader really quick so I will just go to CSS loaders for example again a very nice way to create page loaders is used using like CSS loaders I think I covered this in one of our CSS tip videos but these are very efficient you are not having any additional ly files or interactions so yeah page loader for example we will have a component of this a page loader wrapper like that then let's make it fixed I will keep it in the top and I will make it uh let's say let's take this background color this looks good like that nice now I will take a embed inside this and this is the HTML and you can copy the CSS as well this this site is called CSS load. github.io so you can always find a lot of loaders there let's add our style tag I will show you the issue and how we can optimize that St close there we go page loader is here now let's maybe yeah now it is in the top and you can see the page loader is right there let's send enter this thing just like this we can also change the color so for example here the color right now is border bottom color I think this is the color so let's make it black darker there we go yeah just to make sure it is visible yeah or maybe the previous one was yeah a little bit better okay let's do that nice now what I will do is I will keep uh generally it's a good idea to create a component of the page Lo but just for demonstration I will keep it somewhere here and now I will publish to staging let's now open the side and okay right now the page loader is visible let's add now the interaction so page trigger page load is finished page load is finished when the page load is finished what I want to do is I want to hide this there we go okay this is just a just a fast way to kind of create that loader yeah but you can add again interactions you know like more smoothing animation as well when you hide that thing yeah okay let's now just to show you I think we don't have a lot of HTML here but I can also okay by the way in designer you will generally hide it so that it's not interrupting right uh I will go again here so when the page it starts loading I will make it visible when the page finishes loading I will just hide it so page loader start it is visible like that save and you can always rename your animations so like page loader start load like that so you can see there was a there was a few like milliseconds or seconds where the page shows up then you see the loader and then again it disappeared I will show it again try to recreate the issue you you see there was like a blink of a second or something like that where you could see the page so that's not a of course good user experience to avoid that you can always move your loader to the very top also uh one thing you could do is you you could always you can also add a small CSS in the page or in your project settings so that the loader is visible by default but let's see moving it to the Top If it removes the issue let's open the page from here okay so now let's let's uh simply remove that interaction I will simply remove that inter it's not helping a lot uh cool and what I will do is I have moved the loader to the top and I will go here let me zoom in a little bit guys if you cannot see it maybe so here I will just make it visible this play Lex so my loader right now in designer is kind of hidden but it will be visible on the site and what I'm trying to do is I'm trying to uh remove the few milliseconds where your page is visible so yeah let's see that and there we go now you see when I open the page I don't see the the page behind itself I see the loader and I always see the page once the page is fled rest of the page so yeah this is the trick uh sometimes you might actually see this issue sometime sometime not because you know uh your page might be very lighter so it might not have that issue but again the tip is to keep your page lader in the very top so that it loads first so this trick the next one is not directly related to client first you know when when you are having a different approach uh in building with client first for example what I personally do is when I have headings I don't personally like to keep like top and bottom margin zero I like to give them some default margin like like maybe 1.5 RS the reason is because most of the headings have uh you know some kind of paragraph before like just after that so for example here it's it's it is a H2 and there is a paragraph just after that right and we have to add kind of margin top and than a paragraph so it kind of adds uh one more nesting layer for you which is fine but again uh I think you can reduce that if you follow a kind of a unique approach or a different approach uh which is like this where you kind of add the bargin motm by default on all the heading tags so so the issue that happens with this now is let's say you have a heading that is now not having any paragraph just below it right so you can see that in the very first example itself there is no paragraph present there and because of that there is some extra space created right there in the bottom so what you can do is you can use a little bit of uh CSS to kind of fix that or you know like just be just do not worry about that so simply go to your Global Styles and you will find some code here you have to create something very similar so what you need to do is you need to take H for example one okay then H2 so you can take all the heading tags like this H1 H2 H3 H4 and then you can Define uh you you you you can Define that you know if it is alone or if it is last child present in a rapper so for example in this particular case if this is a last child last child means there is nothing below it now right so in that case The Heading uh bottom margin will be zero or the second way would be to be only child so if it is only child let's say you have a kind of a section heading for example this one you don't have a paragraph below that right uh so in this particular case again this is kind of solo right so based on your project requirements you you could actually follow any one of that but the thing is you just go there and here you add a semicolon and add last child and same you you need to add that same thing to this as well same semicolon last sh as well there we go and then you need to Define margin bottom so you can see that we are actually following the same trick on our Rich Text element uh in we flows text element so you can you could do this here as well that's it and now whenever your element like your heading is last child there is no paragraph present below it it will just make it zero but for rest of the element there will be uh a bottom margin present so again a very nice thing so for example this one I will increase the bottom margin and you can see that it's it's not increasing it the reason is because we have set that to zero there is no paragraph involved right so it is zero right now when I'm hovering over it I cannot see it but as soon as I add a paragraph here the space is created automatically so this is the trick I use it all like in all the projects I do so I think you'll find it helpful as well if you follow this approach okay now let's jump to the second trick very very very useful very common again what you can do is whenever you are searching a class let's say margin bottom like mix width or any utility class you are searching you might be typing it like this so so max with uh let's say small right but what you can also do is you can just type like very few letters of it like m a v i w i f u so you can see it already kind of searches it for you so you don't really have to type it type the full thing so that's kind of very helpful so next time whenever you are searching utility class just type the first letter first two letters of it so let's let's try shorter there we go I just type MWF so max with full right and it is already showing me the results so yep let's try something else so margin bottom so m a r b there we go m l margin large very useful trick again let me know how many of you actually knew about it okay uh the next tip it's not a a trick the next one is a tip which is about naming your classes I have seen uh in many builds we also did some Live reviews as well of Client First websites I came across many Client First websites uh the thing is with client first you have two kind of approaches which is one is like more Global approach or semantic approach you can say where your the classes that you are having you are naming them globally there is no like a specific uh you know the classes that you're naming is not a specific to a single element on a single page they are kind of global the the reason is so that it can be used right so again you have two options either you can make your website uh like less Global if you have less Pages it's fine but again making your site more Global with with right naming is uh actually more useful and more helpful I also uh like that approach personally naming things more global so that you can reuse them right for example uh let's say we have these cards right so these cards are telling me let's say uh features cool so features itself is a very Global name you can reuse that on stats features and any other thing as well so that is kind of fine but let's see for example uh let's try to find an example here yeah so for example this card is getting used here as well and here it is it is saying blog list and let's see what is what is uh it's saying here okay here it is saying home about item so this is this is this is actually a perfect example what I was trying to uh explain here so you can see in this case the naming is correct it's I'm I'm not going to say it's incorrect naming but the thing is because I have named this one very specifically home about item right so kind of I'm kind of restricting that section to the the homepage and about section instead of naming it like that what I can do instead is uh again just disclaimer this is not the wrong way but you can choose a better way so instead of naming it like that you can simply name it like features card features underscore card so feature card underscore item right and same thing you could reuse again right here same goes for uh other things as well let's let me give you some example for example some s we have let's say this one let's let's see what is the name of this section okay it says sermon featured right so here sermon is I think a very specific thing instead of sermon I would just call it featured again a very Global name so I think uh the tip is here actually going to be choose a global global or more semantic name so that your website becomes more scalable let's say I will simply take a create a section for example here and I will just copy this section for now this is having a older layout but it is fine for demonstration we need to do some live builds with the new one as well there are not like major updates in the structure some nesting changes and all but still we could we could do more life builds uh sometime okay so for example let's let's take a div block and I IM and uh Rich Text for now there we go instead of naming it like about let's say this is about section so I will name it like home about home about grid right so many of you might name it like this because okay you are thinking about the purpose of it it's about section it's present on the homepage which is a nice way to think about it but instead of naming it like this what you could do is you can uh name it more General so let's first go with this approach and then we will kind of uh rename it because that's the another trick as well so let's simply follow along so here we have home about and then home about image here this will be home about rich home about rich home about content anything generally we have rappers as well but for this demonstration I'm not taking a rapper I'm simply adding it directly there okay let's see 100% there we go let's choose the image just like that nice now now okay so the section is ready instead of naming it like that here it's perfectly fine now we are going to name it to something Global right so for that uh again we are going to use another tip tip which is using fin extension if you're not using fuit extension uh you definit you are actually missing out on some of the features that you can use on a client first website so I will simply use the client first uh sorry insert extension to rename uh my my component which is home about grid so let's see home about okay so the folders will be present here there we go and I can simply rename it click here layout layout to call so I can whenever there is a two column layout I will simply use that so I'm changing the uh complete component name click save changes I'm ready okay guys so here you can see now my section name is more General so again that tip I would say try to be more Global so that your website is more scalable even if you have let's say one or two page you might need to scale them later right so try to be more Global I would say Okay so the next step is going to be about using fluid responsive generator and this is again a client first step for all the website that you make with client first I will highly recommend using the fluid responsive generator for it and what you could do is you can open fin extension again go to fluid responsive generator the thing is it will make your website a little bit better in terms of responsiveness uh I I think I did share this in one of my previous CSS tip video as well but again quickly I will quickly cover up here as well in this session so uh for example here when you go to smaller screens your website is kind of fine but still still it can be better for example here on the smaller text size you can see some of the text might feel a little bit congested a little bit compressed you know so what you could do is you can use fluid responsive generator to make it better uh in terms of responsiveness so yeah it depends on website to website but it definitely helps a lot in all the use cases so I I kind of add this by default on all the projects as a launch checklist when I'm finishing the project I make sure to add this uh to all the websites so what you could do generate the code copy it like this again you can change the values as you want and if you want to learn more about how you want to use the fluid design generator I think you can find uh videos on our Channel as well but again the the the fundamental is very very very basic where you are changing value of one R uh using CSS so here is how you do it it generates the code for use you simply copy the code you go to go Global Styles and simply paste the code right here once you have pasted that you can see uh it become it became better in terms of responsiveness not only with the desktop is smaller sizes but also for the tablet for mobile landscape and also for mobile uh yep so that is another tip using fluid design fluid responsive generator on all of your client projects or of your client first projects okay the next tip is actually very very useful as well you can create section templates and Page structure templates so for example here I have 10 sections right I want to add a new section so for that what I will do is generally I will take a d block or a section block then I will go here I will name it like this so for example section uh um section let's say features there we go just like that so I'm just moving it here for now then I will just try to uh like create the whole structure right for example here we have the section structure that starts with page padding container padding bottom uh then rest of the structures as well so yeah so this is this is the default approach right so let's say take our page padding just like that and then again in this particular website we have the structure like that but if you go to the new documentation you will find we have this class which is padding section and the size of the section padding that you want and you are basically adding it directly to padding Global instead of creating a separate layer you could possibly create a second layer if you want to but again uh based on the experiments we did we tested at a a lot it makes sense to kind of merge them it kind of helps reduce a little bit of nesting there so why not let's do that this this particular section uh class might not be available in this project because this is older project let's see yeah this Bing class is not available which is fine so I will I will for now simply use this structure I will just copy this structure here just for the demonstration because it's not really about the nesting the tip is not about the nesting it's about uh creating section templates so simply copy this old structure for now here and let's go up to this point so container medium padding bottom generally we add kind of a section padding here as well so section padding might not be available here as to yeah this is a very old project so let's see pading vertical for example okay let's assume this is your section structure section padding container uh this is Page padding now we don't even have this class and heading vertical so whatever your section structure is in your project it doesn't have to follow this one what you could do is simply create a component out of it and call it section template or section starter template right and just to be more organized you can have some kind of naming convention uh for this right so for example what I do is I have let's say section is structure like this section structure and then with a kind of line separator I add here what this is this is a template just like that I created and now uh you can actually remove yeah so this is this is what you have and now whenever you want to create a new section simply just search the template so you can just type this have the section and simply unlink this thing so unlink the instance or control shift a and your section is ready you just need to rename the section that's it you don't have to it's kind it kind of saves your time right so this is how you can save it in the very beginning of the project create a section template similarly create a page rapper template as well by that what I mean is let's say I will create a new page let's let's create the P rapper template first so I will have Global Styles Navar in it main rapper inside main rapper I'm not going to have any sections because whenever you start building a page you don't generally have any sections inside that and then you have footer inside that so let's said the footer that's it and now this is going to be my page structure template there we go now when I go to a new page create a new page I will call this a test page and let's create it so you can see it's blank I will simply search your page structure click that click enter and just control shift a to unlink the instance and now I can simply start adding section template you can see already this is like very fast and sorry there we go my section is here my page is here I can focus on building faster now y so again a great tip you can always do that the next tip is about using potato extension uh a little bit about potato extension is that potato extension I created this for experiment like I wanted to learn about extension help fin Suite uh and contribute my ideas and everything so that you know our extension can become better so what which like all the features that you see here may eventually come you can see them on fin extension or you can see them maybe in the fin app itself that's not finalized where you will see them but for now you can use potato extension because it genuinely helps you you to uh build faster with L first let me show you how okay so you can install that extension uh from official Chrome store so just search potato extension for B flow I have never recorded a tutorial in that that is also pending from my side but again I can show a few features that is helpful with client first because this session is focused on client first so here is your extension you can install it from here uh there are already more than 1,000 users so a lot of people are using it and it is definitely helping them uh yeah to build faster someone has commented nice food I'm not sure why but okay let's come back to the session again come back to the site and what you need to do now is I don't really have a user interface here uh in the potato so it's just a potato chilling right there you don't have anything there when you click on it nothing happens to enable all the features you have to click on the uh extension itself uh that is present in your your website so what you need to do is basically click on the extension and enable the features by default they will look like this so you can simply enable all the features all the features that you want to use I'm not going to explain all of them but just the ones that is useful in client first okay so just enable them click update features and it will refresh your designer for me it's already enabled so I'm not going to enable it again and now you can see the last last feature which is called class name helper for style systems and you have a trigger type which you will see what what it means and Trigger key and Trigger type and so initials when focused so whenever we are building a a component let's say I having a form and for now let's simply uh have it like this and now let's let's let's say I want to create a contact form right so contact form component nice by default your approach will be to go to the form like rest of the elements and again type it here like that so contact form and then you will type maybe block or rapper right so you are spending a lot of timing in naming things again here you will type let's say uh generally the inputs are globalized so you have formore input or form Dash inputs like that you know so like you generally have them like this so formore input but let's say for this particular example it's it's contact form it's very specific to the contact form the input itself so you have contact form right you you can see that I'm kind of spending a lot of time typing here again and again right one thing you could do is you could copy uh what you are typing so for example you are typing contact form input you can copy it like this and whenever you are typing a class you could paste it but again that's I think it's not also the the most efficient way what you can do is instead using potato extension you can see that when I'm focusing here it it kind of shows me a placeholder you will not find that inside your designer because uh potato is not there so what potato does it it kind of uh it kind of detects what you uh created before for example I created contact formore component it saves it in a variable so that it can so that when that when you are typing the same thing in more components or when you are creating like more elements from the same component you can type the name faster let me show you so for example I was here contact form component and next time when I go to contact uh the form rapper itself first it will show me the initials that is what this checkbox do if you turn this off you won't see you won't find the initials there the feature will work itself but but keeping it on kind of shows you you know what what uh potato will kind of put there for you so now what you need to do is you need to click shift and it will type it for you that's it and now you can just type uh the form itself like that prer okay let's see the label you can see how fast I can type it there we go uh please ignore the typos submit here we go and let's say it also works with folders so for example let's say you have two levels of underscore this is contact form messages underscore success let's say for this example when I go to error message and I hit shift it takes me to the second level so I can just type error here that's it so this is how you actually can use potato extension and it will name it will help you name your classes faster with C first what you can do is you can also change the trigger so instead of using shift you can use Arrow up arrow down arrow right arrow left so you have five options and you can also uh trigger type you can have a trigger type to key press or key release what that mean is when you are here for example and as soon as I press shift it will just put the text right away it will need it will not for me to kind of uh release the key itself so if you want it to work on release you can kind of use uh the second trigger yep so those are the options that you have let me know if you find this option useful feel free to use that and share your feedback about potato extension you can directly DM me about extension if you find any issues or if you have any other suggestions that can be improved in this thing okay now uh one more feature that is again useful in the client first um yeah system which is which is uh like converting pixel values to Rams with one click so let's say you take a div block there we go and I want to have this div block size to be 500 by 500 right so what you generally do is type 500 divided by 16 rep so now what you need to do is simply type 500 hit a space bar it will convert it for height 500 space bar converted right away let's go to spacing so I will type here 100 and space bar converted again 100 and if I press shift plus a space bar it will add it to all the sides and convert it at the same time and if I press 100 uh Control Plus space bar it will add it to the opposite sides so again you have that feature here uh it kind of works with all the input Fields available even with the text let's say I want to make it 24 pixel 24 space bar converted uh let's add some radius maybe 20 again 20 space bar converted to times so again one more way to create websites faster with client first and not worry about repetitive things you things that you are repeating again and again okay nice uh another feature coming from potato extension is uh copying SVG code so in Client First you might have seen that what we generally do is we take a Ed let's say I want to add icon here I will take a embed like this there we go and what I will do is I will go here get a SVG open the SVG then I will copy the code like this paste it here just like that and then I will make the width and height 100 make sure to not put Auto here guys because when you put a height or width to Auto it is going to struggle in iOS devices so always make sure to put 100% 100% width and height okay uh again an additional note or a tip yep fill I will put current color so this is what you need to do and hit save and then you can just name it anything you want like icon one uh one into one medium and uh here is our icon now I can simply change the color of it like that okay so it's not changing because there is a field present right here as well I think I need to do that here we go and now you can see the color is changing when I change it but uh again you could see that it took me almost like maybe 20 seconds to do this or maybe 10 seconds if you are fast but using potato extension you can directly copy the code without leaving the designer so just take the let's remove the Ed code from here so when you open the asset panel and you click on settings you will see a few different options here one of them is copy SVG code when you copy it it already copies the code made modifications that is needed like 100% 100% current color you just have to go inside the embed and paste the code that's it as simple as that so again the whole purpose of these features is to make your workflow faster with client first now let's change the color of it and you can all see it's working if you don't want to copy the code it can be even faster what you can do is you can copy the whole Ed with the code so instead of that click copy as HTML embed it will copy the whole code with HTML ined and just hit control+ V command V paste in your designer and it will will paste the Ed with the code itself the name will be potato embed that you will have to rename or kind of remove that's the only thing like that there we go by the way there is one more uh cool thing that you could do is actually what you can do if you have relume extension installed and there is a feature here called SVG icon converter which is enabled by default so what you could do is you could go to your asset panel copy the SVG code and instead of pasting it inside an ined just paste it directly on your project and a popup will open from reum uh it happens to be working together you know like we did not decided it together but how relume extension works you know like potato is kind of making it uh like they are shaking hands here to make this thing possible so you you need to have both the extension in order to do this now you can select the size medium click confirm and it will end for you that's it so yeah uh again very fast and efficient way to add icons uh one thing I would say guys is to always make sure to add your icons in the asset panel I have also done this many times where I'm directly copying the code from figma or any other sources in the website and I'm not importing those icons in the kind of wlow but it's generally a good idea to keep all the Assets in wlow because whenever you need them you don't really have to find it figma or other resources you will always have them inside your uh we flows asset panel so yeah make sure to always put your icons and any assets that you're using inside the asset panel copy it from there as simple as that one tip is uh whenever you complete your project whenever you complete your V project for a client or yourself always make sure to go to style guide and add all the like colors any additional utility classes and make sure that your style guide is ready based on your website because generally uh I have seen a lot of people doing this they have a beautiful website they created it using client first but their client as their style guide is not updated uh and not reflecting all the elements that is present on their website so it's generally a good idea to keep your all the elements updated in sty guard as well uh because again when you will be scaling it is going to help you let's say for example you have some new form elements you have form input classes new combo classes elements you have more back you have more color pets simply come to your style guide update keep it always updated so that is tip for Client First okay another tip that I think I will share is about CLS which is cumulative layout shift so that happens generally when your browser is kind of trying to calculate calculate uh the the place where image is going to load and the the amount of space it is going to take so if we are not telling that space amount of space or Dimension to the browser what it does it creates jumps in a page which is called CLS right layout shifts So to avoid that what we generally do is we go here we kind of add width and height so for example this one is 500 by 250 so once we do that this is like inline width and height added directly to the image element so now browser will know this is the like amount of space that is going to be taken by the image and it is going to avoid the CLS there is now one more thing you could do because now we flow have the aspect ratio instead of using this if you don't want to use that you can use aspect ratios because that is also going to do the same thing so let's say for example you have these cards right I think these are using uh background images which is fine let's let's try to find another example let's say I have an image there right let's take image and I will call this uh blog blog card image like this I will make this 100% withth just like that and now I connect this to CMS I'm not sure if there is images there but let's hope okay there are images cool now what you could do is instead of giving it a width and height here it's fine you can also instead do go to ratio and add the ratio whatever ratio you like so for example I want to make it one ratio one for all my blocks so maybe let's make it landscape okay and I can then click on fit and cover it let's make it maybe Square now when you set a ratio it is also going to help you with CLS again having uh width and height is a good practice because for in this case you can add CLS right but in this case you can add aspect ratio but in some cases you cannot really for example this one uh you might want to have this completely flexible right you don't want to have a fixed ratio you might want to have a longer image like that so in that case not you don't use aspect ratio use width and height in line withd and height to kind of avoid CLS so for example this one again uh a small feature from potato extension you can instead of typing it manually you can click on ADD original Dimensions it will add it for you just like that and uh now now you can actually go here and make this image on cover like like this so now the browser will know that okay this much space is needed for the image so it will reserve it and avoid the CLS issue so that was it for this video guys I hope you all enjoyed the the video please uh leave all the comments if you have any questions leave that in the comments make sure to like the video If you enjoyed this type of content and if you want to see more of it feel free to drop your suggestions and also make sure to subscribe the channel so that you are updated whenever new videos comes out in the FY Channel okay guys this is haral signing off [Music] bye-bye

Channel: Finsweet

Views: 2,071

Keywords: webflow, Client-First, clientfirst, Potato Extension, Relume, Low Code, No Code, CSS

Id: 6oPVBnnu5hg

Length: 45min 31sec (2731 seconds)

Published: Mon Feb 19 2024