OxyMade Review: CSS Framework and Design Sets For Oxygen - Thoughts After Using For 4 Months

hi guys this is james from isotropic and in this video i'm going to be reviewing oxymade which is a plug-in for oxygen builder that gives you a really really well-defined css framework based on tailwind and a ton of design sets and additional tools for the oxygen builder so the first thing is the oxymate framework which is based on tailwind it offers over 600 css classes and i'll show you really quickly kind of what these classes are so this is the framework this is the thing that i use most from oxymade i use this personally and on all my sites the agency uses it and having a well-defined css framework for oxygen is really helpful this framework is very fluid it adapts to screen sizes automatically and it's just a very well thought out tool and that's probably because it's based on tailwind and the the ideology behind tailwind is that you'll have a css class for pretty much everything that you want to do and instead of writing css on a per element basis you just reuse the css using these different classes to apply it to elements and because you're reusing the css it becomes a very standardized system that's used throughout the website making everything look a lot more uniform and professional so for example if i wanted to make an element a hundred percent wide what i would do is say w full and that would add my width as a hundred percent but i could also add ratios w five by six and that would make my width eighty-three 83 i could use that in connection with a height of uh h full maybe h would be a hundred percent h screen uh the height would be a hundred viewport height um same goes for overflow if i want my overflow hidden the class would be overflow hidden it would apply that css to the page if i wanted to add padding to all different sides of my component maybe it's a div and i wanted to add a small amount of padding p2 and this would use min and max in css to dynamically apply a set standard amount of padding based on the screen size if i wanted more padding i would scroll and say p8 and that adds more padding that will again scroll as the screen size changes and you can see that there are a ton of different uh different classes here and and you can explore this at oxymate.com cheat sheet so this is the framework and i'll show you how it works more when we get into the back end of the uh of the of the builder and using the framework in the builder the other side of things is the blocks and design sets so you get over a thousand blocks with oxy made this isn't really something that we use as an agency because we build completely custom websites but if you're missing the part of wordpress that was themes that oxygen disables and a lot of people use themes to get kind of a core design look and feel and and pre-built pages already added to the website and then they'll use a page builder like elementor to change the various pages oxygen disables that so if you're missing themes these design sets are kind of as close as you're going to get to the themes then there are a ton of design sets all focused on different things so the mega design set is focused on kind of a modern look for a website you have a woocommerce based theme you have a blog based theme you have a restaurant based theme all these themes can or all of these themes then apply to the blocks within the design sets and these blocks can be added directly into the oxygen builder using the standard design set system oxygen created a method to add design sets and blocks and elements into a website from a third party provider like oxymate for this exact situation it's kind of a way to replace the need for themes so you can see that there are a ton of different themes here so let's just take a look at the good night design set which is a dark themed design set for dark scheme lovers and if you go to the preview if you go on their site and click preview on any of them it'll kind of show you the different blocks that have been created with this tool and you can see that everything's completely responsive and in addition this is all using oxygen elements and the css framework the oxymate framework that's based on tailwind which is great because if you want to expand upon these design sets you can simply add your own elements and add your own classes from that framework and duplicate the look in the field of the website very easily and you can see everything is really well designed and just kind of flows on the page nicely so these are just the frameworks and the frameworks are added again to oxygen as any design set would be added now let's take a look at the oxymate plugin the back end and the tools associated with it so when you install oxymade you have to add your license and register your site on their dashboard and then this is your core your core backend dashboard and you can see that you have the framework you can install it you can install the various settings for oxygen as well you can set the base design set which will apply styles to oxygen buttons and stuff like that then you have a ton of different modules and power tools so dark mode changing classes to ids changing or merging classes in the editor adding different grids which are oxygen elements that are css grids which i'll show you in a second uh creating different typography dark mode a paste button a bunch of different things on the side we have our color manager which follows the color system that is kind of incorporated into the css framework and this is something that's really helpful really cool and i'll show you more when we get to the back end and then you just have a couple other things here purge unused classes is really cool it will purge unused classes which will speed up the performance on the front end of your website it's experimental and might break things so be careful when using it so this is kind of what you get here the magic though is in the back end oxygen builder and i'm going to show you both the framework which is what we use at the agency alongside the design sets which is something that i think a lot of other people will like using to get core structure and base pages down when they're building their site all right so here's the the back end builder and you'll notice that these three buttons are kind of special here we have hover effects so we can just apply a hover effect to a specific element and i'm going to just apply it here so when i hover over it it's applied my hover effect and we have a ton of different hover effects here we also have our colors so i can take my primary colors which are set in the back end so this is my primary color it's a blue i can take that primary color and i can apply it directly to my text right here and i this is just copying and pasting for me i can do the secondary color a lot of different things here that's my color system and then i can also copy and paste different components from a builder outside of the site and i'll show you that when we talk about the design sets the thing that i really use this for is framework so what i really like doing is creating custom websites working with my developers and just creating a really good looking custom website and we use the framework here to be consistent through all of our pages because there are multiple developers working on the project and to build a lot faster so let's say i wanted to add padding to this div if i wanted to add padding without the framework i'd go to advanced i'd go to size and spacing and i'd add my padding for this break point and then i'd go down and add it for this and this and this and it works and it works well i like oxygen but it's not very easy when you're building a lot when you're doing a lot so the solution here is to use this framework which is a collection of a million different css classes and once you understand how the framework works it becomes a lot easier for you to understand how powerful it really is so back to the padding example instead of going through all those steps i can go here and say oh i want a little padding to be applied to this div right here and right now it's just my normal div it's wrapping the text element within it and to add the padding i'm just going to say p 12. and this will add a big chunk of padding and let's say i want to add a border so i'll add my primary color as the border and then i'll make it round and you'll notice that we need to add one more border class um okay so let's say i want to add a padding to this uh div which is just wrapping my text within instead of going and doing all those steps i can just say p12 maybe and p12 will add a big chunk of padding on all different sides and you'll notice that my hover effect is here because i applied it before but the p12 will add this big chunk of padding and then i can say i want this width to be full i want this to be 100 of the section and that will make my width be 100 as opposed to having to go in and add the 100 into the size and spacing panel and then let's say i want this to be flex center and i can just say centered and this will center the element within my padded 100 wide div and then let's say i want the background of this to be the primary color and i want this font color to be white so i can say uh font i can say color prime right my my apologies or we can change it to whatever we want it to be but i can change the colors here and i can really i could say i want this to be round and as you can see i'm really just instead of building by clicking all these buttons and going into here and clicking all these buttons i'm at least creating a core design set and ideology by using the given classes to me and of course this looks horrible but it should give you a good example of what you can do when you understand how the the framework works you can just throw a bunch of classes onto elements rather than applying css styles to individual elements and then when i want to add another section and actually i'll show you right now that the grid actually made gives us grid elements that are pre-built so say i want to go ahead and add another card that looks exactly like this i can say i want this to be round and i can copy the large round and i can say i want the background to be the primary color and then i can say i want my padding to be 12 which is the same padding as this and by doing all of that it simply just copies what i have here and i have hydrogen pack installed so i'm just copying and pasting but even if you don't have hydrogen pack installed it makes it very easy to replicate different things and i can actually with hydrogen copy the styles associated here and say i want that to be that size and apply different classes like so so that's how we use the framework we use the framework to create really consistent designs throughout our websites and really speed up how we create different different tools the good thing about the framework is that the actual classes associated here are really responsive to the size of the viewport so this class p12 actually uses the core oxygen feature of sizing and spacing and it adds these minimum and maximums so this will collapse down based on the screen size into this and say i want my padding to be less and i actually just messed that up say i want my padding to be less to do that i would just go to here i would remove the p12 and then i'd say oh i want it to be p4 so that's a little bit smaller and i don't want it to be full width anymore i just want it to be normal but i want it to be centered in this background in this section and i want the section to actually not have a background color alternate i want it to be a background of red which is my third color within the builder so you can see that's how you would use kind of the framework in addition oxymate adds all these different grids and helper elements so we can have a couple buttons show up that are already built and ready for us to go and stuff like that so that's the framework the power of the framework i really like it we use this in every single one of our projects and once you understand and memorize the framework your development becomes a lot faster the second thing is the design sets so the design sets they're added using the normal oxygen method of going into settings adding the design set key installing the design set and then they show up like all the existing oxygen design sets here and right now i've added two but when you purchase this you have access to all the design sets you can add and remove as many as you want this is the most recent one and you can see that once it loads all of its components you have a ton of components to add to your website and you can use this to create complete pages but you can also use this to insert different blocks build out structures and change all the colors and font and stuff there's really a very expense extendable idea here so let's say i want to add this call to action and actually first let's just scroll through all of these you can see that there are literally hundreds of different blocks and components and ideas so i'm actually going to add this one i really like this design the cool thing about these blocks is that they're inserted directly into your website and they're completely responsive and they use the framework that i was just talking about and because they use this framework it's very nice because now i can change my colors in the oxy made back and i maybe i want this not to be blue anymore i'm not going to have to go into every single individual component and change that color it's global it's completely global because it's using global variables you can see it collapses and all that and i can really just add in this component here and i can change my change this dummy text and change all this save the page and then on the front end this design is here so you can really build pages very quickly by using these design sets and you can see and preview all the design sets before you even buy this tool um so i really this is something that i could really see people using to save them a ton of time and you'll notice that also all the text here it's completely responsive too so this text actually gets smaller on mobile and it gets larger on a larger screen size and it uses oxygen elements and just the uh the the oxymade uh classes so really really cool i think the the pro here is that you just have so many different sets to use um it gets really easy to just throw a page together i could probably build an entire website in an hour if i chose to you can see all of this and you just save it and it shows up on the front end of your website if you don't want to do that if you want to take another method when using these design sets you can actually use let me see if i can find it you can use the page generator and the page generator allows you to drag and drop sections onto and i don't know if this is going to work because i didn't install this design set before but you can drag and drop sections onto this kind of canvas which is an app offered by oxymade and then you can preview it and see oh i want to see what my page looks like normally and when you're ready to install it you can simply click the copy button go onto your oxygen builder canvas which should be clear and then install it like so and this gives you a code and it will automatically install it and it's not going to work because i don't have that design set installed but let's try another design set this one will work because i did install it i'm just going to throw a bunch of things onto the page copy it and then add it to the builder i might need to reload the builder because i did not install the framework but you can paste the page that you built outside of oxygen into oxygen and that will kind of transform it into the oxygen elements plus the design set pages so let's just quickly remove this and then install that and then i'll let this load i'll come back to it in a few seconds but there there are two things that i really like about this tool the first thing is the framework the framework's awesome it's completely standardized it adds a ton of classes it allows me to build like i demonstrated using classes instead of going into individual components and changing them using standardized classes that are responsive and work throughout the entire website i really use this to do flex layouts css grids padding margins font colors background colors all the colors the colors are centrally located here so if i change my primary color any component that's using the primary color attribute on the framework is going to be changed so i can completely if i have a blue website i can change my blue website to orange by just changing this color right here so that's really cool the framework is just there are 600 plus classes there's a cheat sheet once you memorize it you build websites really fast and you don't really need to worry about things being responsive because of the min max and clamp features the other thing is the design sets i don't use them but if you were to use them i think that they replace the wordpress theme feature and i think that they also are really helpful when you're trying to build out a lower cost website that doesn't need to be completely custom and slash or if you're working on your own website and you're missing the functionality of themes and just want a website that looks good it's responsive you don't have to worry about it this is kind of the route to go the cost of this tool is two-pronged if you want to only buy the framework that's 149 and the framework also includes the mega set which you can preview on the site if you want to purchase everything that's 229 and they're installment plans so you don't have to just throw 229 here there's a 14 day money back guarantee and there's a very very very very very good support system here too the developer is really responsive listens to customer feedback and is just very helpful and has helped us a lot over the past few months of us using this in production client websites i don't think this is going to load but it typically does load we typically add if if we were to add design sets we'll add them by using the standard insert feature which i showed you here but i'm going to just wrap this review up by saying we use this in our production websites the framework itself is well worth the price of i believe it to be 149 if you are missing out on themes if you really want themes but you love oxygen go and get the unlimited everything it'll give you all the sets associated with it and depending on how you build websites for yourself or your client using the sets here could save you a ton of time uh for us the the framework just is incredibly time saving and makes us more effective and efficient especially when there are multiple developers trying to keep everything looking the same just use the framework rather than trying to figure out your own [Music] defined framework it's just super helpful super beneficial actively updated very well supported and that's that's really that if you want to go check it out there's a link in the description below hope this video is helpful if you found it helpful be sure to give it a like and subscribe until the next video i won't see you in the next video i will

Channel: Isotropic Design

Views: 1,095

Keywords:

Id: Q69Hc_poxYw

Length: 22min 8sec (1328 seconds)

Published: Mon Nov 22 2021