0:00:00
What’s up everybody welcome back to the channel I’m going to try to make this training quick because I literally only have 30 minutes and I have to leave to get to a meeting. But I wanted to get this recorded so you guys could see a change a big change well relatively big change that I’ve made as of late in my workflow. I basically abandoned style sheets inside of oxygen builder I’m going to show you why and then I’m going to show you the new process the new workflow that I’m using but here’s the questions that I will ask you. To get you intrigued would you like a faster method of writing custom CSS in oxygen would you be able to would you love to be able to see your changes in real time both in the builder and on the front end of the website without refreshing and would you like the ability to write sass and not just CSS not just vanilla CSS but full capabilities of sass and not only that see your sass live in real time both in the oxygen builder and on the front end I think the answer is absolutely yes and that’s why I’ve switched my process over to this new process which I’m about to show you right now so let me go ahead and dive in here. So I’m going to I’ll move slow so that everybody can stay with me I’m also going to not just show you this new workflow I will give you an introduction let’s say to two very basic things that are available to you in sass because for those of you who have not experimented with sass yet I would like to get you maybe moving in that direction and then I want to know from you drop a comment below if you want to see more sass tutorials so just say more sass in the comments below right okay let’s add a section here now this part of it I’m just going to whip up really quick I’m going to be using automatic CSS utility classes so I’m just going to do BG base ultra light for an ultra light background color of my base I’m going to add a div here and or we’re going to do is just quickly style up an article card but instead of using oxygen to style it and instead of writing custom CSS in the style sheet area. We’re going to use my new workflow method all right so I’m going to do grid of three here for three column grid we’re going to have a gap of M we’re going to say that on medium devices there’s one column and then I’m going to stretch to make sure all my cards are equal height. So just like that I have a perfectly responsive grid set up ready to go so I’m going to add a div this is going to be my article card and I’m going to give it the class of article card just like that. Now if you’ve watched my BIM tutorial you know how great BIM is and I will say this sass is like it’s like superpowers for writing BIM it’s really really awesome so you’ll see that as as we get there I’m going to keep my structure panel open here. Oh and I just remembered people have been asking me they’re like Kevin you’ve got to make your display bigger when you do these tutorials okay so let’s see if I can do this. Okay so let’s see if let’s see if that’s better let me see what our framing looks like okay yeah I think we’re all good okay so you guys should be able to see this better I am going to rename this this is going to be our grid and then here just so you guys can see the organization in the structure panel is going to be my article card and then what I’m going to do is add a div in there and that’s going to be my article card double underscore image wrapper. Just keep it nice and simple and then I’m going to add an image to that that’s going to be my featured image which I’m just going to call image for sake of brevity here article card double underscore image and then I’m going to grab my entire article card we’re going to add another div this is going to be the body so article card double underscore body and then inside the body I’m going to have a heading and I’m going to have text and I’m going to have a link. So I I’m a big fan of just quickly adding my elements to things and then I style it after the fact I just I know what elements I’m going to need and then I style it after all at once kind of you don’t have to do that you can do it either way you can style as you go if you’re more of a beginner you may have to style as you go just you guys okay see how things are going to work and come together but you know I don’t feel like you have to do it the way I’m doing it it’s just how I do things. Lately alright so let me change I don’t know okay I’m just not rambling alright so that’s my text did I add my link I don’t think I added my links I’m going to add a text link here excellent I’m going to grab this make sure that it’s an H3 and not an H1 and then I’m going to give all of these things custom classes so I already gave the wrapper a custom class of article card body I need to give this article card double underscore heading this needs to be article card text. And this needs to be article card link.
0:05:07
Okay article card link just I’m just keeping this nice and simple this thing is ready to style up right so I’m going to go ahead and hit save now I want to show you. The downside one of the reasons big reasons why I’m leaving oxygen style sheets behind so if I want to start writing CSS to style this now of course you can use the builder to style these things okay but. We’re talking about writing custom CSS we’re talking about the ability to use sass we’re talking about workflow and things like that so I’m going to do all of this with CSS really with sass and yeah just for the purpose of the tutorial so you guys can see the workflow. So I’m going to open the style sheets area and I want you to notice one thing when I do this okay I’m going to come down to cards here which is just blank but notice that it takes over like half my screen is like. Take it over with the style sheet and it shrinks the website view that I’m looking at down into this little column and if you’re on a smaller screen this is even worse but like it makes what you’re doing kind of hard to see the workflow in general is also broken here now it’s a little bit better in 4.0 then it was in 3.9. But let’s say I write a bunch of nonsense right right a bunch of CSS and then I’m like I actually need to go add more components for those of you I was just talking about you have to kind of add a component style add a component style add a component style if you’re having to do any of that with custom CSS you’re going to be bouncing back and forth a lot and here’s what that looks like you have to bounce back. Typically you have to get back into your structure panel for certain things maybe add an element move an element around whatever you’re having to do at that time and because you went into the structure panel you now are no longer in the style sheets area so if you want to go back to the style sheet to write something you’ve got to go style sheets and then choose the style sheet and then go back and if you’re working on a long style sheet guess what you got to do scroll down right find the area you are working in make the edits okay and then I got to add something. I got to add something else another element so you’re back in the builder back into the where’s my structure panel okay there it is back in the structure panel if you’ve got a long structure panel because you’re working on a big page you got a scroll in the structure panel and then you’re like oh kind of go back to styling all right so you go back to the style sheet where is it where is it oh it’s right there go back to here go scroll all the way down like it is insane the workflow is absurd and I’ve been like there’s got to be I need something better I need something better I need something better I need something better now I didn’t just want to use I could use something external for writing custom CSS but it’s not worth that much hassle to me if I can’t have extra superpowers if I can’t have extra capabilities but when the ability to write SAS came along and the ability not only to write SAS but to see my changes in real time not just on the front end not just on a preview but in the builder itself without refreshing the ability to write SAS. So let’s set that up right now let me show you how this works I’m going to go to the back end we’re going to go to the admin. I’m going to go all the way out here and wow it’s going real slow today I’m going to go to plugins and I’m going to show you this plugin it’s called it WP code box and now I’ve used advanced scripts I’ve used scripts organizer I have left both of those behind I am all in the back end. I am all in on WP code box I love WP code box I love the UX I love the cloud snippets feature that it has immensely powerful especially for an agency or a freelancer that’s working on multiple websites I’ll do a whole thing on WP code box but this is what I’m using I want to show you how to set it up so we’re going to go to WP code box very easy. I’m going to click on new snippet now this may look different than when you first do it because you can go to the settings area and you can change the layout of WP code box you can go to dark mode which I’m in right now. Okay so I am just going to click on new snippet but for you it may look a little bit different you can get it to look like I’m going to I’ll do a code box tutorial on how I’ve got it all set up and what I use it for and all that I’ll do that separately. But for now for my new snippet what I’m going to do is just write global CSS now you actually don’t have to do global you could do my card CSS my this CSS my that CSS they don’t support SAS parcels yet it that’s coming apparently and because they don’t support SAS parcels I would recommend just doing a global CSS style sheet.
0:09:49
Because remember this isn’t normal CSS we’re going to be writing SAS so I’ll do global CSS and under type I’m going to choose CSS or SAS now check this out you can do a whole bunch of stuff right JavaScript JavaScript external file you got less I’m just going to do SAS for now but when I’m selling you on WP code box right because it’s amazing and it’s what I switched to and it’s what I recommend other people use it is now my official recommendation. I’m using this as an example but keep in mind there’s so many other uses for WP code box then I’m going to get into those in future tutorials so it’s not just get WP code box you can do this one thing it’s WP code box is great for lots of different things. So I’ve chosen SAS had a render this as I’m going to choose external file I am going to now hit save and after I hit save this thing becomes available right here and this is the key auto reload changes I also need to enable this snippet altogether or this style sheet altogether now I am ready to rock and roll now just to ensure that all of my tabs are up to date I’m going to refresh this and I’m going to refresh my builder. Now remember I get to leave style sheets in oxygen behind I don’t have to do any styling in those style sheets which means my builder interface gets to stay open in full screen and my style sheet gets to stay open in full screen and if I have a long style sheet and I’m scroll down working toward the bottom when I create something new I save changes and I want to go see them I don’t have to leave this area and I don’t have to leave my scroll position everything is exactly how I want it at all times same thing here my structure panels open if I have a long page long structure panel and I’m scrolled down there I never have to leave that to go do anything with my styling right I’m decoupling them so all we’re doing now is a double tab or dual tab setup where I have my styling going on in tab one and I have my editing going on in tab two I could have a live preview of my front end on three but I’m going to show you I actually don’t even need that anymore either okay but anyway let’s start doing some stuff with our styling let’s quit the you know rambling on about how great code boxes and let’s actually get something accomplished all right so I’m going to grab global CSS here and we’re just going to test something I’m going to try to change the whole well is yeah let’s just add padding to the card how about that let’s do something super easy so I’m going to do article card and I’m going to do padding and I’ll just do something you know standard 2m and we look at it right here is our article card right there and you can see the padding in there get this guys I’m in the builder but that’s magic right I just wrote it here in WP code box I did not refresh the builder watch this again I’m not going to refresh the builder background color if I can type background color white it just happened I didn’t refresh the builder right you know if I had to refresh the builder we’d be waiting like five seconds right it’s better in 4.0 it’s better in Firefox whatever but you understand right we would have saw spinning wheel we didn’t see a spinning wheel this should is instant it is instant let me go the front end it’s already there on the front end I didn’t reload the front end it’s already there it’s auto reloading changes okay so that is absolutely phenomenal I’ll prove it to you again look no border radius here no border radius here let’s out of border radius border radius of 1m I hit save by the way I’m hitting command s on my keyboard when I’m in code box to save my changes and it’s already done and it’s already done okay now look what I said I don’t actually need this live editing tab right here I can do this I can hit this little preview button in WP code box if I want to and I can navigate to that page called live editing and check that out now my website doesn’t actually have a background color so it’s rendering this as dark up here that may happen to you so I’m just going to go into body and I’m going to say backgrounds color man I can not type today is white and boom it’s just updates so now everything is good to go so now I’m getting the only issue here and I’m again I’m working at 1920 pixels like so I’m I have a 32 inch monitor I should be seeing a lot more than what I’m seeing right here is you’re going to kind of get that squished view again so on a normal my normal resolution is actually not that big of a deal it looks normal but on this it kind of squishes everything in so I’m going to get rid of the preview I much prefer to just have a front end tab open so I’m doing like three tabs right I can see what I’m doing in the builder I can see what I’m doing on the front end and I can see what I’m doing in code box with my styling at all times this is just a phenomenal workflow right because as I said if you have a long style sheet where you need to be in a certain position on it you have a long page where you need to be in a certain position of the page and then you want to be able to view the front end as well and you want everything seamlessly changing and adjusting it’s just absolutely phenomenal now let’s take a look at SAS because remember this isn’t just so I can have a little bit better user experience when writing customs yes I get to leverage the full power of SAS now SAS is a there’s a depth it’s an in depth topic right and if you want more tutorials on SAS drop a comment below and say more SAS and I will give you guys more SAS I’m going to give you very basic introduction I’m going to give you two things that you can experiment with and practice two techniques you can experiment with and practice with SAS one of them is nesting and the other is variables okay now there’s variables in regular CSS but they work differently in SAS and they have extra superpowers in SAS we’re not going to get too deep into it so I want to lose people but I’m going to give you a little introduction you’ll you’ll see a little bit of the sauce okay all right so first things first I don’t like that border radius so I’m going to go with like 0.25m by the way you can also use regular variables here like here’s a variable from automatic CSS for a small radius and if I look it’s picking that up right both on the front end and in the build or automatically so no problems with using your normal variables no problems with leveraging automatic CSS inside your custom style sheets let’s talk about nesting now I have a problem here one is that the padding applies to my entire card and I don’t want that to happen I want the the image to touch the edges of the card and I want this area in here to have the padding that’s why I created a body wrapper so what I’m going to do is take the padding off my article card and I’m going to come down here and I’m going to work on a technique called nesting this is what I said they’re superpowers when you’re using them and sass together all right so if I use the and symbol and ampersand and then I do a double underscore and then I target the body I am now styling the article card body it knows it’s going to create a new line of code for me and it’s going to append this double underscore body to article card which means I’m now targeting the article card body and here I can say my padding is going to be the 2m I hit command s to save and I go check on the front end it’s already there waiting for me the changes were instant already there waiting for me the image is now touching the edges the padding is now inside the body of the card where I wanted it now I also want to space all of these elements out so what I’m going to do still inside my body I’m going to display flex now here’s another cool thing watch this flex look it’s giving me and I don’t think this happens inside of even in 4.0 inside of let’s see if it does I’m pretty sure it doesn’t there’s none of this so like if I was writing article card and I said just yeah it doesn’t give you any auto suggesting nothing right but using wp code box I have all this auto suggesting for me so flex direction I’m going to do column and I’m just going to use a simple gap we’re going to do a 1m gap I’ll go back and look real time it updates and it shows me the gap that I’m working with now I can actually change my text here this is my article heading and it’s kind of long all right and then I can get some Laura I’m going here we’ll use this as the description I wonder if that’s too much text let’s see now that’s that’s perfect but I need to target this text now right I want to change the line height of the text so I’m going to come down and I’m going to do another ampersand and the way I read it in my mind is all right I’m going to style my article card and the article card body and the article card text so there’s my text and I’m going to do line height of 1.5 let’s say I’ll save and go back and there’s my line height change right there this can say read more look how I’m just popping back and forth tabs a tab right and if you have keyboard shortcuts for navigating between your tabs it’s even much faster than strolling up here and actually clicking but I want you guys to kind of see what I’m doing right so I’m styling my body I’m styling my text and I’m going to show you the output of how this works in just a second but look I’m basically styled my card oh we needed to the rounded corners okay which it’s already border radius bar S and if you see let me show you guys on the front end I hit refresh just how to have it they need to it is rounding the corners here it’s just not rounding them up here because the image is covering up the radius on the top whenever this happens to you use overflow hidden on your whole wrapper your entire card and it’ll take care of it so I’m going to come up here remember these are the styles to article card these are the styles to the body these are the styles to the text so I’m going to say overflow hidden save go back to the front end and boom it live updates right there so the reason I really like this nesting is it creates a lot more organization I’ve effectively created one component and I’m styling parts of the component within the component itself versus in writing CSS you would have to be writing it like this you have to write article card first right there would be your styles there then you come down here and write article card again double underscore body and open it and write your styles there come down here write article card you’re writing this article card over and over and over again there could be 10 different components you’re writing article card article card article card your entire life is writing article card right but with SAS you write article card once and then you just list out the components that are inside of the block right and my body and my text and my link and my this and my that you just it is all one component and then somebody comes along behind you and they realize oh look here’s a component here’s the elements of the component and then let’s look at the actual front end okay so I’m going to do a view source here so you guys can see what the output looks like why am I not seeing it let’s try this again there we go view page source and I’m just going to search for code box real quick and there’s my style sheet and here we go check this out so it wrote my article card for me it appended double underscore body for here it’s writing actual CSS right it’s not showing up the way I wrote it because SAS processes what you write and it processes it’s nesting out into actual CSS so this is one example of yes there’s efficiency in that doesn’t look like much but when you’re doing a lot of complex CSS with SAS it saves a tremendous amount of time and it keeps everything super organized and that’s just one that’s like the most basic feature of SAS that’s so much more powerful stuff let’s look at one more feature we can look at variables so in regular CSS you have to open your root and you have to define variables like this like my variable and then you can put like a value or something like that that’s a little bit complicated for some people and you have some limitations there and how you can use these in SAS you define variables like this with a dollar sign we’re going to create two variables here we’re going to create a card padding variable and we’re going to create a card gap variable so I’m going to do card padding and my card padding is to M and then I’m going to create a card gap which is going to be one M and I’m going to hit safe and what you’re going to see here is I now have defined what are effectively tokens global tokens that are going to be placeholders for these static values right here because a card yeah I have an article card but what if I create other kinds of cards and I want all my cards to basically have the same padding and I want all my cards to basically have the same gap if I created 10 different card styles and they were all padding to M and I decided you know what I want to change that to 1.5 M we want to tighten it up a little bit and it’s not just me maybe it’s like the client comes along it’s always the client it’s always the clients fall right just kidding just kidding clients all right so the clients like you know what my friend Fred was a designer 70 years ago and he thinks that the padding would be better if it was a little bit less okay and so we need to change padding from 2 M to 1.5 M do you want to do that on every card style that you’ve done on the website or would you rather have a token that we can just change in one place and you have global control we’ve talked about this before scalability and what you’re building okay so I’m going to take this and this is great about SAS right you don’t have to use a var and a double dash and all this complicated nonsense could literally just use the token like that so my padding is card padding and my gap is card gap and I’m going to hit save so there’s I defined the variables here I’m using this and I’m using this here too of the variables. Here I’m using the variables. We go look at the front end. Perfect.
0:24:41
Now here’s that client suggestion, right? Hey, patting needs to be a little less. Okay, card patting, 1.5M, gap goes to 0.75M, hit save, we go back to the front end, it’s done. And it would be done across all of my different card styles just like that. So, and you can do more with variables in SAS for sure, 100%. This is again, scratching the surface, but very, very powerful stuff. So we have nesting, we have variables, we have a better workflow of multi-tab styling in one tab, editing in another tab, previewing in another tab. You never lose your place, you never have to close panels, open panels, all this other stuff going on in oxygen. Everything is happening in real time. Guys, tell me how this isn’t better. Tell me how this isn’t, let me go back to the camera. Tell me how this isn’t way better. If this isn’t way better, tell me how it’s not way better. It’s way better, undoubtedly way better. So WP codebox, highly recommend you grab it. There’s a link below in the description. SAS, highly recommend you start experimenting with SAS. Just follow along with what I did here in the tutorial. Build your own article card, write your own little bit of SAS and WP codebox, watch the changes happen in real time, practice your nesting, drop a couple variables in, and then drop a comment below and say, more SAS. We want more SAS. If you want more SAS, I’ll give you more SAS. Both in my general disposition, I’ll give salt, I’ll give SAS, I’ll give whatever you guys want. All right, but drop your comments below, hit like, hit subscribe. That’s the end of this tutorial. I’ll do more codebox stuff, I’ll do more SAS stuff, and of course, you know, there’s more oxygen stuff on the way, there’s more business and marketing stuff on the way. It’s fantastic. All right, that’s it for me.
0:26:35
I got a meeting to go to. I’m out. Peace.
