ACSS Behind the Scenes: SCSS Overview & Adding Z-Index Classes

0:00:00
What’s up guys? Some struggling with a little bit of a sore throat today, which means that I was going to record a video, training video for the inner circle, but I can’t really, I’m not really into the mood of projecting my voice much at all. But I still need to get some work done and thought I would tackle another feature of Automatic.CSS. I thought you guys might want to follow along. It’s something of a different, just kind of an insider behind the scenes type thing maybe. Maybe for those of you who are interested in SaaS or who are interested in the kind of work that goes into the development of the ACSS framework, I don’t know. I’m just kind of hanging out and decided to hit record. And basically, I’m going to tackle these Z-index classes, which seems like it should be relatively simple. I do have to kind of put some thought into how this needs to work inside of Oxygen. Right now in ACSS, I do everything just like platform agnostic and then I go into Oxygen and I see how it works and how it may not work.

0:01:11
Like some things that we run into, like issues that we might run into with specific modules applying these classes and things like that. But anyway, this is going to be kind of what we’re going to do. And I’ll give you a little rundown of how automatic that CSS is structured in SaaS. And again, it gives you guys a good example of just what goes into this and how it all works, which I don’t know, maybe some of you are interested in that. So this is the framework in VS Code. On the left hand side here, you can see, well, I’ll break it down for you here. Okay? Boom. All right. So we have these folders right here. There’s a dashboard folder and these are basically where all of our variables are. So if I open these, you can see here are our breakpoint variables. We have all of our button variables that can be changed from the dashboard. That’s why this is called dashboard.

0:02:12
And then we have all the color variables that can be changed, form variables that we’re working on for the WS forms integration and other form integrations, getting ready to do our options variables for turning things on and off. We have our radius variables, spacing variables, text variables. Okay. So that’s all of our dashboard based variables. We have some helpers like our Calc Math, some of the functions that I’ve written, especially our fluid, Calc and fluid clamp functions. Those are super important. We’ve got a lot of mix-ins in here. A mix-in is basically a predetermined kind of, let’s say a recipe for styling something like here’s a button default mix-in that adds padding, border width and border radius. Now it still uses variables. And you can actually use mix-ins in other ways where you can inject variables dynamically into mix-ins, which is very, very cool.

0:03:07
Same kind of how functions work as well. I’m not going to get into all the advanced aspects of SAS right now, but that’s what helpers are. And then we have maps, which is like this is the core of everything. Like we have, in SAS there’s simple maps like this, which is our breakout values. So small, medium, large, XL, and it has these values. These are for the breakout classes. And basically what you can do is use loops to generate all of your CSS from these maps. But maps kind of hold the key information, and then you can use loops to generate all of the classes that you need. And that’s part of what I’ll show you when we do these the index classes, because we’re going to create a map for it. But you can see here’s the grid map. This is an example of a nested map, which is a more advanced kind of map. So we have grids, and we have standard grids, and we have pre-made grids, and we have auto grids.

0:03:58
And then we’re just putting the values for everything. And then inside of the loop, which I’ll show you later on, it actually generates the output. And what this does is it really allows you to keep everything super organized. It makes everything super efficient. And whenever there’s issues, you can find the issue typically in a map, for example. And if you fix it in the map, all the classes will be fixed automatically. You don’t have to go class by class by class by class, fixing a mistake. And that’s very important in a framework, because we might have how many different grid classes do we have, right? If we made the same mistake in all those grid classes and typical CSS, you would have to go fix it in every single class. And make sure that you didn’t miss anything. And all of that, whereas in SAS, everything being in maps, you find the error. You fix the error in the map, and all of the classes will rewrite themselves with that fix.

0:04:51
So that’s pretty cool. Same thing with mixins and functions. You know, if there’s an error with typography, for example, all of the typography across the framework uses the same functions. So the error is probably in the function, right? So you go fix the error in the function, all of the classes for typography automatically fix themselves. So it gives you that global control. And because it writes all the CSS for you, you know, I write a map and then a simple loop. And it might generate 40 different classes at all these different breakpoints, very, very powerful stuff for scalability. So yeah, these are all of the maps. And then we have all of our modules, right? So you see your aspect ratios, your backgrounds. And you know, just to give you an example of what a simple loop looks like, we can probably do that with aspect ratio, right?

