In this article I’m taking a first look at a new free CSS framework for Oxygen 6 from the Oxymade team. Oxymade was one of the add-on developers who created a CSS framework and pre-designed template kits for the original Classic Oxygen. And now that Oxygen 6 is nearing a 1.0 release, people are starting to wonder what add-ons might make sense for them. And I think that with Oxygen 6, people probably will want to use a CSS framework. Oxymade is one of the first options available for the new Oxygen 6.
Video Version
The video has the full walk-through. This article covers the main points.
Oxygen 6 is Designed for Use with a CSS Framework
There are lots of reasons why you would want to use a CSS framework. Obviously, it speeds up development. You get better design consistency. But let me show you in Oxygen 6 the area for managing your classes and variables and other options.
Let’s go to a page and go into the editor. OK, so in Oxygen 6, you have this area for global settings, for colors, buttons, topography, forms, containers, code, other. But they’re all blank. You have a place for selectors for classes. Those are blank. You have a place for CSS variables. But it doesn’t come with any. And it makes total sense that you wouldn’t have any, because everybody wants to use their own design, their own colors, their own framework. But the area is there for managing it.
You can start out on a Blueprint site. And if you have your own framework, you can fill in the blanks, so to speak, here. Or you can use a CSS framework that’s already been developed. Now, the core framework people have said they’re going to support Oxygen 6. Core framework has a free add-on for Gutenberg and paid add-ons for other builders. I think they’re waiting for the 1.0 release before they have something. And the automatic CSS team has said that they won’t support Oxygen 6. So that’s too bad. But lo and behold, the Oxymade team has already done their first version release now for Oxygen 6.
So let’s go take a look at that here. And what they have is you can go and buy access to their blocks, pages, and templates. But there’s also this option here to explore framework. So you have color palette, text and heading, fluid topography, fluid spacing, pre-designed button options, blocks. I haven’t seen any free blocks yet. So maybe those are in development. There’s color system, fluid topography, the color generation for shades, CSS variables, buttons.
And then here you can buy the templates. But here’s the option for the free framework. And when you click this, you’ll go to a checkout page. So you need to create an account here to get the framework. So I’ve already done that step.
Let’s go back to my Oxygen website and go to the dashboard. So I want to show you what I have installed here. I’ve installed Oxygen 6 beta 5, the break dance elements and break dance forms for Oxygen. And when you activate Oxymade, it’s going to tell you you need those. So I already have them installed. But I haven’t activated this yet. I’ve reset the site after doing some testing.
And so now let’s activate and see what we get from this framework. So it’s telling us there’s some steps we need to take. And this is where you’d enter your license if you purchase the premium templates. But let’s see what we get here with the default design sets. You can change the default design set. And so I think that’s going to then change the colors and variables and classes. We see in this image the steps you walk-through in setting up the framework.
If we look at the Oxymade site for templates, these are the design sets. So you can see they have quite a few different ones, more than 80. The design sets have multiple pages, pre-designed pages. Usually in these template sites, you have the design sets. Then from the design sets, you have pages. And from the pages, you have individual blocks that you can import.
While we’re on the Oxymade site, one good thing to see is that they do have their documentation set up already. So that’s valuable and worthwhile. And so there is information here to help you get started.
You would set or reset the framework at the beginning of your site build. Obviously, you wouldn’t want to do this in the middle of a build because you’ll screw things up and overwrite things.
Let’s see what we get now, what’s changed. We get an add-on for a color manager. You see it generated shades then for the colors. We get under global settings, see where there are blue dots, it’s added items there. We’ve brought in a bunch of classes. So for our button classes and heading classes and layout classes. And then variables. OK, so we have color variables. We have spacing, section spacing, border radius, topography.
Another thing that we get is there is a button element added, button components. And if you wanted your different types of, say, buttons, then you would apply the classes like that, like you would with other frameworks.
If you want to apply a variable, for example, let’s see how we might do that. Let’s click on the container, go to spacing, say padding. And then you get this little blue dollar sign and you can pick your variables. So let’s say like S10 and then apply all. This is Oxygen, that blue dollar sign and these options, but the variables, of course, are coming from Oxymade. OK, so there you see we applied our spacing to that container.
Discussion Points
We saw on the Oxymade website that they have documentation that lists all the variables in their framework. Oxymade is, as they say on their website, inspired by Tailwind, which they’re using short variable names. That’s going to appeal to some people and other people might want more descriptive names. So it’s a matter of what you’re used to and what you prefer.
After you’ve seen this video, maybe looked on the website, perhaps tried out the free framework, you can decide if it’s something that’s going to be useful for you. Part of the decision may be based on whether you decide to go with their pre-designed templates. Templates look attractive, but I haven’t dug into them yet, but I wanted to take a look at the framework first.
So that’s your head start that you get with the Oxymade CSS framework. So as you’re beginning to explore Oxymade, you’re beginning to explore Oxygen 6, and you want to have kind of a fast start for adding your colors and spacing and topography. Here’s a free option from the Oxymade team. I hope you found this article useful and interesting.
