How to Create a Custom Responsive Grid in Oxygen (Best Practices & Grid Jiu Jitsu Tricks!)
Vložit
- čas přidán 29. 07. 2024
- GRID JIU JITSU IN OXYGEN!
I wanted to do a tutorial on how to use Oxygen's grid builder, but I didn't want to do some boring nonsense like "here's what this field does ... and here's what this field does...", so I'm creating a follow-along tutorial of a real-world grid structure you'll see and use everywhere.
And this isn't just for beginners, my friend. I'm baking some grid jiu jitsu moves into this tutorial that will absolutely SYA (save your ass) and make your life sooooo much easier on bigger pages or sites. Here's what it covers:
• How Grid works in Oxygen Builder
• Grid Builder pitfalls to look out for
• How to create a 2-3 grid structure with column spans
• How to change your grid structure on mobile
• How to auto-stagger your grid using nth-of-type
• How to auto space your grids with last-of-type
• How to change image order on mobile
• How to properly name grid components with custom classes
This is 45 straight minutes of practical "best practice" skills that will most certainly elevate your game and I went slow to make sure it's easy to follow along with. Have fun!
THIS TUTORIAL REQUIRES NO PLUGINS, NO UTILITY CLASSES, ETC. IT'S VANILLA OXYGEN BUILDER. And yes, this works with repeaters too (with a few tweaks).
Join the Inner Circle - digitalambition.co/inner-circle/
Get Automatic.css - automaticcss.com
0:00 Intro
1:00 Examining Trello's Features Grid
2:40 Follow Along
3:40 Tutorial Begins
6:30 Oxygen's Yucky Defaults
10:00 How Column Spans Work
13:00 Image Wrapper Tip
15:00 Adding the Content
17:05 Custom Classes Best Practices
22:45 Mobile Responsiveness
27:43 Auto Spacing Between Grids
30:27 Auto Staggering the Grids
38:20 Changing Image Order on Mobile
41:05 Admiring Our Handy Work
![Custom Overlapping Video Card With Modal Video Player in Oxygen [FULL TUTORIAL]](http://i.ytimg.com/vi/RhUeov5SytI/mqdefault.jpg)
If you had an "aha moment" or two during this video, drop a comment and let me know which part it was!
The biggest "aha moment" was definitely from 43.10 to 43.20
Mine was at 12:30 for the child span override. The handful of times I used grid before this, I wrote CSS code to control the span of the grid children... lol.
At 39:39, is there a reason that you did not use just @media (min-width:769px) {.featured-row:last-of-type(2n) .featured-row__content-wrapper {order:-1;}} instead of adding a second rule for @media (max-width: 768px)?
@@fredchams1052 Using min-width made a lot more sense to me as well, cuts down on the custom CSS we're adding too!
Every time I had a dud, and had to go fix my problems. My big moment was understanding how to organize my selectors, and delete unused orphaned selectors. And adding stylesheets was my favorite part. Looking forward to my next lesson.
Wow, those two lines of code and the pseudo class are pure golden. The Grid to rule them all!!
Thanks Kevin!!
Kevin this will save me hundreds of hours of work. Thank you!
I just start to learning oxygen. I really like your tutorial. Many mentors won't make longer and detailed videos like you. Thanks for the sharing.
Great tutorial and good to see some vanilla oxygen in action.Would love to see related native oxygen stuff! Thanks again for the hard work you always put in the videos.
Yep, had an aha moment at 12:00 because I always do a 12 col grid in Figma and this is such an easy way to do it in code!!
No aha moment, just love your teaching method, it's practical and clear with no confusion. You're a born teacher. 🙂
🙏
Great tutorial on adding these grid layouts and btw just found your channel after finishing Jonathan's Oxygen course, and am loving the awesome tutorials you have on the channel. Thanks so much for these videos.
I finally figured out why my classes were not taking. A fool that persists in his folly will become wise.
Thank you sooooooo much. This tutorial is a work of art!
Brilliant work. You make it easy to follow and understand. Much thanks and appreciation. Subbed.
🙏
This is a great way to think infrastruct of the design setup - great stuff! Thank you!
Very welcome!
As always amazing tutorial! thank you for this.
Thank you for sharing! It is very useful! I must review all the site now! :)
Always great stuff. I learneso much about CSS watching your videos and being part of the inner circle. Keep up the great tutorials.
Always BEST BEST BEST Oxygen teacher!!!!!
🙏
Another great tutorial, thank you Kevin !
Thank you so much for all of your tutorials! They're a great help by creating my website. 👍
This is really a very good tutorial - i have learned a lot! thank you for taking your time!
Wow, I didn;t know about last-of-type state ! It super helpful!
Thanks a lot, great tutorial! Now, by trying this by myself I just learned that nth-of-type only operates within a parent element, not across. Spent a few hours on that one...
Very good tutorial. Thanks ♥
This solutions is very nice to use in a repeater as well if you use ACF repeater in backend for your client.
Great tutorial Kevin. I am starting to understand the nth of type and type pseudo-classes. Thanks a lot.
:)
Loved vanilla tutorial 👍
Nice tutorial :) Thank you!!
🙏
Setting up the Primary Tab for the .feature-row was my aha moment here. New to oxygen, and have been manually coding stuff, and many time have been tempted just to use stylesheets all the way.
Fantastic
AMAZING Video!!
I did not know about that CSS or even how to use it in Oxygen Builder. However I figured that if you add a media query in the first place 30:30 You save a few lines of css. I did it as follows:
@media (min-width: 651px) {
.repeater-team-content-wrapper: nth-of-type(2n) .feature_row__content_wrapper {
order: -1;
}}
Thx for the firefox tip. It is s much faster with oxygen. I had not even the idea to try it.
Much faster!
My aha! moment actually happened in your Inner Circle full build video - the auto staggering and changing position parts - but I already told you that :D
Thanks Sensei
Your videos inspire me to build better websites. Thank you for that. :)
Awesome video Kevin! What if we write just one CSS rule: @media > min-width > 992px > feature-row:nth-of-type(2n) .feature-row__content-wrapper > order: -1. This will preclude the need for the second rule since it will basically stagger the content above the 768px breakpoint. What do you think?
💯
It's awesome!
Glad you think so!
Very good
Oxy 4.0 seems to have fixed the issues of spans and gaps. @ 25:44. Got the borders to work on a clean page, couldn't get them to work before.
nice video, just one thing - instead of creating CSS rule for ordering and then "reseting" this rule, you should just directly write CSS for @media (min-width:768px)... just wrap that first rule and you'll get rid of additional 3-4 lines of CSS... less code, less writing, less KB, less possible mistakes, etc... ;)
Sorry to be so precise, but the breakpoint should be (max-width: 767px) to match Oxygen's settings... ;) Great video as always!
awesome lessons. was struggling with oxygen and grid. used to hard code them . this clears all out. btw any video on similar with automatic css? cheers
Yes there are a few and more to come!
Brilliant tutorial, thanks! I'm really enjoying your videos, keep it up!
One question, if you'd create a grid for cards with 3 at the top and 2 below those, how do I get the two at the bottom to align center? 🤔
You can’t. If you need them to be centered then you need to use flexbox.
I advise to change the section titles in the youtube video to be standalone for search as they can show up too in Google. Thanks as always Kevin
love
great
Great content congratulations! But I would like to know more about the responsive var(__space-s) and others you have used. I don't know if it's worth making a whole video around this, for me it would be great. Thank you again!
czcams.com/video/PDaPoDAVRJM/video.html
Thanks for the great video Kevin. Can this be used in a repeater?
Definitely can
Great breakdown Kevin!
FYI you can add selectors to the custom states section of a class/ID, no need to use a stylesheet. Just add "nth-of-type(2n) .feature-row__content-wrapper" to a custom state. That way you can style via Oxygen GUI and you don't have to worry about CSS media queries for breakpoints.
Sorry if this comment came through twice, I think my earlier comment was lost somehow.
I know but there’s no way to organize in oxygen. Makes editing hard and painful. Stylesheets are much easier.
@@Gearyco Fair enough!
is it okay to add grid directly in section?
I don't recommend it. Grids almost always have headings/text/CTA's etc. surrounding them. If your entire section is grid, you can't add those items properly.
Love how your voice changes as you're waking up lol
Hi Kevin,
I'm new to Oxygen and web development in general. I was wondering what's the difference when creating grids like this vs. using columns with the Stack Columns Vertically, Reverse Column Order, and Set Column Width to 50% in the Column's Primary tab. From my understanding,couldn't I just set the divs in the container to be 66%/34% of the parent container and achieve similar results with the three settings in that column's primary tab?
Search my channel for columns versus grid. That’s a good context video. The columns element is awful and for this use grid is more powerful and easier than flex.
@@Gearyco Will do, thanks for the quick reply!
Another question: I know you have a video about SRCSET which is very good...just wonder why svg's don't get used more often....? How would you approach using svg files in the same situation as Hero images, featured images etc?
I use SVGs a lot. Just haven't used them a lot in tutorials. What kind of use case do you want to see me do a tutorial for?
@@Gearyco Hi Kevin...after watching and taking part with this video....sort of answered a lot of questions using svg's...nowadays instead of having a full hero image...one can have a portrait and text as you have it in the grid...it is mainly controlling them that I was worried about....very good video and really gives us some insight into naming conventions with classes etc....;) Thankyou!!
Hi Kevin, thanks for this tutorial. I'm a beginner, what little I've learned I owe to your tutorials which, up until now, I've always managed to replicate. In this case I got stuck in the chapter where you explain how to take control of the column sorting.
I don't know how to overcome the unidentified obstacle on my Oxygen 4.8.1 installation.
What happen:
I can't reproduce any changes using the stylesheet code. I checked the correspondence with the classes, but none of the intermediate steps you showed to argue the technique work for me.
Not sure ... I'd have to be able to get into the installation. The Inner Circle can help you.
@@Gearyco Thanks for the feedback Kevin. It worked after I deleted a stylesheet of a dynamic gradient. Then I put it back in and I had no problems.
Is there a video showing how this is done using ACSS?
Yes lots of them.
Could you link to them and save me some time? I haven't found any yet.@@Gearyco
Have a question Kevin: How have you setup WordPress to allow svg files? Have you edited the functions.php file....added code via code snippets.....? If so...what have you added? Because Oxygen builder doesn't use the theme....just wonder how you have solved the problem...Thank you!
I use happyfiles.io which has a setting to allow svg uploads.
@@Gearyco Thanks Kevin 😀
I don't know why...but in oxygen when I am att 992 the grid is not reversed on every second row...weird not getting any problem on front end....?
Not sure, I would have to see a link.
@@Gearyco Hi Kevin....have sent you an email to your youtube email..
Those border controls are like death. Its happened to me since day one of using Oxygen. Hopefully its another bug that gets fixed very soon!
It's reaaaalllllly bad.
Grid part was aha
grid "builder" is absolutely awful. This would take me 3 minutes in webflow. I'm heavily regretting using oxygen
Webflows grid builder is definitely better. No doubt about that. I don’t use oxygen anymore personally. I switched to bricks but their grid builder is still in development but will be released very soon. I’m fairly confident that it’ll be much better than oxygens and more like webflow.
@@Gearyco I figured it out. It wasn’t super intuitive but at least I can properly build layouts now
Thank you Kevin! Great tutorial, as always!