0:05:40
So for each ratio value and aspect ratio, so it’s calling the map, it’s basically saying, hey, for each one of those values that’s in the aspect ratio map, generate classes that look like this. And it says aspect and we’re dynamically inserting the ratio and then we’re defining what the CSS is and automatically inserting the value from that map. And so that’s very efficient. You can see like this right here, generate a bunch of aspect ratio classes. So it’s a little bit of writing and then a lot being generated for me by SAS. And then we also have the ability and SAS to nest things, which is really, really, really helpful. SAS is basically the greatest thing since Lice Bread. And yeah, I wrote a post on Facebook about how I just, I had to teach myself SAS back in December when I started rewriting the framework from the ground up. I didn’t know SAS at all. I didn’t know any of this stuff.

0:06:39
So I had to teach myself SAS in order to rewrite the framework. And once I really started to get the hang of it, for me, it’s like, man, I wish regular CSS would go away and I wish SAS would kind of be the full time replacement for it. But yeah, these are all of the modules. And then you have your platform specific stuff. So you can see oxygens being worked on, obviously. WooCommerce is being worked on. WS Form is being worked on. You’re going to see bricks in here very, very shortly. And yeah, so this keeps our platform specific stuff organized. It’s completely separate from our main framework, even though there’s a lot of, it’s not really overlap. It’s overlap in the concepts, but it’s not overlap in the classes because you have to structure things differently to support the way that HTML is structured inside of oxygen or inside of WooCommerce or inside of WS Form.

0:07:37
And so this keeps all of our platform stuff very organized and away from the rest of our framework. So it’s not all cluttered and inefficient. And then root is that’s actually just loops for generating all of our variables. And you can see right here, every, pretty much every variable, you can go look at how many variables are in the cheat sheet. They’re all generated from these three little loops, which is, I mean, again, it’s like insane efficiency, insane efficiency. So let’s get to it. Let’s try to make some Z index classes and see how this goes. So the first thing I know, I’m going to need is a new map, right? And these are called parcels and SAS. So they start with an underscore and we’ll do Z index maps. SCSS. Okay?

0:08:28
So there’s our Z index maps. And then I’m going to need a module for Z index. So this is going to be Z index.S CSS. Perfect. All right. And then what I need to do is in my main automatic dot SAS file, this is, this basically imports all of the modules into the style sheet. And so I can come down here and I don’t want to do it after fallbacks. We want fallbacks to be last. And I’m just going to say Z index. And then I’m going to add import. And this is going to be modules Z index dot SC. Actually, we don’t need to dot. All right. Cool.

0:09:07
So boom, save, perfect. And then basically what VS code is doing is it’s watching my SAS changes and every time I hit save, it’s generating style sheets from those changes. Obviously, nothing has been added really. I just added empty things. So nothing is going to be generated. But here is the style sheet, which you can see is fairly, fairly gigantic. But we are putting our Z index classes at the bottom right before our fallbacks, which start right there. So here’s our aspect ratio classes where those end and here’s our fallbacks where they begin. So right here between those is where our Z index should be, oops, I don’t want to do that. I want to do that over here where it should be put in. So we’ll do a little test just to make sure that it’s actually pulling in properly. And we’ll do Z index of one.

0:10:00
That’s fine. And then I hit save and you can see it show up right there in the style sheet. This is the output of the SAS is right here. So I can see that it’s doing that properly. So we’ll go ahead and get rid of that. So the first thing we’re going to do is make our map. So I’m going to go to Z index maps. And that’s actually looking like a pretty terrible name. So I’m going to do Z dash index maps, probably. Yeah, let’s do that. And then down here, I’m going to do Z index on there as well. And then when I call it down here, I need to make sure the dash is in there. All right, so I’m going to go into maps, Z index maps, and we’re going to make a map. And this is going to be called Z map. Yeah, let’s just do Z map like that.

