Building the Geary.co Best Practices Library Part 02: Layout Change, Content, & Initial Styling Adjustments

0:00:00
Alright, my friends, we are back in action. So it’s been a night and I have digested a little bit of what we accomplished yesterday. And I came back. First of all, I fixed the post thing. You notice around the 36-minute mark of that last video. I actually put some of these items in regular posts. And I found that out after the fact when I went to my blog page and I was like, oh, that’s interesting. There’s new blog posts that I have not written. Oddly, they’re named what I was doing with our best practices. So I deleted those and I moved them over. And now we actually have more categories and more posts as we should have had the first time. But what I’m starting to see with this layout, which I think it’s a fine, it’s fine. It would be fine.

0:00:49
But I wanted to look more substantial. And I want more context delivered on the initial archive page than what is going to be delivered through this model. So what I think I’m going to do is replace these items with, and actually we can use frames for this because frames has process cards and they auto-number themselves. And I think that would be a really cool feature as well. I just think that that’s going to be a better initial preview of all of these things. So we’re just going to play around with that real quick. And so what I’m going to do, just in case I end up not liking this, I’m going to save this design right here, this little list item that’s inside of this. Well, I’ll just save the entire list wrapper really. We’re not going to need this entire list wrapper. So it’s the best practices list wrapper. All everything that we did with the sidebar is OK. So what I’m going to do is I’m going to save this as a template.

0:01:54
And I’m just going to say test list wrapper. So I know it’s easy to delete because it’s called a test. So if I don’t end up using it, I can easily come back later and delete it. And what I’ll do is delete the associated classes with it and then delete it altogether. And that’ll clean up everything that we’ve done. So I’ll go save this template there. So now it’s there. I accidentally save it twice. But whatever, it doesn’t matter. But this is what I was talking about earlier. And then sometimes you will go down a little bit of a rabbit hole and then have to come back out of it and then go into a new one. But it’s really not that big of a deal. As long as you just kind of clean up your stuff as you go, your baggage, then you’re all right.

0:02:35
So what I actually want to do for this kind of juxtapose these against each other is I’m just going to duplicate main. And that’s going to give me two of the same thing. But down here, on the second one, or really up here, so that this will be the new one, I’m going to go ahead and delete our list wrapper. And so all of that goes away. And so now I only have the initial loop here. And then just for now, what I’m going to do is hit escape a few times on here and I’m going to go up to frames. And I’m going to go to process. And this is actually what I want right here, process grid Charlie. And this is one of the great things about frames, you know, the modular nature of it. I have a section called process section Charlie, but that comes with that like sticky sidebar. That thing I’ve already accomplished. I don’t need that.

0:03:26
And so I don’t I shouldn’t have to import this entire section and then extract the grid from. I just want to use the grid. Well, the grid is available as its own frame called process grid Charlie. In fact, the card itself is used if I just wanted the card, but I actually do want the entire grid. So I’m just going to insert process grid Charlie. And then bricks is just going to find a random place for it on the page. I’m going to go ahead and collapse all these. I’m going to open main open category row. And I’m going to drag this right next to the sidebar. And then all should be well in the world right off the bat. Hopefully, yeah, it is. And this is exactly what we end up getting. And so that’s a fantastic starting point.

0:04:07
So I’m going to go ahead and save here. And then we will view this on the front end and just see there you go. So I think this is going to be notice it gives you way more like it gives us now an opportunity to have a little snippet of an explanation for each item. It’s going to number the items for us. I think this overall is going to be a much better way to present this information. Additionally, what I’m also brainstorming and thinking of is a way for us. We’re going to have some facets up here, I believe. Like I want a facet where you can just sort this by category. I don’t know what other facets, probably a search facet might be a good thing to have as well. This is all stuff that we’re going to have to figure out as we continue to move through this. But let’s go ahead and get this a little bit more built out now. So what we’re going to need is number one, we don’t need all these process cards.

0:05:04
So I’m going to delete all of them except the first one. And then all I have to do is rebuild the query loop here. And so we’re going to say that these are posts from the post type of best practices. We’re going to do the same trick that we did before, querying these from the best practices, categories where the term ID is equal to the term ID. And that should just immediately fix our query loop. And then we can go in here and we can say that this is the post title. And then this is going to be, we’re going to need a new custom field for this right here. So I’m going to go ahead and hit save. And we are going to refresh. And there you see, it’s working. And it’s auto numbering them, which is fantastic. You can see in each new section the number restarts. So that’s exactly how we want it to be. And I think these are not styled yet, right?

0:05:58
So we can still style these cards. We can, I don’t know if we’re going to put borders between them or round them or whatever. I still don’t know this part yet. I do see that this gap right here is not sufficient in my eyes. Like this right here is not getting the job done. I really want like a very large gap on this. So right now it’s space L. I’m going to do almost, okay, that actually cut this net. Well, we can do Excel, but we can also limit perhaps this sidebar. Like the width of this sidebar could be limited on its own without creating an additional gap. Because remember, the gap is really going to affect the gap on mobile as well, which I have not even looked at this on mobile. It’s not even, we haven’t even done anything for mobile yet. So I, oh, why don’t we just take care of that? We’re grid one, two on desktop.

