0:00:00
What’s up everybody welcome back to the channel. So one of the earliest trainings that I did on this channel was how to create image cards properly in oxygen. Well a lot has changed since then. I’ve been focusing a lot more on accessibility as of late and that tutorial is no longer relevant. We need to create a 2.0 version of that tutorial and that’s what we’re going to do today. And while that was named how to create image cards properly in oxygen this actually applies to any cards that you may be creating. So if you want to create cards that have fundamentally better HTML structure and are far more accessible and are far more scalable then you definitely definitely want to watch this tutorial and you want to take notes and you probably should build alongside me you know maybe watch it once through but then actually build alongside me and do each thing step by step as we go through this. Okay. All right let’s go ahead and screen share let’s dive right in. This is the design of the example card that we are going to be using. This is a team member card. It has a featured image which needs to be a real image. It has a heading for the person’s name. It has a little tagline you know their position at the company. It has a little bio paragraph and then it has these icons for their social profiles Facebook Twitter and LinkedIn and while this seems like a very very very simple thing and let me actually double check my recording here and make sure that we’re good to go. Okay we are while this seems like a very simple card when you bring accessibility when you bring proper HTML 5 structure into the picture things become a lot more complicated than they seem and there is a lot to learn here and there is a lot to know thus the reason we’re doing a tutorial on this.
0:02:02
So I am now going to hop over to our training environment and we’re going to get to building. The first thing I’m going to do is add a section. I’m going to try to use automatic CSS as little as possible here. I want this to be a tutorial that’s available for everybody even if you don’t have automatic CSS you’re going to be able to easily follow along. The only thing I’ll use ACSS for is to just quickly make the grid that’s if you see here the grid that these cards are in the three column grid. Okay all right so let’s go ahead and add that grid now and there’s you know right off the bat some interesting things that we have to talk about but let me let me whip this grid up so it’s going to be a three column grid that’s grid three. It’s going to be one column on medium sized devices. It’s going to have a gap of M. Okay so I now have a responsive three column grid that I can add another div to right here which is going to be our first card and I’m going to open our structure panel and I’m going to try to remember to label everything as we go through this as well. So we have our section this is going to be our team members and then we have this div which is our team member grid. All right and then we have this div which is our card and we’ll say team team card whatever. Okay so you can kind of see the structure there and if I duplicated that card you know two more times it would put them side by side and they would all be equal size and yada yada yada. Okay you get the point now here’s the first thing that we have to understand about cards and accessibility and HTML5 structure and these kind of blend together HTML5 and accessibility you know best practices and standards. A card is technically in HTML5 an article okay so you would actually apply and I’m going to go here to this div and what we’ll give this a class just so you can see better here and we’re going to talk about classes and scalability with these classes but I’m just going to say team card right here okay you can do bio card you could do you know whatever makes the most sense to you but this semantically accurate go ahead and go with that but I’m going to choose team card and my team card in it you know according to the standards is an article now an article is don’t think like blog article right think about a standalone piece of content that can exist exist off of the website somewhere else right so this team member has a bio it doesn’t matter where this bio the bio could be on this website the bio could be on another website we’re kind of signaling that this is a standalone piece of content however however if your cards appear in a list and like there’s going to be multiples and you see here where there’s three of them and that because they’re in that structure with other surrounded by other cards of the same type there is a context created and the context is yes this is kind of a standalone bio but this section is a section of team members and in order to have a section of team members we have to have multiple team members we’re not just talking about one team member here we’re talking about all of our team members when that happens when that context is created of there’s multiple and the existence of one relies on the existence of others they are more technically should be in a list they should be more technically in a list so this is actually a UL an unordered list with LIs inside of it list items okay so I’m going to go over here and instead of putting this as an article I am going to create use custom tag and I’m going to put an LI tag on that that is a list item tag this is going to be a list my wrapper now I’m going to go to my ID my wrapper now needs a custom tag of well thank you oxygen of UL okay so we see UL is the wrapper LI is inside and I’ll take a look at the structure on the front end in just a second so that you can see this okay but you also see one issue right off the bat is and I’m just going to quickly add a background color to this just so we can see it on the page and I’ll just add a random text element for now so that it actually takes up some space okay so I’m going to hit save we’re going to go to the front end and check this out all right so I’m going to inspect and you can see I’m going to bring this up here perfect and I’m going to try to zoom in for you a little bit more okay here’s our structure so we have our UL right there this is what oxygen does when you use those custom tags and this is appropriate because this is a list of cards it is not a standalone card okay the cards rely on other cards and with accessibility screen readers do a really good job of navigating lists of items right so this actually helps out in the accessibility area as well so you have your UL which is your unordered list and then you have your first ally inside of it which is your team card and you can see the UL has the grid three but oxygen applies default styling to UL’s and you can see that we have I don’t know where it’s going to say we actually have it but let’s see road gap with there is a margin or a padding on this UL there’s the UL right here I don’t know why it’s not explicitly saying that that’s what’s causing that padding but I can prove it to you and we are going to come over here and we are going to give this team member grid a class so I’m going to say team uh rapper you can do that that should be you know fairly semantically accurate it is the rapper for our team card so it’s going to be called team rapper and remember team rapper is also the UL in fact I’ll show you that on the front end so I’m going to go and I’m trying to go slow I want to kind of over explain this because it is a little bit technical so you can see team team rapper right there is on the UL okay so if I give team rapper now I’m over in WP code box here this is where I write my custom CSS these days let me actually try to do it here just to make this easier maybe we don’t have to overkill this so it’s not margin it’s padding okay so there was padding on my UL which has the class of team rapper so by putting zero padding left I can get rid of that padding because I don’t want that padding right that padding is going to create some weird little gap over to the left in front of my grid so I take away that with padding zero now what I can do is I can take away my text and we can actually talk about this card structure let’s go to help if I pull the Figma back up again so you see we have a card the image does not this is very important the image does not stretch to the edge of the card so it’s contained inside it has a little bit of a border very light border going on the outside it has a box shadow as well so we’re thinking about the structure that we need and what I like to do is with a card because a card is a self contained element it can have a you know you want to think of it as like having a header and a body and a footer kind of like a web page does almost and you contain the content inside of those inner divs right so we’re going to need one div here for what I call media because we don’t necessarily know if this is going to be an image or it’s going to be a video so media is just a nice term that kind of encompasses all of that stuff so we’re going to have a media container we’re going to have a body container that’s going to contain our content and then we’re going to have a footer container which houses our icons right here okay so I’m going to go ahead and add three divs to this card so we can go div number one div number two I’m just going to duplicate div number three if I can duplicate again okay duplicate it at twice there we go all right so I’m just going to name these real quick this is going to be our media this is going to be our body and then this is going to be our footer okay perfect so now what I want to do is on all of these and I’m going to give them we’re using BIM now and if you don’t know what BIM is go watch my tutorial on BIM naming for classes we’re going to do team card double underscore and this is the media right media wrapper we’ll call it media wrapper and then this will be body wrapper so I’ll do team card body wrapper and then and you can shorten these if you want to if it makes more semantic sense to you to just say media body you know footer whatever so this is going to be team card footer wrapper you can just use the standard terms by themselves okay doesn’t really matter you can do whatever makes the most sense to you so I’m going to do a hundred percent width on all of these okay and I’m doing this on the classes hundred percent width hundred percent width okay footer wrapper width a hundred percent okay perfect so now I have a card with three sections inside of it effectively now let’s talk semantics you can also I what I say is when this is an actual article card so if I choose the parent wrapper here we go back to the ID so we can see what’s going on if this tag set article then I would more likely put like an actual footer tag on this where you can drop down and choose footer right things like that but when it’s just a simple lie it’s in a list with other items I don’t I just leave it as divs okay so we’re going to go team card is our lie and then we have media that’s just a div body is just a div footer is just a div all right now someone may come along and argue oh well you can really put you know header and footer in there whatever you know I don’t think of this granular level of detail makes all that much of a difference when it is an article I do that but when it’s a list item I tend to not do that okay so now what we want to do is think about how we create and we’ll go slow so we can talk about general structure here as well you can see that there’s a gap or padding around the entire card all of those three things that I just added need to have some padding around them the easiest way to do that is just to put padding on the card itself so what I’m going to do is we’ll go back in here I’m going to grab the parent wrapper the team card and I am going to use padding on the inside and I’m going to use M padding EMS for padding and we’ll try one M of padding and we’ll apply all and that is going to create almost an identical gap to what we have in our figmophile all right so the next thing I’m going to do is I’m going to take away our background color which I just threw on there with a CSS class and now you can see more of our structure but let’s take care of this little border that we need to have now so you can see that very light border on the outside this will give our card a little bit more structure so I’m going to go to borders and for color I’m just going to choose like a light gray and unfortunately we are going to get some lag here let me do come on man all right let me do it up here I’m just going to make a EE border because if I just start typing in this box it’s going to get get even worse so that’s going to be EE 1.5 pixel width and solid solid come on solid there we go okay so now we have our border let’s take care of our box shadow as well so we’re just styling things up a little bit here effects we’re going to go to box shadow and shadow color is going to be we’ll just take that down to it’ll be black and then maybe like I don’t know 15% somewhere around there we’ll do a two pixel horizontal two pixel vertical a 30 pixel blur 20 pixel blur let’s do 30 and then let’s drop this down to 12 all right and then shadow spread is going to be maybe like minus one okay so we’ve got a nice little box shadow there I don’t know the exact box shadow styling is actually a bit lighter on here so we can tweak that a little bit more we don’t want to be in borders oh that that was a mistake more lag introduce that we don’t need all right I’ll do 10 and then we can do more like 40 on the spread that’s a much softer shadow now we need to see if there’s any border radius and there is a very very slight border radius so I’m going to go back into the borders area and I’m going to come down to border radius and we’ll just use M on this as well I’m going to do 0.25 M that should give it a nice very very subtle border radius okay the next thing that we can do is we can introduce our actual media so I am going to grab this is my media wrapper I’m going to go ahead and add an image here and this image I’m going to browse for it it’s on my desktop I’ve got all three of those people their photos oh I actually don’t wow okay well we’re just going to have I have I have two of the same persons we’re going to have two of the same person all right I’m going to start with this guy right here so I’m going to throw him in select image there we go and then if you take a little remember he’s in the media wrapper okay you can see that over here in the structure we can do headshot right there okay so that’s that and I’m going to immediately put a class on that so we’re going to do team card double underscore and we can do headshot just like that perfect next thing we’re going to do is come down to this body wrapper and we’re going to see what needs to go in here it needs to be his name it needs to be his little title here and it needs to be his description so we’re going to do a heading and because other content would likely be in this section like an h2 I’m going to go ahead and make these h3s there is a little bit of a debate whether these should be h2s themselves or h3s h2s because they’re in a list and they’re introducing you know a list item which effectively is somewhat separate from the section that these cards are actually in I still prefer h2 is going to be my section heading up here if I had one and then these would then follow as h3s because they are part of that team member section right so you can debate with me if you wanted to debate with me whatever at the end of the day I don’t really think it matters I do think it is potentially somewhat confusing to have an h2 and then more h2s in the same section when these are like sub components of that so I that’s why I go with h3s it’s all I’m saying okay what am I doing I need to get a tagline and then a little paragraph here okay so I’m going to add a text element that’s going to be our little tagline and then I’m going to add another text element that’s going to be our bio okay so I’ve already changed this to h3 this tagline remember what does this need to say for him all right well web developer great all right so we’re going to make this a web developer I think if I can get it highlighted web developer just like that and then his bio is just going to be some warm if some for right now and we’ll take about maybe that’s too much I don’t know let’s paste that in yeah it’s a little bit it’s a little bit more than I wanted okay yeah we’ll go with that okay all right and then before I do any styling here I need to give these things obviously custom classes right so this is going to be team card double underscore name and then we have this is team card double underscore position and then we have this as team card double underscore bio just like that all right next thing we can do is start styling this bio up so I want to go typography I want to shorten up this line height right you can see that the lines are closer together here and I want to scale the font size down we’re just gonna I’m not going to use automatic CSS here I’m just going to use rims and we’ll try maybe one point I think 1.8 is what it was at so we’ll do 1.6 there on the web developer font size we’ll also do 1.6 I’m going to choose rim and we’ll go 1.6 on that as well I believe this heading is needs to be a little bit smaller so we’ll go rim of 1.8 no 2 2 2.2 okay let’s go 2.2 see all the guessing like a lot of guessing game like that’s you know what’s good about automatic CSS there’s no guessing right you’re just you’re using see their small medium large extra small whatever so you want to go up you want to go down and then it all follows the mathematical scale so it all looks good straight out of the box all right so the next thing I want to do is I want to space these items evenly and I want to get all these things centered and let’s get this guy’s name in here as well so it’s Philip Hunt all right what’s up Philip Philip Hunt just like that all right so oh before we actually style anything let’s again we got to go back to HTML structure here so we don’t want to forget and I try to do these things as I add them so that I don’t forget because there’s a lot of things to think about so this is not a diff right this it doesn’t really make sense that this is a diff so what I choose to do is I make this a span okay so that’s a span tag and then this is actually a paragraph tag so I’m going to choose a paragraph tag here and you’re going to see once again that all that oxygen has added some default styling for that and unfortunately it adds it’s not just like margin it’s it’s a logical property is what it’s called it’s margin block start and margin block end and I’m not sure if we’re going to be able to see that on here anywhere here’s the p p p p where is it okay yeah it’s tough to find because there’s so many so much stuff going on but just trust me that it’s margin block start and margin block end so what I want to do is for all of our team cards so I’m going to come over here and write some CSS for all of our team cards I want to make sure that p’s have margin block start of zero and margin block end of zero now this isn’t just notice this is not wow come on Kevin type this is not just CSS this is actually SAS and the way I’m able to nest items in SAS means that I can target my team card and then I can say if it’s a p inside of a team card I want to style it like this so if that looks weird to you it’s because this is SAS and not CSS and if you’re confused about that go watch my tutorial on how to write SAS in oxygen in WordPress okay I’m going to hit command s to save that and if I go to the front end you’re going to see that my p and this is live updates that’s why I love this right you get the the benefits of SAS but you also don’t have to reload pages and refresh stuff as soon as I save it’s instantly updated over here so I can see that my p my paragraph no longer has that margin block start and margin block end spacing so now what I can do is on my body wrapper I can set this to vertical I can set everything to center and I can also add a gap and I will do a gap of one in here maybe point seven five in just like that and then I will also make sure that my typography is centered so that everything is truly centered inside of this card now you have some options here right because I’ve put everything in self-contained divs I can actually use the same technique we just did on the card itself of setting everything to vertical and then using a gap and we can do a gap of maybe like one in and that’ll start to space everything out evenly I can also maybe do one point five in if I want more spacing in there but you can start this you can see that we’re starting to get to exactly where we want to be with this card okay next thing I want to do if you notice one thing we forgot this has to match on my border radius here so if you look I went on the team card and I added a border radius of point two five in if you want to add the same one here you’re going to have to come do that manually and then the problem I’m going to introduce a new mini lesson within this major lesson here watch this okay I’m going to put this at point two five in notice that my image and my card have the exact same border radius however if the client comes along which often happens and says we want those corners to be a little bit more rounded just a little bit okay so you’ve got to grab your team card you’ve got to go over to borders you’ve got to change this point five in and then you’ve got to remember to also change this one and you may actually forget that especially remember we go back to the three month rule all the time three month rule is you build something you leave it for three months you come back to it are you going to remember the intricacies are you’re going to remember some of these things that aren’t really linked together and scalable they haven’t become globalized right so the answers know you’re going to forget there’s going to be things that you mess up right so I don’t like the fact that I have to change those two things independently of each other they should always match if they should always match then this is a good idea really good use case for variables or custom properties so what I’m going to do is I’m going to show you how this works I’m going to take out the point five in there I’m going to take out the point five in here so I’m going to go to borders on this card now my card and my image have no borders I’m going to go over to wp code box I’m going to show you how to create a custom property so we’re going to basically declare a root styling so you put a colon you write the word root and then you open the brackets just like you would do for anything else and then all custom properties start with a double dash right so you do double dash and you’re going to do card radius and you can do a lot of things card padding card radius card border if you want all of your cards to be very very similar or really to match exactly you can create as many of these as you want I’m just doing this as a mini lesson to show you the power of variables and what a real world use case for these variables would be and I’ll do it with you know card padding as well I think would be a good idea so our card radius is going to be 2.5m and our card padding is going to be 0.5m no it was 1m was our card padding so I have card radius card padding let’s also do this let’s do card gap and we’ll do a 2m well we’ll do a 1.5m gap on our on our card so I’m going to go ahead and hit save so now I’ve declared my custom properties now how do I use those custom properties well I’m going to go in here and I’m going to first take off our gap right so we’re going to use a new custom property for that and let’s just do it right here so I’m going to replace that 1.5m with var card gap and you can see now that I have the gap that I had before except I’m using a variable now now when I hit the image I’m going to go ahead and go to borders border radius set it to none and use a variable of card radius so now all my cards can have the same radius and so will this image right here I’m still on my class by the way now I’m going to go to my overall card I’m going to also go to border radius here I’m going to set it to none I’m going to do var card radius and now my card and my image have the exact same radius and they will always have the exact same radius even if the radius needs to change so watch this if it needs to be 1m I go to card radius change that to 1m and save I go back I now have 1m on my media and 1m on my card so these are scalable now they are what I call future proof they now pass the three month rule three month rule says hey if that card radius needs to change people are going to click on this they’re going to see borders radius they’re going to see oh there’s a variable okay let me go into the code there’s the variable right there we changed it back to 2.5m because the client changed their mind once again and said no we don’t like it that rounded we wanted back to the way it was and now look both my media and my card exactly match even though I just made the change okay now you can also see that my gap is nice and consistent and it will be nice and consistent across all of my cards I can go in here and I can use the same gap if I wanted to though this gap would be a little bit too big if I use that variable there and actually 0.65 0.5 let’s just do 0.6 okay all right so we’re looking pretty good here the only thing I will say is that I don’t like the fact that this kind of stretches all the way out notice that it stops it’s more padding that’s more contained inside of there okay so one thing I can do is on left and right padding I’m just going to go back to using M’s here we’ll do a 1m and a 1m and now you can see that I’ve brought that in a little bit more you can also see that this text is lighter and this text is a little bit lighter so we’re going to go here to typography and to color and we’re just going to choose kind of like a lighter gray for our text team card position why is that okay it is I just wasn’t getting gray enough there we go let’s bring it in there perfect and then this one can be off over there not quite as light though just a little bit lighter all right perfect now what we want to do is we want to tackle our oh by the way we’re not even close to done and we haven’t the HTML structure guys is not even like you know we still a long way to go so do not click out of this and oh I know where he’s always going to do now is the the final little social icons no no no no there’s there’s more things all right in fact before we get to the social icons there’s more stuff that needs to happen here this image happened to be a perfect square but clients don’t give you perfect squares right so one thing I want to do here is I want to either put an aspect ratio on this or I want to do a height and a width if we truly want squares the best way to do this is with aspect ratio and so you can go to our team card head shot remember I don’t put custom CSS inside of oxygen anymore all right so team card now here’s our nested sass again right and actually I want to replace this image real quick let’s go to because I want one that’s not square just to test this out real quick so unsplash dot com and we’re going to type in head shot and see what we get okay there we go right there so save image as and we’re just going to do oh it’s a a if if I do it that way let me download free I think this does a jpeg yeah okay so this will be like a head shot just something super generic swoosh real quick all right downloads head shot here we go and I’m going to resize that to 800 now let’s do 1200 maybe you know if we use this somewhere else it might need to be a little bit bigger all right so we’re going to do head shot save replace perfect and let’s go to browse and drag this guy in and then select the image all right perfect all right what are we doing here how do we get is he now tell me that’s not a square a square photo oh my god I chose a square photo what what am I doing what am I doing okay let’s not do that that that was whoo man that was that was terrible that was tough okay we’re going to choose her all right so female head shot not I should I should a name that not a square god I’m leaving this in I’m not not editing that out at all all right let’s go 1200 width on that save and save and replace galley not my finest moment ladies and gentlemen okay browse thinking about too many things thinking about way too many things all right let’s get her in here select the image and I want you to see what happens see the card blows up right like this this card would be taller than other cards and like it would it would look absolutely terrible right so what we have to do is we have to use aspect ratio to make this a square so we’re going to hop back over and because I’m using sass and because I’m able to nest things all I have to do is under team card use an ampersand double underscore and I can target the head shot and it’s going to write the CSS properly for me all right so I’m going to do an aspect ratio of one over one that’s a perfect square I’m going to give it a width of 100% because I’m going to say no matter what get to get to the edge right go all the way across and then I’m going to use a object fit of cover because I don’t want to warp the image right I’m manipulating the aspect ratio of the image which means it’ll squish or pull I don’t want any of that to happen so I’m using object fit cover which will make this behave like a background image so let’s hit save and then go see what that did all right so notice we have a perfect square even though we didn’t upload a perfect square it is cropping in because that’s how object fit cover works but what we can do is adjust our object position because these are head shots most of the data is going to be in the top you know 80% of the photo or the top 20 or 30% of the photo so what I’m going to do is object position and the other good thing about you know WP code boxes as you’re writing it’s you know it’s telling you hear your options for things right that doesn’t happen when you’re writing CSS and oxygen so object position is 50% left and right but we want to do like and I can never remember if it’s 80% or 20% of which side I want to show okay it’s definitely not 80% so it’s 20% this is the vertical part that I want to see and there you go and so yeah it might you know crop the very very tip of their head off that’s fine if you look at professional head shots oftentimes you will see a little bit of a crop like this especially if they’re trying to get in to more of a close-up you’re going to have to crop part of the head so it’s just and I know clients complain about these things to show them in less amounts of head shots where the top is a little bit cut off because they exist all right I used to be a photographer like you know it is what it is okay so while we’re here working on this image I want to make sure that we because you know accessibility is important we are adding our alt tags right so I’m going to come in and I want to see team card head shot let’s go here center position you actually could have done object fit right here if you wanted to as well as the position they’ve added that as of oxygen 4.0 and what I’m why am I missing like why does it seem like there’s no alt tag here but just I don’t remember ever having to add this manually like this so what am I missing media library so with image URL there’s an alt text box with media library there’s no alt text box that makes perfect sense perfect sense okay I’m just going to add it with an attribute them so our alt text is going to be and that’s clearly not fill a punt what’s another name we’ll do it like Alicia keys here Alicia keys all right so this is going to be my alt text and by the way when you’re doing this with attributes I almost always pin them to the front screen so that when I go to primary tab they’re accessible to me and I don’t have to constantly go to advanced attributes and then find them right they’re right here on the primary tab so I’m going to do Alicia keys head shot so I’m describing what the photo is right all right so Alicia keys is our web developer she’s got an alt text before I get into this I do want to pause and go talk about a structural change that we need to make for accessibility and guys by the way we haven’t linked this right to her bio page yet we’ve got a lot to do there’s a lot to think about when you’re making these cards because how you link to her page is very important how this how this card becomes a link or doesn’t become a link or what you’re actually linking to and the fact that we have other linkable items inside this card guys is a big discussion that we got to have very important stuff so don’t go anywhere all right so I don’t want the image to come before the text in the HTML structure I do want it to visually come first because that’s what we’re trying to design but for accessibility purposes we don’t want the image to be announced before the person’s name or like the title of the card or the heading of the card like we haven’t given any context yet so really structural wise we need our I’m going to collapse these you can see this better we need our body content to come before our media content and you’re like the Kevin that looks ugly it looks ugly but it’s structurally correct the thing is is we can still make it visually correct as well we don’t have to have this as our trade-off right so on my media wrapper because I made this a flex item right I can simply come down and I’m not going to do custom CSS you would have to I’m not going to do it here anyway I’m going to do it over here on wp code box but I wanted you to see what we’re going to be targeting it’s the team card media wrapper all right so I’m going to come in here nest under to target my media wrapper and I’m going to simply say order minus one I saved it and now we go back and so very important thing has happened here structurally and I’m going to prove this to you by going to view this on the front end all right see our cards come along very nicely right so I’m going to inspect our element and you’re going to see that we have our UL here’s our ally I’m going to come in and look my body wrapper is first which puts my heading as the first thing in the DOM tree right so you come down here and you see what comes next is actually what’s highlighted on the screen now so visually the image comes first but structurally the heading comes first and that makes your card far more accessible okay so that’s a really good point that we fit on there I think what we can do now is we can go in and we can put our icons in we still need to do our link we’re going to handle that in a moment that’s a little bit more involved okay all right so what we’re going to do here with our team card footer wrapper is display this horizontal we’re going to have a middle alignment and I there’s actually for accessibility a bunch of things that we have to do here okay I want a link wrapper for these icons I don’t want to just add icons I want to link wrapper for the icon so what I’m going to do is add a link wrapper perfect all right and then we are going to add a an icon perfect and then we’re also going to add one of the most important elements to this text and I know there’s no text inside of the design that we’ve been looking at however there has to be text there to make this announced properly on screen readers this is again an accessibility feature all right so I’m going to go ahead and make this a let’s give this classes first so this is going to be a team card double underscore icon wrapper and then this is going to be a team card icon and then this is going to be team card this doesn’t this actually doesn’t matter because it’s it’s not going to be visible so we’re not even really going to style it at all all right so the team card icon wrapper needs to be horizontal because I want to put the um in fact I don’t even know if it’s sometimes oxygen screws up in this regard I’ll just leave it the way that it is let’s go with Facebook here as our icon and let me see what our icons are styled like so they are a circle with the thing inside of it a little icon inside of it so I’m going to choose that icon right there and I’m going to make these solid so all team card icons are going to be solid with that inside of it and the background color is going to be ddd now that’s that’s let’s see like f 5 f 5 f 5 very light gray the icon color is going to be like 333 and then we want the icon size to be more like 32 pixels this can be like 16 now this needs to go down to 18 this needs to go down to eight okay I think we’re getting in the realm here of where we need to be that looks very very very close so this is going to say follow a lesha keys on Facebook perfect now what we need to do here is make this not visible for sighted users it’s only visible to screen readers okay so there is an I’m going to use automatic CSS because the code for this is quite complicated so this is where again a framework like automatic CSS really that you know knows about it in respect accessibility really comes in and saves the day so I’m going to put a class on this called hidden accessible and I want you to see what happens so we go up here we type in hidden accessible boom so now this is very unique to automatic CSS I want to save and preview this on the front page okay notice that we do not have any text visible to normal sighted users right we go over here we we can see that there’s something there there’s a little a automatic CSS inside of the oxygen builder only adds a little a accessibility icon to alert you that there is accessibility text there because three month rule you leave your project for three months you come back you need to change icons add an icon if that little indicator is not there you will forget that there is accessibility text there or if another team member comes along and they’re doing stuff in this card they’re going to forget that there’s or they’re not even going to know that’s not even a matter of forgetting they’re not even going to know that the accessibility text is there unless they come over here and look inside of the structure panel and I can name this accessibility text right and we can name this icon wrapper okay now this is very very important we’re going to cover how these things are announced in just a little bit but now that I’ve got this structured properly I’m free to duplicate two more times and then what I can do is I can center align these icons and I want to check on the front end of how we’re looking here all right so we’ve got our three icons let’s go with our design we’re going to need some padding in between or some spacing in between so because this is a flex item once again I can simply go into gap we can try a gap of 0.5 and then I can quickly while I’m here just grab Twitter we’ll put that little Twitter bird in and then we’ll do LinkedIn on this one I’ll put my in in there and now let’s save and look on the front end and see if we’ve got this looking good perfect okay so what I’m noticing is let’s go look at this card there’s a little bit more padding on the bottom than there is on the top because they didn’t want those icons to be kind of so close to the edge down here so a couple ways I can handle this because I have my footer team card footer wrapper I can simply add a little bit of extra like another 0.5M or even a 1M of padding to the bottom inside of my footer I don’t have to mess with my card padding right that’s why I kind of structure things the way that I do so now that looks really really really good okay what we want to do is visually indicate here that we’re going to go to hover and then we’re going to go color is going to be I don’t know this let me just so we’re not choosing random colors I’m just going to do var primary there and then let’s save so we should get a nice little hover on that icon there you go and then you don’t want to only create color in terms of your hover so what we also want to do is probably on hover add a little box shadow effect so we’ll go to effects box shadow and then I will choose that and then we’ll bring this down to no I don’t want it to inset oxygen I do not want it to inset we’ll bring this down to you know 10% we’ll go another we’ll go 0 0 blur 20 shadow spread 0 and once again oh this needs to be like 0.2 there you go all right 20% looks like it will work very nicely on that let’s go save and then let’s check that on the front end okay so we’ve got our little hover effect there I still think that’s a bit let me instead of that let’s not do a box shadow I’m going to go effects I can’t all right I’m just going to delete all these I wish there was a reset man I really wish there was a reset all right I’m going to go to border again all right team card icon so team card I’m just going to do it in here because I’m I’m boycotting the borders area all right so team card icon is going to get and then we need to do hover let me show you how we do this so we do another ampersand hover and then open more brackets again so this is going to all right the CSS for me properly so the hover on the icon is going to be a border of one pixel solid and then we’ll do DDD and maybe we go 1.5 pixel but that might be too big 1.5 pixel solid DDD on hover so let’s check out what we’ve got on the front end let’s get rid of this box shadow on hover I thought I did oh I got to save it that’s why so my front end actually picks up those there we go but hmm okay we can’t we can’t do border because borders actually changing the effective width of the element okay so we are going to go back to box shadow and I don’t need to do that here so just to keep everything as simple as possible I’m going to show you how I do this so we’re going to go to and I’m keeping all this stuff in because as I’m you know designing and building things I mean this is like this is life this is life as a developer so I got to try some different things you don’t get it 100% right every single time I’m going to go to effects box shadow shadow color let’s do the DDD and then horizontal offset is going to be 0 vertical offset is going to be 0 blur is going to be 0 spread is going to be 1.5 pixels all right let’s see if that works correctly let’s refresh on the front end there you go so now it gets the effect without changing the effective width of the element okay perfect all right so I like that all right let’s think think think think think we got to do some other things here oh we didn’t change our accessibility text so follow Alicia Keys on Twitter so I need to change as a Twitter and this one and also guys because there’s an a there I can actually select it so it’s hidden but because it has a representative here is an a icon I can actually quick quickly click it here instead of having to choose it inside of the structure panel this is going to say on LinkedIn okay on LinkedIn perfect and then I’m going to hit save and we can actually test out our well I can’t until I give this a actual link so where’s my link wrapper here’s my icon wrapper this needs to have at least a pound sign in there icon wrapper hashtag icon wrapper hashtag okay save now we can go the front end and I can actually test out some accessibility stuff here okay so I’m going to go cover your ears here we go to two of our link follow Alicia Keys on Facebook link follow Alicia Keys on Twitter link follow Alicia Keys on LinkedIn list one item link follow Alicia link follow Alicia Keys on Facebook okay so the next thing we need to talk about is how do we get this let’s pretend for a minute that Alicia has a bio page on this site and we need a link to that bio page we need to not make here would be the mistake here would be the mistake and I think I’ve taught this before so pay attention because this is going to make a change here in the instruction we need to not make this entire card a link that is not the way you do it for accessibility purposes because it really messes with screen readers so what we need especially since these have their own links so what we need to do is typically you make the heading of the card the link all right so what I’m going to do is click on the link wrapper icon here I’m just going to use a pound sign and then add the link and now you can see that we have linked this up now I don’t want let me grab that element right there and we don’t want it to be red okay so now we’re going to come over here and we’re going to choose our let’s do our 333 so 333 and we’re good all right so we’re going to save changes on that so now if we look at this on the front end we can actually click Alicia Keys to go to her bio page if she had one and we can also click these individually and when we look at accessibility in a minute you’re going to see that it announces this first and then it announces these icons separately and the person could choose what they want to activate or to click on so the challenge here is we’ve made this clickable but if someone’s navigating the website right they expect that a card itself is clickable they don’t expect to have to like come in here and find the exact thing that is linked up they know that these icons obviously are probably links because they would just it would just be dumb to have those as a visual thing without it being interactive but they don’t know necessarily that this is a link even even if I have a hover style on their properly right so we’re going to go to hover and we’re going to do our primary so yes on hover they can see that that is a link let me go back to the front end however they didn’t know that ahead of time there’s no indicator that this is a link they hover over the card and they notice oh this isn’t clickable they’re not going to like search every element to see what you can click right we want the entire card to be clickable all right so what we’re going to do here is a little trick and there’s two ways to do this you can put this code on the actual link wrapper itself so if you gave this a class or something you could do it and that would only apply to this one kind of card if you have other cards on your site they’re going to need the same technique it’s better to create a utility class and so we’re going to create a utility class called clickable parent okay so clickable parent just like that then what I’m going to do is I’m going to go into WP code box and we’re going to write out this code so remember I’ve given the link wrapper very important not the heading itself choose the actual link wrapper that’s around your heading add the class clickable parent and then we need to add some code I’m not going to do this nested under team card because I want this to apply to every card on my website that I want to apply this technique to so we’re going to create a class called clickable parent I’m going to open the brackets because I’m using SAS and we can do nesting I’m going to do an ampersand and I’m going to do after to create an after pseudo elements okay also very important here with your team card okay we’re going to do this as an absolutely position element if your team card does not have position relative on it it won’t properly contain what we’re about to do with our link expansion technique so you need this position relative here right so if it doesn’t have it you can do it here you could have done it on inside of oxygen itself by going to layout and then coming down here to position relative however you want to do it you can but this needs to be a relatively positioned element this team card that you’re applying this effect to any card that you want to apply this effect to needs to be position relative okay so my clickable parent is going to be remember when you’re writing custom CSS for pseudo elements you always need content so we’re going to do blank content for this we’re going to do a display of flex we’re going to do a position of absolute we’re going to and now the way you make an absolutely position element take up the entire parent element is top right bottom left all zero so okay so top zero right zero bottom zero and left zero perfect I’m now going to add a cursor pointer to this to make sure that everybody knows that it is nice and clickable and we’re going to go check it out on our on the front end here okay so I am going to I don’t think I’ve saved this since I added the clickable parent class now I can refresh here and look at this my entire card guys is clickable how awesome is that the problem you’re going to run notice is that okay Kevin you made the entire card clickable great technique great trick but now they can’t click on these items right here but there’s a fix for that have no fear so I’m going to come in and what we want to do is on our footer because remember our footer contains our social links right I want to go very simple on that class footer wrapper layout put this as position relative and since this comes after in the DOM it comes later than this link position relative will elevate it even without the index will elevate it above that absolutely positioned link expansion technique that we just did so I’m going to go ahead and hit save so all I did is change that footer position relative and now it’s going to be extracted above that floating link expansion technique that we just used so the entire card is clickable but so are the icons really really really really important here all right so now what we want to do is we want to apply a hover style to the entire card because we don’t want the little cursor pointer to be the only indicator that this thing is clickable so now what we’re going to do is on our team card what’s cool about this even though we’re using a link expansion technique which takes a after pseudo element and covers the entire card the hover effects can still be activated through that little layer right there that we’ve created so you don’t have to worry about doing anything crazy here you can just apply hover styles like you normally would so I’m going to do a hover style of let’s do effects transform add transform we’re going to do a not a scale we’ll do a translate translate why that’s the vertical axis of 12 minus 1 minus 0.25 rim all right minus 0.5 rim minus 1 rim 1.5 how far do we want it to go that’s the question let’s do minus 1.5 rim let’s also do we want to darken the box shadow that’s on there that’s what I’m thinking about right now so let’s go to box shadow let’s choose black and let’s choose 20 30 30 I don’t know how this is going to look yet 2 to 40 not in set oxygen quick doing in set all the time minus minus minus 1 minus 1 okay that might be too dark all right let’s switch away from hover and to see what our original it was all right so there’s our original there’s our hover so it gets a little bit darker I think that that’s going to look good so let’s go check this out on the front end there you go that’s nice I like the effect however I don’t like the jumpiness the jerkiness right so I’m going to go to team card hover we’re going to go back to the original actually and we’re going to go to effects transition 0.35 seconds timing function is in out all zero delay see what we’ve got now check this out on the front end nice and smooth nice and smooth okay so that’s looking really good I think what we can do now I mean we’ve done almost all let’s just see what these look like in a row remember they’re all going to be list items now so we’ll check out our structure in just a second perfect now believe it or not we still are not done because we have to test our keyboard accessibility right what happens when we try to keyboard navigate this area so I’m going to do that right now by hitting tab and you’re going to notice that all right so if I was up here in my nav and I come down to the first item it highlights Alicia keys the name right what I really wanted to do because the entire card is clickable is focus the entire card and when the entire card is focused I don’t want it to also focus Alicia keys right so we got to take another step here and we’re going to use a technique called focus within all right so what I’m going to do is I’m going to go over to wp code box here and under team card I’m actually doing this under team card now we are going to use an at so team card focus within and I want to style this and I’m going to use basically something very similar except I’m going to use instead of an outline which I typically use for focus styling I’m going to use a box shadow because I want it to conform to the radius of the element that I’m focusing on which outline does not do and cannot do so I am going to use you’re going to see exactly what this says in a second so focus within takes that focus focus the focusable element right and kind of expands it to the parent element as well so I’m going to do a box shadow here of 0 0 0 1.5 pixels so no offset no offset no blur and then this is the spread of 1.5 pixels and I want to do var primary so it’s my primary color and let’s just pause there and see what that’s done so I’m going to go the front end and look at that so when I go to focus on the card it focuses on the entire card right but the problem is it’s also focusing on Alicia keys at the exact same time and that looks really ugly right so we want to actually wind wind focus within is applied we want to remove focus styling from the heading link and this is the this is the only link inside of the body wrapper so that’s what I’m going to target okay so I’m going to say focus within and when we’re doing focus within I want to also target yes this is going to this is going to work okay so when I’m targeting focus within I want to do team card double underscore body wrapper a so find a link an a find a link inside of team card body wrapper when we’re doing focus within and make this we’re going to do another ampersand focus open so when that link is focusing or basically what I want to do is remove the focus styles when focus within is happening okay so that is by default using an outline style so I’m going to do outline none so the a that’s inside the team card body wrapper is going to have no focus styling when focus within is being applied all right let’s go see what we have what what happened here so I’m going to keyboard navigate oh boy look at that so here I am up here on cta button I’m going to take one more tab and look at that we have a focused card without Alicia keys being focused and I can still guys even though the entire card is clickable right I can still navigate through the social icons and those are going to announce themselves properly check this out okay we don’t want Alicia keys in here anymore though we want let’s say Joshua right let’s link wrapper get actually grab the heading text there so this is going to be Joshua um a Joshua Frederick let’s give him Fredrick’s there we go uh Joshua Fredrick’s and so we will do Olivia wild just like that and what we need to do is change her media so we’ll go to our headshot we’ll browse and we’ll choose her perfect and then we need to make sure that this alt is not the same right Olivia wild headshot and then here for mr Joshua we’re going to grab our headshot and browse for him it’s going to be this man right here all right come on be in slow all right and this is going to be Joshua Fredericks now remember we did all this uh text manually guys that this is where I should pause and say ideally you would do this in a repeater right um so these would all be custom post types you would query this you only have to build the thing once you don’t have to go you can use custom fields for these types of things so it’s nice and easy um but we’re going to say follow Joshua Fredericks on Facebook so I’m going to grab that I’m going to click here and replace this with Joshua Fredericks click here replace this with Joshua Fredericks and now here we’re going to have Olivia wild so I’m going to grab her name click here for accessibility follow Olivia wild on Facebook this is going to be follow Olivia wild on Twitter and this is going to be follow Olivia wild on LinkedIn now we save and let’s actually go to the front end and see using Apple voiceover how these things are announced you guys ready all right let’s go voiceover on Firefox link follow Alicia link head link cta button list three items link heading level three Alicia keys list three items link follow Alicia keys on Facebook link follow Alicia keys on Twitter link follow Alicia keys on LinkedIn link heading level three Joshua Fredericks link follow Joshua Fredericks on Facebook link follow Joshua Fredericks on Twitter link follow Joshua Fredericks on LinkedIn link heading level three Olivia wild link follow Olivia wild on Facebook link follow Olivia wild on Twitter link follow Olivia wild on LinkedIn voiceover off Now before we wrap this up for good, there is one more thing that we have to take a look at.
1:05:13
And it’s something that’s kind of a hidden little problem that you may run into because especially when you’re using dummy text to kind of build this out before the client gives you actual content or before you create the actual content for the client. All of this dummy text is exactly the same length. So if I come over here and I choose, let me scroll down to Olivia here and I’m going to grab her bio right here. And let’s say her bio was a bit longer. In fact, let’s do it on Joshua. Let’s do it on Joshua because he’s in the middle and that’ll give us a better visual representation of the problem that we’re going to run into. So I’m going to choose his bio text right here and let’s just say that his bio happened to be a bit longer like that. And let me take out that extra comma that we don’t mean I’m just throwing extra characters and left and right. So now what do you see is the problem.
1:06:11
Let’s go take a look at it on the front end. Obviously, these cards which were the same height are no longer the same height. So we need to make sure that they’re all the same height. Now that is easy enough by putting, there’s a few different ways to do this. On your wrapper, because I made this with automatic CSS utility classes, I can simply add a stretch class and it’s going to make sure that all of these stretch all the way to the bottom of the grid container itself. Alternatively, you can do a flexed grow on the cards, but you’re going to have to write CSS for that. If you’re using the oxygen grid builder right here, it will allow you to stretch the elements automatically. There’s stretch buttons just like there is right here. So you can just click the stretch button on those grids and it’ll make them stretch. I’m just going to do the easiest thing, which is throwing a stretch class on there from automatic CSS and it’s taken care of.
1:07:07
However, this brings in a new problem. We’ll go look at this on the front end just so we can see it live. So we’ll refresh. Now they’re all equal height, but look, the icons are not in line with each other. These sets of icons are higher because they’re the same length away from the biotext. And really, they need to be stuck to the bottom of the card so that they’re all even across the bottom. Now one way we can do that is probably the easiest way. Remember, we already put a gap between all of these elements. And really, it’s not one, two, three, four elements. It’s one element because remember, I created a body wrapper for that. And two elements, I created a footer. And three elements, which is the media wrapper, the media container. So all I have to do here is you can do space between, but I think we’re going to run into another problem with space between.
1:08:05
That might be the thing you think of doing first. So if I grab our card, team card, remember, I’m vertical, so I can do space between. Look, it puts the icons all at the bottom, but it creates a new problem. So let’s go take a look at what that is. All the icons are now aligned across the bottom, but we’ve lost alignment in our headings. I personally do not like that. Some people like this because it centers the content, but I do not like it. I like all the headings to be an alignment. I like all the last elements, whatever those last elements are, to also be an alignment. So space between is not an option for us here. The better option is to grab our footer, right, which has a class on it, by the way. I can go to margin top of auto, and that’ll force those icons or the footer, whatever’s in the footer, to the bottom, away from the rest of the content. And that is going to achieve everything that we want, which is headings and alignment, icons, all in alignment.
1:09:10
And that is the last thing that you want to make sure that you shore up, because again, it may give you, or the client may give you content, or you may have to create content where this guy happens, his bio happens to be four lines, everybody else is bio’s three lines. You don’t want that to break your cards. So we’ve got keyboard navigation, all nice and neat. We’ve got it announcing the cards properly. Everything is golden. If we went deeper into using the screen reader, not just to show actual links here, but to actually read the content inside, it would be reading the heading first, her title, her bio, then it would be announcing her photo. Remember, because we swapped the actual HTML structure, then it would go into her links and then it would go on to the next person. And all of these people are grouped inside of a list. They’re a list of team members.
1:10:05
So it’s an actual URL. It’s actual allies. This is how you want to think about building your cards and components, right? We’re just dealing with cards right now, but various components throughout websites that need this kind of treatment. Let me go back to camera here. So as you can see, something very, very basic, like a team member card, actually becomes quite advanced when you start thinking more about proper HTML structure. When you start thinking about accessibility, there’s a lot to know. And if you like this tutorial and you want more of this stuff and you want to be building the most structurally sound accessible websites in oxygen or in bricks builder coming soon, lots of tutorials on bricks, then you need to be subscribed to this channel. But I will also tell you those really in-depth details, tutorials are not going to be on this channel. Okay.
1:11:03
There’s going to be teasers. There’s going to be stuff like this that we make public, but the really in-depth stuff is inside of my inner circle. So there’s a link down to the down in the description below to the inner circle. You can go get information. Super affordable. I’ve never raised the price on it since day one. I was supposed to raise the price three, four, five times by now because we have over 800 active members. So we need to all be on the same page that, yeah, because I get a lot of emails, like, hey, can you give me a discount? Can you lower the price? No, the price is already discounted, right? That’s an entry level price that I never raised. It’s the same price for everybody.
1:11:40
So get in while the getting is good. I’m not saying it will never go up in the future. If you get in now, though, whatever the price is, you are locked in, all right? And I have not raised it since day one. So no, no, you cannot get discounts. It’s already discounted. But the really in-depth stuff is going to be inside of the inner circle, of course, along with agency trainings, digital marketing trainings, you know, process trainings, everything that you need in there to be a successful freelancer or run an agency building on oxygen, building on WordPress, building on bricks. It’s in the inner circle. So that’s it for this tutorial. I hope you guys learned a lot. I hope you opened your eyes to some new things that you need to be thinking about. If you have any questions, drop them down below.
1:12:23
Hit like, hit subscribe, hit thumbs up, drop a comment, love you guys, and I will be back very, very soon. So you are becoming a great professional with it.
