Welcome inner circlers. This is another advanced training today.
We are going to learn how to build a Kanban style I don’t even know if that’s the right way to pronounce that term Schedule and really it’s we’re gonna be doing a schedule But you could use this for a lot of different purposes and what you’re going to learn in this training is going to apply to a lot of different Situations. Okay.
Let me show you right off the bat what we’re going to be recreating. This actually isn’t even finished.
This is still in production. But as you see, we have Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday.
And we can scroll left and right. And the reason we wanna scroll left and right is because it’s not really a good user experience if you have a grid, right?
This is a content width grid. We don’t want all these squished.
I mean, there’s seven columns, right? So if we really didn’t want any left and right scrolling, I mean, look, we’re cutting off Friday, Saturday, Sunday.
If we wanted to fit all those, we’d be squishing them in, right? And we don’t want them to stack.
It’s not really good to have like Monday, Tuesday, Wednesday, Thursday, and then way down below is like Friday, Saturday, Sunday. That’s not a real good experience either.
For me, I think the best experience is to let people scroll horizontally. Now on mobile, we do actually, or we may, we can keep this exact layout on mobile, that would work, but what if we want this to stack?
Can we make it stack properly where Monday’s items are still linked with Monday and Tuesday’s items are still linked with Tuesday? I do want to tell you that this is not seven separate columns with, you know, things manually placed into each column.
The original methodology that I followed that made sense to me at the time was to create a seven column grid. And in each column, we would put a query loop.
And first we would put a header in each column. And then we’d put a query loop and we would query the Monday items in the Monday column and the Tuesday items in the Tuesday column and on and on and on.
But that actually breaks some important things that we wanna do in the future. For example, we can’t facet, we can’t sort the schedule with any type of faceting when we have seven different query loops in play.
So in order to use faceting, we have to use a single query loop, which means all this has to be done with a single grid. That’s what you’re looking at right here.
This is a single grid, yet somehow there are things organized like into their actual column that they belong in. Some columns are somehow allowed to be blank, right?
A lot of people will look at a table like this and say, well, that’s probably a table. No, this is actually CSS grid and I’m going to show you exactly how I approach this and how I accomplish it because I think it’s very interesting.
It’s very unique and it will teach you a lot. It’s gonna be some good skills for you to have in your toolbox for sure.
And it’s gonna give us the ability for when we stack this on mobile to still keep everything grouped together even though these are all just kind of random items in a grid. And that’s the other thing is we want all this populated dynamically from custom fields and a custom post type.
We wanna be able to relate instructors to specific classes. We wanna be able to relate classes to specific programs.
We wanna be able to relate classes to specific locations. We then wanna be able to filter this by location, filter this by who’s teaching, like what instructors are teaching which classes.
We wanna filter by the program type. We’ve got the duration in here.
There’s a lot going on. And I’ll just tell you right now, this is gonna be probably a two-part video.
What I’m gonna tackle in part one, right now, is the CPTs, the custom fields, the grid, the ordering, sorting of the grid, so that we can get everything into, like, Monday’s items are in Monday, Tuesday’s items are in Tuesday, and so on. And then we’re gonna get the stacking on mobile, keeping everything grouped together.
And then in part two, what we’re probably gonna handle is the faceting side of things. And we’re gonna handle the, excuse me, it’s choking me up because I currently don’t know how I’m going to accomplish it.
We’re going to handle tab index, because if everything is random in the grid, when somebody tries to tab through everything, it’s probably going to tab at random. It’s going to select items at random instead of selecting items with the keyboard in logical order.
We have to come up with a solution for that. I honestly don’t have it right now.
I haven’t even gotten that far. So, but part one is okay.
We’re gonna have part one good to go. Part two, we’ll figure that stuff out.
You gotta, in web design, you don’t have to have everything figured out before you start, okay? We gotta get to what we can get to, and then as challenges come up, we will brainstorm solutions for them.
So, without any further banter, we need to go ahead and get started. So I’m going to go right into ACF.
I have a completely blank install here. I have done nothing on this site.
Okay. This is generated from my local blueprint and I’m just going to start by getting the custom post types in place.
That is custom fields. I actually want custom post types.
Okay. So I am going to add, we’re going to do this in tabs.
I’m going to say one, that’s going to be for the schedule items and Two is going to be for programs Three is going to be for instructors four is going to be for locations And I think that’s all we need okay, so in this first one. I’m going to say schedule Item or items that’s the okay.
This is going to be schedule item and The post type key is going to be schedule items. Great.
Taxonomies, I don’t think we need. Hierarchical, I don’t think we need.
I’m just gonna go ahead and hit save. So this is gonna add schedule items.
You can call this whatever you want by the way. If you don’t like my names, that’s that’s fine.
Then we’re gonna do programs. Program.
Programs. Okay, this will be hierarchical even though we’re not really gonna do anything with the test data.
The next thing that we’re going to do in this tab is locations, location, locations. Okay, let’s go ahead and save there.
That does not need to be hierarchical, must contain only low, oh okay, that’s got to be only lowercase, locations, save. And then here is going to be instructors, instructor and instructors.
All right, save. So now we have schedule items, we have programs, we have locations, and we have instructors.
So now what I’m gonna do is I am going to add a new item here, and this is gonna be called Monday item. And then I just basically need like at least one piece of dummy data in every single thing here.
So under programs, I am going to say Alice Wonderland. Okay, we’re going to publish.
And then under, let’s see, instructors locations, I’m going to say Atlanta. Okay, so now I’ve got CPT’s created like that, like that’s easy.
This is a walk in, it should be a walk in the park for you by now. I’ve got a piece of dummy data under each CPT and now what I’m going to do is I’m going to go add my actual schedule page.
So we’re going to build out the schedule page, publish, publish. We’re going to go to edit and I am in BRICS 1.
9. 1.
So latest update has the new root selector, all of that good stuff. We can actually use nested groups in ACF now apparently we might do that.
We might not do that. I don’t really know how this is going to go This is going to be our schedule right here, so I’m going to call this Schedule section I’m going to call this schedule, and then I am going to put in an item I suppose okay, so The question now is do we need a cell or can we just put our items in the schedule?
I say I don’t even actually know the answer to these questions. So I’m going to, as we go, if we run into challenges or roadblocks or whatever, we’re going to figure out how to overcome those, and it’s all going to be fine.
All right, so this is going to be called a schedule item. So we’ve got a schedule and a schedule item.
First thing I need right off the bat, we’re going to say this is a schedule. This is a schedule item.
Notice that this is a child of this, but I’m not doing that with the naming convention in BIM. Because a schedule item card, and really I don’t want to call this a schedule.
Let’s call this a schedule card. All right, so a schedule card could be used in any other kind of schedule, not just this schedule.
So and just this schedule is going to be the Kanban style, right? The schedule item, there’s a schedule card, let me put the schedule card, is really like a separate component.
So it’s not an element of a block, it is a block in itself, which is why it gets its own block class. Just to explain that for you.
This is going to be schedule section, okay? Perfect.
So we’ve got schedule section, we’ve got our schedule, and we’ve got a schedule card that goes in the schedule. Perfect.
Now, I actually want to build out the schedule card before we really get any further along. All right, so that seems like a logical next step.
It’s an important next step. It gets us a lot of work accomplished, right?
This is probably the most detailed part of this schedule. So let’s go ahead and rock that out.
So first, before we do that, let’s just go ahead and grid 7 this. I guess I’m going to try to avoid utility classes, so let’s go in here CSS and look at this.
We have our new root selector here. I’ll go ahead and zoom in for everybody.
R plus tab is actually the shortcut for putting in root, and so I’m going to say, hey, we’re going to display this as a grid. Our grid template columns is going to be repeat and then 7 min-max 0 1 fr Okay, and that’s going to give me the 7 column grid and you’re gonna see right off the bat What our primary problem is and why we have to have the horizontal scroll situation going on.
Okay, so I’m in the schedule Here’s the schedule card. Let’s start adding things.
I’m looking at the structure of this card right here. I’m gonna go ahead and really zoom in on this.
What I see in terms of boxes is a header right here. So all of this is in a header.
I have all of this in a body and then I have all of this in a footer. Okay now this might be another group of content.
This is for sure another group of content. We’ve got to see I want this to support multiple images.
So if there’s multiple instructors for a class, I want them to layer on top of each other. Okay, so let’s go ahead and at least get the general structure down.
I can close this, this, this, and this, and this. Okay, so I’m going to add blocks.
This is gonna be the header. This is, I’m gonna add another one.
Okay, let me open this so you guys can see what I’m adding. I’m gonna add another block.
This is gonna be the body. This is gonna be the footer.
So there you go, header, body, footer, right? Let’s go ahead and label those.
Header, body, footer, and let’s give them BIM classes. So we have a schedule card, double underscore.
I’m going to copy that to my clipboard. This is going to be the header.
This is going to be the body. This is going to be the footer.
OK? So when you’re doing BIM and you’re creating these components, I would step down as you go.
Like every time you add the next layer of elements, give them classes. Then go in and add the next layer of elements, give them classes, and keep working your way all through.
You don’t want to add every possible element to the block and then try to go add, because sometimes you miss things. Sometimes you miss an element, things don’t have a class, all of a sudden not a good situation.
Okay, we’re looking here what needs to go into our header is a text element and a text element and then this may end up being a pseudo element. Maybe we don’t even have this.
Maybe we actually position this element over here to add a little more balance to the card. We’re going to have to play with that.
We’re going to have to figure that out as we go, but I do know I need at least two text elements and then what I would recommend is just put in static data for right now right so I can say SBG Atlanta as our location. I’ll just we’re not even going to brand this so I’m just going to say Atlanta and then I’m going to say 6 p.
m. all right perfect now what I want to do is I want to give this a class now this is going to be a schedule card it’s in the header right I’m going to say but it’s probably if we think about this this is like meta information, and this is also like meta information.
Notice these things share the same style, even though they’re in different locations and areas. So you think of them almost as a little bit of a element block kind of thing on their own, right?
So I can say schedule card meta, and this can say schedule card meta. So these two things can share styles, as well as we’re gonna do a meta on the duration down here.
In fact, I’ll go ahead and put a layer in here for this duration, 60 minutes, and this is also going to get schedule card meta. But here’s where we learn to layer classes as well.
So we know these things need to share styles, but they also probably need some sort of unique selector attached to them as well. So this is going to get another class.
We’re going to use two classes here this is gonna be a location this is gonna be a time and then this is gonna be a duration okay duration great now this needs a icon next to it okay let’s and let’s let’s go ahead and make sure all this stays organized so this is gonna be time this is gonna be locations I’ve got location I’ve got time I’ve got duration they all have the meta tag. Duration is gonna need an icon next to it, which means we need a group of content here, which tells you you need another box, right?
So I’m gonna go ahead and wrap this with a div. And this is gonna be called the duration wrapper.
I’m gonna say duration wrapper, just like that and then what I can do is I can drop an SVG element in here and this SVG element which I don’t even have any icons yet we’re gonna go to remix icon type in clock I guess yeah okay it’s called time so I’m gonna download this time and I am going to open this go to my downloads and I’m gonna say icon double dash time I’m going to let’s get the icon selected here. I’m going to drag this in and I’m going to insert that.
Okay, good. So we’ve got our clock.
This is going to be we’re going to name this icon. We’re going to name this schedule card duration icon.
Just like that. So we can see that this icon is not just a random icon in the card.
It is the icon that goes with the duration. Okay, so we’re not, we’re never doing a double underscore thing, double underscore thing.
We’re not layering BEM classes like that. All right, what we need is to determine a height and width for this.
I’m gonna go with something like one M, which is going to match the font size that we’re using in the wrapper, in the duration wrapper. Okay, so this icon pretty much will always be the font size of this label right here.
And I can also call this header, I can also call this meta wrapper, and this can also be meta wrapper because I’m gathering that the items in the footer, like the images are just gonna be images, but if there’s any other, we want to control the text size of the meta all together as well. So if I put meta wrapper, if I put a text size on here, okay, so text S, let’s say, everything is going to get smaller, right?
Everything that’s in a meta wrapper is now going to get smaller. I don’t have to go to each individual item and try to manage its styles there.
I can use inheritance. I can put the style on the parent that is shared between this header and footer, right?
This is a unique class for any unique styles that we might need, but right now we also need a class for shared styles. That’s what this is.
Okay, so the meta wrapper for the header, now see the unique to the header, I want to use flex row. I might do that down here as well, but I do kind of want to keep these unique to the header and footer, because I don’t exactly know how we’re going to be using them.
Then I’m going to add a column gap of content gap, which is, as you see, it’s going to cause an overflow. I also want to put space between on this as well.
And I want to align, uh, everything to the middle, to the middle. Okay.
Now, before we go any further, I, we have to address the width of this card. You can see our first problem.
If we don’t allow scrolling and we don’t determine like a minimum width for what these cards should be, we’re gonna get very squished up cards and we’re gonna have a hard time achieving any sort of good look, right? So we need to put a minimum width on these cards, but we’re not gonna put them on the card, right?
The card is actually gonna be as wide as the cell of the grid allows it to be. So what we need to do is set a minimum width on the cells in this grid and the way that we do that is with our grid instructions.
I’m going to go back to our grid instruction right here and you see this zero so I said hey this is gonna be a seven column grid the min is zero the max is 1fr since right now it’s being 1fr but the min is zero that’s a problem right we actually need our min to be a relevant value. Like if I put 320 pixels in here, look at what happens to our card.
Suddenly it gets much wider. And the card is going to be however big the cell is.
I just told the cell it has to be a minimum of 320 pixels wide and you end up getting this right here. But notice that everything else is getting cut off.
It’s actually overflowing out of the grid. So what we need to do now is we need to go on our schedule, that’s our grid, we’re gonna go to layout, and we’re gonna come down to overflow.
And this is where you often see me write things like hidden, okay? We need to choose something different.
We don’t wanna actually hide the overflow. We want the overflow to be accessible via a scroll bar.
So what we can say is scroll. And now it’s gonna allow us to scroll horizontally inside that container as you’ll see in a minute.
Now we’re going to need more cards to make that happen okay. Now before we do this I want this is this is effectively the we’ll call this the column width.
This is the column width of the grid right. For anybody coming along behind me who might want to manage this or for me coming back, you know, three months from now, I would take me a minute to like, all right, let’s figure out what’s going on in this grid.
I can save myself a lot of hassle just by, and I’m actually going to do this on a separate route instruction just by coming up here and starting to define some locally scope variables. So I’m going to our tab to get our route selector in, and then I am going to double dash and we’re going to say column width and we’re going to say 320 pixels.
This also gives me an easy way to just make these adjustments on the fly. I don’t have to go find these values in the code.
I take the three 20 and I replace it with column width and we’re going to get the exact same outcome. I really hate this grid overlay thing and bricks, exact same outcome, but now it’s all tokenized.
Okay. All right.
Now what we’re going to do is we are going to in our schedule here, if we look here, it has a background color and we’re going to add a background color to ours as well. So I’m going to go ahead and use shade.
Now we’ll use base and we’ll use ultra light like this. Okay.
Next thing I want to do is on my schedule card, we’re going to go with white on the schedule card. Perfect.
All right next thing I need is in my schedule a little bit of padding. Okay you see in here stuff’s not touching the edges of the schedule.
We don’t want that to happen in ours as well. For right now I’m going to do space m and I’m almost absolutely going to change this soon but this will work for us for right now.
Then I’m going to go to the schedule card. I want this to be probably space m for our padding in our schedule card.
I don’t want content touching the edges of our schedule card. I also want things to be gapped out in our schedule card.
So we’re going to use content gap divided by two to gap things out. Then we’re going to put a border on this.
So let’s go to, I’m still very zoomed in, but it’s okay for right now. Let’s go down to border, border, radius.
I’m going to go with radius M. And we’re going to add a little bit of a corner radius to every side of this card.
Let’s go in with our footer and let’s do, I think we want to do, I’m going to show you a different technique, an alternate technique that you can potentially use here. I’ll do it after we add our avatar.
Okay. So what we need is a diff.
That’s going to be our avatar wrapper. I’ll say avatars, I’ll say avatars.
That’s gonna be called avatars, okay? So we have a schedule card double underscore avatars.
Then we have another div. I’m gonna explain why we’re doing this.
This is gonna be the avatar wrapper for a single avatar. All right, so this is gonna be avatars avatar wrapper.
And then we’re going to put an image inside of that. And our image is placeholders placeholders.
Let’s go to unsplash. com.
Okay, we’ll say female martial arts instructor. All right, let’s use this.
Let’s use her. Let’s go ahead and download.
All right, perfect. And let’s upload.
We need to make a folder. Gotta organize, right?
Instructors. All right, so in our instructors folder, we’re gonna drop her in.
I’m not gonna bother changing the, you know what I do need to do though? Yeah, that’s 2,500 pixels.
Let’s go to, what is it called in my mind? Squoosh, squoosh.
I don’t know, my brain is not working in full today. All right, let’s go resize 1920.
Download that. Okay, now we can delete this, delete this, and let’s bring in the optimized version.
Perfect. All right, insert.
Great. So what we want to make sure that we’re using the thumbnail version of this, the smallest possible version.
We are not going to wrap these in figure tags because they’re not super important. We need to make them smaller though for sure.
So I’m gonna go with like one rim, no that’s not big enough, two rim, that that’s around where I want it to be We can put a height in there of two rim as well because what we’re gonna do that Aspect ratio plus the width and the height this is always gonna make sure that this is a square we do need to object fit this cover and Then what we need to do is round its corners. So I’m gonna go with a border on here Let’s go find our border area border and we’re gonna say 50 VW, and we’re gonna link that to all sides.
So now we have an avatar, avatar, and because I said, and okay, let me explain this diff. Why did I wrap, I mean, I could have just put this avatar in the avatars group, right?
But to be query loop compatible, right, what we need to do is query the related instructors. We need a query loop to do that.
You can’t query loop raw images. You can only query loop containers.
So it needs a wrapper in order to be query loop compatible. It’s just something by like experience.
I already know that we need in order to go where we want to go. But that is the explanation of why we need that wrapper.
So now I’m gonna just duplicate the wrapper and that’s gonna give me a second image. And I’m gonna take avatars and I’m gonna say, hey, we’re gonna display those flecks in a row.
And we are going to, we don’t even need a row gap, but we do need a border on these because if they overlap each other, they’re gonna blend into each other a little bit, especially if they have a similar background color. So we put a border on this.
It’s going to help us see the overlap. I’m going to say like two pixels and we’re going to go with solid and we’re going to go with something like we can do like white.
Um, now let’s do shade, light, trans 20, and we might dial that in more in a minute. Okay.
What I need to do now is go to my avatar CSS and I’m going to root selector this and I’m going to select all of the direct children But I don’t want to select. I don’t want to select the first child Okay, so not the first one and I want to do margin left of minus 0.
5 M and it’s going to overlap these items. And this actually looks like it needs to be minus 0.
75 M, no, 0. 85 M, 0.
95 M. It’s going to be tough with where that person’s face is in the photo, isn’t it?
Okay, so this may not work for all images as you see like we can barely see the instructor that’s back there. And I’m thinking right now, our border, oh, our border was on, would I put the border on the avatar wrapper?
No, I put it on the avatars wrapper? Okay, that was a mistake.
That was an absolute mistake. We selected the wrong thing.
We need to be on the avatar. My gosh, okay.
Yes, the same thing that has the radius on it. Solid.
Here we go. Shade light trans 10.
Maybe, maybe trans 30. And actually it can’t be transparent, can it?
Let’s go with shade light. There we go.
That’s pretty good. That’s pretty good.
Now we’re using base light in there and this, the base color of this website is super close to shade, but it has a slight tint. So I’m actually It’s called Slight Tint.
So I’m actually gonna transition this to use Base Ultralight. Okay, I kinda like that.
I like that, I like where we’re going. All right, now we need to take the avatars and make them first, okay?
And then in our footer, I want to align all of this stuff to the center with like vertically, okay? And actually I might want it all on the bottom now that I’m thinking about it.
Okay, we’ll see how that goes. The duration wrapper, because it’s got an icon in there, I actually do want to use the auto, we’ll use auto min-max 0 1FR.
You won’t get any icon shrinkage or anything like that with the grid technique. We’re gonna center everything vertically, and then with this, we need a column gap of at least content gap, okay, so they don’t ever, ever touch each other, but we’re going to combine that with space between to send it to the other side.
And then on duration wrapper, I’m going to need a little bit of a gap between that icon and the text. Right?
So I am going to go to gap here and for this, I’m just going to use like Ms. Just, just nice and simple.
Okay. This is looking really really really really really good.
In here we’re going to drop a heading. This is going to be an h3 but I’m going to make the size of it an h4 but what I need is a schedule card double underscore heading and then I can go to typography and we can go h4.
Give me the h4 size and this is going to be a Monday a Monday item. Okay all right so we’ve got meta wrapper setting everything to text s.
We can also go line height on all this stuff. Look, I can change the line height on everything in a meta wrapper all at once.
I’m going to do 1. 1 and it’s going to fix all of that.
And then I’m going to, notice I’m using gap to space everything out, but I actually want a little bit more space between the heading and the footer of these cards. So on the footer itself, I’m going to go with a margin top of space XS something like that and that’s going to push that a little bit further down.
So this is an example of how you can combine gap with like margin top to fine-tune adjustments if you don’t want perfectly equal spacing in something. Alright next thing I’m going to do is I’m going to borderize this.
We’re going to go with base ultra dark trans 10. These transparencies, these low transparencies are amazing for very low key borders.
This one actually can be a little bit darker. Base ultra dark trans 20.
Look at that, very, very, very subtle. I kinda would wish I had an in between size, which I can easily make, but I’m not gonna worry about it right now.
I’m just going to go back to trans 10. It’s got a very slight border on there, which is, it helps, helps with the contrast situation just slightly.
All right, so this card’s looking pretty decent. In the meta wrapper, I’m going to go ahead and, again, transparencies are going to come in super handy here.
Base, ultra dark, trans 60, 70, 60, let’s go with 60. And everything that is a meta item is gonna get lighter, which is fantastic.
I don’t have to go, again, item by item by item by item by item making those adjustments. The only thing that’s not picking up is the logo, or the, I’m sorry, the icon right here.
And so in order to do that, I’m just gonna go to the fill colors, and I’m gonna say this is going to be base ultra dark trans 60 and that now is going to match that. Okay, so we’ve got a thing for our instructors.
We’ve got our meta and we’ve got our title contrast. Everything is looking really, really, really good.
What we need now is the headers for our grid. Uh, and then while I’m here, just cause I’m OCD, we’re going to go ahead and go to border and give us a radius M on our schedule, our main schedule, so it has rounded corners just like everything else.
Now, if we want to quickly duplicate this item and test out our horizontal scroll, we can go ahead and do that. See that, hey, look how easy that is.
Just the overflow scroll property. Now, I do need to set overflow probably hidden on the vertical axis, right?
We don’t want it to scroll both ways. Now I don’t, that will probably only happen if we set a height, we need to check it.
We’ll check that when we get there. But I’m not so certain that we need scroll in both directions.
We may only need scroll horizontally. Okay, so the next thing that we need to do, we’ve got our cards, I’m gonna go ahead and delete those cards that we just duplicated because we don’t need them.
Let’s collapse this one and then in our schedule we’re going to add a block and this is going to be a schedule heading wrapper or we’ll say column heading wrapper just like this. Alright and so we’re going to say schedule now this column heading wrapper lives with this schedule, right?
So it’s going to say, it’s going to be schedule column heading wrapper, just like that. And then we’re going to drop, um, probably not a real heading in here.
This is going to be a fake heading. Yeah.
Yeah. Yeah.
I don’t think, I don’t think we want to use literal headings because like the words Monday, Tuesday, Wednesday, those are not, um, I don’t think, I mean, we’d have to really talk with, we’d probably have to have an accessibility debate, right? Get a bunch of accessibility people together.
Let’s debate this. Would this be better as text or would it be better as headings and why and pros and cons and all of that.
I’m just going to rock and roll with text for right now. If we want to change this later, we get, we always can, right?
Schedule, this is going to be column heading. That’s it.
And then what we want is probably for this heading wrapper to have a little bit of padding. And you know I kind of want the column headings to match the card heading.
We’ll figure that out in a minute. I just right now I want this to be, you know, let’s just whip it up.
We’ll make adjustments as we go. I think this can be an S and this can be an S.
Okay. And then it’d be nice if column heading, actually I don’t want that to say column heading wrapper.
I want that to say Monday. I want that to say exactly what it is.
This is, we’ll just say that this is the heading for this. And because it’s a heading, we can definitely make it the size of a heading.
Like we can make it the size of an h3. That might be a little aggressive.
Let’s go with h4, which I think is its default size, so we don’t even need to set that. I do want to give the font weight 700.
Okay. That’s fine.
All right. I probably also want to put a border on the bottom of this.
I do. I want to go border bottom, two pixels, solid, and then we need to pick a color for what our borders are gonna be.
And I’m gonna go back to transparencies here. We do base ultra dark trans 20.
That looks a little dark. That looks a little aggressive to me.
So I’m gonna say base ultra dark trans 10. That’s looking good.
That is looking good. Is this really ultra light back here?
This background color? Oh, I did base ultra dark trans 10.
Let’s do base ultra light. There we go.
That looks a bit better. Okay.
That for right now is good enough. And I’ve got a class on here and I’ve got a class on here, which means I’m safe to just duplicate.
Oh, actually, no, I’m not. I’m not.
Before I can duplicate, I’m gonna give you the secret sauce right now. I’m gonna give you part of the secret sauce for how we’re actually going to make this grid build and organize itself, okay?
On this item and this item, because they’re both Monday items, guys, these are both Monday items, there’s a Monday heading and a Monday item, I’m gonna go into attributes. And we are going to give this a column name.
We’ll say schedule column name. Schedule column name.
And I’m gonna say Monday. This is a Monday item.
Schedule column name is Monday. Over here schedule column name is Monday.
I’m gonna go ahead and save. So now both of these are Monday items.
That’s very very important. Both of Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, one more.
And I’m going to change this to Tuesday, change this to Wednesday, Thursday, Friday, Saturday, Sunday, seven days, seven columns. Now the Monday item is under Monday by default, but don’t worry, it’s not gonna stay that way.
We haven’t done any magic yet. Now what I need to do is go to the attributes and make the attribute match the label, Sunday.
This is gonna be Saturday. Oh, and I need to remember to do this in lower.
Let’s just keep all this lowercase data attribute stuff Keep it all lowercase. This is gonna be Saturday that’s correct.
Okay. This is gonna be Friday This is gonna be Thursday This is gonna be Wednesday This one’s gonna be Tuesday This is gonna be Monday.
Okay perfect. Now we need to go in and make sure that the actual headings actually say what they’re supposed to be.
So this is Tuesday, this is Wednesday. I think I can actually just inline edit these, probably the easiest.
Thursday, Friday, Saturday, Sunday, perfect. Okay, got those.
Ooh, they’re not divs guys. They’re not divs.
Like a chump, what we have to do is go one by one and fix that because we didn’t do it before we duplicated. And in fact, I wanna just do a double take on, see, I almost don’t want these to have any value whatsoever.
And I’m not saying I know that that’s the best way to do this right now, it’s just the method I’m going with at the current time. We should probably all have an accessibility debate about whether these should be headings and yada yada yada.
Okay, I want to check these items. This is actually a time element.
Okay these are images which is fine. This is going to be a span as well, which it probably doesn’t matter because this may end up turning into a link I’m not sure.
This is a heading. I think everything else is good to go.
I’m not gonna make this a list because really it would be an ordered list, but we also, the DOM is a little bit of a, remember I said the tab order, well, the list order would be a problem as well. So I’m just gonna leave these as divs right now.
We’re not gonna make this a whole list format situation. What I may do is make it an article.
Let’s go down and do custom tag of article. Okay.
Because it is technically like a standalone item, right? All right, so let’s rock and roll with that.
Now what we need to do is we need to duplicate our card. Let’s collapse all of this.
All right. So now we open the schedule.
There’s all of our headings right there. And then our schedule card is duplicatable.
And I don’t know why, let me refresh the builder, I don’t know why that looks blank. Okay, we’re gonna call this a Wednesday item, right?
Because by default it’s already under Tuesday, it’s not gonna help us to see a Tuesday item under Tuesday and a Monday item under Monday, we need to see a Wednesday item and see it get in its place, basically. Okay, so the first thing we’re gonna do is go to our schedule, style CSS.
And let’s go back down to our grid. So we have grid template columns set to repeat seven min-max.
All right, what we need to do, let me think about this. Let me brainstorm this.
I’m also looking at root selectors and this new root selectors got my brain doing other things now. So if it’s in the schedule and it has a data attribute of Monday.
So we’re gonna say data, and then I just gotta remember what I called these things. So let’s go into attributes, schedule column name.
That, my friends, I am so sorry, is, yeah, I’m gonna have to say data schedule column. I made a chump mistake.
This happens from time to time. OK, you have to use the word data in a data attribute so data schedule column is what these have to be called.
So like a chump, I’m really, really, really sorry. I have to go back on every single element and change that out.
Data schedule column. Data schedule column.
Data schedule column. You gotta do this on every single one.
This is the chump life. This is the life you don’t want to live.
Now, if they gave me components, well, be a different story. Okay.
All right. So here we go.
And here we go. Okay.
So I think we’re good. Everything has been changed out of schedule.
Didn’t change that one. Okay.
Save. Now let’s go back to the CSS schedule section, CSS, no, it’s the actual schedule, CSS, awesome.
So data schedule column, all right, that’s what we called it, right? Let’s double check.
Data schedule column, because things won’t work if you name it the wrong thing. You’ll be like, what’s going on?
So data schedule column equals Monday, then we’re going to do something. Well, what are we going to do?
We’re going to assign this to grid column one. Pretty easy, right?
Pretty easy. Now what we’re going to do is we’re going to say, hey, if it’s Tuesday, we’re going to say that goes in the second column.
And then duplicate that. If it’s equal to Wednesday, it’s going to go in the third column.
Now, one thing that may throw you off, I don’t know why Bricks hasn’t fixed this yet. It’s insanity to me.
This has not been fixed. When you style data attributes, you cannot see the style in the canvas.
You can only see it on the front end. So notice that Wednesday is under Tuesday in the canvas.
But if I refresh here, well, right now it’s clearly not working. We’ve got Wednesday under Monday.
What is Wednesday item schedule? Okay.
It’s still set to Monday. That’s why it’s not working.
So this Wednesday item right here, we go down to the attributes. And we, now the items themselves, the attributes gonna be handled automatically.
This is chumpy right now because we’re having to do all this manually to just get it set up. So this is gonna be a Wednesday item.
Now I’m gonna hit save and let’s go view on the front end and look at it. Jump, look at it.
Jump. Now I’m going to duplicate a Monday item.
We’re going to call this a Monday item for right now. This is a Wednesday item.
I’m going to duplicate the Monday item and I’m going to hit save. Look at what’s happening to Wednesday.
It’s jumping down here because this row is supposedly taken up because there’s an item over here in this row and it takes up the entire row. Everything else is gonna be pushed down below.
And you’re gonna have all these blank spots in your grid where it’s like, this doesn’t look like a schedule. So one thing that we wanna do, the little bit of a magic trick here is we need, because there’s gonna be blank spots in the schedule where there’s no classes, right?
Might have a day with no classes. Well, how’s the grid gonna handle that?
How is it still gonna be able to position things properly? We’re going to do something called grid auto flow and set it to dense.
And that’s basically going to take up all three spaces. Save this space right here.
It’s more or less a free space. Nothing can go in it, supposedly.
With auto flow dense, things can jump up and live on the same row as other items right here. Okay?
All right, so we’re making really, really, really good progress. We’ve got two Monday items, we’ve got a Wednesday item.
I’m confident that we can go into the query loop situation now and get all these things added via query loop. All right, in order to do that, we’re gonna need custom fields attached to schedule items.
All right, so what we’re gonna do is hop back here in the backend, and we are going to, let me see how we’re doing on time. All right, we’re doing great on time.
Let’s go with ACF and field groups. Add new, all right, schedule items, or we’ll just say schedule.
And the first thing I need is we need the name, the name of the item, okay? So that’s just gonna be a text field.
So we’ll say item name, or say, in this case, we can say class name, okay? Because that’s what we’re doing.
But if you’re doing something that’s not classes, you’re going to have to make these adjustments on your own. So we’ve got class name, class name, default value.
The next thing that we need is the location, and that’s going to be a relation field. So we’re not going to do that yet.
A time field, let’s do a time field. We can sort and move these around as we see fit.
I’m gonna say time picker, and we’re gonna say that this is the class time, okay? And I want this output for the display and the return.
I’m gonna go ahead and hit save, add field. I need the duration, all right?
So we’re gonna use just a text field for that. So we’ll say class duration and I’m wondering here if we should should we make this a text field or let’s see do we want 60 minutes 90 minutes yeah if we want to control the format better I say we go with a number field for class duration and then on presentation, we wanna append this with min, well like minutes, right?
So it’s letting them know, just put the value for the minutes. And then that’s how we’re gonna output this.
We’re gonna hit save there. Okay, next thing we need, everything else is relationships.
We need a related instructor, related program and related location. So I’m gonna add a field and these Consequently aren’t they don’t even really need to be bi-directional.
They just need to be plain old relationships Okay, so I’m gonna say this is gonna be a relationship field. Oh, you know what we need This all needs to be and I know it doesn’t need to be in a repeater It does not because everything is a unique post type item.
Okay, we’re good. We’re good.
We’re good Alright, so this is gonna be related instructor And I’m gonna come down here and say hey filter by post type instructor. Post status is show me only published instructors, don’t show me draft instructors right.
Don’t need to worry about taxonomy, don’t need to search, don’t need post type, don’t need any of that stuff. Go ahead and hit save.
Next I am going to say related relationship, related location, awesome. Post type is going to be location.
Post status is going to be published. Uncheck, uncheck, uncheck.
Add field, relationship, related program. Related program, program, published, uncheck, uncheck, uncheck, save.
Okay, I think now it would be best if we put the related program right under the class name. So they type in the class name and then immediately say it’s related to this program right here.
And then the class time can come next, the duration and the time kind of go together, that’s good. And then just say, hey, what instructor teaches this and what location is this at?
Okay, let’s save there. Let’s go to schedule items.
Here’s a Monday item. Ah, we did not assign the custom fields.
Okay, so ACF, field groups, open schedule, come down here, assign these to schedule items. Save, now go back to schedule items, open Monday, there’s our custom fields.
So I’m going to say beginner Jiu-jitsu is Related to the jiu-jitsu program right and then our class time is going to be 1 p. m.
In the afternoon. All right, so we’ll select that duration is going to be 90 min There’s your min over there and we can actually do class time and class duration probably right next to each other So we can take a look at how we’re formatting the layout of these fields.
Alice Wonderland is gonna be our instructor for that. And it’s gonna be at the Atlanta location.
I’m gonna go ahead and hit update. Look at how those relationship fields just make this so easy, right?
All right, so that was a Monday item. Let’s go back to, let’s keep this open in fact.
And in another tab, let’s go back to ACF field groups and just take a look at how we might put those two fields next to each other, class time and class duration. If I go over to presentation and put this at 50% and I go to duration presentation and put this at 50%, they should end up next to each other.
Let’s go ahead and check on that. Look at that.
So I’ve got time and duration sitting right next to each other. That’s a little bit better, I think, for UX in this regard.
I’ll just hit update on that. Now, we need to, oh, day of the week, day of the week, day of the week.
Okay, so add field. This is gonna be a select.
So select box, and we’re gonna say day, weekday, we’ll call it weekday. There we go, weekday, right?
That makes sense, weekday. All right, what are our choices gonna be?
Monday, Tuesday, Wednesday, Thursday, Friday, Saturday. These are the labels, but I actually want the output.
So it says you may specify both the value and the label. The value comes first.
So the Monday, the value is gonna be lowercase. All right, this is gonna be Tuesday.
This is gonna be Wednesday, Thursday. So what’s gonna show up in the select is the capitalized version.
What’s going to be output is the lowercase version. Okay, and that’s going to be okay.
We need that for, we need that for the data attribute. All right, so this is going to be Friday, Friday.
And this is going to be Saturday, Saturday. Got to have a space in between these colons.
There you go. Okay, I think that’s good.
Default value, I don’t think we need to worry about. Save.
Now, ooh, ooh. Okay, weekday.
Should we let people select multiple? And then we’re going to need to do our data attributes.
It’s not going to be equals, it’s going to be contains. Contains.
Okay. Hmm, okay, that I’m not sure about.
Honestly, I’m off the top of my head, not sure about that. For right now, we’re not gonna allow
the selection of multiple. That might be something we tackle in part two, okay?
Let’s leave it the way that we’ve got it right now. We got enough, we got enough shit going on.
You know what I’m saying? We got enough stuff going on.
Let’s just go ahead and keep going. All right, so class name, I think weekday can, what do you think, weekday can go, ah, how about above class time and duration?
How about same row, same row, Saturday, 1 p. m.
, 60 minutes? That would be pretty dope.
All right, so let’s do 33 here. We gotta kinda do it like a chump.
There’s no really good way to do this. It’s just it’s all kind of manual presentation.
Uh 33. Save.
Schedule items. Monday item.
I mean look at this guys. Look at this.
You go Tuesday 1 pm 90 minutes. I mean this is absolutely fantastic.
I’m gonna put this at Thursday. We’re gonna call this a Thursday item.
All right, update. All right, let’s go back.
Let’s close this. Close this.
So we actually have a Thursday item in the database. So what I need to do to get our query loop going is delete all of our extra items.
I just want one item. Notice I have a bunch of static items for the headings, and then this is going to be the dynamic item that generates all of our class grid, right?
These things are all done statically. Okay, use query loop.
Query, what are we querying? We are querying posts, and what kind of posts we’re gonna do schedule items, okay?
Absolutely fantastic. Now we need to replace all the data that’s in there with dynamic data.
So this is gonna say location. So location and it’s gonna be related location.
This is going to be the time. Okay, time, class time.
It’s going to pop that in there. This is going to be the class name, which is just the post title.
No, what did we do? Did we make a custom field?
Let’s go back. ACF, field groups, schedule, class name.
That I don’t want. We actually don’t need that field.
I don’t know why I added that field. We do not need that field.
Save. We’re just going to use the post title.
So let’s go into schedule items, Thursday item. That’s what we want.
Okay. Post title.
Save. I need to refresh the builder.
I also need to check and see, this is a blueprint, right? Why is Bricks not, I think it only loads the dynamic data.
Okay, there it is, it’s working, it’s working, it’s working. Okay, related instructor.
Oh, you know what, my instructor, no, she does have an image. Yeah, all right, we’re all good here.
So I need to delete the second avatar wrapper. Sorry, there’s a lot going on.
There’s a lot going on, isn’t there? All right, this is gonna be a query.
Now, what are we gonna query? Related instructors.
Related instructors. Save.
Okay, no results. That should never happen, but hmm.
Should it say like no instructor? What should it say?
This is where we would hide an empty wrapper, by the way. If this wrapper was ever, actually, we don’t even need this.
We don’t even need this. What we’re gonna do right now is our avatars.
Okay, what happens if this goes away? Trash, oh, that happens.
Okay, that’s not bad. That’s not bad.
Nothing really horrible happens. So if I go to avatars, go to conditions, add condition, dynamic data, and say related instructor is blank, or is not blank.
Only show this if related instructors is not blank. And so if there’s no related instructor, it’s gonna drop this out.
This duration is gonna slide over, and our card is gonna be perfectly fine, and we’re not gonna render any empty wrappers. Okay, save.
That is fantastic. So now, if you didn’t follow what I just did there, maybe rewind and go check it again.
All right, we need to get our duration in here. Let’s close the conditions builder.
Let’s drop in the duration, class duration. And all we have to do is append min to it, like that.
There you go, 90 minutes. Now the question is, do we want a space?
I don’t know. I think min is probably just fine there.
I think that’s fine. That’s fine.
Okay so we’ve got dynamic data. We’ve got dynamic data.
We’ve got that. We’ve got this.
We’ve got this. I think we’re ready to add.
Oh yeah. How do we get it in the Thursday column, guys?
Well, we go over here to attributes, data schedule column, and we use dynamic data. And what do we say?
The weekday. What weekday is it?
Save, schedule, refresh. Now, it’s not putting that in Thursday.
So we’re going to go inspect. Let’s get out of mobile mode.
We don’t need to be in mobile mode right here. But it does say data schedule column is Thursday.
Okay. Did we not finish our CSS?
That’s the next question. So we go to schedule CSS.
Ah, we never finished. We never finished what we were doing.
Okay, Thursday, Friday, Saturday, Sunday. So Wednesday, Thursday is 4, Friday, and it’s it’s awesome like this because these numbers just follow the day of the week.
Saturday is day six and Sunday the final day is day seven. Save, refresh, look at that it lives in the Thursday column because it was assigned right here to the Thursday column via a data attribute.
I just think that’s really really really awesome. Okay, now let’s go see what it’s like to put in a new, first of all, let’s assign two instructors to the card.
So let’s go ahead and we don’t even need to be in the builder right now. We’ve done enough in the builder for just this moment.
So we’re gonna go to instructors and we’re gonna say, who’s another one? Who would be a really good martial arts instructor?
Bruce Lee, the fucking goat the goat okay I don’t I don’t know if he’s still the goat I don’t know if he’s still the goat let’s go Bruce Lee and go to images images and let’s a hundred percent just you know copyright violations everywhere we’re just gonna steal a little picture of Bruce Lee you know I’m saying okay let’s grab that let’s go my daughter’s coming, she might try to interrupt us here, we’ll see. Bruce Lee, here we go, is this Bruce, oh no, it’s an aviv, I don’t want that, I don’t want that.
Can I upload that here? Yeah, all right, let’s download this as a JPEG, yes, perfect, okay, now we’re in JPEG.
So let’s bring that JPEG in, brucelee. jpeg, set our featured image, publish, publish here.
Then what we’re going to do is we’re going to go to schedule items, Thursday item, and we’re going to say, hey, what if there’s Alice and Bruce Lee are teaching this? Look at that.
But it’s not actually pulling in the right photo. So we need to edit with Bricks.
This is why you test. You got to test, test, test, test, test as you go.
So obviously I have a static image in here and that’s not good. So I’m gonna dynamically say, you pull in the featured image for the instructor.
Then we go to the front end and something’s wrong. So what is wrong?
What is wrong? What is wrong?
What is wrong? Well, I’m gonna inspect this and we’re gonna see.
Okay, so there’s an image. There’s, oh, wait a minute.
Hmm, ah, that’s right, that’s right. Alice probably doesn’t even have a photo.
Okay, so instructors, Alice, never got a photo as the featured image. See, we just threw that in statically and that became a problem.
This is why you test, test, test, test, test, test. This is excellent.
So now they’re both in there. Now, Alice’s photo, I can’t really see, right?
How do we wanna handle that? Do we want to,
there’s a couple of different ways we can handle that. I mean, I would say get a better freaking photo of Alice, right?
In fact, we probably want to, yeah, we probably wanna crop her, right? That’s probably what I would do.
I mean, I would, I hate like needing to crop. A crop and a close up would be, would actually be a lot better for these headshots.
Okay, let’s just do something like that. And let’s just see if that, we can programmatically fix this, but that might have to be a part two thing.
Let’s just get this done for right now. There we go.
Now we can see Alice back there. We can see Bruce Lee.
You know, this is all coming along really, really, really nice, okay? The Atlanta thing is bringing in a link because that’s a post type item.
I wanna go ahead, and this is why I did location, right? So I can style this independently.
And I can say that the typography color is gonna be base ultra dark trans 60 and which it should already be let me see that fixed it if not i’m gonna have to target yeah i’m gonna have to target the link okay so the location we’re gonna say root selector and a so there’s an a in here i want to color it with base ultra dark trans 60 refresh, now it’s Base Ultra Dark Trans 60, even though it’s clickable. Now in Part 2, we may want to find a way to remove this link potentially, because I don’t know that we want people to be able to click to the location.
This is a conversation you need to have with your client. Hey, do you want people to be able to go to a location from here?
Yada, yada, yada. What I do want them to be able to click on, see I also don’t know if we want the entire card.
I actually don’t think we want the end. Maybe we do want the location to be clickable and maybe we want the just the heading of the card to be clickable.
Okay, so let’s link this. Let’s link this to external URL and we’re going to use the related program.
We’re gonna link that to the related program. Save.
Now if I click, look, it takes me to Programs, Jiu-Jitsu, right up there. That’s why we did the related program, so we can have that kind of functionality.
All right, let’s add a Tuesday item. See how easy this is.
So we’re gonna go to Schedule Items, then we’re gonna tackle the mobile version of this. So I’m gonna say Tuesday item.
Now I can say, I don’t need Monday and Tuesday and all that. I think we’re good.
I’m going to do Muay Thai. Muay Thai.
We’ll do intermediate, intermediate, we’ll do intermediate fitness. Okay, so fitness will be one of our programs.
So related program I can’t even choose yet. This is going to be on Wednesday, or no, Tuesday.
Okay class time is gonna be 5 p. m.
and let’s do a 5 30 p. m.
we got a test you know 5 15 whatever make sure something that’s not a whole number works. This one’s gonna be 60 minutes.
Bruce Lee is gonna teach this and it’s gonna be at our Atlanta location. Okay let’s save there.
Look at this Tuesday easy this is. Now this link is broken.
Let me look at the DOM here. The A goes inside of the H3.
But what we may need to do is we may need to add a link. Now I’m trying to figure out how to conditionally hide the link.
I think what we’re gonna need is two headings. Like, cause what if there’s no related program?
What if they wanna put something in the schedule that’s not related to something else? So there’s no related program.
We can’t just have a dummy link floating out here. So I’m gonna say heading link, and I’m going to duplicate that unlinked.
This is going to be unlinked, completely unlinked, still doing the post title. And then I’m just going to use conditions.
I think I’m going to use conditions. Yeah, let’s go to conditions and say dynamic data, thinking this through as we go, related location, so is blank.
We’re going to show this right here. Yes.
Okay. So if it’s blank, we’re going to show the unlinked version.
This one, if dynamic data related location is not blank, then we’re showing the one with the link. Thursday item is linked, Tuesday item is still linked.
Oh, because the link is not, wait, no it was. URL goes to related program.
Oh, yeah, no, we need to kill that. There we go.
Okay, save. I thought by killing the URL it would kill the link.
It did not. Okay refresh there’s Thursday Atom linked.
Now it’s still still trying to throw a link in there. Why are you still trying to throw a link in there?
So now what we do to debug this we might have to move this to part two. I don’t I don’t want to spend too much time on it.
Let’s kill the. .
. yeah.
Oh no look! No link.
Something’s wrong with the conditional logic. Yeah that’s just a naked h3.
Oh. Hmm, well, ACF related location.
Maybe this conditional logic will not work on this individual item. It should though.
I’m just thinking through this. I’m probably going to need to move this to, I’m going to need to move that to part two
where we can further diagnose what might be going on there. Okay.
The 515 works, the duration works, the single instructor works. We might want to tool tip this out, right, to show you, like if you hover it shows the name of the instructor.
right to show you Like you hover it shows the name of the instructor we could probably work up a tool tip in part two For that what I want to talk because we’re almost out of time I like I got a I’m trying to be cognizant of our time here I want to get the mobile version working right now on mobile if you look at this You can still you know horizontally scroll which is good, but what I want to work on is a stacking situation okay let’s try to get stacking going let’s close this we actually know I need more items I need more items to make sure that we’re doing things correctly so I’m gonna go to schedule items we’ve got Thursday item which I can change to intermediate Oh, this was beginner jujitsu, wasn’t it? Beginner jujitsu.
Update. I also need to go to programs.
Let’s add Muay Thai. All right.
Let’s go add, we got jujitsu, we got Muay Thai, fitness. And let’s add one more.
Let’s add kids jujitsu. OK.
Now what we’re going to do is go to schedule items. Kids.
Beginner Jew. Jitsu alright kids you just do is a related program.
This is going to happen on what’s going on there? Saturday, Saturday.
All right, so we’ve got something to fix. Let’s save draft, go back, go back.
Obviously made a little hiccups in our field groups here. Schedule related weekday.
Aha, missing a space. And we never added Sunday.
What were we doing? Okay, save changes.
All right, add new schedule item, refresh, Monday. Come on.
What’s going on here? Field group, weekday.
What’s, you’re killing me smalls. Man, save, edit schedule item.
There we go. Okay, it’s gonna be Saturday.
Class duration 45 minutes. Bruce Lee is our instructor.
Happening at the Atlanta location. Refresh.
There’s a Saturday item. Looking really really really good.
Okay. Do we need.
. .
let’s add two Monday items because none of our columns have more than one item. So let’s check that out.
So I should be able to add two items to Monday. So we’ll say advanced fitness.
This is gonna be a 6 a. m.
on Monday. Class time 6 a.
m. Fitness.
Alice Wonderland teaches this at the Atlanta location. Save.
There’s a Monday item for advanced fitness with Alice. Oh no duration.
Ah you see it’s why we test things. Move quick right see what’s broken.
Let’s open this up edit with bricks. Take this whole duration wrapper right here and say hey dynamic data, condition, duration is not now We’re ever looking at a schedule Where there’s no duration we don’t see a min floating there for no freaking reason right we get nothing we get no output That’s exactly what we want Okay, so that’s fixed, but let’s go ahead and put in a class duration of 60 minutes Go ahead and update let’s put one more Monday item So now we want more So now we want, let’s say, Advanced Muay Thai, like that.
Muay Thai is the related program, Monday, 7 PM, class duration 60 minutes. Of course, Bruce Lee’s gotta be, gotta be the instructor of Advanced Muay Thai.
Let’s not associate this with Atlanta. Let’s go ahead and associate that with a different city.
So let’s go to locations, add new, and let’s say Buford. Publish, publish, okay.
Add new schedule item. Buford is the related location.
Go ahead and update that. Alright and I’m not liking our row gap here and we also don’t have any columns column things which I’m going to show you how to add and I’m going to show you how to space all this out correctly.
Okay but we got advanced Muay Thai and we got advanced and look they’re not in the right order are they? They’re not in the order of their time in part two we’re gonna have to try to tackle that as well.
Okay see a lot of challenges a lot of challenges to something like this. Okay, I want to refresh this and see my stuff going in the builder.
There we go. So what my grid is telling me, I’m going to go down here and I’m going to go to gap and I’m going to see in our grid right here, we don’t even have a gap.
Yeah, ACSS is adding a grid gap for me. I’m going to say gap and let’s say 0, 1, M.
You can actually put like column gap, row gap separately. And you can basically define them separately in the same instruction.
So there’s my column gap. Now I have no row gap, so zero is the row gap and my row gap.
I want, I think content gap. Let’s put that in a var.
And then for my column gap, I actually want a column gap token. So I’ve column width and I’ve column gap.
And my column gap is going to be my grid gap times two. why I want such a thing in just a second, okay?
Yeah, yes, I think we’re getting there. Why do I still have a wicked row gap here?
Do I want that to be maybe content gap divided by two? Calc,
calc content gap divided by two for our row gap safe. Yes, yes, yes, I do.
I want that to be much tighter like that. Okay.
All right. I’m liking that.
I need a divider line right here. Okay.
And we’re just going to do that with a pseudo element. And I’m going to attach that actually to the column heading wrapper.
So every column heading wrapper is going to give us a line. So what we’re going to do is we are going to root this and say position relative.
We’re going to root it again and say the after element is, I’m going to try to keep this zoomed in for you, content blank, position absolute, width, loop with, I’m thinking I need another token, this will be the divider thickness, okay? Divider thickness.
You’ll see why in just a second, okay? Because this data needs to live in more than one place.
Height is going to be 100 VH. Height is going to be 100 VH.
Now we need to position it. Write 0, top 0.
Let’s just see if we can get something to show up. Background color, we’re going to need another one.
Divider color. Okay, I think if we just define these tokens, we’re going to get something to show up now.
So divider thickness and divider color, where are we going to define those? Back on our parent where all of our tokens are.
Divider thickness, two pixels, divider color. We’re gonna go base, ultra dark trans 10.
Just like that. And I see my divider right there.
Look at that. Okay, I’m actually gonna go base light.
Let’s just see what that does for our divider color. Okay, okay, that’s not horrible.
We’ll look at that more in a second. All right, the reason why I need to position that right in dead center in the gap, that’s why I needed to create a token for the column gap.
Right, so here we go. We’re going to go back to our after element and our right position is going to be a negative value to pull it over.
So I’m going to need to calc this and I’m going to say it is our column gap divided by 2 but multiplied by negative 1. And that’s going to pull it over half of the gap value, which is gonna put a dead center into the gap.
Now, I need to move it to the top a little bit. It actually doesn’t matter, because it’s 100 VH high.
I can literally just stick, I can just stick a magic number in there, okay? Just anything that gets it pulled up enough, like minus 10 VH, and it’ll never, you know, not be tall enough.
I don’t think. I don’t think.
Let’s think about this. Would there ever be a situation perhaps
where the 100 VH high line is not enough? Well, we’ll cross that bridge when we get there.
We will cross that bridge when we get there. Okay, so now I’ve got divider lines.
See why this color is different from this color I said I need a token right so now I can go to the heading wrapper remember we added a border on this earlier well what is the value of my border going to be the color of my border it’s going to be the divider color now the divider color whether it’s a vertical divider or horizontal divider will always be mapped to that token. So this is going to say, I can actually just say divider thickness, enter.
It’s going to wrap it in a var and we’re good to go. Now what this allows me to do is from one single source of truth called divider thickness, I can make this super thick.
Alright. Let’s go to the front.
Look at that. Which I mean I would never want to do that, but what if you want to go one pixel on it Look at that everything just recalculates stays the same.
It’s just oh, it’s like I love it This is like CSS jujitsu. You know what I’m saying all right, so this is looking really good remember We’re super zoomed in this is what we really look like this is what we really look like And we’re looking fantastic if you if you ask me we’re looking pretty fantastic.
Now what I’m going to do is tackle the mobile stacking. Okay remember what we have right now.
We have more or less the exact same effect on mobile. What we want is a stacked effect on mobile.
So first off we need to figure out what breakpoint are we actually going to stack at. See I I still think that’s a good experience to go left and right.
But if we bring this down further, now we’re getting into this is like still maybe vertical iPad territory. I would say 640, right?
Or really maybe if you can’t fit all of Tuesday, should we just call that like 885 ish somewhere in there it would actually be no no that’s still good I’m saying 640 right about there okay like you could still go left and right but we’re now almost in like handheld mode right where we just want to stack all these on top let’s say 640 I mean we could always change it later it’s not like we’re this is set in stone or anything so what do we want to do? We want to assign all these columns only when it’s above 640.
So that tells my brain we need a min-width media query. Let me bring this back up here.
Let me get rid of this space right here. The question is what all is going to go in this min-width media query?
I know all of this is going in the min-width media query. Every single one of those is going in the min-width media query.
So let’s go, let’s just put in the min-width. So we’re going to go at media, min-width, 640 pixels.
Let me zoom back in here. Okay, and now we need all of all of that.
Okay perfect. Let’s format all this.
Great. Great.
Now display grid we want it to be here. The grid template columns instruction and the grid auto flow of dent, which I don’t think grid auto flow of dents.
Actually we may need to keep that on mobile. Okay we definitely need to steal this.
We only we don’t need seven columns on mobile, right? So that needs to live inside of the MinWidthMediaQuery.
Ooh, what happened? Look at this, I hit R tab.
Okay, it did it, it did it. All right, root, and we’re gonna say grid template columns.
Now, why don’t I have to put a display grid there? Because it’s already up here at all breakpoints, right?
So I only have to put the instruction I’m changing inside of the media query. And so now what’s gonna happen is we’re automatically, let’s refresh now.
We’re gonna, I don’t, this is a local thing. It’s like, it’s acting like it’s having to load a webpage.
Like, what are you doing, dog? Like, what are you doing?
Let’s close these, okay? Let’s just preview this.
Inspect. There you go.
Look, it all stacks. Now you see the clear problem that we’re running into.
Because the order of the DOM, it’s going Monday, Tuesday, Wednesday, Thursday, Friday, and then it’s putting all of our cards kind of just like we have it in the builder. What we need to do now is make sure that all Monday items live together and all Tuesday items live together and all Wednesday items live together in a stacking order.
Well, how do you do that? Well, stacking order, order being the key, I think we can control this with the order property.
Okay, so what we need to do is outside of the media query, let’s get back into the builder. We actually need to grab all of these root statements and come down here and say, okay, mobile stacking order, which I think these can just live in order anyway.
And instead of saying grid column structure is going to change, we’re going to say that the order of these items is going to change. So, and again, we just follow, well, we’re going to start with zero because that’s the default.
I mean, honestly, we could just do one, two, three, four, five, six, seven. We could map it to the exact same thing that we map these column counts to.
One, two, three, four, five, six, seven. So we just need to order this.
Just need to change this to order. Just leave the numbers all the same.
Order and order. Save.
Refresh. Once again it’s acting like my local install has to load a website or something.
I don’t know what’s going on with this. I don’t know what’s going on with that.
Let’s just refresh. Okay.
Inspect. Look at this.
I mean, how easy is that? How easy is that?
Now this does not fix our tab select situation, right? So if I tab, tab, tab, tab, see, see, what would you expect it to do?
After you’re done tabbing through Monday, wouldn’t you expect it to go to Tuesday and not Saturday? See, the randomness of the DOM is gonna give us problems with our selection right now.
Now, is this a fixable situation? I believe it is.
Do I know how to fix it off the top of my head? No, that’s why it’s gonna be in part two.
I gotta continue on doing more. Everything about this is like, here’s a challenge, here’s a challenge, here’s a challenge, here’s a challenge, here’s a challenge, we just got to keep knocking those walls down, right?
One by one until we arrive at the final conclusion. But the question now is, have we done enough?
Have we done enough for part one? And I think we have.
We’ve got our grid, we’ve got all of our custom fields, we’ve got all of our CPTs, we’ve got our data all mapped in here, we’ve got our grid structure designed more or less. Oh, I wanted to do, yeah, the padding, the padding.
How do we make sure that this is, this spacing right here is not the same as this spacing right here. I want to make this a little bit more symmetrical.
Okay, so what I’m going to do is my padding value. So I’ve got the column gap.
Yes, is grid gap times 2? I need in my padding here, why isn’t it showing me?
Oh, I don’t have the right thing selected. Okay, so that’s space M.
I want this to be column gap divided by 2. Column gap divided by 2.
by two. And that is going to make the padding left to right exactly symmetrical with the space between these dividers.
Okay. Let’s go view on the front end.
Look at that perfectly symmetrical spacing now. And I can also use probably that same value top and bottom.
Let’s go back. Let’s go back.
Where are we? Okay.
Let’s just see if this looks good. It makes everything nice and it does.
It just makes everything nice and symmetrical except for the fact that these header blocks have top padding which is easy to fix by just removing their space. And since they all have a BIM class they all fix at exactly the You know, it’s just some things are a thing of beauty.
So we have a horizontal scroll. Oh look, we have a vertical scroll.
Why? Because of these dividers.
We need to hit in that. Okay, so we go back here, layout, scroll, hidden.
So as the second one, this is going to be hidden on the y-axis, scrolling on the x-axis. Save, refresh, can’t do it for some reason.
Let’s just do it here. See now it’s as high as the items make it but no vertical scroll bar but I still have my horizontal scroll bar.
Really really really fantastic. Okay I’m putting this this in the books.
That was episode 1. Episode 1, episode 2, we’ve got to do faceting, we’ve got to be getting the order of our elements right based on their time.
We’ve got to get, what else do we have to get? We’ve got to get the tab index order situation figured out.
And we’ve got to get the situation with the link figured out. So we’ve got a lot of technical stuff to do in part 2, stay tuned my friends, I’ll be back very, very, very soon.
So we’ve got a lot of technical stuff to do in part 2, stay tuned my friends, I’ll be back very, very, very soon. Cheers.