0:10:52
Let me look at my other. There’s like, yeah, this is a terrible one to work with because of its name. All these others are easy like text fallbacks, colors, buttons, right? Z index is hard to work with. Z, Z, Z map. I don’t know. I like that for now. And actually, it doesn’t start like this. So if you look at a map, the way that it works, it’s a colon and then a open parentheses. So we’ll do a colon, open parentheses. That’s the beginning of our map. And then we have to take a look at what values are we actually trying to map here? So I’m just going to copy this and I’m going to bring this in down here for now, which is going to be irrelevant in a second. Z, so we have bottom, we have 10.

0:11:38
So we can start writing this, right? So bottom and then it’s a comma instead of a semicolon, like you would normally be used to when you’re writing a map, it’s a comma. Let’s do this. Let’s find and replace. And we’ll do Z, period Z, double dash. And I want to replace it with nothing. Only in, oh, come on now. There you go. And only what I selected, and then we’re going to replace it with nothing. So there we go. And then I can actually just copy these and bring them in here, just like that. And bottom, I can get rid of the negative one top. I can get rid of all of that. And then bottom, I’m just going to have the value be negative one.

0:12:28
10, I’m going to have the value be 10. 20, the value is going to be 20. This is going to be the name over here of the class. And then this is going to be the value of that class for the actual CSS output. So this one is fairly simple to do. All right, so we have 60, 60, 70, 70, 80, 80, 90. 90 top is going to be 999. And I think that is good. So we’re going to save there. So now our map is created. Like these are all the values that we want. And now what we have to do is generate all of the classes over here. So we go down into our modules under Z index. And we’re going to start by saying each. And if we remember here, first thing we have to do actually is import that Z index maps.

0:13:24
So that is in maps Z index maps. All right, so we’re coming down here. And we’re going to say add import. And you have to do a double period and then a forward slash to come out of the modules folder. And then you’re going into the maps folder. And you’re grabbing Z index maps, which is right there. OK, perfect. So now we’re importing that. And now basically what we can do is we can access the map with this module here. The module has to know that map exists to be able to go into it and loop through the map. So remember, we have a map called Z index maps. Z and I think it’s just called Z index. My short-term memory is absolutely awful.

0:14:15
OK, so it’s the map. Plus I’m like, I’m pretty sure I’m just, my family’s been sick. And I’m pretty sure I just got what they had. So brains struggling a little bit too. All right, so we need to each something something in a Z map. What was really confusing to me at first about these loops in SAS is like, you can, this is the only thing that actually matters. The other two things you get to name. You get to like, you could just come up with a name out of thin air. So I’m basically saying each and I’ll say Z index. You can also do it like this, like camel case. I’ll do each Z index. And then the value of it in Z map. OK, so yeah, that’s basically it right there. So for each Z index, get the value of it in Z map.

0:15:09
That’s kind of how you read it. Or for each Z index and Z map, get the value of it. And then do something with it, right? And so the do something with it part is pretty easy. So remember, we’re going to do Z double dash. Here’s what we want the classes to look like. Z double dash and then the name. And remember, the name is set in the map. And then we’re going to get the value of it as well. So we need the name, which is Z index. And we have to concatenate. I think that’s the right term concatenate. Concatenate, I don’t know. The variable in order for it to not break. All right, so now we can open that up.

0:15:57
Perfect. All right, so each Z index value in Z map. And then we’re going to do Z index. So we’re giving it the actual CSS instruction now. And the value is just the value right here. It’s pulling the value from after the name in that map. And if we hit save, we can see that there are all of our classes generated for us, right there. So we have Z bottom. Means it gets Z index 1. Z 10 gets Z index of 10. Z 20 gets Z index of 20. Z 30. And they’re all just generated for me. Now, you’re not going to get to see, I don’t think a ton of other cool stuff.

0:16:38
Because these are actually so simple. But what we actually have to do is we have to bring these into our plug-insight and actually see if they work. So let’s take a look at how to do that. So we’re going to go to automax.css files. There’s our sss. We’re going to pull this into our plug-insight. We’re going to replace it. We’re going to go to plug-ins or our plug-insight. And we are going to go to automax.css. And we’re going to save changes. So that basically updated the sss that’s in this plug-in right here. And we’re going to go to pages, add new.