0:06:54
And if we come down here, we can still be grid one, two right here. Notice the frames grid that I imported is already mobile responsive. So it’s already got its break point thing going. And it’s there it is. That’s, that’s clean right there. And I think this is where I don’t know. We still, we still kind of, we still kind of work right there. Maybe here just the initial thing, I’m just going to say grid one. And we are going to go to grid one at this break point. Okay. All right, that’s at least going to get us to be mostly responsive the way that we want. Very possible that I switch this to grid one at this break point at some point instead. I want to preview this maybe on some real devices and see, we’ll open polypane at some point and look at a bunch of different break points there. I mean, these grid overlays really did not respond well to changing break points.

0:07:52
They kind of do. Sometimes they don’t. I wish I could turn them off by default. Like I always have to manually turn them off over and over and over again. I wish I could just turn them off by default. Okay. The other thing that I was looking at is. I was thinking about putting this category row. I was thinking about maybe some sort of boxed layout style for this so that it’s not just on the page or even boxing each kind of category row. Let’s try that first. I just want to play around with it a little bit. It’s because I’m doing this. I don’t need new classes for all this. I’m just playing around with styles at this class level.

0:08:32
So I’m not adding any extra junk, right? Or garbage into the by playing around like this. Because I’m just doing all this at class level on classes that already exist. So we can try something like why is this padding randomly zero, which doesn’t even need to be there. I don’t ever remember putting that in. Let’s try a space L and let’s put that on all sides and just see what that would do. And the first thing I’m going to do maybe is just apply a background color to this. So we’ve got base we could do like a baseline 10. And if I do a transparent version, I’m going to still see our little background pattern back there. At this point, I would need to get our border going. So this is going to be FR card radius. All right. And then I probably need a small border or two pixels solid.

0:09:33
And then for this, I can just do the light trans 10. And then let’s hit save and let’s just take a look at how this is going to. Okay. This is a little bit better, I think structurally because it doesn’t look good right now because there’s just not enough content in these sections. So when a content gets very long, I think it’s going to work out well. But I don’t know. We’ll make that decision when we fill out more content. This stuff is easily undone. It’s not a problem whatsoever. I think this needs to be a little bit thinner border. Now that we have better structure to our containers though, our gap is a little bit out of control. This can go back to container gap. It’s going to be a normal container gap, it doesn’t need to be a double container gap. All right.

0:10:26
Let’s go here. All right. I think that this is probably working out well. And I think on mobile, you know, this is going to help clearly define. Okay. Now I’m seeing that break point that we had earlier, not really cutting it. That right there does not work for me. This, yeah, that’s not going to work. So it’s good that we did that preview. Let’s go to this break point here. Remove that grade one. Go one break point up. Slap the grade one on there. And now we’re better. Okay.

0:11:02
Now we can go back and we can refresh and we can see that this is fixed. But now I can see a clear distinction between the sections where, because of the nature and it’ll, it’ll be a little bit easier to when, you know, these maybe have dividers between them or something or top borders or bottom borders. I don’t know. I don’t know. And I’m not feeling particularly creative today is the thing. But I’m just trying to continue on and get more steps accomplished with this. All right. I’m wondering if I want to prefix before these numbers. Like if I wanted to say, I don’t know, I don’t think so. Not right now at least. I do want them to be a little bit bolder. So we’ve got this process card, Charlie step. So I’m going to come in here and I mean, we can play with the weights.

0:12:00
We can play with the colors of it. In fact, it may really be good if we did change its color. Give this page a little bit of life. There’s not a lot of life to what’s going on in this page right now. I think it’s a good size the way that it is. Let’s go ahead and refresh that. Okay. So popping a little bit of color in here. I think this, this space between this text is a little bit much. So I’m just going to tone that down. We’re going to do content gap divided by two. And I just love doing the ability to why does that look like divided by three. Okay. Divided by four. Divided by three.

0:12:50
Maybe three works. I don’t know. I just, I really love calcs with contextual utility classes because it’s just you can really dial stuff in, but it’s still always based on the initial value. All right. The balance in these, man, we’re going to need to put some more in because I really want to see how this is starting to look when you have more of these built out. And we’re going to need maybe some sort of way to fix these off balanced ones where some of them have a single line and some of them have a double line. And I don’t think there’s ever going to be a triple line. You also see I put in some of them with not capitalized and some of them with capitalized. That is a classic mistake that I see. And obviously it’s a mistake that I make sometimes. So we’re going to go into best practices here. And unfortunately you have to be a chump and fix these manually use of colors.

