CSS GRID MAGIC WAND IN OXYGEN (OxyNinja Utility Classes)

At the end of that tutorial I showed a sneak peak of OxyNinja Grid Utility Classes ... but it was a tiny glimpse of the true power of these utility classes.

In today's tutorial I'm going to show you the full scope of OxyNinja Grid Utility Classes so you can see exactly why this add-on is so powerful and exactly how much time and frustration it'll save you (and how much consistency it'll create across your sites).

Simple grids in seconds? Check!

Advanced grids in seconds? Check!

Mobile responsive grids in seconds? Check!

Grid Gap control in seconds? Check!

Cell span control in seconds? Check!

Cell position control in seconds? Check!

Grids inside Grids? Check!

Works with Oxygen repeaters? Check!

This is one of the big reasons that I install OxyNinja on every single site I build. In fact, it's embedded in my new install blueprint.

[SilentSlyProductions]

I just spent about 6 hours trying to learn to use the grid in oxygen... This is way better

[MrUffizzi]

Can’t wait for this :) Your other tuts have saved me hours already

[pageperfect]

Love your process. I just spent several days implementing it and documenting it for my small team. Thank you.

[CalvinJones]

Great tutorial Kevin... already bought Oxyninja, so can't throw you an affiliate commission, but thanks for helping me understand the value OxyNinja brings to the Oxyge workflow... I wasn't quite getting it before this.

[phobzy]

Just slapped myself in the face, been using oxymade but you've just converted me for the grid system. So undecided between OxyNinja / OxyMade. They are both awesome. Amazing video yet again (Y)

[chrisroberts]

This is amazing content, wish I had found your tutorials before I started using Oxygen!!

[bluegaz]

Nice work Kev, thanks for this. I've had OxyNinja since it came out, but found the documentation to be lacking and ended up only using it for the padding and margin utility classes. Will definitely be investigating this further now you've explained the grid utilities so well.

[latinmarketer]

First place I thank you your dedication in explaining things for all the oxy community and hope you accept a different opinion in some aspects. I completely agree with one of your first phrases of the video which is the basis of everything: It is mandatory to understand css grid theory and flex too in css code. Without that you won't know what you are doing in any builder. Being that said all builders can be used efficiently. Right now oxy builder it self has an implementation of grids in the Advanced Layout properties that you can convert into classes for repetitive application. If you go with a plugin to support core, first recognition must me made to oxy ultimate, which if I am not wrong were the first coming with grids in a plugin and they were recognized by Oxy builder before they had it in their core. And then we have Oxy Made and Oxy Ninja. Now, my opinion is that Oxy Made is a better approach to utility classes. The main reason is they try to keep up with Tailwind css and that framework is already known by front-end developers or of much utility if not known yet in opposition to Ninja developing its property syntax. I am not using oxy ninja but comparing its documentation Oxy Made has much more classes and also more Design Sets in a single product and a Color Palett System too. If there is something where Ninja has improved is in the Woocommerce design set but if they are based in their property UI kit I wouldn't choose it and would tie to oxy-made and core to get the same. By the way, I don't know if Oxy Made has an affiliate program.

[sashashae]

Oh this was really good!, learned a lot and now have a ton of ideas of how to really utilize my OxyNinja toolkit. Thanks for sharing!

[elemenopee]

Just gave in and finally tried Core for the first this week. Now I hate myself for not trying it sooner.

[TheSuaveBOSS]

Appreciate the gem, Kevin. Too bad I already bought OxyNinja last year. xD.

Would love to see more videos on other WP Plugins or tools that you use and would recommend!

[supermikemr]

Great Kevin, appreciate so much your tutorials - for me the best.... Really usefull for me would be some support from you about how to find the right CSS selectors to target when trying to modify some more complex elements (f.e. bundled products), it can get quite complex for me. Maybe the tools you recommend (Chrome inspector, recommendations..), how to proceed. Anyway, all subjects you find are good :)

[techgal]

Another tutorial worth its weight in gold! Each one gives me an AHA! moment. This one is more like Eureka! I had already bought OxyNinja (with Woo Core) but now feel like I understand it so much better! Thank you! I'm sure there will be a tool that you recommend that I do not have yet. :)

PS - Kevin, you talked about your "blueprint" for doing a site - Could you do a tutorial and elaborate on that blueprint? It seems like I tend to get sidetracked by the details and would like to see how other people manage. Thanx!

[forsterarts]

I finally started to learn how to read the Core Framework cheat sheet about 16 minutes in. I know I am at a breakthrough point, when I become frustrated.

[danielkumar]

Thanks fpor the insight to the OxyNinja Utility Classes. You mentioned, that you're working with blueprints, i also tried this by creating a general setup and than saving it as a backup using the All-in-One WP Migration Plugin. Are you planing on doing a tutorial on how to setup a blueprint, what to include and how to use it (best practice)? Would love to see soming in this direction. Tanks again for the good tutorials so far.

[jmcbade]

Would you consider a detailed video on using the new slider code provided by OxyNinja? I have it working using ACF but I would like to see it with generic ID/Posts and they by the time you get to this, added MetaBox. Please include implementing inside Oxygen with the slider as a background or layer under headers and other elements?

[matthiasfrank]

Super helpful video, thanks for taking the time to explain the different use cases! I was wondering, is there also an OxyNinja Utility class to create fixed aspect ratios? I'm trying to create three square cards within a oxininja grid, but can't quite figure out a best practice to do so without having to calculate the actual potential max width of the card depending on the screen size.

[perihannaheesmans]

So glad now I invested in Oxyninja! What I still can't wrap my head around is whether this can be applied to Woo. Hope you can do a tutorial specific to Woo commerce?

[fatcat]

Dear Kevin what fonts you used on this video? Great content. Amazing :)!

[danielneubauer]

Amazing content Kevin. Keep them coming.
One quick question: Can you also change the gap size for the other device sizes - like have gap-xl on large and gap-s on the medium sized devices for example?