That means Recoda Workspace tackles with some things in different ways. WordPress plugins usually use backendsettings to store customization data, Recoda Workspace on other hand is visible only in plugin area. Only thing that Recoda Workspace has common with plugins are few lines of PHP to enable Recoda Workspace when Oxygen Builder is active. There is no storing data in Data Base.
That means our way of storing data is on your machine via Local Storage API provided by browser.
Why not using Data Base?
First reason is security, with less plugins messing with Data Base there are less security concerns.
Second reason is that Recoda Workspace is development tool. So after development you can leave Recoda Workspace, deactivate or even uninstall without breaking any functionality. It is yours Workspace and it is up to you, we don't look to lock user and make them depend on one more thing, we are looking to provide freedom. And, yes we all like freedom very much.
The localStorage read-only property of the window interface allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions.
What that means for you?
You can easy setup right from Oxygen Builder interface whole your Workspace.
If there are multiple users working on same project preference are unique for each
If there are multiple users working on same machine they can use even different browser and have unique setup
So why this is important? Because Let's say that we have two people working on same project, one is younger and working on his cool huge 34" monitor other is older and like his 24" monitor which works for him. First user can adjust panels and everything to take benefit of huge screen, he may even like to have smaller font-size so he can preview more code. Other user has smaller display and likes more compact view and he can utilize more compact interface. Because he is older, it hurts his eyes to read 13px font while writing code and he likes to have bigger font like 16px or even 18px. And on other hand one can use his fancy color theme, and other can use his color theme which suits best to his style.
Whole point of this, every user can have his unique experience. And if you work 8-10hr/day you want to have freedom over interface which make workflow more pleasurable. Workspace is here to provide that.
Are there any downsides?
Yes as always, it takes some time to execute and set up these it won't make it quicker, we won't lie.
OK, I know what you are thinking, speed, slowing, blah, blah.. Don't panic, keep reading.
Execution time of setting User Preference
You can choose One of existing theme option, you can write choose custom and write your own or choose Respect API which we have established with our friends from dpluginswhich will respect theme from Swiss Knife. There are 2W and 3W themes. Difference between them is that for 2W themes buttons and inputs have same background color which is more Oxygen native theme. On the other hand 3W help quickly distinguish what are buttons and input because buttons are lighter than background and feel like they are levitating on background, and inputs are on the other side darker and it feels that they are whole on interface.
Let's see what option are given to you:
Theme #1: Recoda Sleek
Theme #2: Recoda Designer
Theme #3: One Dark 3W
Theme #4: One Dark 2W
Theme #5: Dracula 3W
Theme #6: Dracula 2W
Theme #7: Classic Lighter
Theme #8: Classic Darker
Theme #9: Vodka
This is our legacy theme requested by users to stay as optional.
Theme #10: Custom
This is option if you like to have your own theme, we provided easy way (5 lines of CSS to that).
Basic theme options boilerplate:
--oxy__bg-3:#404040 !important; /* The Main BG color*/
--oxy__bg-4:#5E5E5E !important; /* The Darker BG color*/
--oxy__bg-5:#6F6E6E !important; /* The Darkest BG color*/
--oxy__bg-2:#2B2B2B !important; /* The Lighter BG color*/
--oxy__bg-1:#1a1a1a !important; /* The Lightest BG color*/
This is used as main theme interface background color
Darker interface background color, this is used for inputs so they can be one step darker than interface
The Darkest background color, this is helper variable for certain cases when you need Darker shade on --oxy_bg-4
This is the one shade lighter background color than main interface, used for buttons on background color of --oxy_bg-3
This is the lightest background color. It is for handling exceptions like when some button is on --oxy_bg-2 so it can be one shade lighter
Color "Math" behind background colors:
Structure Panel Style
This option will provide you micro-theming options for structure panel.
Style #1: Classic
This option will at some improvemnts like new expand/collapse icons, line trackers like in dev tools, but it will respect in some way native Oxygen look of Structure Panel
Style #2: Sleek
This option will provide you new minimalistic look of Structure Panel
Style #3: Turn OFF
This is not style exactly, and you can see that it look weird. This is made like this because maybe you like more structure panel improvements from other plugins like Swiss Knife so you can Turn OFF here and use other without collisions.
Turn OFF Panel Style
Code Editor font size
For some user default 13px coding font-size can be small. We have provided 13px-18px range so you can choose which size works best for you.
18px Code editor font-size
Options => OFF / LEFT / LEFT-SWAP
Some users use larger screens and mouse travel between left and right panel is huge. We have provided left dock options which should solve that issue and provide few other options. Because we have panels now next to each other some options like ADD+ and BlockPad Editor can now utilize space from both panels. And in native panels working with Stylesheets is not intuitive because you look what to edit at right and edit it on left. This way you are looking in sequence from left like in every Code Editor.
Left Panel docking
Left-swap Panel docking
CL Class Highlighter
Command-line special indication mode for adding classes.
Command-line Class highlighter
Panelator in the Topbar area
Panelator in Sidepanel area
OPTIONS => .5 | .75 | 1 | 1.25
Some people like more compact Structure Panel, other like to have bigger indentation you can choose from 0.5rem to 1.25rem.
Structure indentation: 0.5rem
Structure indentation: 1.25rem
OPTIONS => 250 | 200 | 150 | 100 | 50
What is magnetic trigger? It is Panel auto-close area. If you want to open panel you need to get from this area in order to open panel. On the other hand it comes very handy when you want to close panel because you don't need to go to the edge of screen, you just need to release mouse click in this area to close panel
Magnetic trigger: 250px (red area)
Magnetic trigger: 50px (red area)
This options will give you visual helpers so you can onboard faster with Workspace shortcuts for panels, breakpoints and advanced options.
NOTE: In order to show correctly shortcuts, under User preference > Keyboard Layout you will need to choose your Keyboard Layout, default is QWERTY, other supported layouts are QWERTZ, AZERTY, Colemak DH
Left/ Right Panel Default width
OPTONS => range from 250px to 500px
When you drag panels it is temporary change. If you want to change default panel width which will be remembered you should set up this using user preference.
Setting L/R Panel Default Width
Resizer Handle Width
OPTIONS => 5 | 10 | 15 | 20 | 25
This option will allow you to choose how wide resize handles will be.
Setting resize handle width
Left/ Right Panel Maximal Ratio
Because both panels are resizable, Workspace implements mechanism to prevent panels from overlapping. This ratio will setup what is maximal portion of screen space which can panel take. By default panel comes with (L:50% - R:50% ). Two edge cases which you can set up (L:70% - R:30%) and (L:30% - R:70%). Other ratios are up to you. And if you are not sure, leave it as 50-50 distribution.
Edge case (L:30% - R:70%)
OPTIONS=> OFF | ON
With 0.9.3 Workspace introduce this option which is Oxygen native way of handling Canvas. By default Canvas is in responsive mode which will allow you to preview of any width at default break-point. That means if you resize panels so Canvas is 500px it will preview webpage as on 500px device. If you want to lock it so you always have preview above all breakpoints you should set Auto Zoom and it will calculate Zoom on every Canvas resize event so you will always see desktop preview no matter how wide is Canvas.
Canvas preview with Auto Zoom ON
Panel UI Pack
OPTIONS => Houdini | None
Selector UI side by side options
Stylesheets UI options side by side
Canvas scroll style
Options => Normal | Tiny
Default Canvas Scrollbar can be to big on screens sizes of laptop so there is option to make them smaller by selecting Tiny option.
While Classic style worked for the most of the users, on smaller screens it could take out too much of space.
New options Horizontal and Hover are designed for smaller screens, and the Vertical will provide little more space for propeties when you work with multiple classes.
Option None will hide it, if you don't need it.
Advantor Style options side by side
Options => OFF | ON
Some user prefer to have one click units selctions for faster workflow, if selected ON option, units will be expanded (where they can be).
If you drag/resize panel under 300px, units won't expand until panel is bigger then 300px.
Margin/Padding control style
Options => Classic | Box
NOTE: This option will only work with Oxygen 4.0+ versions, as this new view is introduced in it.
With Oxygen Builder 4.0, Margin/Padding controls got new box look like in dev tools. While it looks really cool it, old view is better when you need place CSS var() or calc() inside it input, and Expanded units are only possible in classic view.
Classic and Box style side by side
Options => None | ID change | First class
If you are using command-line, you can enable some of these automation in order to speed up workflow.
Option: ID change
When you change ID via command-line #newID command, this will autorename active element
Option: First class
When you add first class to an element via command-line it will rename that the element in structure panel with the first classes name.
Hide Sidebar Breadcrumb
Options => OFF| ON
Option OFF (Not hide)
Hide Settings Dropdown
Options => OFF| ON
This option is just for Oxygen 3.9 or less, in Oxygen 4.0 this dropdown does not exist
Background position presets
Group: Advanced Tabs
Options => Enable | Disable
Default units (video)
VIDEO: Default units
There are two different groups which are acting like a layers to customize priority. You can choose Global to adjust which units you would like to change. Local units have higher priority so you could set global rem units and for width use % unit for Max-width.
Applies to all units (exception are defined Local units).
OPTIONS => default | rem | em | %
1) Margin => default px | rem | em | %
2) Padding => default px | rem | em | %
3) Width => default px | rem | em | %
4) Max-width => default px | rem | em | %
5) Font-size => default px | rem | em
Unit auto-detection (video)
Detect and change unit as you type. Supports unit detection and CSS function detection so you don't need type, click. Just type...
VIDEO: Unit auto-detection
CSS Variables suggestion (video)
While you type inside Oxygen Builder, you will get help with variables. Recoda gets all defined CSS variables and hints you if you start type name.