0:13:49
I would just write them normal all the time. And then you can use CSS to capitalize or CSS to do whatever you want to do. Let you create some complication when you try to do it manually. Quick edit, unique selling, proposition, and then problem agitate solution. All right. And I probably should have eaten lunch before I turned on this. I’m already like, I’m low on energy per page. Okay, update my daughter sick today. She’s been she had a fever for the last three days, which my other daughter had a fever for two days prior to that. So I’m guessing it’s all just the same thing. I never had a fever. But kids are different or maybe they have something different. And then maybe I’m about to get sick again. Maybe I mean, I’m not going to would like, I don’t know.

0:14:48
It’s just having three kids is. Yeah, it’s a thing. It’s a thing. Okay, let’s refresh this and let’s pull up our out here. All right, let’s post. I meant to open that in a new tab. So go to guiri.co, doxen files, ultimate web design checklist. Let’s add some more items here. And let’s not add them as posts, you know, we added them as posts. Test your day. That is not a good thing. That is not where you want to put these. I’m going to do add new, we’re going to pull this over. All right, under UX design, no more than two desired actions. Okay, all right, max of two desired actions.

0:15:35
This is under UX design. Okay, publish. And then we’re just going to do a lot under UX, proper horizontal line length for all text. All right, let’s go add a new. All right, proper line length for paragraph text. And then I should do, I’ll just do text and headings, proper line length for text and headings. All right, mark that as UX design. Go back. See the, you know, this is just WordPress UX, just absolutely horrific UX. I should easily be able to bulk add posts and categorize them as I do it. I got to do this one by one. I mean, content is scannable. I’ll just do scannable content like that.

0:16:35
All right, put that under web design UX. Key pages can be accessed in less than two clicks. Okay. All right, access any page in less than two clicks. All right, let’s do web UX design publish. And let’s see what this does on our front-end for us under UX design, which is down here. There we go. Now we’re really starting to get a little panel built out here. Okay. I want to play with maybe the size of these headings. Typography, these are H3s, but maybe I’ll see the thing is that they’re an H4, then they’re going to be the exact same size as the text around the body text. Now maybe that’s okay because there’s already a big distinction in font weight. There’s already a big distinction in color, but no, it is too small. All right.

0:17:51
So one thing I can try is I can do H3 divided by 1.2. And that’s going to drop it a little bit. Maybe I can do 1.1. But it’s like 10% smaller now. All right. That may be the best way to do it. Okay. The next thing I’m wondering is does this grid need a little bit more spacing to it? So if I grab this and we can just try to find out where this gap is coming from, it is. Oh, is this one of those problems where I can’t see the gap because it was done? Yep. There it is. You can’t see the gap because it was done before. It was built before these grid panels were available. So let’s take that off, let’s change the display back here, and then we can use this field.

0:19:04
So if I do grid gap times 1.5, let’s see if that increase in spacing. Okay. Little bit more spacing. I feel like it helps. I feel like it helps. All right. What I want to do now is get a, we don’t have a way to even write this content right now. And so what that calls for is a new custom field. So what I’m going to do is go back into the WordPress admin here. I’m going to go to MetaBox, Custom Fields. And really we have not assigned any custom fields to this post type yet. So I’m going to add new field group. And this is going to be best practices. And then I’m going to add a field, this is going to be a Wizzy wig editor. But we are going to limit the size of this Wizzy wig.

0:20:02
Two, where do I do this? Add new editor option, text area rose three. We’re going to call this short description. I used to call this like card description because it’s going to be on the card. But then I found myself using it other places. Like if this had a post and you wanted it to be in the like the lead paragraph of the post now having it be card description doesn’t, doesn’t make sense anymore because you’re not using it on a card. So short description, I can just be used anywhere. It’s like, hey, short description works on a card, short description works on a, as a lead paragraph somewhere else, it’s, it’s a better name. All right. So I’m just going to call it short description. It’s a Wizzy wig editor. We text area rose.

0:20:46
And then what we really need to do is figure out. This placeholder content is a slightly long. So what I’m going to do is. All right. Let’s close that. Let’s open this. Let’s edit. Wait. Well, we can’t edit this template. I don’t think from there. So we need to go into bricks templates. I don’t even realize I closed the template. All right. So we’re going to open best practices archive. And I’m going to grab this, but I’m going to make it a little shorter.

0:21:17
And then what I’m going to do is I’m going to go to character counter. And I’m going to pop this in. We’re just going to see how many characters this is. It’s 21 words and it’s 116 characters. So I can say, hey, if we did 115 character limit, then that would be good. Now I have a plugin on here that helps me limit the text. I don’t know why this requires an extra plugin for MetaBox, but it does. It’s a very annoying thing. MetaBox text limiter right there. And I limited the text. Let me just go to view details of this because the instructions are in here. OK, limit and limit type. So limit 20 limit type character. OK. So now what we’re going to do is on this field group.

0:22:05
I believe you do this here validation custom settings. Hold on. Let me look at it again. View details following parameters parameters parameters parameters. Is it done in the same spot here then the editor options? OK. We’ll try it there. So we have limit and this is going to be 115. I think we said and then limit type equals character. I don’t know if this is the proper place to put it. We’re going to go ahead and publish. Actually what we need to go is settings and assign it to our custom post type, which is best practice. Publish. Now I go over here to a best practice post.

