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.
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.
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.
I got a meeting to go to. I’m out. Peace.