How to setup a boilerplate with Utility Classes for Oxygen websites.

hello and welcome to another tutorial today we are going to be taking a look at how to set up a boilerplate with utility classes for oxygen website um what is a boilerplate if you have a couple of website projects that you work on on a regular basis you find out that it is painstaking to repeatedly set up you know your wordpress installation each time you want to do a website so that means you have to you know you know install your plugins do all your set up everything that you always do you do the same thing each time so it is not really a good practice um there was a time i used to do like that any time i want to build a website i would just start with a fresh wordpress installation and then i'll start installing all the plugins that i need to do and then open up oxygen to set up everything i want to set up and i do that process each time you know i want to build a website until i got to find out that um wait a minute this is this isn't productive at all you know it's it's this uh waste a lot of time and uh it just makes you you know do repetitive tasks unnecessarily so the best solution for that is you know to set up a boilerplate what you would you know call like a template a boilerplate is kind of like a standardized setup or method or a procedure that may be used over and over again without making you know major changes to the original you know setup so um you use a boilerplate you know to increase efficiency to increase the standardization in the structure and design of your website so let's just um start so what i normally do is what you typically want to do is maybe you have um you know a wordpress installation it could be local it could be online but the most important thing is for you to have a wordpress installation okay so the first thing the number one thing you know we're gonna go through like seven or eight steps you know to setting up this boilerplate and so um the first step is this you install all your commonly used plugins so that's the first thing you're going to do so once you set up your wordpress installation you put in your commonly used wordpress plugin so here i have this installation and i've installed you know the plugins that i know that i commonly use not all the plugins i use each time i build a website but the ones that are common to all website for instance some websites don't have woocommerce you know so i don't install the plugins that are related to woocommerce okay well maybe except since i'm using the oxygen sandbox you have this element for woocommerce but typically um since not every time you know it's not all the website that i build that has a woocommerce feature so i would typically not include that in my boilerplate alternatively you could have two sets of boilerplates one for general you know and then the other that is specifically for um what for woocommerce so you have a woocommerce boilerplate so you can install the woocommerce and everything that comes with it all your add-ons that has to do with woocommerce so here i have an advanced custom field um and custom fields pro depending if you have the free version if you don't have the pro and then you i have the custom field all these you know plugins that i need you know i use for my website hydrogen pack is always one of them auxiliary extras is a must well i wouldn't say muscle but these plugins are it must have for me you know i have worked with oxygen without them and and then i've come to find out that they make my work beta swiss knife and all so um then this for me is a must the oxygen navigator that provides these shortcuts okay so that's the first thing number one install all commonly used plugins and the second one is i do is i make sure i install code snippets so um now i installed this plugin called code snippets now if there's any code snippet that i would typically use in all my website i just drop it there in the boiler plate okay so that it would always be there you know any time that i need you know to you know do a new website that's the second thing the third thing is to create command template so let's head over to template okay so under oxygen template so um what i'm going to do is i'm going to add a new template so in my boilerplate i want certain templates to be already created okay not all like i said um if you have a woocommerce boilerplate you could create templates for woocommerce pages but for the general boilerplate i'm not going to create woocommerce i'm just going to create the main template and uh and that will be catch all so i'm just going to publish that and then the second template that i will add is the 404 template so um those are the two you know templates that i would put on my boiler plate okay um the main template and the 4 4 template and that's because every website would need a main template and every website would need a four or four template and then you could go ahead to create other templates um for you know the blog post and the blog archive you have a lot of templates you can create you have single blog posts pages in our content and also there are a lot of you know other um templates you can create for instance not every website has a blog page you know or a blog you know feature not every website has a search feature so i'm just going to leave it at these two okay and then i'm going to go ahead and set up my main template with the header and the footer that's the next step all right so i'm going to go to oxygen template and then i'm going to click to edit my main template so i'm going to go edit with oxygen then the fifth one will be we look at configuration of the global settings in oxygen okay and then the sixth one will be creating utility classes for the boiler plates that we will always reuse and the seventh one will be exporting a boilerplate so that we can always import it into another wordpress installation all right so we are here at the main template the first thing i'm going to do is i'm going to drop a header builder now if you don't want to use a header builder you can drop a device section depending on what you use to build your website um and then i'm gonna drop the inner content it is very important to have an inner content and so that you can always you know inherit this um this main template and then i'm going to drop the footer which of course i want to make it a section and then um just for the purpose of visual um representation i want to add maybe just a color to different for the the color on the header and also for the footer okay all right now um so i have my inner content i have the header and the footer okay now the next thing i'm going to do is to give my footer a class this is what i would like to be in all my sorry i made a mistake there i'm not supposed to put that dot now i'm going to give it a class of footage this is what i want to be in all my installation so i can set up my footer to stay at the bottom and then i'm going to go ahead and create a style sheet so i'm going to add a style sheet i'm going to call it global and then in that style sheet let me change this themes in that style sheet i'm going to um set up my template in such a way that my footer would stay at the bottom irrespective of the quant the you know the content you know how much content i have in my on my website so i'm just going to just quickly write this code html html okay height 100 okay and i'm gonna write another one body display flex all right body display flex um we're gonna write the legs direction i'm going to make you 100 all right so that sets up you know the body css for the body and then i'm just gonna put my footer um margin top auto so that is the css i want in my global style sheet this is the standard css i use for all my website to make sure that i drop that footer at the bottom so i'm just going to go to the front page and take a look at it if it is okay so you can see that my footer you know is right here at the bottom you know and then without any unnecessary scroll bars so now that is it so i've set up the header and the footer of course the reason you can't see the header is because there's really nothing inside and that's fine i don't need anything to be inside but of course in my template when i come into the main template i will see that i have a footer now the second thing i'm going to do is to configure the global settings so i'm going to go to manage settings global styles the first thing is to set up the global colors okay so um in setting up your global colors you have to realize that um you're going to be using this boilerplate for different websites so and the different websites will have different colors okay so um for instance the the particular company's color would be red and maybe orange okay maybe in yellow so in naming your colors you really want to be careful how you name it you don't want to because in oxygen once you name a color you cannot change the name of that color so you want your naming convention to you know to be generic okay so you could use like a primary color okay and then in this primary color i'm gonna choose maybe something like this red okay and then i'm gonna add it okay click add color and so you have the primary color okay and then i'm gonna go secondary color okay so that will be the secondary okay and and then i'm gonna go orange on that okay i'm gonna click add color and then add a third color i'm gonna call it accent color okay and that will be maybe my accent color so depending on now this will depend on the company you're working for the website um that you're working on they'll provide you with the colors that they have so let's just say i want my accent color to be something like um a very light cream color okay something like that and then i'm gonna add that and then you have your you know um maybe you have your light color themes maybe you could call it you know accents uh lights depending on what you want to call it you know just the naming convention has to be just generic okay and since you can delete colors you find out that you know if you have an installation that you don't require as much color scheme okay that means you would not need that color scheme and you would simply delete it but for the ones that you already have you know you just need to go in and change the color since you already have that labeled out as primary secondary and accent okay so so that does it for the um the accent color so i'm just gonna um save what we have so far the second global setting we're gonna deal with will be the fonts so you're going to select you know maybe the default fonts that you want for all your installation personally i always try to i always use pop-ins for my default fonts okay and then for my body i'll go for roboto so those are my default installation okay and then you can choose the the weights that you want available for you are the ones you want to be loaded okay so you want to load maybe just a few font weights so you could choose some of them so i go with um 700 um 500 and 300 so you could do that with you know any of these so i would just leave them is that is left for you to decide okay and then the next one is what you really would want to spend a little bit of time setting up is your headings okay so i'm just going to quickly save this now once we start setting up the headings and uh you know making up i'm setting up some other utility classes we want to be working within a page okay so i'm going to quickly go back to the admin okay and uh and then i'm going to go use um go to pages and then i'm going to use the sample page okay so let me edit that and uh all right so now um by default it uses the main template of course we have some content here so what i'm going to do is i'm going to edit it with oxygen so we can continue our setup okay so so right now what i want to do is i'm just going to add heading okay so um before doing that i probably would like to just um set up some things okay so um i'm gonna add a section okay and then i'm gonna drag that heading inside that section all right and then i'm going to duplicate that maybe like four times let's so i don't want to waste time with you know all the headings so i'm just going to go from h1 to h4 so i'll choose h2 h3 h4 okay so we have this heading so i'm going to open that um setting global styles heading so we have our headings here in pixels so um what you want to do is so you want to set up your heading to be a bit responsive okay so you want to set up your default heading so so that if you have your you know small screen size your headings will adapt so the first thing you um there are different ways you can do this you know you can use um different kind of adaptive and dynamic size css um you can you have the clamp you have the the vh unit you have the v max and all so we're going to use vmax so far h1 i'm going to go to none and then i'm going to start with 5v max okay um that is too much okay so 3v max so you just want to look at what looks good at this screen size and then you know that once you bring it down it's going to adjust okay um and becomes small so okay so that seems fine so um um very much okay with the font sizes okay now if i wanted to a bit bigger i could just go with maybe 3.5 okay and then and then you can see that it scales down appropriately um another thing i usually like setting up on my header is the line height okay so you can see so i go to where that line will break into two so i can see how much of a space you know i have this so my line height i typically make it 1.2 okay um so that if i have it break like this it'll have some decent spacing not too much not too small okay now so you repeat the same process for the h2 okay so for the h2 i'm going to do this and i'm just going to copy this and then set it to none and paste it and of course we're not making it 5 because the h2 so i'm going to make the to let's say 2.4 okay now what i typically do is if i want it to be the same size it was by default uh i would just you know remove that okay and uh you know just um see how it was before okay like 30 pixel and then i'll compare that to what what i have okay so and then to see you know what the difference in size is because i would sometimes i want it to be the same size on the desktop as the default and then but i wanted to go you know smaller as we go down the break point so that is um 2.4 v v max for the h2 and then of course you can set the line height but i think the line height was quite okay here so i don't have any issues with that and then we do the same for the h3 okay and then i'm gonna set this to none and then i'm gonna make that um from two point four i'm gonna make it two okay so that's two i'm okay with that too with the way it looks okay and then for the h4 i'm gonna paste that also then in this case i'll make it maybe 1.6 okay or 1.8 all right so um everything is properly adjusted depending on the viewport height or viewport with you are viewing it okay so that is it for the you know the heading you could add more and make adjustments as you know as you find necessary the next thing i'm going to add will be a text okay so let me just populate it with some text all right and uh uh when it comes to the text i'm usually very okay with you know the sizes across the viewport you know i typically want my text to remain the same size you know on the large screen and the on the small screen also okay so um if you want to make adjustments to that body text okay to be responsive maybe you need it to be a little bit smaller on the smaller break point you could go back to body text okay and then you could set the size for this i'll typically recommend that you use maybe clamp okay um clamp would probably work better because if you use a let's make this big yeah let's say you use one v max okay maybe that one was too much 1.6 1.2 okay say you have 1.2 and you're okay with the way that looks so you can see that it becomes very small here so i would really not recommend vmax for this okay so for this i would recommend using um like one rim okay and that one frame is just equals to you know the maybe typically 16 um 16 pixel and then maybe um for the small screen you want it to be uh maybe a little just a little bit smaller than one way maybe 0.8 for instance if you go to the small screen now if you want it to be like maybe 0.8 okay just like that so you could just go to the clamp calculator all right and set it from you know point eight a21 okay that's from the smallest unit to the biggest unit and then you can now copy that style that is generated okay and then you'll come here and just paste it all right so it would dynamic dynamically change depending on the um the viewport width and one thing i found is that if you wanted to start exactly at let's say um one you might want to bump this up to maybe just just slightly up because it's not it's going to be a little bit smaller you know the calculation is going to make it a little bit smaller so you might just want to make that um slightly higher than one okay because at this viewport with what we are seeing here is not up to one um ram okay so yeah so bumping up to 1.2 just makes it a little bit more um so that is um setting up the text now the next thing i'm gonna set up will be the width and breakpoint typically i like changing these values and the reason i like changing this value is this now take a look at this this is 992 tablet and then this is 768 you know landscape okay so now the tablet is 992 pixel but if you go to your website and then you go to inspect and then you go to your ipad you see that your ipad is 1024 and then the the portrait is 768 okay you go to your ipad pro you can see that it's 10 24 okay so um i usually like to change this so typically i will set my page width to maybe 1200 i really like it to be 1200 and then my tablet i'll set it to the 1024 and then for the last cap i like keeping it from 800 and then this can remain at 480 okay and then um i'll save that the next thing we're going to look at um is the column so i'm going to look at the section and the column and by default columns have a 20 um 20 pixel padding all around now you might not want that in any of your installation because they make sometimes make it difficult for you to you know control spacing so you typically want to make it you know keep it at zero you know for all of them and then the next thing for the section you actually would want to have your paddings for the section but then you want it to be responsive also now if you take a look at this section it has 75 pixel padding up and down and uh you want to make sure that that is responsive now if you go to this you find that it's still 75 and you know for a mobile viewport it is too large okay now you could also use v-max so i could say um let's let's just say let me let me keep this at maybe five okay how is that okay so that's just about you know so if i make it like 5.5 that's about the just about 75 okay and then if i go all the way down here so you can see that it reduces okay but while this is still 75 but this has reduced so now you can use clamp also for that but for the purpose of this tutorial since we want to save enough time as possible i'm going to use v-max for both the up and the down okay so make sure that you choose none before you write the v max the same thing applies to clamp make sure you choose none okay so we have the different breakpoints we'll have you know a responsive um padding okay for the section and then for for the for the side padding okay that's for the left and right um sometimes you might want to just leave it the same way but sometimes you might want to you know make it responsive to depending on your need personally i use clamp okay now this is 20 and that is about um maybe one point something ram okay so i could use that or you could just decide to use v-max so depending on what you want um most of the time you probably want to leave it because it's still okay the you know the size here is still okay but if you want to have um the situations where you you want to have you have a containers um with its own padding and it's going to be too much to have additional padding from the you know from the section that is one reason you want to have that so i'm gonna keep it at let's say one v max okay um let's see how it is okay that one v max is a bit too small so you adjust it depending so all right so you have 1.4 let's go down so you can see it's just much smaller than what you have on this side so we could just copy that and then paste on this side so you can see that you have a decent padding that gives you enough room to you know have a padding in a container if you have a container the next um setting we're going to look at is the animate on scroll so um if you want to set a standard you know animate on scroll type maybe you want it to always be fit up personally i i don't touch this until i'm working on a particular side depending on the need so so i i leave that you know open and then for the script i usually um check this and then set this to 400 okay then the scroll offset i will leave that blank all right the next thing we're going to do is to set up our utility classes and for that purpose i'm going to populate um the editor with some content and that will enable us to create a utility classes so let me add uh let me take away this section okay i'm just going to remove that section and let's save what we have done so far okay i'm going to add another section okay and then i'm gonna add a diff okay and inside that diff i'm going to add one div so i have um i have a div i have another div inside here and then inside that second div i just want to add maybe a heading uh a text and a button okay all right i'm just going to call this um okay so i'm just going to write something and then the block of text i'm going to just copy lauren if soon okay all right okay so um and then for the button i'm gonna just say click here all right okay so that is gonna help us set up um a utility class and i'm going to i'm going to duplicate um this div okay and then i'm going to do something different for this one i'm going to give it um change that to h2 okay i'm just gonna write something like our features okay with switz um you know some text and with um some on the bottom let me just change that okay so um so now the first thing i'm going to do the first thing i want to do is to set up a simple css grid utility class now this is gonna be now this is gonna be a very simple css grid utility class okay um i'm gonna have um three of them okay so i'm gonna duplicate this again all right so i'm going to have three of those utility classes okay let's set up the first one for this one i want to set up a simple four column grid layout so i want to add a grid layout that shows four grids okay i wanted to show four grids and then two grids on the medium screen and one sorry four columns on the big screen two columns on the small on the medium screen and one column on the small screen so i'm gonna call it column four two one so this is my naming convention you could you could just come up with your naming convention i'm calling i'm saying um for i'm starting from this side okay one column here two column here and then from these upwards four columns now so i'm gonna select that div okay and then i'm gonna go to grid layout i'll set this to four and then i'm gonna set the maximum width to auto okay okay that's wrong okay um i selected this div instead of this so let me quickly undo that okay um all right so i'm gonna just close this so i can see what i'm doing now the first one will be let me i really undid that class column four two one okay i'm going to add that class and then i'm gonna select grid i'm gonna set this to four okay and then i'm gonna set the minimum width to auto alright so inside this div let me give let me give this man div uh a light background color okay so i'm gonna go to the background color and just select my that light accent color all right and then for my div here i'm going to make it white so that we can see what is going on all right so um now i've set up that grid okay so um i'm going to duplicate this just to enable us to complete a setup i'm going to duplicate this four times okay all right so i have four of that grid okay and then um i'm gonna throw in another utility class and then i'm gonna call that padding all all right so i'm gonna do it on the need basis okay that is why i put this as the need as we have need to apply you know classes and you know padding's imagine we're going to create different utility classes i'm going to call this padding all okay so and then i'm going to go into the section um size and spacing i'm going to apply a padding now i want that padding to be responsive so i'm going to set this to none and then i'm going to set that to 2v max and then i'm going to apply it to all so i have that padding you know for the primary container and then if i go to the small i can see that padding is still there okay but it's much smaller than it was so um depending okay you could create different patterns now for the padding it's usually personally i prefer it to be on a clamp so i'm going to go here and then i'll start from the minimum of 1 to 3 ram okay so that's for my padding all right so i'm going to just paste that here and then click apply to all so you can see that i have a big nice padding on the big screen but when i come here the padding reduces appropriately okay so now i have a padding that is my padding utility class now let me go back to my columns utility class so remember what we want to do is to have um you know these four sections up till these breakpoints okay and then from these breakpoints we want to have it two you know two grid two two columns not sections i'm gonna select this again at that break point and then i'm gonna say two okay and then minimum width still auto all right so you can see and then at this break point i want to adjust the gap at a smaller screen i want the gap to be smaller the default gap is 20 so i'm going to give it 10 okay and then i'm going to give it 10 here all right so my default gap here is 10 now let me go back to all devices okay here is okay here is okay all right and then here it breaks into two now let's go to the smallest break point you want that to be just one okay and then of course the width to be r2 and then the gap still make it 10. all right so we have a layout that is um you know adaptive okay to the screen size so we have this is a utility class so now if i throw in you know say another section sorry another you know div and i apply that class to it okay so i choose column automatically that class is applied to it um unfortunately we made a mistake like you can see we had a problem you know with that color showing up so um i'm going to delete that color from that class okay i i meant to apply that color to just that div only so i'm not i'm going to apply it to just the id okay so so so you have to be careful when you are creating your utility classes so now i have that utility class so let's say i drop in maybe an image okay so you can see that image takes up just you know one you know one column out of the four and then if i duplicate this three times you can see that it automatically adjusts okay to the breakpoints okay four and one with all the spacing okay that you want so that is it for that particular utility class okay now um i'm going to set up another column you know class now the next one i want to say that will be i want a three column layout on all screen size but one column on the smallest screen size so i'm going to delete this okay i'm going to delete that image so that i can use this to apply that i'm going to delete this class from that okay so what i want to do is i'm just going to add a new class coll 3 3 1. so what i'm saying is three columns on big screen three columns on medium screen and one column on the small screen okay so i'm gonna go grade three or two all right and then my paddings are still okay now for this one i'm going to set i want my div my container to be hundred percent you know viewports with by default okay um so yeah so i probably should have done the same to the other one but it probably doesn't really matter that much okay but you want a situation by when you apply that class even though you don't have enough you know item inside i want a situation where it automatically just stretches out to show you look you have stuff to put here okay so that is why i'm doing that and i'm gonna add that to to this one also i'm gonna add that to this um class also all right so let me add a hundred percent okay so that works everywhere properly okay so now we're on this so i want this to be three columns so i'm just going to duplicate that again okay i want this to be three columns so up till this breakpoint is still going to be three columns but at this breakpoint i want to reduce no the you know the gap so i'm gonna select grid here and then i'm gonna still choose three but the gap i'm gonna change it to 10 okay and 10 and then i'm going to set the minimum width to auto okay and then at the smallest breakpoint i'm gonna i'm gonna set it to one just one okay and uh minimum with auto all right and then the gap i like setting both of them even though for the raw height is what really the road gap is what really matters here but i like applying that to both of them so you can see that we have you know our three grids here okay and then when we get down here we still have the three grids but with smaller spacing and uh here we have one so um let me go back all right so we have our three grid here okay so if i select this div and then apply that three grid layout to it you see it's gonna quickly apply it all right and then i apply that padding to it you see what happens there and for this i can now take it and duplicate it three times and i have my you know grid responsive up to this point where we still have three of them okay and then for here we have um you know one one column each all right so now the now the third one the third column is going to be two two one okay so we want it so i'm going to apply that to to this i'm gonna apply to this um this div okay so i want it to be two on the large screen two on the medium screen and also and one on the small screen so um i'm gonna add that class col221 okay dash one okay and then i'm gonna make it a hundred percent width like the others okay and i'm gonna select grid two auto okay and uh let me quickly just duplicate that div inside it so you can see it gives us a two column div now i'm just going to give this a background to um the main div the background on the on the id okay all right well maybe i should just change that thing bluish okay and then so let's continue editing our utility column um grid class okay so um let me quickly add that padding oh yeah i mistakenly did something there padding okay so i'm adding that padding too just um all right so we have to okay so if we go here to up till this we're still going to have two okay then the last one the last one we will have one let's go to the last breakpoint we'll have just one okay so by default it's one and the width to auto okay so we have that class set up um so we see we've finished setting up the three um utility classes um and for for this one let me give this uh this background white so that we can see our spacing okay my we did not set up that that spacing at the lower breakpoint okay so i'm going to select that column two two one yeah and then go to the smaller breakpoint from these break points i want the spacing to be 10 like we did the others so i'm going to repeat 2 r2 and gap 10 and also here i got 10. so um you see if we select this div and duplicate it so we have a nice um you know gap spacing there all right so the next thing i'm gonna do is to add um a medium padding so we're gonna add so we have the padding all which is kind of like the big padding for the section and then i'm gonna select maybe something like this okay and then i'm gonna apply maybe a medium padding to it um so let me add padding m okay all right so what i want there is a medium padding so in a large you know in a big padding what we used was one ram to three so for the medium padding i'm gonna use um maybe zero point point eight okay to say maybe about two so something you know small enough um that if you just want to apply to maybe to as maybe a small card you don't want the spacing to be that much okay um you could just do it just a medium additional utility class okay so i will just go here and choose none and just paste this all right so i have a padding that is slightly smaller than this and will also you know um scale properly at a small viewport you know width okay so you can see that this is just slightly smaller so it's something that you know you might want to consider so you can have an extra an extra option if you want to you know add a smaller size you can always do that the next thing i want to add is the margins okay so um i'm going gonna add now you can see we have um we have a dv and we have another div here we have another div here so let me give this div a color so we can separate them okay give it a color let's make it different all right okay so now um i want this div okay i want to have maybe a margin bottom okay so we're gonna sit we're gonna add three three um margin utility classes we're gonna have the margin bottom large margin bottom medium okay and we're going to have the margin margin bottom um small okay so what we're going to do is we're going to use clamp okay still to do that so we're going to start with a minimum of 2.4 for the for the margin bottom latch so i'm gonna so because you want you want to have those large spaces between your sections or you know between the sections that all the divs so i'm going to just go um margin b l so that's my margin bottom latch okay and then i'm going to go to size and spacing i want to use the value of 2.4 to 5 okay so um two point four to five and how do i know that of course um i probably have done this before so i know that that will work for my big um for my big padding sorry the big my big margin bottom okay so for the margin bottom all i need to do is just go to the bottom okay and then paste in that so it gives me a good nice imagine bottom okay so if i take that and apply to all this you can see so i have my nice uh margin bottom that scales also properly you know see it becomes a bit smaller here and then it's bigger here okay so i have my imagine bottom okay set up and then i wanna i want to set up a margin bottom medium okay so i'm gonna click here and then i wanna set up my margin bottom medium for my margin bottom medium i'm just going to set a single unit okay i'm not going to use clamp so it's just going to be a single unit that be the same on all screen sizes so um because i have you know found out that um margin bottom and i have found out that you know this margin bottom um if you if it is too small okay as long as it is small if you try using clam you're going to end up with very small margin which may not look okay but you could you feel free to play around with that but from my own experience i prefer setting my margin bottom medium with a single ram unit okay so i'm just going to give it 1.5 uh 1.5 okay and that is my medium margin bottom okay and then now for the for the margin bottom um small okay sometimes you have a very small like uh let's say you have um you know very small two small you know elements and you want the space with between them to be just a little bit just just a little just a little okay so you you want to have maybe the third one okay um margin bottom small okay and then for that one i use 0.5 ram okay so you see something that tiny okay so i just have it handy just in case i need to use something like that and notice this one i'm not using clamp or i just use ram units that's you know and if you look at all device size they're going to be the same okay um you i want them i want it to be you know the same now for these on the second thought you know looking at this this kind of look you know a bit a bit more than i would want it to be on a small screen size so if you are not comfortable with that okay you could just go ahead and use the clamp okay use the clamp what i did was 1.5 okay so you could say okay maybe a minimum of one okay so you could just go say 1 to 1.5 or maybe 0.8 okay let's keep it at 0.8 and then just copy that you know for the medium i i said i wasn't going to use clam but you know on a second thought i think i should use clamp for that medium okay so i'll make sure i'm on the medium and then i'll just go choose none okay and then paste that in all right so that should you know apply i think i didn't copy something okay so yeah there's a mistake there um that five is not supposed to be there i didn't delete it okay all right so so we have that so when you go down the viewport uh you can see it adjusts appropriately all right so the next one um we're gonna create will be now let me go and apply those paddings here okay so i want to apply my padding all to here okay i don't like it okay and let me remove it it's too much for for the fall so i'm just going to apply the medium all right so i like the medium okay so i could just add that medium to all this okay so you see the the usefulness of having more than one okay padding medium let's set it to here also so i can just hit m and uh i can just hit m and bring it up okay so i can just do that all right okay so um we have uh you know a text here and then of course let me add this margin imagine button medium or la not a large that's going to be too much margin bottom medium okay so i'll do the same here margin bottom medium okay all right so okay so i have that class applied here um and of course there are better ways to do stuff with cards okay but for now um that is what we we are doing okay why don't i just delete these ones and uh and then just duplicate that you know i think it's faster that way since we don't have contents all right so next thing i want to do is to add the border radius utility class so i'm going to add border radius now we're going to have three border radius large medium and extra i'm sorry four we're going to have small medium large and extra large border radius okay ace so for the border reduction i'm going to add class we're going to go to advanced borders and then we're going to give it five okay so so you can see it's um it's very small okay let me increase the let me let me increase this okay so you can see so you have you have a very small border radius okay i'm going to select the next one okay and then i'm going to go um create a border radius medium border radius m at class and then for my border radius medium i want to make it 10 all right so you can see it's just slightly bigger than this one now the reason i'm having in-betweens like this is um sometimes you want to add it to a button you want it to be just slightly more than what the default button has okay and then you want to have another one that you can you know add to cards and then you can add two buttons to make it rounded so you want to have border radius large okay so for the border readers latch for instance let me just um let's add that l add class for that one we go for 20 okay 20 pixels and uh okay so that's okay and then for the extra large there are times you need it to be extra large okay so it's going to have enough of them to play with so bada radius xl okay and then i'm gonna do the same thing for that i give it 30. all right so we have our three border radius okay so you could apply any one to you know depending on what what you feel like doing all right so those are the three border radius now the next um the next utility class and we want to create is one very important one okay so let me do something let me remove let me delete these um these columns okay and leave it leave only one okay unnecessary i really don't need to do that i can i can do okay let me leave three okay [Music] and then let's remove that class the column four okay from there and apply the column three okay all right so now you can see that um this button all these are you know aligned to the left um i usually you know like having a utility class that will allow an element to independently align to the center and that is the auto margin okay i'm going to create that class auto margin okay and now what this utility class is going to be responsible for is just to center an item so i'm going to give it a margin left and right auto so that's just it so whenever i have an element that i need to center on a page you know i can just apply the you know auto okay to it and that's it okay so i like having that class then another class i like having is um my utility class of transition now i want maybe transition for all my you know all my elements to be is in a set like to have the same setting so i can go to effect transition and just set my transition duration to you know 0.4 okay 0.4 seconds and that's all and i can apply that to any property okay so we're done with um the paddings and the columns uh and uh now i have one very very um useful utility class i usually create okay for my you know for my you know website so what i'm going to do let me just duplicate this column or the website the oxygen editor is just a bit slow i'm not sure if it is because of the screen recording you know um let me duplicate this so i'm going to delete um i'm going to delete this column this okay so i'm going to remove that class that three columns grid class and then okay so i have this okay uh let me just populate that with more text okay so now sometimes you have a text okay and then maybe you really don't want your text to be um to go all the way from end to end here okay you want it to be somewhere in the center now there are a couple of different things you could do with that um sometimes you could set a width you could set a maximum width and all um say okay it shouldn't be bigger than a particular you know with so but what i would like to do there is i like creating a utility class for it i'll call it um you know center paragraph text okay now for that class what i would do is i go in to the typography and click center okay and then i'll go into the size and spacing now give it a maximum width of 70 characters 70 ch sorry i have to choose none all right so so i've said that maximum now of course that's not what it's affecting this was not said to this div wasn't set to 100 okay so let me just set that div to 100 are you sure i'm not setting that all right so um so you can see that this um automatically reduces okay and and for a class like that you know i would like to add auto margin also to it okay so you wanna you wanna because sometimes you want that to be at the center okay and i want to automatically make everything you know center for that utility class okay so i don't need to add the auto for it but for flexibility sometimes you don't want it to stay at the center it all depends depending on how you want to do it if you want to leave it and manually add the auto margin utility class you can do that but since this class is specifically for text i i think everything should come you know inside that utility class the center settings for the page so you can see that it you know everything works well so so i set that to a maximum of 70 characters okay and uh and then so it can't go beyond 70 characters css unit you can check that out so that is another important utility class then um one other one i usually like doing is to set you know a style for my primary button okay so i'm going to set for my primary button now what i usually do for that one is that i usually set the color of my primary button to the primary color okay and then they hover so if i had maybe a hover color okay i said that and then i i go ahead to set um the transition for it so i want to have a transition on my on the on the class on that that class for the bottom okay then another thing i like doing for the primary button is to go to size and spacing and then add a left and right padding of 3m okay so i really like my buttons to have that so even at a small um you know viewport i still pre i still prefer them to you know to look similar nothing wrong with them so but if you like to make adjustments to yes you could use the clamp unit or you could just add you know something you know you could just come to the smallest you know the smallest viewport and just reduce it to like 2m okay so so you have your you know your bottom there or you could use a clamp okay for it all right so that is one class i like adding so if i come here now okay and then i decide to add um the bottom class okay all right so automatically so you you see that you have your primary and you know secondary colors so any website once you change that you know on the setting in any of the website you are exporting this boilerplate to it's going to automatically update on that button class now that we are done you know creating our utility classes okay we have set up oxygen um global settings we've set up our template the footer and all that you probably would want to take a look at your selectors if you if you want to categorize them maybe you want to you don't you want to to have all these classes in different folders because when you're working on your website sometimes you will create additional classes depending on these are utility classes you're going to create additional classes depending on what you're working on so you want to have this separate so you could you know add a folder and just call it you utility classes okay and then you can now select okay that's a bad folder name utility dash classes okay all right okay so i needed to put a dash no spaces allowed now you can select unfortunately there's no way to select all of them at the same time if i you know control now it doesn't select so you can select you know these classes okay and like this footer um i i don't i wouldn't i wouldn't classify this foot as a utility class i'm gonna leave it so you select and select the folder okay so you can see that it automatically moves that to that folder so you can just select this so unfortunately you probably would have to do that one after the other okay so um i'm gonna just just choose that so you could do that to you know add those classes to the folder um i really wish there was a way to just create these classes inside the folder or select all of them okay so you want to do this so that while you're working on your website you will be able to differentiate between your utility classes and your regular classes especially when you're coming to the selectors okay to check out something all right so we have all that you know categorized here so you don't mix them up with you know the ones that usually appear by default here i'm going to save that and we are done with our you know website okay um set up so um for more advanced you know setup for cards and styles i will recommend you watching a video by digital ambition how to properly set up oxygen so you have these um what he called out spacing okay where you you know set up you know a style that can apply to a card and that that will cascade you know down into the contents you know adjacent um sibling selectors to you know add spacing to the to the siblings so to the you know to the child you know elements of the of the card so you want to check that out at digital ambitions channel and you will learn a lot from it okay so now that we have finished you know um setting up our utility class so what next how do you move these all this from here to um you know to the to another installation okay so um first of all you might want to just delete all this since we're finished setting them up we don't need all these design we we're using them to set up our classes okay so i'm gonna delete this and then save and then i'm gonna go to the back end and let's see how we can move this from you know from this installation okay so we can always use it anytime we have a website all right okay so what i use is all in one wp migration that's what i use that's what i always use to move to migrate my website it works very well and one thing i'd like you to take note is that if you install all in one migration you want to install what is called all in one migration file is the extension unfortunately that is not available in the wordpress repository so you will have to go to their website i think i have something like that okay so this is import dot wpmigration.com so if you go here you're going to find that this is that you know extension so this extension enables you to you know import or export or to import file size that are up to um 512 mb okay so so if you go to import you're gonna find out that um you know in some in some of your setup you see that your maximum max your maximum upload file size is less than 512 mb so this enables you to be able to upload some any file size that is up to unless you know 512 mb or less but if you want something that is more unlimited file size uh you can get the premium you say 69 lifetime so i think it's cool all right so what i do is i go to export okay once i finish with my installation of course you might want to regenerate css first of all okay and then you go there and then you're going to export to file or ftp depending on which one you want or dropbox they have a couple of options here but i typically export a file and you know since it's just a template it's just a boilerplate the size is usually small enough 52 mb and then once that is done i just download it okay so i'm not going to download this one i just download it and then when i have a fresh installation the first thing i do is just go um what i do in my fresh installation is i just install these two um i installed these two plugins okay this and this they're all in one wp migration and the all-in-one migration file extension so i installed the two of them and then i use that to import my installation so i import from file and then i'll choose that installation and then install it and then i have my you know wordpress boilerplate set and ready so everything is set for me to start all my utility classes will be available right on the go so um i hope you learned something from this um this video and if there's any addition that you would have loved to see if you have any suggestions if you have other classes you would have loved to create please you know let us know in the comments you have any question let us know and don't forget to like and subscribe if you haven't and also share this video with you know with others um until i see you again have a have a great day

Channel: Design with Cracka

Views: 3,788

Keywords: Oxygen Builder, #Webdesign​, #PageBuilder​, #UIdesign, boilerplate, utility classes

Id: q4sio0FEw74

Length: 70min 25sec (4225 seconds)

Published: Sat May 15 2021