0:23:00
And we should see a basic thing that says it’s limited. Oh, this may not work on WhizzyWig. This may not work on WhizzyWig. Let’s try this. Text. Actually, it would be a text area. So let’s delete that. Let’s delete. I just copied it on an accent. I think I just, OK. Good. Let’s do a text area and call this short description. And columns rows, rows, 2, advanced, values, custom settings. Maybe you do it here for this. Limit 115.

0:23:58
Limit type character. Update. Oh, geez. Come on, man. See, only website that this does this on. I’m wondering now if it’s like, is it a perf matters issue? Wow, it deleted my whole short description that I was working on. Just got deleted. Text area. Short description. I’m just going to do one. Because I don’t, yeah, this one’s also called short description. I don’t think it’s a good idea if they have the same ID. Text area. Rows, too.

0:24:41
Let’s just try to, can we just save it like that without blowing up? OK. That’s promising. All right. Now let’s go to advanced, custom settings. Limit 115. Let’s, can we just do that? Can we just do it? Ah! Gosh. It’s killing me. It’s absolutely killing me. All right. So plugins. Let’s get rid of perf matters.

0:25:10
Just for now, let’s deactivate. I don’t know if this is causing it. I don’t know what’s going on. Um, I don’t know what else could be causing it, honestly. Like all these plugins are on all of my sites. Except SureCart. Now that’s the only thing that’s new. Happy files. It’s cloud. It could be a, could it be a cloud flare thing? Let’s go to cloud flare. Just for right now. And we’ll log in. OK. Come on now.

0:25:51
All right. Let’s go to Geary. Let’s go to Development Mode Confirm. OK. So we’re in Development Mode now. We can close this. OK. All right. Now it’s got me all convoluted. So it’s got me all caught up. All right. Let’s go to, um, what were we trying to do? Custom fields. Best practices. Short description, text area, advance.

0:26:31
OK. That’s not there. Let’s refresh and just see if we have best practice field. Short description. We do. Let’s try to add a custom setting. Limit 115. Hey. Did it work? Yes. Look at that. Character count zero out of 115. OK. All right. We’re going to have to delete our little wizzy wig field here.

0:27:02
Update. I don’t know. Is it a cloud flare thing? Is it a, is it a, um, perfmatters thing? I don’t know what’s going on. But right now it’s working. So all right. There you go. Now we can say access any page in less than two clicks. Let’s not do that one. Let me write a description of one that’s easy, like scannable content. All right. So I would write a short description. Users on the web tend to scan versus read.

0:27:42
It’s important creating scannable content. Users on the web prefer to scan. Creating scannable content helps them digest. Creating scannable content is more inviting. And I actually might want to do this. Creating scannable content is more inviting to users to prefer to scan pages rather than reading in detail. OK. Creating scannable content is more inviting to users to prefer to scan pages rather than reading. Can we make a better description? Probably we can make a better description. There’s one thing. I can do a lot of things while I’m being filmed and while I’m talking, writing content is not one of them.

0:28:41
Like I can do it a little bit. But it’s just my brain, it doesn’t work nearly as well. I really have to just sit with content and think and write and rewrite and it’s just that’s my process. It’s really hard to just spit out good content on the fly. All right. But anyway, I did create a short description. And by the way, if we keep typing, let’s check that out. So if I keep, I cannot go any further. So this is going to really help with the balance of these cards on the front end, because it’s going to disallow content of a certain length. All right. Now what I need to do is let’s save all of our work thus far. Let’s go ahead and refresh the builder.

0:29:22
And let’s pop in this content right here, which is, I’ll just look for short description. And I see best practices, short description. And I can pop that in. I can go ahead and hit save. And then we can view this on the front end. And we’ll see that nothing has a content description except this one. That one has a short description right there. So it says creating scalable content is more inviting to users who prefer to scan pages rather than reading in detail. OK. All righty. The next question is, what do we want to do?

0:30:00
Do we want to add borders to this? How do we want to work this? Like I could come in and add a border to the bottom of all of these cards. I don’t know if that’s what I want to do. I just don’t know how I want to handle this design yet. And that’s something that I’m just going to spend a little bit of time thinking about. All right. I feel like these little headers now are a little bit too big. So what I’m going to do is come in here. And these, these I can just make them like H3 size probably. So let’s try that. Hit save.

0:30:42
There you go. Should they be a little bit bigger than that? Maybe H3 times 1.15. Make them like 15% bigger than an H3. What were they before? Let’s take that out real quick. That’s what they were. That’s what they are now. I think that’s a happy medium. Looks good. OK. At least for now. Things can look good in the moment. And then later you’re like, OK. I want to change that again.

