0:00:00 What’s up everybody. Welcome back to the channel.
I am already losing my voice cause I’m actually recording this intro after the tutorial, but this is going to be a fantastic training for you today. We’re talking about auto numbered auto counting process cards, but the example that I’ve built that I’ve created for a fake flight school and the way that we did the design and the layout, it lends itself to so many different little golden nuggets and other items of training and practice that you are going to get. It doesn’t matter if you’re a beginner, intermediate, advanced, you are going to get a tremendous amount of knowledge and education and stuff to go implement out of this training.
You’re going to want to watch every single minute of it. Make sure you hit like, make sure you’re subscribed to this channel, drop comments below if you have any questions. I answer everybody.
I’m happy to jump in and help you out. Let’s go ahead and get right to the training. All right guys, this is our fake flight school process landing page that we are going to be recreating in this training.
Uh, and before we actually dive in, obviously we’re going to cover how to do the auto counting cards. Uh, we’re going to cover a lot of other really, really important best practices and golden nuggets. But before we dive in, I wanna show you why this stuff that I talk about constantly is so absolutely important.
I’m gonna edit this page. We are going to pretend that the client asked us to add a step. There needs to be a step between step one and step two called medical evaluation.
The medical evaluation needs to be step two. All the others need to reorder themselves into the proper count, right? And I just wanna show you the magic.
When you do this stuff properly and you follow best practices and you care about scalability and maintainability, this is how easy your life can be. I’m gonna go ahead and duplicate the discovery process and I’m gonna change the label in the structure panel to medical. And then I’m just gonna edit this right here and say medical evaluation.
You would put in your new content, obviously. This would say schedule medical evaluation. You would change the link to where it’s supposed to go.
I’m gonna grab this image and I’m gonna put in the medical evaluator and I’m gonna hit save. And I’m gonna go to the front end of this site and we’re gonna take a look at what happened. And that may have been too quick for you to recognize the absolute magic that happened.
Notice that this is automatically number two and number two over here, and three and three and four and four. What else did you maybe not notice? The alternating of the media and the content automatically fixed itself in every instance, the automatic alternating of the slant direction of the accents automatically fixed themselves.
This is so easy, right? I can’t even, I’m just going to show you again because you may have missed it. I’m going to slide this down into a different area and I’m going to hit save and then we’re going to refresh and did things break?
No because I create unbreakable situations. That’s my goal. Best practices, scalability, maintainability.
One, two, three, there’s medical. At four five and six slants all alternating properly media content all Alternating properly doesn’t matter if it’s me editing this site or somebody coming behind me to edit this site their life is very easy that took seconds seconds anybody who has built a process section like this in the past knows the Manual work every time you need to add a step the manual labor of changing every slant direction, changing every media and content manually, renumbering everything manually, it’s an absolute nightmare. This is why we follow best practices.
This is why I teach best practices. So now, let’s go ahead and learn exactly how to do this. Okay, I’m going to add a section to my page.
I have a container right here. This is going to be for my introduction. I’m going to need another container down here for my process cards.
All right, I can go ahead and close this one now. Duplicate this. I’m going to call this intro and I’m going to call this process.
All right, so there’s intro and there’s process. In my intro, I’m actually going to do the intro last. That’s the boring part.
I know you guys want me to cut right to the right to the good stuff So I’m gonna go ahead and work on process first within my process container I need to add a block that’s gonna be my first process card So we’re gonna call this process card like that. Okay, and then I am going to add the elements that I need Let’s take a second to just look at what’s going on in this process card. I need a box right here, okay, and I need a box right here.
Everything is a box. Go back and watch my video called Everything is a Box. I need a box right here and a box right here.
Two boxes, okay. So I’m going to immediately inside my process card put two blocks, two boxes, okay. I’ve got my two boxes.
I’m gonna call this a media wrapper. I would highly highly highly recommend you keep your structure panel as organized as possible while you work. It’s going to cut down on confusion and mistakes and it’s also if you’re using something like Auto BIM, which I’m going to show you in a minute, to name your classes it’s already going to name them properly for you.
So I have a content wrapper and I have a media wrapper. Now I want to break this down so the beginners can follow, but intermediate, advanced, there’s going to be a lot of stuff in here for you as well. We’re going to take a look at the content wrapper side of things first.
Notice that the media comes before the content, but that’s not how it needs to be in the structure, in the DOM, in the actual code output of the website. In the code output of the website, we need our content to come first, starting with our heading. That’s why you see me put the content wrapper first, then the media wrapper.
Okay? Inside of the content wrapper, I need a heading. I need a paragraph, and I need a link.
I don’t need anything for this one. That’s a fake element. It’s called a pseudo element.
We’re going to talk about that in just a minute. But I need a heading, I need a paragraph, and I need a link. So in my content wrapper, I’m going to add a heading.
I’m going to add a text element, and I’m gonna add a link element, okay? So this is gonna be my link, and I’m just gonna say link. I’m gonna call this description.
That’s like description of the process step. And then heading is fine. So I’ve got content wrapper, heading, description, and link.
And then while I’m here, important to cross your Ts and dot your Is as you go. I’m gonna change this into a paragraph, okay? Now we’re gonna take a look at the media wrapper.
Inside the media wrapper, I don’t know, it looks like a lot of stuff going on, but actually you can get this done with just the media element. That’s all you need to put in here is the media element. All right, so we’re gonna add an image.
I’m gonna call this media. Why do I call it media instead of image? Because I don’t know what kind of media this could be in the future.
Like it’s just media. It could be an image. It could be a video even, right?
I don’t know what’s going to go there. Let’s just call it media. If I call it image and then it has to be a video at some point, like that doesn’t make much sense.
So I just use the word media. I’m going to go ahead and select an image here and it doesn’t really matter which one we put in. We’ll just go ahead and put this one in for right now.
Awesome. So guys I have my first process card basically ready to go. Now it doesn’t look anything like a process card but it’s got all of the ingredients right now the chef has to come in and actually mix things up and bake the thing okay but I’ve got all of the ingredients in.
Before I move any further I want to think semantically about what’s going on here with a process. First of all, this is a list of process steps. Now you’ve seen me do lists before and we do an unordered list and then list items, right?
In this case, because it’s a process and the order matters, we are going to use an ordered list, an OL, okay? So I’m going to go to process right here and I’m going to change that tag to OL. That’s going to create an ordered list and then every card in the list is going to be an LI.
Alright? List item is the same whether it’s an ordered list or an unordered list it’s a list item. Okay?
So I’m going to change that back to LI here and then if we just go take a look at this on the front end we inspect this just from a code standpoint right here’s your OL you can see it right there and then you have LI right and then everything that goes in the cards. So semantically, we have the proper structure here from the jump. This is something that’s easy to forget, right?
So you wanna do it as soon as you remember it, as soon as possible. All right, so I’ve got my ordered list and I’ve got my list item. Next thing I wanna do is put classes on everything.
The chef can’t come in and start cooking until everything has a class on it so that we can do the styling, do the cooking on the classes. That way every card is going to share the same exact styling. Okay.
So what I want to do is this is going to be my process. All right, process like that. And then you can call this a process wrapper.
You could call it a process container. You got whatever you want to do, call it. I’m just calling it process.
This is going to be a process card. Now, some of you may ask, why wasn’t that process double underscore process card? Because the process card is a child of the process section.
Technically, in BIM, and this is BIM methodology block element modifier, process card is a block in itself. It can be used independently anywhere that we want to use it on the website. It doesn’t have to be used within the process wrapper.
So it gets its own block level class, just process card by itself, okay? Now, I don’t like to manually come in and put a class on every single thing. There’s a reason that I paid to have this functionality added to automatic CSS.
I’m just gonna click this little BIM button right here, and it’s going to create all of my BIM classes for me, process card, content wrapper, process card, heading, process, card description, process card link. I’m going to uncheck sync labels because they’re already, the labels are already the way that I want them to be. And I’m just going to hit apply classes.
And now what’s happened is every single element has a proper BIM styled class that I can use to style this card up. I don’t have to manually go element by element to do that. Thanks to auto BIM functionality.
That’s not part of Brics. That’s part of automatic CSS. Okay, just if you don’t know what I’m talking about right now, ignore that.
Create the classes manually. It takes a little bit longer, but you should do the exact same thing. The next thing I’m going to do, cross Ts, dot Is.
This needs to be a figure element, not just an image. Okay, a figure element. And now I’m going to grab that class right here and immediately go object fit cover because I’m going to be manipulating the dimensions of this image and I don’t want the image to warp.
So object fit cover is going to make this behave properly when I manipulate the aspect ratio of this image. All right, so I’ve got a figure element there. We don’t want captions to be on these images.
That is all perfect. Now, I can start making this look like an actual process card. So the first thing you see is we need a two-column Layout we’re going to use grid to do that.
So on the process card, I’m going to shrink this up on the process card I’m going to set the display to grid now. I need two columns I’ve shown you how to manually create grids, but I use automatic CSS because all of this is faster So I’m going to say grid to and hit enter and that variable is going to give me a two column grid exactly the way that I want. Now on the process card I’m also going to ask myself do I need a gap?
And it does look as if I need a gap. Okay so I’m going to say grid gap and that’s going to give me the gap that I want. Again these are all tokens from automatic CSS that make my life easier and I don’t have to think, rim, pixel, this, that, clamp function, responsiveness, ah, it’s just all done for me.
I just use the token and I move on with my life. Okay, the next thing I’m gonna see is that within that content wrapper, everything is centered vertically, or at least appears to be centered vertically. All right, so I am going to grab my class for content wrapper and align everything to the center.
I’m also, while I’m here, going to say that I need to use my content gap between my content. Now because this is an h1, these and this is all within the same section, these actually need to be h2s but they need to be the size of an h3. So I make them an h2 but I come down here and I make them the size of an h3 by putting in the h3 variable.
Again from automatic CSS just making life really really really easy I am going to grab this text right here and we are going to place that right there and okay good I need to also grab the heading discovery flight and pop that in and then my text link says like schedule your discovery flight or something like that so schedule discovery flight okay and then we’re going to say external URL, that’s going to turn that into a link. And guys, we are making good progress. Look where we’re at.
This is fantastic, okay? Now you’ll probably notice that the media needs to come first, right? Well, before I get to that, I want to duplicate this process card.
And I’m going to say process card discovery, just so I know which one’s which. I’m going to duplicate it and this is going to say, what was our second one? Flight school.
I’ll just call that school over here. Let’s take that out and call that school, and we’ll call this flight school. Excellent.
Then while we’re here, let’s just go ahead and grab the content for that. We’re going to drop that in and what’s that say? Sign into flight school.
Just like that. Go ahead and hit save. Let’s refresh.
Great. Now we have two things that we can work with. We need two instances because we need to start thinking about how to automatically make these things alternate.
We don’t want to manually make all of this stuff alternate. And if I have two instances, then I cover all my bases, right? We’re just dealing with even and odd numbered items here.
All right, first thing you notice though, I mean, we don’t want these cards touching each other. That doesn’t make any sense whatsoever. So I’m gonna come in here to my process wrapper, the thing that wraps all of these cards, and I’m gonna say container gap.
And that’s gonna give me the container gap that I want between these items right here. I’m treating each of them as a separate container. Look at this weird blank space that’s over here on the left hand side.
That’s actually caused by the OL. OLs and browsers, ordered lists and unordered lists have default padding on them. So I’m going to go into layout and set the left padding to zero and that’s going to get rid of that default styling.
And now I’m going to go refresh. And now you see all of my cards are now spaced out. Perfect.
I didn’t use bottom margin or anything like that. It’s just gap. Gap takes care of everything and as I add more cards they’ll have their own gaps.
Okay now what I want to do is I want to talk about how we are going to alternate the media of these cards and I need to alternate the media starting with the odd numbers. Okay because number one is an odd number and that’s the first card where it’s actually opposite of what I have in the builder. Why do I have the content on the left in the builder?
Because the content needs to come first, okay? It’s just preferable that the headings, the content comes first. So what I’m going to do is I am going to go into custom CSS here.
There’s really no way to do this programmatically from the builder. So what I’m going to do is I’m going to select my root element which is the process class, and then I am going to target the direct children of the root. I’m going to do this step-by-step so you can see as I go what’s happening.
We use this thing called a border check to make sure that we’re selecting the right elements. Border check is just five pixel solid red to put a border. And you see that we are selecting every card, right?
Well, I don’t want to select every card. I want to only select the odd cards. So we’re going to do an inf child, and you can actually just say odd here, and it’s going to automatically select only the odd numbered cards.
Okay, so I’ve selected the first card, which is the only odd numbered card, and I now need to select something inside of that. Okay and I need to select another direct child. What is the direct child?
In this case it is the media element and if I go look at this I can see that it is called process card media wrapper. I could target that class by itself or I can just stick with with targeting the second child, right? So, inf child, and in this case, I say two.
You could even do last child, sorry, last child would be over here, last child, like that, okay? However you wanna do it, you can do in child two or last child. Let’s just stick with last child, whatever.
Notice that I’m now selecting the media element, okay? Instead of a border check, I can simply now say order minus one and that’s going to swap it to the other side. I’m going to go ahead and hit save.
We’re going to refresh on the front end and you see that this is what we get right here. Now we can test out the auto alternation by just duplicating a card and then we see now we have three. Do they continue to alternate properly?
And of course they do. OK. So I’m going to I’m going to get rid of that third one right there.
Again, we only need two for right now. Now here’s the thing about this. I need to check mobile right away.
Notice how they don’t stack on mobile. First thing we need to figure out right now while we’re here is just what break point do I feel like I want to stack these at? And I think it’s this break point right here.
So what I’m gonna do is I’m gonna grab my process card and here I’m going to switch from grid 2 to grid 1. If I switch to a one column grid these things will stack on top of each other. So I’m going to use that variable and there you have it right there.
But look at our problem. Look at our problem right. It’s going image content content image and it’s going to keep mirroring like that all the way down.
We do not want that to happen. Okay so what I’m going to do right now is I’m going to go back to process. I’m going to go to style I’m going to go to CSS and I’m going to comment this out Okay, and the reason is I want to see what the natural stacking order is when we don’t have the auto alternation going and we see that the normal stacking order is Content image content image, which is not standard, not typical.
You would typically see image content visually. So what we want to do is we want to bring this back, and I’m going to take my instructions, and basically I only want some of this alternation to happen on desktop. I want some of it to happen at all times, but I want some of it to only happen on desktop.
So the first thing I’m going to do is I’m going to say actually order minus one to all media elements. We’re going to take the inf child odd out here and say, do it to all of them. At all times, do it to all of them.
Now I come down here and we have proper stacking on mobile. You see that’s good at every breakpoint. Now what I want to do is I want to write a media query and this is where min width media queries a mobile first media query actually makes a lot of sense.
So I’m going to say min width of and what’s that breakpoint right there 767 all right so at a min width of 767 I want to where I order the media and I can say now, one, that’s probably opposite of the way that we want it. Sorry, I’m dyslexic, so this stuff. Yes, we want to do order minus one.
This now needs to be even children. Even children, order minus one. There we go, order one.
Save. Is that correct? Yes, that is correct.
All right, so now I refresh. Sorry, again, I’m dyslexic. When it’s like a binary situation, left, right, right, left, I just, my brain like short circuits.
Okay, so we’ve got image on the left, content on the right, content on the left, image on the right. And if we look at our example, that’s exactly what is happening. Okay, so we are perfect in that regard.
Now we need to ask ourselves, what is the next thing that we want to do well the thing you guys came here for is auto counting these cards right so what I’m going to do is I’m going to grab my process right here and this is again remember the container for all of my process cards once again I have to go into custom CSS this is not you can’t do this in the builder itself I’m going to target the root which is this class and there’s two things that you need to remember when you’re doing auto counting. All right there’s something in CSS called counter. You can do a counter reset and you can do a counter increment.
Counter reset basically establishes a new counter or a new context for counting. So I’m saying on the process wrapper, we’re going to reset the counter called process right here. Now what I need to do is I need to go to the card.
The card is the increment. It’s the thing that needs to be counted. So the CSS style sheet is going to count the number of cards if I put the increment on the card.
So I’m going to say root, that’s selecting the process card class. And I’m going to say counter increment, and I’m going to use the name of the counter again, process. I’m linking these two things together.
I reset a counter called process, and then I’m incrementizing, is that even a word? I’m creating an incremental count on each individual card. Because I’m doing this on a class, it’s doing it on every instance of that card, right?
So I have counter increment process. So now what I can do is actually use the counter. I did a reset, I did an increment, I established an increment.
Now I can actually use the process or the counter. So I’m gonna go to process card heading, and I’m going to set this to position, actually I don’t even know if I need to set a position relative, so I don’t even think I’m gonna use absolute positioning. I’m just gonna use a pseudo element.
So it’s gonna be root before, content is counter, and then this is a counter function, so it has the parentheses, right? And I tell it, what is it? Process.
And look, I have one, two, and it’s gonna keep going. I was gonna say three, four, five, but there are no three, four, five cards. Okay, I’m gonna go ahead and hit save.
It’s just, again, pause, look at our work, make sure we’re on the right track, make sure everything is going nicely. Okay, so I’ve done the auto counting. What I need to do here is I need to style that number.
Obviously, it’s not supposed to look like that. It’s supposed to look like this. There’s probably a few different ways that you could go about this.
This is just the way that I am going to give it a width of like 50 pixels, let’s say. And you could, I guess you could potentially use rim here. Let’s go, I don’t even know if this, okay, let’s just go with the re-run.
Let’s just see what happens, okay? I’m going to do an aspect ratio of 1 over 1. Background color I feel like root before content counter process with 3rem background color red there it is okay I was like why doesn’t appear like things are changing okay background color is going to be this is going to be action light it looks like action light okay and then let’s do display of grid and let’s do place items in the center.
Center, it helps if you spell center correctly. Let’s color it with action dark, not action Dari, action dark. Let’s go border radius of 50 VW.
We have our circle, let’s go a border of one pixel, solid, action, ultra dark, trans 10. I’m just going to Dark Trans 10. That’s the transparent version of the Action Dark Shade at 10 percent transparency.
These are all just variables from Automatic CSS to make life a lot easier. What I need to do now is come up to the root, and I need to say that this is Display Flex and align items to the center and then probably drop a gap in here of 1M. That’s too much, 0.
5M and save. Good. While we’re here, because I’m writing CSS already, I might as well just add it here.
We’re going to say that this is going to be action dark. Save, refresh, and let’s take a look. There’s our example.
0:26:26 And look at that. 0:26:26
Looking really, really, really, really good. Okay. All right.
I’m noticing now there’s an action like ultra light background color on our section. So I’m going to come up here and say BG action ultra light. And that’s going to give it that ultra light background color.
And now we’re looking really good. And clearly just having images in here by themselves don’t look all that great. That’s why we did all these all the styling before.
So you can see if you just you know if you just throw things into a grid it looks very basic. But if you take some time and you work out some details in your UI things come together and they end up a lot nicer. OK.
Now I’m going to tackle this number next. OK. We’re going to tackle the numbers because and I think a lot of people this would be a big no no.
I’ve covered this before. Big, big, big no-no to go into Photoshop and add these numbers in Photoshop or Figma or something like that. There are a lot of designers, developers who would do that.
Trust me. We don’t absolutely, it would never be possible to reorder cards or add new steps. That would be even more of a nightmare, right?
We wanna use CSS for this. We wanna use text, okay? All right, so what I’m gonna do is I’m gonna come into the media wrapper and I am going to add this and I’m going to think do I want to add this to the media wrapper or to the media itself.
I’m going to use a pseudo element for these and I’m going to add it to the media itself and you cannot add pseudo elements to images unless they’re wrapped in a figure tag. The figure tag adds semantic value to these images but it also gives you the benefit of being able to use pseudo elements. So I’m gonna go into style.
Once again, I prefer to do all this in custom CSS. So I’m gonna put in my root selector. And the first thing I’m gonna do, cause I am probably gonna absolutely position that those numbers.
So I’m gonna set this to position relative. I’m gonna come down here and I’m gonna say, let’s create our pseudo element. And I’m going to make this content.
What is the content gonna be guys? I can go right back to my counter function. Okay, we can use that counter function in more places.
So it’s my process function. There you see the numbers right there. I’m immediately going to position this absolute and I am going to say font size, I don’t know, like 200 pixels.
I’m going to use pixels here because I actually don’t want this to be resizable. I just want it to stay static size. Alright I’m gonna go line height of 1.
I am going to go with we’re gonna have to position the absolute item. So I’m gonna do inset in line end that’s gonna put it there okay I think it should be touching the bottom right now because that’s zero I think this line height even at one is still affecting this I’m gonna go point five okay there you see so six five seven five there we go I just want to get rid of the line height and this actually I’m using the bottom of the image to figure out exactly what number gets rid of the line height at this font size So that looks like it’s good. It doesn’t have to be like absolutely perfect Next thing I’m going to do is font-weight 700 make that nice and bold you can even do like a 900 if yep might that might have done better.
I don’t know Let’s do a color actually let’s let’s go inset block end minus 1m first So inset block end minus one M first. Inset block end zero, put it over there. Ah, one M, nope, minus one M.
Inset block end minus one, minus 10 pixels. Okay, I guess one M was like, oh, because of the font size, yeah. So, one M is equal to like 200 pixels at that font size.
So, I think pixels is gonna be the best way to do this. So, minus 20, and then I’m just trying to get it to overlap, and then we do minus 20 pixels here. Because if you notice in our example, they’re kind of cut off, right?
So, I’m getting them to just go out for a minute. I think that’s probably good. We can adjust it if we need to.
Now what we want to do is on our media, well actually right here because I’m writing CSS, I don’t need to go find this input in the builder. I can just say overflow of hidden and that’s going to chop those off. And now I’m seeing chopping them a little, a little too much.
Okay. I feel like that is the best way to go right there. Let’s go with color and we’ll do white trans 20 and that’s clearly not enough 60 70 80 90 80 80 90 I Think that looks pretty good, and I’m guessing that there is a shadow of some sort that makes that even easier to see so I’m gonna do a Text shadow Two pixel two pixel two pixel 2 pixel, 2 pixel, 2 pixel, action, ultra, dark, trans, 10.
There it is. 80 pixels. Nice.
Let’s go with trans 20 on that. And we’ll just stick with that for right now. Okay, let’s view this on the front end.
Ah, look, you see that I’m not bringing it out enough and these numbers are not big enough, not even, not anywhere close. 300, let’s do 300. And then this needs to be minus 20 like I had it and minus 20 like I had it.
Save, refresh, and there we go. So now I’ve got the auto counting numbers here. I’ve got the auto counting numbers on the images themselves.
Okay, we’re making really, really, really good progress. The next thing that I want to do is take care of these slants and this accent box back here. Okay, let’s get started on that.
So media wrapper, first thing I’m going to do is we’re going to go back to using a pseudo element. So that little block back there is going to be a pseudo element. Actually, it does not need to be a pseudo element.
It does not need to be a pseudo element. What we’re going to do is use a gradient background on our media wrapper. Gradient background on our media wrapper.
In order to see it, we’re going to add inline padding to our media wrapper. So here’s our media wrapper. I’m gonna say space M for medium spacing.
And that’s gonna give us like, I can now see the left and right sides of my media wrapper and it shrinks my media in a little bit into the middle. And now if I just go to background and add a linear gradient, I kinda wanna do this in CSS though, because it’s just easier for me to manage, honestly. And I want you guys to learn CSS too.
I like you, you should follow along with these tutorials, number one. And when I write CSS, you should write it along with me in the tutorial. Don’t like try to copy paste it or anything like that from anywhere.
That’s why I don’t give code snippets. You, the best way to learn is to actually write. Okay.
And I want to empower you to like not constantly need the inputs and page builders. Okay. And when we talk about scalability and maintainability a lot of times being able to write your own CSS lends itself to greater scalability and maintainability.
So what I want to do is I want to do a background linear gradient and then guys just I teach to make this as easy as possible on you. This is literally the methodology I go through when I do stuff like linear gradient functions, which are a little bit hard to wrap your mind around, and I’m dyslexic, so it’s even harder for me to wrap my mind around them. I just do an ugly ass gradient, like literally just, yeah I know that’s not what you want, but look how obvious it is at what’s happening now, okay?
So I do red and blue, and so I need the blue part of this gradient, see the blues on the bottom? I need the blue to be that color right there Which I believe is action light so all I do is come in and change the blue now to var Action light and then I need the red to be transparent, so let’s just say transparent all right transparent There we go, and now I get Like it’s like a fade effect right here, okay? So now I say the transparent is gonna be 50% and the action light is gonna be 50% and now look, it’s like it’s a line and that’s perfect.
So now what I need to add is a degree, right? So like, let’s try 15 degrees and clearly I see that that’s a problem now. It’s kind of flipped things upside down.
Let me see if I can do negative 15 degrees. Okay. And that gets my slant going left to right, which is actually correct on this card, but my colors are flipped.
So I actually have to grab this and put it where transparent was and put transparent down here. And that should get me to where I want to go. Now I think that slant’s a little aggressive, right?
Like let’s do minus eight degrees. And by the way, I know right away in my mind, I’m like, I don’t want to be typing these manual numbers out. I need a token that takes the place of this degree so that I can adjust these at any time and not have a bunch of, you know, these different degree statements that I have to manually adjust.
Let me see real quick if that’s yeah that’s about exact where I want it. I think 50 percent is is a good way to go. Okay so I am going to the question now is where do I want to set the degree.
I probably want to do it on the process card itself. So I’m going to come up here to root and I’m just going to be the slant. Let’s call this the slant angle or that’s two words together right slant and angle don’t they kind of mean the same thing.
I’ll say accent angle. Let’s do accent angle. I don’t know let’s just do angle.
Will everybody know what that is? Will everybody that comes along later know what I’m talking about when I mean angle? I think so.
Okay and I’m going to do 5 degrees here. Okay, so the angle is 5 degrees. Now I’m going to go back to my media, my media wrapper, excuse me, and I’m going to go back to my linear gradient and I’m going to put a calc function in and I’m going to say that it’s the angle times negative 1, which makes it a negative number.
Okay, and so that’s kind of the plan that I want to go with here. Now watch this, if I go over here, I can change the angle to eight, and look how they all change, right? And so I have like a single source of truth for this angle that I’m gonna be using elsewhere, because remember, we’re eventually gonna have to have an angle on the image as well.
And I don’t want this angle, raw values, and all these different places, I want a single source of truth. What is the number one principle in development? Don’t repeat yourself.
Dry, D, R, Y, don’t repeat yourself. This is how you avoid repeating yourself. You create tokens for things.
All right, so now what I’m gonna do is I’m gonna take, here’s my media wrapper, all right? And I actually may wanna move this code. Actually, no, I think I’m good here.
I think I’m good here. I wanna add the code for the image now. So I’m gonna take the media wrapper.
Oh, I can’t do it on the media wrapper. Can’t do this the way that I want to. 0:38:32
Okay. 0:38:33 I’m going to do this at the process card level.
So I’m just going to copy that and move it. We’re going to get rid of it. We’re going to go to the process card itself.
I’m going to come down here and say that this is the media. Like this? Okay.
Okay, so root double underscore, because I can actually, with this dynamic root variable, I can link off of this to target the media wrapper without having to write the actual physical name of the class, fantastic feature in Brics. So root media wrapper, and now what I’m allowed to do is come in here and say root media, all right? Now, we’re not gonna do a background linear gradient thing what are we going to do?
We’re going to do a mask okay and I actually need to copy this because when you do masking in CSS you need to use the webkit prefix okay so you need to do both here’s the mask here’s the webkit mask but guys you can use your same linear gradient as a mask it’s so fantastic you don’t have to do a lot of extra craziness. All I need to change is the percentage. So let’s go to 80 and 80 and that looks good there.
So this is angle. I’m going to call this image height and we’re going to put this at 80 percent. And this actually needs to be media height.
So the media height is going to be, I got the angle and the media height and I need to change this 80% to var media height Okay, perfect. I know where this is advanced right? This is advanced We’re doing a lot of advanced stuff right now Okay, let’s refresh and see how we are Looking really good.
Now. The thing is I want I want the angle to alternate, right? So what I actually need to do is I need to grab this and I need to say, all right, and this only needs to happen, by the way, at 767 and up.
I don’t actually think I want any of this happening. Yeah, I don’t even think I want any of this happening 0:40:41
on mobile. 0:40:42 So I’m just gonna take both of these statements, app media, min width, 767 pixels, okay?
Pop that in, still happens, okay? But now when I go down to mobile, it’s not going to be doing all this craziness, okay? All right, let’s get, I got my mass in there, all right, app media, 767.
I need to do is I need to target my even cards. Okay, so let’s come down here and give a, and I’ll say, I’ll just put another comment, right? I’ll put a comment here.
I’m just commenting from people that come behind me or for myself three months from now, okay? So slants on desktop, great. And then alternate slants, bang, right here.
And then so now what I’m going to do is I’m going to say I’m already in the media query, right? So I’m going to take this dynamic root selector. And I’m going to be targeting right now on process card, so I’m actually targeting itself.
I need the even versions of this card so inf child 0:41:59 even.
0:42:00 Border check border 5 pixels solid red. There we go.
Indent that, perfect. Now, in the even cards, I need to target the media wrapper. Because I have the dynamic root selector here, I can actually do it like this.
Media wrapper, there it is right there. And what I want to do is take the code for my media wrapper and drop that in in place of the border. But I want to change the angle to times 1 instead of minus 1.
Now I want to make it a positive angle. Now I want to take the root media. I’m actually just going to grab this, paste it, take out the wrapper part.
That’s going to give me the media and I’m going to change this to mask And actually I’m just going to grab all this right here Okay, and paste all that mask stuff and then all I need to do is change the angle to positive one Okay, did I do this properly angle? times one angle times one okay, and and media height 50% transparent. There’s a lot of stuff going on here.
Let me refresh. Okay, so that one’s, it’s the image mask in child, even root, oh yeah, okay, root media. The root media is not a direct child of the card, right?
So I just need to target the root media by itself. And let’s go ahead and hit save and refresh. And now my slants auto alternate, which is absolutely fantastic.
And that looks like a direct, pretty direct replica there of what we had going on. Okay. All right, let’s do the divider here.
Notice the divider extends off to the sides. Notice it fades out a little bit which tells me we can’t use border you can’t use a border because you can’t fade borders like that so this has to be a pseudo element and it needs to be attached to the process card so once again I’m going to come down here I’m going to give a comment we’re going to target the root. By the way, we can come up here and just say position relative on the, remember the process card is, we just need to position it relative, because we’re going to need to absolutely position this border, I believe.
Okay, so this is going to be an after element. Our content is going to be blank. Position it absolute, make it ugly with 100% height, 1 pixel, background color red.
We just want to see it. There it is right there. Inset block end of 0 will align it straight to the bottom of this card.
Save, refresh. So now check that out. You’ve got a red, but the thing is it’s not extending out past the edges, okay?
So let’s think about how we want to do that. I think what we should do is come in and do an app media. We only want this to happen on desktop.
App media, min width, 767 pixels. All right, what do we want? We want the root, not the right, we want the root after to have a width of a hundred and ten percent maybe.
Let’s go look and look at that. It extends ten percent off of the other direction. We need inset inline start of zero
0:46:02 Okay, that’s gonna line it to the left edge 0:46:04
But actually what we want to do is center this okay, so the way that we center an absolutely positioned item is 50% from the left and then translate it back minus 50% and Now we have it in the middle, and it’s going 10 percent off to the sides. Now, what we need to do is make it a gradient. Now, what we’re going to do is come in here, and see this media query only controls its width on desktop only.
If I go to mobile, I still have my border, but it’s not extending past the sides because we don’t want to create overflow situations potentially. This is really, really, really good. Let’s go, where were we at?
Okay, right here. Let’s go back to desktop. Look at what we’ve got going on.
Gradient. So I want to do a background. Instead of a background color of red, I want to do a background of linear gradient again, and I want to do red-blue, make it ugly.
So we can see it easier, make it five pixels. Notice the red is on top of the blue. I want the red over here and the blue over here.
So this has to go at a 90 degree angle. So now I have red on the left blue on the right. Okay?
Now I want just blue in the middle and red on the edges. So I’m gonna add another red. Okay?
So now I have blue in the middle and I have red on the edges. Now I have to figure out what my ratios are going to be. So if I do 80% okay blue red needs to go to 20% to 10%.
Actually I want to do 5 and 5. So 5 remember it’s 10% longer than the thing so it makes sense that 5% is red, 5% is red and then the rest is blue. So I believe this needs to be 95% and the blue will take up 90%.
I always struggle with these stupid percentages. I think I need another, do I need another blue? Blue to 5%, there we go.
But I think maybe make it 15 and 95 red, whatever. We’re going to move on. I feel like fucking Joe Biden right now.
Okay. We’re going to go. We’re going to move on.
0:48:38 Okay. So 90 degrees.
0:48:39 All we need to do now is the reds go transparent. 0:48:44
Perfect. 0:48:44 The blue, this red, transparent as well.
Excellent. Yeah, 15, no, five. How about just transparent?
0:48:54 There we go. 0:48:55
Okay, so blue to 15%, is that? That’s what we do. Okay, we didn’t even need percentages on the other side.
All right, so the blue obviously is not blue. That’s going to be action dark trans 10 Probably somewhere in there for action dark trans 10 Maybe 0:49:18
20 0:49:19 20 and now we don’t need it to be 5 pixels.
Let’s go like 1. 5 pixels and Then let’s move it down inset block end minus 1. 5 pixels.
Okay, okay, and I’m going to put a little note here because that’s kind of a it seems like a like a magic number. So I’m going to put the match width of border. Okay, sorry, match height of border.
All right, perfect. That’s going to make sure that that border doesn’t overlap and therefore you can’t see that it’s actually transparent. Look at that.
The next thing I need to do is there is a box shadow but this kind of box shadow you cannot really create this with the actual box shadow property. I’m going to use a pseudo element. So I’m going to come down here and say box shadow.
All right, and I’m going to get my root for this card. I use an after for the border. I’m going to use a before for the shadow.
Content is going to be blank. Why is that? Why is that breaking?
Oh? It’s bringing our layout because it’s putting it in the grid. Okay, if I position this absolute we’re good to go.
There we go. Okay Let’s make it ugly. Make it ugly.
So width 800 pixels height 8 800 pixels Background color red make it ugly make it ugly. All right 400 400 Okay 400, 400. Position absolute background color is red.
That does not look 400 and 400. Aspect ratio one to one. Something is influencing the height of this.
Oh it’s two of them. It’s because it’s showing up on both. They were adding together.
Okay. So there’s 300 and 300. That might do.
That might do. Okay. So what I’m gonna do now is center it on the card.
So we’re gonna do inset, inline, start of 50%. We’re gonna do inset, block, start of 50%. That’s 50% from the left 50% from the top and then we’re going to translate it back minus 50% minus 50% that’s going to put it dead in the middle.
We actually don’t want it to be quite dead in the middle. I also want it to be behind the element. Let’s z-index this of minus one which it’s going to disappear completely because it’s behind the background color of our section.
So on our section here, I’m just going to come over here and we’re going to do an isolation of isolate. Perfect. That brings it back.
Now, what we actually need is the cards themselves don’t have a background color. So we’re going to make their background color the same as the background itself, which is action ultra light. And we’re going to save there.
And now let me zoom out here and see what we have. Okay. You cannot see it anymore because it’s perfectly basically the size of the card and there’s a background color on the card.
And this thing is behind the background color of the card. But what I, what I can do now is blur it. That’s what I intended to do.
So we’re going to come down here to our box shadow and we’re going to add a filter of blur and we’re going to do like 25 pixels and we’re going to get something like that. And now suddenly you see it, right? 200 pixels, 220 pixels.
That’s pretty, actually, I think if I go with 200 and then just move it down so inset inline start of 55 now that’s that way I need block start of 55% It’s gonna bring it out there. Let’s do a width of 300. Let’s not do the aspect ratio of That let’s do a height of a hundred percent and maybe even 90% I just really just dial this in 80%.
Okay. And then a width of, how about we do a width in percentage, a width of 50%, 60%. Okay.
You get to just dial these numbers in to exactly the look and feel that you want. I’m actually going to use instead of percentages here, inset block start. Let’s calc 50% plus 50 pixels.
Like I can control the offset better this way. 30 pixels, feel like that’s a bit better. Height 70.
And then let’s just change the color to action ultra dark trans 10 or 20 and save. And let’s go in and see, and that is not prominent enough. All right, so let’s do 40, save.
There we go. Now I’m seeing it, let’s bring it in a little bit more, 50. Just dialing it in.
We’ll take a look at it more in a moment, but I think we’re pretty much there with that. Okay, one thing I’m going to check now is if I duplicate this, look at that, we have a problem, all right? The content is allowed to touch the bottom of the container and our image is actually floating out of its position.
This is why it’s important to check things with various content heights. So I’m going to take my content wrapper here and I’m going to add a block padding of space m maybe even space l okay top and bottom and that’s going to make it so that content never touches the bottom of the container and maybe I even take the padding off the top at all. Okay, now in here in my media wrapper, I just need to align my media to the bottom, to the end.
Now, look at this, my image is too short when that happens. First thing I need to do on my media is set a flex grow. I need to allow this thing to grow with the height of the container.
I’m going to come down to flex grow and add a one, and look at that, it’s going to grow to reach the top and I think that’s pretty good I think that’s pretty good so now I can get rid of this I can get rid of this and now oh now I see you can’t just add the padding to the bottom because then your stuff won’t be centered in here so I need this to be top as well. That’s going to bring the balance back. Okay, let’s go ahead and look at what we’ve got here.
It looks really good. Ah, and here I want to get rid of our inline padding. So let’s zero that out.
I just want kind of normal images here. I need to get rid of the gap in our card. So our process card gap goes to zero.
I don’t need the gap because I have the padding in my content wrapper. So that’s good. And guys, this is just, it’s already done like on mobile.
Mobile is just not going to be a problem. 0:57:25 Easy, easy, easy, easy.
Okay. 0:57:28 Now what we’re going to do is we are going to collapse everything over here.
And we’re going to finish our process card. So three, four, five. So I’ve got school.
What’s the next one? We’re gonna go written exam, medical evaluation, checkride. Well, we’re not gonna do medical.
We’ll leave that one out and we’ll add it at the end like we did earlier to make sure that everything is working properly. So school, we’re gonna do checkride. We’re gonna do license.
I don’t even know the order. License comes last obviously, so we’ll switch those two. The end is, okay, checkride, written exam.
That’s the one I’m missing. So this one needs to be exam, exam, checkride, okay, and then license. So there’s flight school, discovery flight, flight school discovery flight flight school written exam all right this one needs to be written exam the next one needs to be check ride right check yep this is check ride and the last one is license Okay, wow, cannot type today.
Alright, so come down, license, grab here. Alright, drop that in. And we’re going to drop this in for checkride.
We’re just going to button everything up. I mean, I, I, I, you should still stay to the end. I mean, there may be something I forgot.
A written exam, we’re going to just do a review of everything here. Oh, I put the medical evaluation in. That needs to be a written exam right here.
Okay, we’re going to take this checkride text and drop that in. Wait, what are we doing here? Flight school.
I don’t know what I’m talking about. Flight school goes there and then discovery flight. I think I’m getting the content from the wrong places.
I was not going back to this one. All right. Discovery flight, embarking your journey, conference of flight school training, solidify your written exam, the check ride, the license.
Okay, got it all, got it all. Now I need the license photo. Here’s her license photo, yay.
And then I need this. Oh, I’m also noticing, I think these are too skinny. That’s another thing we need to fix.
They’re too skinny. Okay, so check ride. Is that the checkride photo?
Checkride, that is the checkride photo. I already got that. Okay so that checkride photo is good.
The written exam photo needs to be this guy right here. Look at that fine young man taking his written exam. Flight school can be like this dude in the cockpit Nice.
Okay. Now I can come down here to our process card and I can say hey, we’re gonna put a min height on this 600 pixels that’s clearly too big about 500 pixels I still think that’s a little bit too big. How about 400?
450 save 400, 450. Save, refresh. That’s looking much, oh, I wanna cut this off right here.
I don’t like how far over this goes. I like it to be a little bit more concise. So on my content wrapper, yeah, let’s go on the description.
Let’s just say our width is going to be 40 characters, something like that, 50 characters, 45 characters. There we go. I actually want the width of this process card to be a little bit narrower.
So we’ll go width XL, not on the process card, my bad, on the process container. Width of width XL, and that’s going to bring everything more into the center. That actually needs to be xxl.
I don’t want to go too crazy with it. Don’t want to go too skinny with it. Now everything looks a little bit more nice and concise.
I’m really really really liking this. Okay let’s do our little intro up here. So in our intro I want to do a heading, I want to do text, and then we’re going to check everything after this.
Text, text. This is going to be our accent heading. Now, if I want to be able to do, obviously I want to be able to use this intro over and over and over again.
So I’m going to put a class on everything. We’re going to call this intro, let’s call it like intro, I call them like intro alpha, intro bravo. Let’s do intro centered like that.
So here’s intro centered, and this is gonna be my accent heading. Now accent heading is not a BIM child of an intro because the accent heading looks the same everywhere on the site. So I’m just gonna go with accent heading by itself, but intro centered underscore lead, it is a BIM child.
The lead is a BIM child of this intro section, but you may also want like a generic lead class to control lead styling all across your website. That’s an instance where you might want to have two different classes. This is an intro centered heading, okay, and this one because this is the main heading on the page, right there, needs to be an H1.
So we’re going to say H1 on that. This needs to be a paragraph. This needs to be a paragraph.
Okay. And then my accent heading, I need to go layout, order, minus one, to bring that to the top. And then this is going to say our process.
1:03:37 Awesome. 1:03:38
We’re going to style this up while we’re here. So let’s go typography, uppercase, small text, font-weight 700, 0. 25 M on our spacing.
I’m just looking right there. We’re going to go action, probably dark. Excellent.
Our centered intro is going to actually get centered both with Flexbox and text and then here where I want it to align left I’m gonna go back to the left with text and I’m gonna go back to the left with flex and then I’m going to have this say private pilots license overview and I’m going to bring this down here all right and then my leads I want to all say now these are only going to be like 40 characters max, maybe 60 characters max. This intro centered heading is going to be 50 characters, 40, 30, 20. There we go.
That looks nice and tidy. Refresh, refresh. I mean it’s almost an exact replica.
We’ve got a little bit of a difference in like the line length here of these, like which I can just come down and say go back to my description. Maybe that goes to 40, something like that. Okay and again we’re not looking for, it looks like the card itself is actually a little bit wider.
We’re not actually looking for like, you’re never looking for pixel perfection. You’re looking for a accurate representation of what you were given from the beginning. I’m looking at, yeah, I feel like that’s good.
I feel like the height of these cards is a little bit higher. That’s really one of the only differences. And I had the media height, right?
That can go to 85 percent, and it’ll probably take care of that little discrepancy. Oh, it’s actually bigger on our, on, that could be the min height too, affecting that. Let’s go to inspect.
Did I have a min height on here? Step card, display grid. I don’t know that I had a min height on there.
Let’s go back to here. I’m just doing some cleanup right now. So let’s go layout min height 400.
And then you see like that’s affecting our image. So I’m going to go back and set that to, I think 80 was safe before. Refresh.
refresh now I think now we’re now we’re closer yeah very minor minor minor minor differences it’s a width is a width difference in the overall cards to just because I used probably a variable on one and a different variable on the other, but I mean all in all, I mean look what we’ve got. Now let’s go ahead and add our another process card, right? Let’s go ahead and add the medical.
So we’re going to duplicate discovery. We’re going to change that to medical. Discovery is going to become medical evaluation.
This is going to say schedule medical evaluation and Then I’m going to swap this photo for the medical evaluation Save refresh and I mean look how easy that is to add something new Everything recalculates everything reorders. We can go ahead and do a mobile check here Okay. So here we are desktop.
We’re gonna start bringing that in. We’re going to check how are things going. Everything’s still acceptable.
Then it breaks and everything still looks good. Very nice, very nice, very clean, simple on mobile, no overflows. I’m watching the text size here on these images.
We’re at 350 right now and at 320, you know, those numbers are a bit big. They are a bit big at 320. So I can just make a quick little adjustment.
So we’ll just go down to that break point and I’m going to go to my media and is it on the media wrapper? Where did I put? I think I moved everything to the process card.
It’s, oh, actually I can’t look for it in CSS unless I’m where I wrote the CSS. So let’s go to media. There it is right here.
So root before font size is 300 pixels. I don’t need to write all of this again. I just need to go to the mobile breakpoint and say root before.
Oh that’s what I copied, root before, and go to font size, and do 200 pixels. Just maybe do 250, something like that. So save, and now let’s go back to where I was at 320-ish.
Let’s go down, there’s 320 right there. By the way, you can just come up here and type in a number, and let’s refresh and there you see now it’s you know still big but not touching the top of the of the image and you can make whatever adjustment you want if you want that to go to 200 you can come back here see it again you like that better no problem whatsoever and then it just jumps back to being its normal size when we get back to desktop again everything including the mobile order of all of of this stuff takes care of itself. Very, very, very, very simple, easy.
I mean, obviously there’s a lot, let me go back to camera. Obviously there’s a lot going on there. Obviously we did a lot of custom CSS.
A lot of what I put in the custom CSS, you can use the input fields in Bricks. You can use the page builder input fields. But what I’ve found is once you’re there writing the CSS, if you are empowered to write CSS, because you know it, you’ve studied it, you’ve been taught it, it’s easier to just keep writing in the CSS, rather than going and hunting down the different input fields that you need, which are usually scattered kind of all over in different areas.
You’re already there writing CSS in one spot, it keeps all your styling in one spot. You can add comments to things. This is why I say it’s very important to empower yourself with CSS, custom CSS knowledge.
You don’t have to learn how to write HTML. You don’t have to learn how to write PHP. You don’t have to learn how to write JavaScript.
But I think you do, you should, if you’re gonna consider yourself to be a professional, you should be comfortable writing CSS. And you can see how handy it comes in and how much power it gives you and how you don’t have to just go looking for scattered input fields all over the place. One question I have for you, do you, if you’re a beginner, if you’re more on the beginner side of things, when you watch me write a bunch of CSS like that, when you watch me create, and by the way, I was just talking, right?
I can do this faster when I don’t have to explain everything that I’m doing, obviously. 1:11:14 I think there’s a lot of benefits.
1:11:16 Some people might dismiss this and be like, oh, that’s too much work. I just want to throw it together.
Not keeping in mind the fact that they’re creating disasters throughout the website down the line. Okay, I want you to, I mean, if you’re up for it, create what we just did manually. Don’t do any of the auto alternating.
Don’t do any of the auto angle changes. Don’t do any of the anything that we did. Just make it all manual and then go add a step and just look at the nightmare that’s created, right?
So my question to you is, do you agree? Okay, I want you to comment down below. Do you agree that it’s worth the extra Is, putting forth a little bit of extra effort to do what we did to make it auto count, auto alternate, auto angle, all of that stuff.
And by the way, doing that is required if you want to query loop things. So if you want to dynamically generate this process from a query loop, like from advanced custom fields or something like that, you have to do what we just did Okay, you have to know how to do it and you have to actually do it But even if you’re not using a query loop, do you agree? It’s worth the extra little bit of effort and knowledge To make this an unbreakable situation to make this that much more scalable and maintainable either for you three months down the line or somebody on your team who comes in after you?
Do you agree it’s worth it to put that extra effort in and make it fully scalable, fully maintainable, an unbreakable situation? I say yes. What do you say?
Thank you guys for watching. If you got a lot out of this, thumbs up on this video. Helps me tremendously.
Drop your comments below. Make sure you’re subscribed to the channel. I’ve got more your comments below.
Make sure you’re subscribed to the channel. I’ve got more great content on the way. Cheers!
