How to Create Cards in Oxygen Properly (Updated & Accessible!)
Vložit
- čas přidán 28. 07. 2024
- This is an advanced tutorial, but if you follow it you'll be able to create structurally organized and accessible card components better than 90% of web developers.
This is the type of tutorial I'd normally publish in my Inner Circle, but because it's an update of a previous tutorial I published, I'm making it free to everyone.
You can get more info and join the Inner Circle here: digitalambition.co/inner-circle/
You can purchase Automatic.css here: automaticcss.com
You can purchase WPCodeBox here: geni.us/uu8jqqf
In this tutorial:
0:00 Intro
01:04 Example Cards
02:07 Creating a Grid for the Cards
03:38 Article Tags vs List Items
09:08 Planning the Card Structure
10:23 Creating the General Card Structure
23:42 How to Use CSS Custom Properties
30:11 Controlling Aspect Ratio of Media
36:28 Proper DOM Structure for Media Placement
39:06 Accessible Icon Links
49:38 How to Link Cards Properly
55:55 Adding a Hover Style to the Card
58:42 Setting Keyboard Focus Properly
01:04:25 Testing With Apple Voiceover
01:05:08 Setting Equal Heights Properly
01:09:30 Review
Impressive ! So many golden nuggets in a 72 minutes tutorial ! Thank you Kevin !
Outstanding. This is just those kind of tutorial that elevates our work.
Thank you a lot Kevin.
Elevates and boosts our work in this realm?
Great tutorial from the man teaching Oxygen WebDevs to build accessible websites.
Thanks Kevin!
fantastic tutorial. Thanks. Got to do some work on my cards now.
This tutorial has everything I was wanting from the first one you did. And I can see how the code box with sass makes this much easier to get right.
Wonderful thank you. Great timing too, as I'm building some cards right now
Great video as always! Definitely a great motivator as well to dive deeper into accesibility.
Kiven, it doesn't matter how many of the tutorials you created I watch. I am always amazed how many details you pay attention for, and on the new information I get ❤
🙏
This is top notch. Nice work!
Geezz... so many GEMS in here! TYTYTY Absolutely amazing stuff! Thnks Kevin, your work is most appreciated. Cheers.
Incredibly valuable content!
Excellent tutorial!
Very nice & informative video. Thank you for unveiling all the new CSS that I had no clue that exists :) ... thanks a lot.
Excellent tutorial, thank you! Greetings from the Netherlands
i never knew cards were so complicated. so good, about to follow along to improve my skills!.
GJ Kevin
keep them coming,
Outstanding....
Thanks
Great Great stuff thank you for sharing
Informatief. Het is triest dat veel mensen hun kapitaal verliezen door gebrek aan kennis van het vak of gebrek aan discipline. Dit was mijn geval totdat ik de heer Gerard stuks vorig jaar op een conferentie ontmoette, het is nooit te laat om te beginnen.
Het is mogelijk om winst te maken met handelen en beleggen als je de juiste bron volgt en een mentor hebt om je te adviseren over de te nemen stappen en acties. Ik doe ook mijn investeringen via het Gerard's platform en het is zeer gunstig voor mij geweest.
Ik besloot toen ik veel getuigenissen van verschillende investeerders over Gerard stuks begon te zien, ik besloot hem eens te proberen en zie, hij was degene naar wie ik al die tijd op zoek was, handelen met hem was zo lucratief, leerzaam en winstgevend.
Kun je me de contactgegevens van Gerard geven?
Hij is actief op Telegram.
Gerardstukes is zijn actieve tag
Like it a lot very great lessons Kevin :)
Congratulations Kevin! Very interesting and a good cue to take over some sites to make them more accessible. The class you use to hide the social text, what parameters does it have? Just to apply it on some sites. Thanks
Great lessons Kevin. How would you differentiate between adding a hidden text to the icon and adding aria label, which will also be read out on focus? One way I think your method of adding a hidden text is better is the use of dynamic data for the text, because Oxygen's Attributes doesn't allow prepending or appending text to dynamic values.
Aria labels aren’t always read consistently and they don’t have support for translation. Hidden text is almost always preferable.
@@Gearyco great point especially for translation!
So instructive! When I set the image to order:-1 it messes with the owl spacing of the parent element, so I had to manually set gap instead like in the tutorial.
Another great tutorial Kevin. I think you missed the fact that you can add all the 'alt text' for the 'media' in the media library. They will display in O2 and other builders without having to use the attributes tag.
I believe this can also be used for dynamic data. That will take out the steps of having to copy names for accessibilty.
Yeah, the problem with that, though, is that sometimes we use the same image on different pages, but we alter the alt text for SEO purposes. If the alt is pulled from a single global field, that's a big limitation.
I would see Kevin's review of Breakdance with the enigmatic / mysterious title "Breakdance - He bet not on this card" :)
As usual a great thanks, I improved so fast from you @kevin. I have a question amore bout accessibility.
If we used for card tag is it a good accessibility practice to add a and a (using custom tag) ?
Best regards
Yes.
Thank you Kevin for this tutorial. I have watched a most recent tutorial of you (I guess it was the BEM video) and I think you gave the job title an HTML tag of but in this video (which is more detailed) you gave the job title a tag. So which one is the best practice then? TIA
It should ideally be a paragraph tag.
With contained elements like cards, I tend to set everything to "em". This way, the entire card design scales based on the font size of the entire card, whether set or inherited.
The ratio between the font size of the heading to the tagline is then set and consistent.
Whatever works for you. Em for fonts can sometimes provide unintended results.
I feel like I’m looking at myself from another universe lol. You and I actually look a lot alike and watching this video it’s funny you mention you used to be a photographer, as was I and then began focusing on the web development/design. Small world.
love
Thanks for your work, excellent as always. A question: won't it be confusing editing the css in both oxygen and in wpcodebox? If you want to edit the value later, you won't know whether you check oxygen editor or wpcodebox (or even automaticcss).
If you look at the CSS I wrote, it's not possible to do with the Oxygen builder. I only write CSS when it's not possible or practical to add the styling in Oxygen.
Wow. This is a game changer. Great video Kevin. Is there any way you can post a snippet of the codes you wrote or make a video on how do I find these codes? I'm totaly beginner in this field.
I'm going to do a blog post write-up for easy reference.
@@Gearyco Thanks, Kevin. I will keep an eye on that blog post and your upcoming videos.
Thanks this is great. Any tips on how can I make an oxygen repeater element to "ul"? As when I select repeater there is no option for custom tag.
Looking into that.
Thank you Geary for another very good video tutorial. I'm interested in start learning about Accessibility. Any suggestion where to start?
The inner circle
@@Gearyco I see. Just got in. Thanks
Hey Kevin, great tutorial!
Is the hide--accessible class already available on ACSS? I'm not seeing it on my version.
No, it’s in the version that comes out this month.
@@Gearyco Gotcha. Keep up the great work.
I found out WPCodeBox place custom css file before Oxygens css files in so there is a problem with specificity when I want to edit default oxy css styles. How do you fight with that?
What styles are you trying to override with codebox that are already in oxygen?
Another great tutorial, thank again. Regarding the aspect-ratio. On mobile (tested version iOS 14.8.1) it doesn't work. The image returns in the browser with it's original aspect ratio. At least in b mobile browser - Brave, Firefox, Chrome and Safari. Just curious how do you guys handle this? Ignore, or make the image the correct aspect-ratio on forehand? Ignoring is not an option for me. Or do you have another option?
If you're on a device/browser that doesn't support aspect ratio then you'll want to implement a fallback or a different method. I just checked it on iOS Brave and it's working, though.
@@Gearyco thnx for looking into this. After updating from 14.8.1 to 15.5 it works on all browser which I had tested before.
Great tutorial! Thanx! I cannot understand what you're writing for the image the code is %__headshot, right? I am trying to make this card to show blog posts in home page but the aspect ratio it's not working (I used others class names but it seems to be ok)
Hard to say, without a link
@@Gearyco can I send u via e-mail?
@@Gearyco if I write the classes into SCSS separately it works...
When I assigned the " li" tag to the team card, there was a dot that appeared and messed with the layout.
You just have to set list-style to none.
This is awesome Kevin. However I must have missed something as I'm getting the bullet between my cards that you usually get with a list item in an unordered list. You didn't seem to get one when you did it. Any ideas Kevin?
You just have to set list-style to none
was having same issue. at least I wasn't seeing things! lol
Thanks Kevin. 😃
All of this is awesome. Thanks. However, just wondering what you do when using Repeaters to display Lists? I mean I understand how to change the Tag of each item in the repeater from "div" to "li", but how do I change the Tag of the Repeater component itself? As far as I can tell it cannot be changed from a "div" to a "ul". So, do I wrap the repeater component in a div, then change the Tag to "ul"? If so, the repeater is still tagged as div. Makes me feel like tagging as a List is not possible right now? Unless I just have a list of "li" components that are not wrapped in a "ul"? I feel that is not semantically correct?
Good question. I'm going to need to follow up with Elijah about this. You should definitely be able to change the html tag of the repeater wrapper.
I was wondering the same thing! I built some cards on a client site with a repeater and just have them as “articles” right now until I can figure out how to change the repeater to a “ul”.
@@Gearyco Did you ever find the answer?
@@uncannyrobot filed a bug report. Still an issue last time I checked.
I drop a like before I even hit play 😆
A true OG!
How can we use that ul>li technique with Oxygen repeater? Oxygen doesn't allow us to change repeater element tag. Is there any possibe way of changing it without using java script? I came loong hhere just see again clickable parent technique and I found this issue now
Not possible with oxygen repeater. Another reason why bricks is better 😜
Hey Kevin, Can you point us to the code used for the hidden accessibility? Or a good resource to read about it.
Aria hidden doesn’t hide from sighted users.
I’ll DM you the code. It’s in next version of ACSS.
@@Gearyco its just to study the code. Since I've been watching your videos I've had the urge to dive back into css and really understand it. This vid of your was truly educational.
Thanks again for sharing.
@@Gearyco I also plan on running through the whole Oxymaven blocks and rewriting them. Better structure and accessible where needed.
I'm curious, wouldn't this mean that the link would be announced as the name upfront, and then not again after the context for the person's identity is provided? I'm guessing some backtracking would be needed to take action on what was just read. Is that a pretty typical accessibility workflow?
The exact link text gets announced so it would announce their name.
I totally agree with using wpcode and writing your own CSS but either do one or the other, the idea that some CSS is put in via oxygen and some is in your extra CSS file seems like a nightmare when put through your 6 month rule and trying to figure if the rule is coming from inside oxygen or from external source. I am new to oxy BUT have been very impressed with the glow feature to tell me there is rules there, so if you dont know css cool use oxy but if you do know css or want to do short term pain for long term gain go the SCSS route and learn to code css, very shortly you will be quicker to write than to menu dive in oxygen to make rules IMHO.
I mentioned in my codebox video that all CSS should go in one place. I no longer put CSS in oxygen.
@@Gearyco You definitely get me to invest in useful tools, but this can be quite restrictive. Especially for those of us in developing countries.
@@dahunsi For sure. Just do what you can do!
Hi Kevin, Great Video. A small request, can you please make a separate tutorial on semantic HTML? There is a lot to learn from you.
It’ll be taught in segments throughout future tutorials. Hard to do a comprehensive video on it
Hi Kevin, you are my source of truth.
I noticed that when applying the ul tag to the team members grid, with MS Edge, each card is preceded by a dot (bullet dot). Can you give me simple newbie instructions for eliminating the bullet dot?
on the list custom css add list-style: none;
I needed the card link trick so badly. Should service cards and review cards be tagged as articles? Should all article cards have header and footer?
Unrelated, but: I created dropdown filter facets for reviews, faqs, etc. For now, I'm using a custom taxonomy (each service turned into a category) for the facets. It's pretty much like checking "related service" for each faq, review, etc. Is there a way of using bi-directional relationships for my facets, instead of this custom taxonomy? Would be a lot cleaner that way. I might have OCD.
Also unrelated, but: My custom icons are all black after creating a pack using icomoon. No idea why. Made in figma, expanded in Affinity Designer, packed with icomoon, but they're completely black. The options I have left are code block (svg code), image svg, background-image svg. I've been using background-image, because I found it to be the most scalable way, many icons being used in pair with a short paragraph. Is this method bad for accessibility? I've also noticed Safari won't even display my svg background-images. Png url as fallback? Is that even a thing?
Services and review are also list items when presented as such (“here’s a list of our services” and “here’s a list of reviews.”
A single review card like for a featured review would be an article.
@@Gearyco Thanks a lot! What about the facets problem? Is it possible to use bi-directional relationships for facets, instead of a taxonomy?
@@mihaiandrei97 certain facets yeah. I’d have to see the entire setup mapped out
Hello sir Love you
stupid question here... but should we build repeaters like this? example product grids?
Yes, but there's a limitation with repeaters currently.
@@Gearyco Awesome thankyou!... btw loving ACSS
WOW! amazing! Thank you ♥
May I ask you, In case I'm using Automatic.css/ACSS, I should use custom CSS as well for cards...etcetera!
Or just count on the ACSS classes as you used only for the grid! but I want to use all the ACSS..
Example: Font size, spaces...etcetera!
Please advise!
I'm doing a video on custom classes vs utility classes and when to use them.
@@Gearyco Oh, thank GOD! I'm waiting for this Kevin...
Looking forward...
Thank you!
So great that you focus on accessibility, including keyboard navigation and screen readers. Having that worked out, goes a long way. To all Windows users - you've got Windows Narrator as a built-in alternative to Apples Voice Over. NVDA is a free full-blown tool with a learning curve, and JAWS is a premium alternative with a 40 minute/reboot trial.
Nice touch, remembering the order in the DOM. Flexbox and Grid gives us so many options to move things around while retaining a sensible content order.
If only JAWS had a free testing option for devs. Though, NVDA works, and there are accessibility checking extensions for browsers.
Accessibility is part of why I tend to build from scratch. A lot of purchased elements (like accordion toggles) aren't built with accessibility standards. It's more versatile to just have these pre-built to reuse.
There's also "AI" add-ons like UserWay, worth checking out for larger clients.
I looked and didn't see this mentioned, so here goes…
At 47:15 you abandoned the outline-on-hover effect that you wanted because the appearance of the borders, on hover, shifted the space occupied by the icons by the width of the border.
The fix is to add the same border to the non-hover/original state, and just make the color transparent. No shifting, border on hover. Easy peasy.
FYI. 😉
It’s a better practice to use a style that isn’t so dependent. Like “magic numbers,” transparent borders are like “magic borders.” Best to avoid that for future proofing.
@@Gearyco I completely agree about future-proofing designs. I completely disagree this is an example of its need. I keep these rules right next to each other in the SCSS. It's both simple and effective. Different strokes.
(See what I did there? 😉)
35:00 Isn't the alt tag pulled from the media library alt? Makes perfect sense ;)
Yeah, the problem with that, though, is that sometimes we use the same image on different pages, but we alter the alt text for SEO purposes. If the alt is pulled from a single global field, that's a big limitation.
Hey Kevin, another great tut! never would have thought a card needed this much thought and input.
just wondering, is this also recommended for repeaters? or does it work best as you stated on this video: czcams.com/video/2pBuoDWB-u0/video.html - thanks
Yes the only issue is that the repeater in oxygen can’t support proper list structure
@@Gearyco thanks Kevin - I was wondering why I was trying to do it and it wouldn't work out of the box.
I tried making the main div of the repeater a custom and the card the but somehow didn't get it to work.
@@rhcreativebz yep, it puts divs in your list which is invalid markup. 😢
ok well I'm new to this and can't follow along as you added a bunch of css classes without giving any details on them.
I explained each class I added unless they were grid utility classes that didn’t have anything to do with the video topic. I’ve explained those in previous videos.
@@Gearyco I think is was the grid ones at the start. I haven't seen many of your previous videos so none the wiser! Newbie. Which video should I look at for reference?
@@nocodecreative I use those same classes in pretty much every video. You can also watch this: czcams.com/video/jEizAXhL2JE/video.html
Normally love your videos, and this one is good as also. That said this one I feel is overkill. I have been a web developer for decades and VERY few clients have ever been concerned about accessibility, in fact other than non-profits it has never been brought up. I get that you are trying to show best practices but I personally feel using a unordered list for cards like this adds too much confusion and extra headaches for a VERY slight improvement for those using screen readers.
It’s becoming more and more important and you can’t wait for clients to bring it up. It’s our jobs to advise clients on it and why it’s important. And you can generate more revenue from it. Accessibility is something we should be pushing, not waiting around on.
It’s also going to become an SEO signal in the near future.