0:31:20
What this needs right now is just a bunch of content. And so at this point, what I want to do is I want to get a website, Ipsom, and just go through and at least fill this out. Now, what I’m going to start doing here is making our back end much more efficient. So you see right now what WordPress gives me by default is nonsense. Do I care the date that these were published? No, I don’t care. Do I care about the SEO details? No, not right now, at least. I don’t care about any of these things. So what I want to do is click this little wheel right here for editing columns.

0:32:00
This is admin columns pro, which I’ve covered many, many, many times now. And I’m just going to remove all of these things. Remove all the SEO details. Get them out of here. Don’t want them. Remove the date. Don’t care. Don’t want it. And now I’m going to add a column. What am I going to add? Well, I’m going to add the short description for one. And the word limit is set to 20, which I think it needs to be like, let’s say 21. And then it’s interesting.

0:32:28
Is it going to still use my character limit? Or is it going to force me to use a word limit? I don’t know. But let’s go ahead and hit save. And now watch this because it’s inline editing is available. So now I’m going to go to our best practices right there. Just I should just look for the carrot. I’m trying to read the names. I should just look for the carrot. Look at this. OK, I turn on inline editing. And now watch how fast this is. Bam. Bam.

0:33:00
Bam, I’m just going to go down the list right here. Look how easy. You don’t have to click in and out and in and out and in and out. Just going to get our placeholder content in. It’s fantastic until it doesn’t actually save anymore. I don’t know what was going on with that one. Let’s go back to it. Let’s hit it again. Ooh, that one’s stuck. OK, maybe a little refresh. We’ll fix that up. Another one of those things that never happens unless I’m recording. Let’s go ahead and refresh this. See, a quick refresh gets rid of the issue.

0:33:39
And it hung up again all because I’m recording. Look at that one work now. Let’s try this one at the bottom. No longer working. Refresh. Let’s keep moving. I might be moving a little too fast for it because it’s got to write these things to the database still. You know? I mean, you wouldn’t think they’re just dropping a little text in is going to be a problem. But apparently it is. Let’s do a couple refreshes. How about a hard refresh? Let’s start at the bottom.

0:34:17
OK, let’s work our way up. Of course, normally the second the last one would have worked and then the last one would have messed up because the rule is the last one. There’s always something wrong with the last one. All right, let’s refresh and refresh. All right. Now we should be back to where we were. Hey, look at that. OK. I’m also thinking, you know, it’d be cool if we had a little icon for each of these. I’m not going to do it right now, but again, I’m just thinking about the future. A way to spice things up would be to put an icon for each category.

0:35:01
Definitely don’t want an icon for each item. That would be way, way overkill. But I do think an icon for each category might be a good way to go. Now let’s go and see if we can write our category descriptions. Remember, we could not write our category descriptions because of the 503 errors that we were getting. So let’s go back to best practices categories. And let’s see if we can get our category descriptions in. So copywriting. And we could say copywriting is the art of blah, blah, blah. All right. This is a category description. I just want to get this done. And actually, let’s check this out.

0:35:40
No, we’re not going to be, because the format of this page, oh, maybe, oh, I haven’t even tried it on this yet. Look at this. We can edit these columns. I don’t know if it’s going to allow inline editing, but we’re going to give it a shot. So let’s turn this on. War is almost scrolling, sorting. I’ve got inline editing on already. Count SEO details. Count. Look, look, look. Slug description. Description. Enable editing.

0:36:16
Enable bulk editing. Enable editing. Is there an inline editing? Yeah, inline editing is on, but it’s not allowing it. Darn. That’s going to be, I thought we were on to something there. Oh, no, we can. Look at this. Look at this. Look at this. We can do it for categories, too. This is absolutely fantastic. OK. So I’m just going to say this is a category description. We still need to fill it out at some point with good copy.

0:36:50
OK. And then I’m just going to hit save. And then we’re just going to go right down the list again. And then what this is going to allow us to do is take that static content out of our page and actually insert the dynamic content of category description. OK. Continuing through, this is the boring part of all of this. The even more boring part, though, would be to sit here and watch me think about copy and really try to write copy for all of these things. I’m going to do that off camera, just to spare you and to spare myself as well. There’s two things I can’t do on camera.

0:37:38
Write copy and do math. My brain does not, when math is involved and a camera is on, or somebody’s looking over my shoulder, watching me do math, my brain does not function whatsoever. OK. Now let’s go back to our template, give a little refresh here. And see, this is what I’m talking about. I have static content right here for these descriptions. I want to get rid of that. And I want to insert the category, or it’s called the term description. Go ahead and hit save. Refresh on the front end. And there you go. So now we’re dynamically bringing in those category descriptions, which is fantastic.

0:38:24
We can delete this grid down here. I don’t think we’re going to need that. So what I’m going to do is I’m going to go in, and I’m going to grab this, and I’m going to delete the best practices list wrapper. I’m going to click on the list item. Oh, I just removed it, didn’t I? OK. List wrapper, best practices list wrapper. I need to actually delete that class. And then I’m going to grab the card. This is a list item. So I’m going to come in here, and I’m going to delete that. And then I’m going to click on the icon, and I’m going to delete that.

