The Core Framework is now stronger than ever!
Past few weeks, we've been less active on social media, but for a good reason. We were working on several things, and the important one for today is the update of our plugin and framework for all customers.
We will also uncover some big news very soon, what we're quietly working on!
So, what's this update about?
As we usually do, the update covers several parts of our products, not only one.
We focused on our Core Framework to become much more powerful, by utilising variables for spacing & sizing classes, and adding a Fluid Typography to the mix.
There are also new classes in the Framework, but more about that later. Let's get back to Fluid Typography.
Fluid Typography
We already use clamp for all sizing (paddings, margins, gaps), to create a fully responsive experience using a desktop-only code. The clamp includes minimum and maximum values, and scales accordingly to the viewport, between its min and max values.
You don't have to deal with media queries, while using less code, and there are no "jumps" of sizes when breakpoint changes. It's perfectly smooth, accurate and universal.
It was a logical next step, to provide the same experience for typography as well. We tested many sizes and type scales to create a nice ratio between all headings, and text classes, which will work universally across most sites.
If you'd like to easily scale the typography, head over to the new Core-Sizing stylesheet, and tweak the html font-size.
The default is 100%, and you can scale all typography classes by increasing or decreasing the percentage value.
Spacing Update & Variables
As the Fluid Typography got its stylesheet, we are also moving all spacing values into variables, and its separate stylesheet named Core-Spacing.
The power of framework is the ability to handle consistency of values without any mess.
As of now, all spacing values has been set directly in Oxygen's spacing section.
Thats why we decided to move all values into variables that can be reused anywhere, not only using our classes.
Now, if you want to change the value of XS size globally for all paddings, margins, gaps, you can do it from the stylesheet, while in previous version, you would have to change these values manually for all XS classes.
You can also reuse our variables in your own classes, or where you need.
Spacing variables are as follows:
- var(--xs-space)
- var(--s-space)
- var(--m-space)
- var(--l-space)
- var(--xl-space)
- var(--xxl-space)
Text size variables:
- var(--s-text)
- var(--m-text)
- var(--l-text)
- var(--xl-text)
Owl Spacing
We've added OWL spacing to the set of our spacing classes. They are following the same size pattern as all our other spacing classes, so after the update you can find .c-owl-xs up to .c-owl-xxl
This nice technique has been made quite popular in the Oxygen community after a tutorial from Kevin Geary, so we decided to include them, as it perfectly fits the Core framework.
Owl class basically adds vertical spacing in between all elements of a container. Very useful for cards, or divs with several paragraphs of text / images that are supposed to have the same space in between them self.
More Framework Additions
- Margin Left & Margin Top classes
- Underline, Uppercase, Bold, Italic classes
- Opacity classes
- Max-width classes
- Self alignment classes
The New Cheatsheet
See all current classes in the new interactive cheat sheet! (Click on class to copy it to clipboard)
How to update the existing site?
- Update the plugin from WP dashboard to version 3.4.2
- Run the import again by clicking Manage > OxyNinja > Start Import (this will add new classes, Spacing and Sizing stylesheet)
- Now stylesheets overwrite old pixel settings in typography classes, however the clean way would be to remove unused font-sizes. If you didn't make any changes to utility classes, you can reset all classes by typing c- into our class reset tool.
Note: The best practice before any update is to backup your site.
Changelog & Dev Notes
= 3.4.2 =
* [FIX] Clamp fallback for older Safari browsers
* [FIX] Firefox builder loading error
* [FIX] Unable to deactivate license
* [FIX] OxyNinja Slider - HappyFiles & Admin 2020 WebP Support
= 3.4.1 =
* [NEW] MetaBox slider integration
* [NEW] Condition — Show/Hide element based on WooCommerce related products
* [NEW] Condition — WooCommerce product stock
* [NEW] Easing option for OxyNinja slider
* [TWEAK] Better logic for WooCommerce variation slider
* [TWEAK] wc_sec_image shortcode now accepts size attribute (full, large, thumbnail, ...)
* [TWEAK] Class migration — Option to preserve old classes instead of replacing them
* [TWEAK] Slider Arrows can be changed on all breakpoints
* [FIX] Disabled WP auto-translate of some string in the slider
* [FIX] Better compatibility with Oxygen icons in 3.8.1
* [FIX] WooCommerce bundled products badge
* [FIX] WP_DEBUG notices and warnings
* [UPDATED] Agency Base JSON Classes
* [UPDATED] GLightbox 3.0.7 > 3.0.8
* [UPDATED] SweetAlert2 10.13.3 > 11.0.8
Better logic for WooCommerce variation slider:
We refactored our Single Product Slider code, so that products with variations work much better than before. This was a highly requested feature, so we took a different approach and re-wrote almost the whole code that takes care of variations switch when users click on an image or select different variations.
MetaBox slider integration:
As many of you requested Metabox integration, it's finally here. Integration will work with both the free and paid versions of MetaBox. You can find out more about the required settings here.
Condition — Show/Hide element based on WooCommerce related products:
When building a WooCommerce site with WooCore, it could happen that some of your products will not have any related products, but you will use the Related Products section site-wide. Now, you can simply hide that section with our new condition and prevent the empty section shown on the frontend.
Condition — WooCommerce product stock:
Show or hide products in repeaters based on product stock status.
