Oxygen Tips

Oxygen is a developer focused, low-code page builder built on Wordpress.

PreviousMetrics & Monitoring NextBricks Builder

Last updated 1 year ago

Oxygen Tips

Oxygen is a developer focused, low-code page builder built on Wordpress.

18 Mistakes to Avoid

Source:

Using IDs instead of classes to style elements
Random class naming - If you have a card for example that contains a heading, text, button.. start off by giving the div a class name of "card" and then for every element inside prefix the class name with "card". For example: card__btn, card__heading. If you want to make a dark version of the card, use "--". For example: card--featured could put a shadow on one of the cards to make it stand out.
Not locking classes - Once something is the way you like it, go to Advanced -> Lock Selector Styles
Using the columns module - Columns module uses Flexbox, but CSS Grid is better for laying out content. Flexbox does have an advantage in positioning content.
Putting everything in one section
Not using semantic HTML tags - Use headings, sections, footer tags etc so that screen readers can understand the page. In Oxygen, you can easily change the tags of a div for example.
Using divs to create lists - On the main div that contains the list, use a custom "ul" tag, and for each div make the tag a custom "li". Alternatively, you can use Rich Text module and insert the line items there, but the only downside of this is that it is hard to create an icon list.
Pixels instead of relative units - Use REM and set your root font size to 62.5% so that 1 REM = 10px, 1.6 REM = 16px, etc.
Improper heading levels - If you want to make a heading smaller, lower the REM.. do NOT set the heading level to something lower as that will mess up SEO.
Setting heading size in global settings - In Oxygen, the problem with this is that you have no control of how responsive the text will be on mobile vs desktop. Instead, make classes for each heading and change the REM for each breakpoint. Alternatively, use a paid plugin like:
Static images - Image URL vs Media Library.. typically you want to choose a size for the photo such as "medium" to keep the size small. Additionally, if you use SRCSET () images it will automatically load smaller images if it detects the device size only requires that size.
Background vs Real images - Do not use background images if the image is important because there is no SEO value and screen readers do not see it.
Not removing pagination - People try to hide the pagination button with DISPLAY: none, but this still gets indexed and that is bad.
Not using custom post types for queryable items - Create custom post types similar to how WooCommerce creates Products
No 404 template
Global colors managed by name - Do NOT go into global colors and name colors based off what the color is, but rather what it represents. For Example: Red vs Primary. In Oxygen, you can not change the name of the global color.
Writing CSS in modules - If you do this, be sure to write comments so you know why you did it.
Using Oxygen to create blog posts

PreviousMetrics & Monitoring NextBricks Builder

Last updated 1 year ago

18 Mistakes to Avoid

Source:

Using IDs instead of classes to style elements
Random class naming - If you have a card for example that contains a heading, text, button.. start off by giving the div a class name of "card" and then for every element inside prefix the class name with "card". For example: card__btn, card__heading. If you want to make a dark version of the card, use "--". For example: card--featured could put a shadow on one of the cards to make it stand out.
Not locking classes - Once something is the way you like it, go to Advanced -> Lock Selector Styles
Using the columns module - Columns module uses Flexbox, but CSS Grid is better for laying out content. Flexbox does have an advantage in positioning content.
Putting everything in one section
Not using semantic HTML tags - Use headings, sections, footer tags etc so that screen readers can understand the page. In Oxygen, you can easily change the tags of a div for example.
Using divs to create lists - On the main div that contains the list, use a custom "ul" tag, and for each div make the tag a custom "li". Alternatively, you can use Rich Text module and insert the line items there, but the only downside of this is that it is hard to create an icon list.
Pixels instead of relative units - Use REM and set your root font size to 62.5% so that 1 REM = 10px, 1.6 REM = 16px, etc.
Improper heading levels - If you want to make a heading smaller, lower the REM.. do NOT set the heading level to something lower as that will mess up SEO.
Setting heading size in global settings - In Oxygen, the problem with this is that you have no control of how responsive the text will be on mobile vs desktop. Instead, make classes for each heading and change the REM for each breakpoint. Alternatively, use a paid plugin like:
Static images - Image URL vs Media Library.. typically you want to choose a size for the photo such as "medium" to keep the size small. Additionally, if you use SRCSET () images it will automatically load smaller images if it detects the device size only requires that size.
Background vs Real images - Do not use background images if the image is important because there is no SEO value and screen readers do not see it.
Not removing pagination - People try to hide the pagination button with DISPLAY: none, but this still gets indexed and that is bad.
Not using custom post types for queryable items - Create custom post types similar to how WooCommerce creates Products
No 404 template
Global colors managed by name - Do NOT go into global colors and name colors based off what the color is, but rather what it represents. For Example: Red vs Primary. In Oxygen, you can not change the name of the global color.
Writing CSS in modules - If you do this, be sure to write comments so you know why you did it.
Using Oxygen to create blog posts