0:38:56
And then I am going to get rid of that icon, because I don’t need it. And I’m going to click on the label, and I’m going to come in, and I’m going to delete that as well. So I’ve cleaned up all of my classes associated with doing that little design test. And now I am free to just delete all this entire section. Bam, goodbye. And then what I can do is I can go over here to templates, and I can get rid of these two things that I added, just in case we needed them again. There they are on the trash. And we’ve cleaned up all of our mess from a little design experiment that we did. And now we have the new page layout.

0:39:41
And just those items. OK. All right, my friends. We’re making progress. We’re making progress. I’m wondering if I can do maybe an accent line coming off of this instead of like a border top on all these, or a border bottom on all of these. I mean, we can play around with it for just a second. I’m trying to just make something that has a little bit more visual division going on. Visible division, say that 50 times fast. OK. Process card Charlie. So here’s how we would approach this.

0:40:27
We would put a border. No, we would not put a border, because then we’re going to need padding. And we’re going to do a pseudo element. So we do root after. And we’re going to do a content of blank. We’re going to do a width of 100%. We’re going to do a height of 1.5 pixels. We’re going to do a background color of base ultra light, not ultra light, base light trans 10. Not trans 109. OK, that does not work. You can see it right there. Very, very faint line. We’ll do 20, just so everybody can see it.

0:41:17
And I just want to see what this kind of does for us. Now, the problem with this is it’s going to create a little bit of an off balance in what our gaps look like, I think. Unless we position these absolute, they do. It looks like the gap is all, it’s not even spacing between the divider and the next item. You see that? So we can solve this. So root is going to be position relative, which is basically the card. The card is position relative. Now we’re going to position this absolute. And then we’re going to position it bottom 0, just for now, left of 0.

0:42:02
OK, this is clearly not position bottom 0. Let’s save. What are we seeing on the front end? Oh, that is clearly not bottom 0. OK, we need to inspect. Find our absolute element, which is right here. Charlie, body. Oh, yeah, this is the L.I. This is the card right here. So here’s our after. Look at this. Bottom 0 is not being, oh, you guys can’t see that. Let me put this over here. Bottom 0 is not being respected. Why?

0:42:55
Because there’s no, there’s no, there’s no colon. OK, save, refresh. There we go. And now you’re saying, well, Kevin, that’s still a problem, because there’s no gap between here and there. But see, I know the distance of this gap right here. And the distance of that gap, if I grab my entire grid, and I can see that that is var grid gap times 1.5, which that’s of, in itself, is a tough thing to work with. So this is an example of, we need our pseudo element to be able to reference our gap. But our gap already has a cow-kinet. And that is making things a little bit more complicated. So we can simplify all of this with a locally scoped variable. And so what we’re going to do is we are going to create at this process grid Charlie level, because we only need things inside of process grid Charlie to be able to reference this.

0:44:01
So we’re going to go to style. And under this root that’s already sitting here for us ready to go, because it’s from frames, we are going to write grid, not grid gap. We’re going to write the list gap. We’re just going to make one called list gap. That’s it. And the list gap is going to be equal to my current grid gap right here. And so I’m going to bring this in process grid Charlie down here. List gap is going to be equal. Whoa, why can’t I click? OK, hang on. Click out of here, I’ve seen this bug before.

0:44:35
Then you click back in, now you can put the cursor in the right place. So that’s what my list gap is going to be equal to. Now that I’ve defined my list gap variable, I can come over here. And I can say that you are, see if I take that gap out, all the gaps go away. Now I can say your list gap. Now the gaps come back. And now what I can do is I can go to my pseudo element, my after right here. And I can say that if you go away from the bottom, is this going to need to be negative or not negative? I’m just going to say list gap divided by OK, it’s going to need to be negative.

0:45:17
And it’s going to be half of the list gap. So list gap divided by 2, put that in a count please. OK, there’s our count. List gap divided by 2. And then I’m going to put these in part, I’m doing math while the camera is on. You see what I’m talking about? Times negative 1. Hey, I think we did it. Hold on. Let’s look, save. OK, then I’ll try to explain the logic here. Look at this. Perfect divider inside of our existing gap. OK, so what I did is you have the gap.

0:45:56
And then you divide that by 2 to get to the middle of it basically. And then you multiply it by minus 1, because it has to go from the bottom away from the element, not inside of the element. If you have a positive number on the bottom coordinate, it’s going to bring it inside of the element, because it’s already inside the element, right? If you want it outside the element, you have to go opposite from the bottom, which is a negative number. OK, that’s basically what we just did there. All right, now the next thing we need to do is say, hey, but look at this, look at this, absolute trash. This is a trash can of UI design right here that these bottom elements have a border.

0:46:34
And this, my friends, is where we get into a problem. Because I can say, hey, the last one should not have a border. But can I say the last two should not have a border? Yes, I can. I don’t know the nth child combinator off the top of my head, though. But watch this. We can go not. So in this after, we can do root, not, last child, save. And now we refresh. And you see the last one does not have the border anymore. But that doesn’t fix this one right here, does it? So what we need is an nth child combinator. So instead of last child, we’re going, and the challenge here is that we don’t know how many there are.

