The Oxygen Builder Command Line Interface (OB-CLI) module will enable you to enter simple commands to process complex operations.
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.
Command | Shorthand | Description | Details |
emmet | em | Process Emmet input | Go to section |
id | - | Update selected component ID | Go to section |
class | cl | Add classes to selected component | Go to section |
rename | rn | Rename selected component | Go to section |
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
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.
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:
Element | Oxygen Component |
section | Section |
header, footer, main | Section with tag set to element name |
div | Div |
article, aside, details, figure, hgroup, mark, nav | Div with tag set to element name |
ul, ol | Div with custom tag set to element name |
heading | Heading |
h1-h6 | Heading with tag set to element name |
columns | Columns |
text | Text |
rich-text | Rich Text |
li, p | Text with custom tag set to element name |
image, img | Image |
video | Video |
icon | Icon |
a, link-wrapper | Link Wrapper |
text-link | Text Link |
button | Button |
code-block | Code Block |
inner, inner-content | Inner Content |
Any other types of elements are default created as divs with custom tag name set to the entered element name.
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.
Operand | Operation | Example |
*X | Repeat this component X times | section.class1*2 will repeat section.class1 twice |
( ) | Group layout | (div>h2)+(div>p) creates two divs, one with h2 and another with p inside. Without parentheses - div>h2+div>p - wouldn't be the same. |
{ } | Component name | main{Content} will create main element and set its Oxygen name to "Content" |
[ ] | Set attribute | div[foo][bar="your value"] will add two attributes, one with no value and another with a set value |
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"]
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.
Simply, update the selected component's ID with entered option where "new-id" is below.
id new-id
Add classes - separated by spaces - to the selected component.
class new-class-1 new-class-2
cl new-class-1 new-class-2
Update the Oxygen Builder name for the component.
rename My New Name
rn My New Name