Oxygen Builder CLI

The Oxygen Builder Command Line Interface (OB-CLI) module will enable you to enter simple commands to process complex operations.

Using the Command Line

To reveal and hide the command line, press Ctrl+/ or Cmd+/ from anywhere inside Oxygen Builder. It will then appear just below the top bar. Enter your command and either press Enter/Return on your keyboard, or click the "Run Command" button.

Command formatting is simple. The first part of any command is the action name you want to take place. See the "Commands at a Glance" table below for the list of available commands. Following that is a single space, then the command argument you'd like to process. In the example above, we are using the emmet shorthand "em" to add a section with ID, with columns wrapper inside, and three columns.

Commands At a Glance

Commands

Emmet

Emmet lets us generate complex layouts quickly with syntax similar to writing CSS. In one line, you can create components and include custom IDs, classes, and attributes.

emmet selector

em selector

Syntax

We've all seen complicated CSS targeting, like this:

section#section-id.class-1[data-a="1234"] > h3 {
    color: red !important;
}

We can use the same concept to create elements in Oxygen Builder. Let's start with a simple example.

emmet section#my-section.class-1.class-2

OB-CLI will process that input to create a section with a custom ID and two classes.

Components

Many element selector options are available. Corresponding Oxygen components don't always match up, so this is a higher level overview of all specific element->component conversions:

Any other types of elements are default created as divs with custom tag name set to the entered element name.

Targeting Basics

Emmet targeting is nearly identical to CSS targeting. Please review CSS targeting if you are not familiar, and check out the docs from Emmet directly to review.

Other Operations

Formatting and Spacing

Emmet will not read spaces that are outside of double-quotation marks or curly brackets. This will fail:

emmet section {My Section} > div [attribute="foo bar"]

This, however, will succeed:

emmet section{My Section}>div[attribute="foo bar"]

Emmet Use Case: Tables

Creating tables is super easy in Oxygen Builder. While it's not exactly a full-fledged table editor, it will work well for lighter applications.

Update Selected Component ID

Simply, update the selected component's ID with entered option where "new-id" is below.

id new-id

Add Classes To Selected Component

Add classes - separated by spaces - to the selected component.

class new-class-1 new-class-2

cl new-class-1 new-class-2

Rename selected component

Update the Oxygen Builder name for the component.

rename My New Name

rn My New Name