0:47:28
I think it’s going to be something with a minus n. OK, so what we’re going to do is we’re going to go to the old Googler. And we’re going to ask Google. And if Google doesn’t give us an answer, we can also potentially add. In fact, no, let’s do this. Let’s go to chatGPT. Let’s just see if chatGPT can give us a proper answer for this. What you got chatGPT? OK, do I have to log in? I don’t know. I don’t even know if I have a log in. Continue with Google? Is it this?

0:48:07
Hey, look at that. OK. Plus it’s available in the United States. General, close. I don’t care. OK, can I use it? OK. How do I select the last two children with NTH child? You could select the last two children who are parent in the last child pseudoclass. Oh, yes, yes, sir. In the last child, negative N plus 2. So I was close. So we come in here, not in last child. So we did it.

0:48:51
I think I did it right there. Safe. OK, refresh. Yeah, buddy. OK. Oh, see the problem here? See the problem we’re running into? And this is why we may not be able to do a border at all. Because you can’t just arbitrarily say the last two shouldn’t get it. Because if there’s one, and the second to last is on a row with another, OK, hang on, hang on. We might be able to. Now, we can’t. I was thinking about something else, and that’s not going to work either.

0:49:35
And so I think what I’m going to do is I’m going to ditch the divider concept for right now. I mean, there’s other ways we could do a divider. But I’m just going to ditch it for right now. And I’m just thinking about what our other options are for separating these items a little bit more. Creating a little separation. We could do cards and cards, but I think we start to get very inception. The good news is I’m doing all this at a class level, and I can literally just delete it. And there’s no garbage leftover from doing all this. I did say I was going to make these a little bit shorter. So I never did it. So I can grab this sidebar.

0:50:20
And we will put a width on here. We can just limit it to characters, right? So 30 is probably good. See, that gives more of an apparent gap. But on mobile, this is all going to be completely unaffected. So it’s going to look totally well there. Now we need to go to 100% at that break point. But on these, it’s going to look like there’s that’s not affected at all. And then here, it’s going to look like there’s more of an apparent gap giving us a little bit more white space, which is going to make it visually, I think, a little bit more cleaner to see like a bigger gutter right here through the middle. Going to make this a little bit easier on the eye, I believe.

0:51:07
All right, the other thing I wanted to try is a, you know, since we can’t do the other divider thing, is maybe a line off of this numbering. And that’s going to create the effect of divisions between cards. But since it’s on the top, since it’s inside the card, we’re not going to have an issue with first children, last children, all of that stuff. So let’s give that a little bit of a shot. So we’re going to grab the step right here. This is FR process card charlie step. It already has a class. We’re going to do it on here. It already has an after. That’s interesting, which is itself the counter.

0:51:48
So we’re going to need to use the before element. So we’re going to say root before. We’re going to do a root of relative, because we’re going to need this to be, are we going to need it to be absolutely positioned? I don’t know that we’re going to need, yeah, yeah. We may need it to be absolutely positioned. OK, we’re also going to need, because it has to be absolutely positioned, we need it to have a width, I believe. So we’re going to need this to be a width of 100%. That root, root, charlie step layout with 100%. What is going on? Should we, oh, it’s display block. OK, so we need to display flex.

0:52:48
I don’t why that’s weird that it’s display block. Everything is usually display flexed by default and bricks. Display flex, flex direction, row. What about our header? Well, that’s got our heading in it as well. So we’ve got our step, which is not respecting anything I’m asking it to do. What about a max width of 100%? What if I gave it a background color, right? Background color, red. Yeah, yeah, so why is it not? See, I can important it to 100%. But why is it avoiding going 100%? Save, refresh, check. That’s the header.

0:54:02
Is it because it’s a span? Now, it should not matter whatsoever. Oh, my God, it does matter. That seems so ridiculous. Why can’t this span be 100% with? It says change it to display block will fix the problem. But it said it was display block initially. But if it’s display block, I can’t use the flex controls. So that’s not cool. And display block didn’t even fix it. What is going on, dude? Uh, display flex. I’m just going to use important for right now. I don’t know why it’s bathing like that. If you know, let me know because it feels like that shouldn’t be a thing.

0:55:27
Okay, we can get this hideous background color off of here. And now our root before is going to be content, blank with 100%. Yeah, okay. Of 1.5 pixels, background color of action. There it is. Flex direction row. Align items center. Actually, this is probably, yeah, then that’s correct. Position absolute. 80%. Right zero. And then, what is it doing to my second number? Counter increment process counter. This would be a lot easier if this was an after.

0:56:54
And this was a before. Let me put this up here. I’ve got to go to my actual where the step counter here was done. There you go. Oh, yeah, yeah, yeah, yeah. It’s got to be a before. That’s what creates the zero. Okay, so this has to be an after. We could solve this problem by, no, root counter. This has to be a before. No, this has to be an after. God, this has me all confused now. Oh, that’s why because it’s actually using the before and the after already. I think I can solve this problem by wrapping this. Step wrapper.

