Soffly released Oxygen Builder 3.7 ALPHA 1 and it's in one word GREAT!
So what is so great about it you might ask?
The biggest change is that it now has CSS grid! You can use CSS grid to create grid based layouts that are very difficult to achieve with the FLEX property.
Take something like a newspaper layout, maybe not something that is used often, but it would hardly possible to make that without CSS grid. The most likely place to use CSS grid is on your blog or your portfolio though.
You can set the column and row span and create interesting grids for your website. You can see above the Column Span and Row Span section a small preview of what it looks like (which you can also see in the main window of course)
The easy post element also comes with 5 new CSS grid presets that you can use right away. So that makes life a lot easier.
Also new are the Composite Library Elements.
So instead of you manually building an element like an icon button in Oxygen Builder, you can use one that is pre-made for you and if needed adjust it. In this Alpha version there are 17 Composit Elements and I am sure that more will be added in the future.
The ones that are available are:
These new elements are easily recognizable by a small Oxygen icon in the top left of the element.
For a video about these new options I suggest taking a look at the official Oxygen video by Elijah Mills.
The folks over at AppSummo have another great deal for ShortPixel. The difference between this deal and the previous ones is that it contains the CDN option.
ShortPixel is an image optimzation service. All you have to do is install their plugin and let it either run from the get go, or have it run once for all the images and PDF files in your media library. From that moment on, everytime you upload an new image (or PDF), it will reduce it's size.
I have been using it for a long time now on many different websites and it works perfect. You can restore images in bulk or seperatly if you aren't happy with the result ShortPixel produced. But this hardly ever happens. I can think of only 3 times over many years compressing thousands of images.
The setup process is also very simple due to it's userfriendly interface.
We use ShortPixel on this website as well. Let's take a look at the settings of the plugin. Often you don't have to change much in the settings after you have installed the plugin and activated it.
Here you see the general tab which was set like this by the plugin itself. We didn't change anything.
On the Advancet tab we checked the "Also create WebP versions of the images, for free.", the "Deliver the WebP versions of the images in the front-end:", the "Without altering the page code (via .htaccess)", the "Also optimize the Retina images (@2x) if they exist." and the "Automatically optimize PDF documents." options.
Then there is the Cloudflare API tab which we didn't use.
The last tab is the Statistics tab. This last one will show you how what the average compression is of your files, how much diskspace has been saved (although that only has any use if you turn of saving the original images), how much bandwidth is being saved and information about your plan. It also shows you how large your backup folder is.
Once you go to the media library. You will something like this. On the right you can see by how many percent the image has been reduced, how many thumbnails of the image have been optimized and you can also see a small hamburger menu icon.
If you click on the hamburger menu you will see the following.
You can compare the original image with the optimized image, you can choose from two ways to re-optimze the image and you can restore your original image.
Let's take a look at waht happens when you click "Compare".
As you can see the image pops up in a new window and it has a bar across the center you can drag to see more of the original version or more of the optimized version. An excellent feature if you find that a particular image on the front-end looks not entiorely you had hoped.
You also have the option to restore the original image. Once you click that menu item, you will see a blue optimze buton. That way you can optimze th image again if you want to.
For me, ShortPixel is one of the best and easiest to use plugins for reducing image size out there and I can highly reccomend it.
For those of you who don't know what Tailwind CSS is, it's a utility first CSS framework. It takes some getting used to, but once you have the hang of it, it makes your CSS design life so much easier.
Now there is Monster Framework.
It is an Oxygen based CSS Framework with its roots in Tailwind and contains 5+ design kits, 500+ blocks and there are supposed to be 100 new blocks added monthly. By using this framework you can speed up your website design process and get more consistant results accross your site.
At the moment they offer 3 different pricing plans. One design kit for $69.99, only the Framework plugin for $69.99 (with future updates) or OxyMonster Unlimited for $199.00 which contains everything (with future updates).
The framework itself comes with over 500 utility classes and you can extrend the framework with your own classes. The total size of the framework is just under 50kb. So it's lightwight and won't have any siginficant impact on your pagespeed.
On the OxyMonster site you will find a cheatshet with all the classes and even a search option to find the class you are looking for. They also show if the class will work properly on all device sizes.
It's all laid out very neatly and well documented.
A basic example of what they offer:
|font-normal||Font Weights||font-weight: 400;||All|
|font-medium||Font Weights||font-weight: 500;||All|
|font-semibold||Font Weights||font-weight: 600;||All|
|font-bold||Font Weights||font-weight: 700;||All|
As you see from this simple table. Very neatly organised classes. It might be well worth your while to take a closer look.
A great new feature will be added to the Oxy Toolbox plugin!
Sridhar Katakam is working on a components panel that, as far as his video shows, will be placed inside the Oxygen Builder at the top. Of course you need to acivate this option in Oxy Toolbox. But once activated you will find a dropdown screen at the top middle of Oxygen Builder with the most used elements ready to just be clicked and then automatically be added to your webpage or template.
The adavantage of this is that it will increase your workflow as it saves on a number of clicks.
You mouse over a small dark bar at the top, click the element you want to add, it gets added and you can adjust its properties immediately if wanted (or you could add more elements of course).
He has made a video showing this new feature which is worth taking a look at.
There is a new Alpha version out for Oxygen Builder, which contains a number of new feastures.
To explain what REM units are, I point you to the W3C page link^.
Equal to the computed value of
font-sizeon the root element. When specified on the
font-sizeproperty of the root element, the rem units refer to the property’s initial value.
The new Edit mode offers the option to have users work INSIDE the Oxygen Builder but limit what they can do.
Here is a list of what is restricted by default for users with edit only access.
This can all be found in the new Client Control tab in Oxygen > Settings.
To understand more about these new features you can watch the video^.