0:17:22
And we’re going to call this Z index. All right, perfect. And then what’s cool about this is if I decided like, oh, zero is missing, right? Why don’t I have to go write a Z double dash, zero Z index, zero, and put it in the style sheet anywhere. I can literally just go to the map. So I go to Z index maps. And right after bottom, I do zero zero. And then I hit save. And look, it’s generated the next class for me. Exactly where it’s supposed to be. And there’s no, I don’t have to worry about typos. I don’t have to worry about anything else.

0:17:59
I can literally just see. I just added a value to the map. And there it is as a generated class. So that’s really cool. I don’t actually think of it like Z index of zero is the default Z index for things. But we do, we may want breakpoint classes, right? Do we want breakpoint classes? That’s going to be a question. Would it be valuable to change the breakpoint, or change the Z index at a specific breakpoint? So this is the part where you really have to brainstorm, like how people use the Z index properties. And are there any cases, because if there are cases, you know, people are going to complain to me, right?

0:18:41
They’re going to say, hey, that’s great, and all, but I can’t do this at the L breakpoint or the M breakpoint or whatever. All right, well, let’s come back to that in just a second. So we’re going to start out by, I wonder what the easiest way to test this is. So we’re going to do layout relative on this. And we’re going to add an image. Browse, we’ll use this one first. And then we will duplicate this, but we will browse. And we’re going to go to unsplash. And we’ll grab, I don’t want vertical ones. What’s all these vertical images? All right, I guess I can’t change the horizontal anywhere. I thought I could.

0:19:38
Here you go. Lady walking down. Oh, that’s a terrible photo, isn’t it? Things still got to look good, you know? Even when you’re testing. I don’t even know what this is. I have no idea what that is, but we’re going to go with it. Save downloads, scoosh, downloads, resize, 1920, save. OK, save, replace, go back. Here, downloads, import, select. There we are. OK, now the girl should be on top. The girl should be on top. So we’re going to go layout absolute. Does an absolute item get preference over another item?

0:20:40
That’s what I’m wondering right now. Layout absolute. They’re both gone. Absolutely gone with 100%. There we go. How to put that on the div. Now we’re completely breaking out of our thing, but that’s OK, because we just need to test the index. So right now, we do have the coins on top. If I put the index 10 on the girl, she’s on top. So we have a working class. Now if I put the 20 on the coins, they go back in front. So that works. Now the question is, are there any elements in here that that may not apply properly to?

0:21:36
And I don’t think the answer is yes, but we do have to look nonetheless. Div section. This is kind of where we’ve got to open this up to the community and have people start using it. And then what happens is people run into a use case. They’re like, oh, it doesn’t work in that use case. And then we have to go fix it, or we have to add new stuff. But it’s really hard to just kind of brainstorm. There’s so many different ways that people might use these things, so many different elements to consider. What I’ll do often is I’ll go to Google and I’ll just say like uses for Z index. And then I’ll look at the use cases that people are talking about so that I can try to consider some other things.

0:22:37
All right, so a little edit in here because I spent the last 20 or 30 minutes researching different use cases for Z index. Mainly I just want to see how people are using Z index across various website builds. Because I needed to determine how important it would be to have mobile breakpoints. And basically what I found is that, yeah, for some people in certain use cases, it would be very important to have mobile breakpoints for Z index. And I just wanted to save you the time. I didn’t want you to have to watch me go through website after website after website, and different use cases and things like that.

0:23:09
So we are going to go ahead and you can watch me generate the mobile breakpoints for Z index inside the SAS. Because it’s pretty cool. And let’s go ahead and get to that right now. So I’m going to go into, we actually don’t have to do anything with our maps. I’m not convinced that we need a zero. Well, yeah, we do. Yeah, I think we do. I think we do. OK, so I’m going to go back to Z index here. And now we’re just going to create another loop. And this time I’m going to say for each breakpoint value in breakpoints, which is another map that I have. And we have to be able to access that map.

0:23:50
So I’m going to go to import. And we’re going to do maps, or it’s not a map. I think it’s a, yeah, it’s in the dashboard. And we’re going to call this breakpoints perfect. Now we can actually get into it. So for each breakpoint value and breakpoints, if we look at breakpoints, here’s the breakpoints map. It’s a nice simple map. So it’s giving me all these breakpoints that are set throughout the framework. So for each of those, I need to do something, right? So for each of those, now I’m going to include a breakpoint mix in. And I’m going to set the breakpoint dynamically in the mix in.