0:58:09
What’s this called? F are, I just grab this whole class name and drop it on here. Oh, Lee, I cannot type today. Okay, all right, we’re just problem solving here. CSS root after step. Why is it 100% with now? All of a sudden, or is that just the step wrapper? No, it’s saying my step is 100% with. Why? Why is it a? Oh, there, okay, God, oh my God. My brain is absolutely fried. All these things can just, actually just all come off of here. That is not needed anymore. All right, so here’s our step wrapper right here.

0:59:00
The only thing I’m concerned about. Maybe we can do it with characters. Maybe we can do it with characters. Okay, my brain is thinking about 100 different things now. Rute, position relative. Rute before. Content, blank with 100%. This is going to be a calc in just a second. Hide 100, 1.5 pixels. Background color. Action. Position, absolute. Top 50%. Right zero. With 100% minus two characters.

1:00:05
Yeah, yeah, yeah, sir. Okay. I want to do a margin. No, I can’t do a margin because it’s an absolutely position item. So the gap that I’m creating is just going to be based on the characters. So I’m just going to say three characters. And that’s going to give us a little bit of a gap between our line and our numbers. Save. Question is, does this look like, you know, does it look like butt? And it kind of does. It kind of does, honestly. So what I’m going to do, but I’m not completely, not completely. I like it. I just don’t like how long it is. So what we’re going to do here is.

1:00:57
If I bring this in from the left instead of the right. And then we can go left. Three characters with. Of. 25%. Save. Refresh. It’s going to give us this like a. Like a semi divider almost. Okay. Maybe it needs to be. Two pixels thick. That’s pretty good because it kind of gives a divider effect without being an obnoxious like in your face full with kind of divider thing. I don’t know if it should be the action color or if it should be something like baseline trans 20. You know, that would be super subtle.

1:02:08
Maybe a little, that’s a little too subtle maybe. Try 40%. So now we got like a duo tone effects going on where you’ve got a colored number and then a non colored divider kind of thing. This is something that I think has to marinate a little bit. That’s one of those things that’s got to marinate. So I am going to go to the header though and I’m looking like to me. Our header needs a bit of a gap going on here and it does it doesn’t have anything right now. So I’m going to say FR card gap and just see what that is. Is that too much FR card gap divided by two? Is this going to get us a little bit of a gap going on in that header? I think that spacing is going to help us a little bit. Okay. I think we’re getting there. One thing we can try on our line. I just want to try it real quick.

1:03:33
So we have our step wrapper. This is where our before pseudo element is. I can go with a background of linear gradient and then do transparent 20% var based ultra light trans 40. I don’t even know some of these linear gradient. Okay. CSS linear gradient. Just check the docs on this real quick. Okay. Let me go back to that real quick. All right. Let’s try. I don’t know if it’s too laughter to write. Okay. To left. All right. Trans 40. I think we can put a percentage right here. Yeah. That’s a little bit too much though. 40%. Okay. Save. Refresh.

1:04:54
So this gets us like a kind of fading divider effect going on. It’s one of those things where it’s also like, hmm. I don’t know. Not quite sure. What if it had a ball on the end? These are little details. You can get stuck playing around with these for a while. Roots after. And now it actually makes sense to just drop this up here. And then the ball will be a before. So the content goes here. Our ball is going to be a width of one rim and a height of one rim, at least to get started. That’s about 10 pixels. Our border radius is going to be 50%. Which is going to make it a circle. Our background color is going to be red.

1:05:57
Actually, we just throw an action here. And then our position is going to be absolute. And then our top is going to be 50%. Just like our line was. And I’m already seeing an issue that’s going to come in here. Our left position is going to be three characters, which is going to start where our line starts. And then maybe we need a transform, translate why of minus 50%. We do. Because that brings it. I was wondering why our line went right to the middle. When most things on a position, an absolute position element top or left 50% doesn’t usually bring it right to the middle. And then you have to translate it back to the actual center. But it appears that this was fine. Because the line was on top of the ball, which we don’t want to have happen. And then this can get isolation of isolate up here.

1:07:06
And now we’re all good. It appears we’re all good. Save. Refresh. That’s interesting, isn’t it? It’s a little like. It’s a little nice little design accent. The question is, do we like the gradient or do we not like the gradient? Base light trans 40. So there’s no gradient. Let’s refresh. Hmm, man. I mean, it looks kind of good without the gradient. This is something I might let you guys decide gradient or no gradient. Here’s what it looks like with the gradient. I don’t know.

1:08:17
Man, that’s a hard decision to make. Gradient or no gradient, my friends. What should we go with? Do you like this divider at all? I mean, I think it helps visually break these things up. It gives more structure to what’s going on here, for sure. I’m going to leave it for right now. I want you guys to let me know what you think. I’m going to leave it for you.