I try to separate style classes from attribute classes. That is: colors, backgrounds, etc; belong to styling classes (.bg-color-1 etc). And padding, margin, spacing belong to object attributes classes (.boxed or .padding-1 etc) I also create some standardized classes for attributes just as you do with global colors for styling. Have a standard margin class (or several), same for padding, different font sizes. Etc. Finally, for specific theme stuff create classes following the standard hierarchical method (which is semantical in a way): .section-container-title The class belongs to the title of a container of a section. This will help styling “combo” elements, which are complex components within your layout (testimonials, sliders, tabs, etc) That way you get a ver well organized stylesheet which is easier to troubleshoot and select. The best advise I could give you is to have everything in your head or annotated somewhere before starting with the design and class assignations. Not in great detail, simply an outline that defines the general parameters of your website... how are your individual pages going to look, how are your landing pages going to look, your archives, etc. For that just take a pen and start drawing and writing down your ideas :)
Just want to say. this channel is the best .this builder is the best with all the options for a person who knows css. Lots and lots of features and functionality which so called "best" builders don't offer! I hope and pray for your success!
What this does also, and I am sure this was the intent given the outcome, is it exposes great use cases for how Oxygen works, the intent behind the designed features and how to put them into practice. I can't encourage the Oxygen team enough how important these are overall. Great video! More please :)
Thanks a lot for all the tutorials! could you please talk us a little more about advance layout section? That settings are like the darkside of the moon for me 😂 thanks!
Great idea of video. it's useful. The only thing that can be improved is the spacing, I think it's better to use class to define the main spacing settings, so if I want to add or reduce the space later I can change setting of the classes and everything is changed very easily.
I love how you guys show us how to get GOOD designs using your system. I would think you'd want more than just 2 main colors to work with. I would also think you'd want default margins on headings. How would you recommend we set other global styles for things like bullet lists, quote boxes, and so on that might be in pre-existing content?
Great video! You said that you use an 8pt spacing system because some Retina displays have 2X and 3X scaling. What did you mean? Did you mean that 8 would become 16 and 24, or did you mean that 8 would be divided by 2 or 3? Because if it's the latter, I would think that a system based on 6 would be the better choice. If it's the former, I'm not sure that it matters what we select. I'm probably just not understanding this at all. Can you help clarify this for me?
I notice that palx allows us to download the CSS or JSON file of a color palette. How excellent would it be if we could import palettes directly into oxygen rather than cut and paste one by one.
Very nice and useful tutorial there! I have a question though - As you advised to use 8 pt. increment (any number divisible by 8) for spacing, don't we need to maintain that while playing with heading font sizes? You used 42px, 36px, 24px fonts and so on. Does that mean the rule of 8pt increment doesn't apply to the font sizes?
Awesome video. This is a technique I can immediately integrate into my design process. Quick question: any specific reason why you use pixels as your spacing and typography units rather than EM or REM? Is this just personal preference, or do pixels confer some layout advantage?
Hello, do you use that 8px spacing system also for your columns padding or just for design elements? What do you mean by blurry pixels? For example, I'm building a new website, I setted up the columns to have 15px padding, what pixel scale should I use? 5px? Or can I use the 8px scale anyway? Or if I use the 8px scale is better to setup 16pc columns padding? Thank you for this super useful video!
hello guys. I created main template header and footer when I created another template in INHERIT DESIGN FROM OTHER TEMPLATE I can not choose the "main" template. there is no choice except "none". Anyone with same issue? please I need help
Thanks for the helpfull video! I have a Question: how can i take Responsive Design into consideration? for exapmle if i want to change the fontsizes for diffrent media breakpoint, should i just use a global stylesheet and write it there or is there a more efficent or better way of doing this?
I'm moving from Elementor to Oxygen, and the global font sizes for different screen sizes is one of the things I'll miss most. The same goes for section and element padding and margins.
everything in the ELEMENTOR is much more functional and convenient, with a huge number of plugins, templates, and widgets ..... oxygen sucks at the elementor
I used Elementor PRO + every famous extension. I don't miss anything about it. I can't even open Elementor without getting frustrated after I discovered Oxygen :)
@@christiansaborio410 elementor-free and instead of the professional version, you can take something else cheaper and more functional. and you don't have to pay money for plugins )))) Yes and for oxygen you can not pay or pay very little ))
@@KrasMosStore Oxygen builder is for ppl that want to build professional wordpress websites - that means you need a fast website without theme+builder bloat slowing it down because it hurts SEO etc.
Great video. Would love to see a video on best practices for setting up all classes that you mentioned 🤗
I try to separate style classes from attribute classes. That is: colors, backgrounds, etc; belong to styling classes (.bg-color-1 etc). And padding, margin, spacing belong to object attributes classes (.boxed or .padding-1 etc)
I also create some standardized classes for attributes just as you do with global colors for styling. Have a standard margin class (or several), same for padding, different font sizes. Etc.
Finally, for specific theme stuff create classes following the standard hierarchical method (which is semantical in a way):
.section-container-title
The class belongs to the title of a container of a section. This will help styling “combo” elements, which are complex components within your layout (testimonials, sliders, tabs, etc)
That way you get a ver well organized stylesheet which is easier to troubleshoot and select.
The best advise I could give you is to have everything in your head or annotated somewhere before starting with the design and class assignations. Not in great detail, simply an outline that defines the general parameters of your website... how are your individual pages going to look, how are your landing pages going to look, your archives, etc. For that just take a pen and start drawing and writing down your ideas :)
Definitely my favourite teacher. Thanks Elijah - you make it easy.
Just want to say. this channel is the best .this builder is the best with all the options for a person who knows css. Lots and lots of features and functionality which so called "best" builders don't offer! I hope and pray for your success!
What this does also, and I am sure this was the intent given the outcome, is it exposes great use cases for how Oxygen works, the intent behind the designed features and how to put them into practice. I can't encourage the Oxygen team enough how important these are overall. Great video! More please :)
Very good tutorial. I will certainly be using this on my next project and can see how much this will improve the consistency of the sites we build.
Brilliant. You keep reading my mind.
And I thought we need Invision.
Love it, you don't know how helpful you ve been with this for me!
Thanks a lot for all the tutorials! could you please talk us a little more about advance layout section? That settings are like the darkside of the moon for me 😂 thanks!
Awesome..this is what I needed... perfect!
Great idea of video. it's useful.
The only thing that can be improved is the spacing, I think it's better to use class to define the main spacing settings, so if I want to add or reduce the space later I can change setting of the classes and everything is changed very easily.
Thank you, Elijah! Really simply put and effective approach.
I love how you guys show us how to get GOOD designs using your system. I would think you'd want more than just 2 main colors to work with. I would also think you'd want default margins on headings. How would you recommend we set other global styles for things like bullet lists, quote boxes, and so on that might be in pre-existing content?
This is really good, thank you so much!
Very helpful, thanks!
Excellent, thanks for the tips!
Excellent! You guys are great.
Exactly I am doing with my current oxygen templates.
Great video! You said that you use an 8pt spacing system because some Retina displays have 2X and 3X scaling. What did you mean? Did you mean that 8 would become 16 and 24, or did you mean that 8 would be divided by 2 or 3? Because if it's the latter, I would think that a system based on 6 would be the better choice. If it's the former, I'm not sure that it matters what we select. I'm probably just not understanding this at all. Can you help clarify this for me?
I notice that palx allows us to download the CSS or JSON file of a color palette. How excellent would it be if we could import palettes directly into oxygen rather than cut and paste one by one.
Just use a style sheet
@@LukeGibsonSS could you explain how? please :)
Very nice and useful tutorial there!
I have a question though -
As you advised to use 8 pt. increment (any number divisible by 8) for spacing, don't we need to maintain that while playing with heading font sizes? You used 42px, 36px, 24px fonts and so on. Does that mean the rule of 8pt increment doesn't apply to the font sizes?
Awesome video. This is a technique I can immediately integrate into my design process. Quick question: any specific reason why you use pixels as your spacing and typography units rather than EM or REM? Is this just personal preference, or do pixels confer some layout advantage?
I thought I would see you implement the same increment settings for Headings....but no?
Does anyone use rems in oxygen? if so, how do you go about it?
Дуже класно і ясно викладено початок роботи в OXYGEN! Тільки но почав вивчати ОКСІ і вже хочу починати зразу робити сайт....
Hello, do you use that 8px spacing system also for your columns padding or just for design elements? What do you mean by blurry pixels? For example, I'm building a new website, I setted up the columns to have 15px padding, what pixel scale should I use? 5px? Or can I use the 8px scale anyway? Or if I use the 8px scale is better to setup 16pc columns padding?
Thank you for this super useful video!
Thanks. Why dont you use the 8px rule for font size?
hello guys. I created main template header and footer when I created another template in INHERIT DESIGN FROM OTHER TEMPLATE I can not choose the "main" template. there is no choice except "none". Anyone with same issue? please I need help
Elijah, is there a way to call the actual hex colour code set in global settings in order to show the colour code beside the colour sample?
Thanks for the helpfull video!
I have a Question: how can i take Responsive Design into consideration? for exapmle if i want to change the fontsizes for diffrent media breakpoint, should i just use a global stylesheet and write it there or is there a more efficent or better way of doing this?
Using a custom stylesheet for responsive font sizes will be the most efficient.
I'm moving from Elementor to Oxygen, and the global font sizes for different screen sizes is one of the things I'll miss most. The same goes for section and element padding and margins.
To adjust the font size of h* and body text on mobile, we have to do custom css, right? Would be great if we could do that in global styles.
Can this then be copied to other sites?
I thought you had designed the majority fo the O2 design sets
everything in the ELEMENTOR is much more functional and convenient, with a huge number of plugins, templates, and widgets ..... oxygen sucks at the elementor
I used Elementor PRO + every famous extension. I don't miss anything about it. I can't even open Elementor without getting frustrated after I discovered Oxygen :)
@@Pensandoci9 and how is oxygen better ?? I didn't find anything interesting about it.can be not there sought ??
Alex Key Less bloat, less expensive, more secure.
@@christiansaborio410 elementor-free and instead of the professional version, you can take something else cheaper and more functional. and you don't have to pay money for plugins )))) Yes and for oxygen you can not pay or pay very little ))
@@KrasMosStore Oxygen builder is for ppl that want to build professional wordpress websites - that means you need a fast website without theme+builder bloat slowing it down because it hurts SEO etc.