The Organiser View
The organiser view has two modes, selectors and folders
Selectors Mode
In selector mode you have access to all of the selectors in your project. Clicking a selector will reveal it's details and operations in the sidebar.
Re-ordering selectors
The selector blocks can be reordered via drag and drop. This will change the order they are output into Oxygen's universal CSS file.
INFO
If these changes don't take effect immediately, please refesh your CSS cache in Oxygen.
Selector Panel
The selector panel displays information on the current selector. You can change the selector name, change the folder it's in, clone, delete, lock and quarantine. The view also supports multi select via ctr + click. This allows you to move multiple selectors to a folder at once.
INFO
Please note - Changing the selector name will not change the selector name apllied your components. This feature is on the roadmap.
Preview pane
This window serves three functions. Css preview, State order and when multiple selectors are selected, this window will list them.
Css Preview
The CSS preview gives you an idea of what your selector is doing
State Order
This allows you to reorder how your states are applied via drag and drop.
INFO
This is very usefull as Oxygen seems to output states in alphabetical order. This can lead to undesirable results, especially as :active states tend to get output before the rest of the CSS, which does not conform to the LVHA standard and can cause problems with expected CSS results
Multi Select
This will simply list all selections. You can then perform actions such as delete or change folder
INFO
You may have noticed the ability to clone and add new selectors here. You may also think that this is pretty pointless on the back end end of the website. Well, you would be correct in thinking that! These functions are currently here as a sort of functional placeholder, however, the next major update of this plugin will see Selector Editing, which will allow you to create selectors via standard CSS or via something similar to the Oxygen UI. When this happens, cloning and creating selectors from the Style Manager interface will be very usefull indeed.
Folders Mode
The folder mode lets you create and organise selectors with the freedom and speed currently unavailable in the Oxygen UI. The current way of working means people tend not to bother too much with organisation, but being able to organise effectively gives us more potential when creating a framework, modularity being one.
Folder Structure
Folders in Oxygen are structured like this
- Folder
- Selector
- Style Set
- Custom Selector
A Folder can contain a Selector or a Style Set
A Style Set can only contain a Custom Selector
In Style manager, I refer to Style Set as a Custom Folder as that is essentially what it is
With Style Manager, it's much easier to use this structure freely, so we can use this to our advantage when organising our selectors.
Here is a folder that contains selectors related to a table. It has a standard selector that defines the table, and it contains a Custom Folder with all of the Custom Classes that relate to the table. Now we have a coherent group of selectors that can be kept track of and exported.
Folder Organization
The folder view is a drag and drop interface. Selectors can be moved between Folders, Folders can be re-ordered, and Custom Folders can be moved around.
There is also an Uncategorised list to the side. This makes it really easy and fast to categorize selectors.
Folder Panel
The folder panel is where you can Create, Delete, Disable, Import, Export and rename folders.
Different options are available depending on what type of folder is selected