0:24:34
And what the mix in is going to do is it’s going to write those at media queries for me, right? So I have my first loop here. Then I have my include for the breakpoints values. So it’s going to create these classes at all the different breakpoints. But now I need to loop through the Z index as well. So for each breakpoint, I need to create the media queries. And then for the Z index, I need to create the classes inside of those breakpoints. It’s basically what I’m asking SAS to do right here. So the difference here is we now need the extension, right? So we’re going to do breakpoints. And this is, if I put breakpoint here, that’s the actual extension name, like xll, whatever.

0:25:24
And then the Z index name comes after that. And then the Z index is still the value there. The only thing is I don’t know breakpoint. I don’t know if I can use two values in these loops. So for each breakpoint, I’ll do breakpoint value. So those have different names. And then I need to think about how I’m doing this. Z breakpoint, I’m never really, oh yeah, I am getting the breakpoint value right here. No, I’m not. That’s still the name of the breakpoint. I don’t think I need the actual breakpoint value. I just need the name of the breakpoints. So let’s hit save. And let’s see what we’ve generated here.

0:26:15
And then we are. Look. So I have at media match with 12.79 pixels. That’s the xl breakpoint. I have Zxl bottom, Z index minus 1, Zxl 0, Z index 0. So it’s giving me all the xl breakpoints. There’s the next media query. So we have the Ls. And then there’s the next media query for the M’s. There’s the next media query for the S’s. And then we’re done. So you can see this simple little loop, right? Which may not be simple. It certainly wasn’t simple when I started with SAS. This was one of the most confusing parts of it, especially since there’s a mix in in the middle of two different loops.

0:27:00
But what you’ve effectively seen here is that basically 1, 2, 3, 4, 5, 5 lines of code, the rest is just brackets. So 1, 2, 3, 4, 5, 5 lines of code generated all of these classes inside of all of these media queries. That’s why I just really, really, really freaking loves SAS. And I think right now what we’ve done, I mean, we can go back into Forklift here, Replace, Hop over to the plugin site. And let’s close this. We don’t need that. All right, let’s go back to Admin. And let’s go to automatic CSS dashboard, hit Save Changes. And now, I mean, if we view Source, right, view page source, here’s automatic, I search for Z.

0:27:58
There they all are. And now they’re all there ready for testing. And so what we can do here is if I refresh the builder, we can just pop one of those on and see if we can flip the Z index at one of the breakpoints. So I’m going to grab, let’s get our structure panel back out here. So this first image has Z of 10. And this has nothing. Let’s do a Z of 20. So now our coins are on top on desktop. But I want the girl to be on top at L at the L breakpoint. There is a terrible joke in there. And I’m not going to make it. I’m going to be respectful.

0:28:38
I’m not going to make that joke. All right, so Z, L, this one needs to go to 0, let’s say, L0. We made 0. We made 0, right? I think we made 0. ZL0. So with the L breakpoint, that’s going to be 0. And then the other one is already 10. It should just be naturally on top of the L breakpoint. So if I go to this is XL, this is L. Look at that. It’s working. So yeah. Now the question is, what’s going to break when we actually start using this on different oxygen modules and all of that good stuff?

0:29:23
So there’s obviously more testing that has to be done. And like I said, we didn’t have to so far, we haven’t had to go into the platform’s folder in the framework into oxygen and write any oxygen-specific code for Z index. For so many other things, that’s been absolutely required. And so like I said in the very beginning, this is probably, hopefully, I always say, probably slash hopefully, going to be a simple thing to add. The aspect ratio classes, I thought was going to be simple and easy, turned out that was a lot more complex because we did have to write a lot of oxygen-specific stuff. They weren’t behaving properly on video elements in oxygen. They weren’t behaving properly on code blocks in oxygen.

0:30:10
So that’s just something we’re going to have to look at in terms of Z index. And maybe we get off easy with Z index. And then we’re just pretty much done here. But maybe it also ends up torturing us like many other things in oxygen have done. Anyway, that’s it. That’s a little behind the scenes. I think that’s a good little taste, right? If you guys have any questions or whatnot, let me know. Peace.