Skip to content

The Organiser View

The organiser view has two modes, selectors and folders

Organiser View Switch

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.

The Selector View

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.

selector drag

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.

selector panel

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

CSS Preview

State Order

This allows you to reorder how your states are applied via drag and drop.

state reorder

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

Multi select

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.

Folders View

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.

Table Folder

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.

Categorize

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

Folder Panel