Docs
Search…
Commands

What is command?

Command is way of automate repetative tasks inside Oxygen Builder Commands in the most cases are made of two things:
  1. 1.
    OPERATOR - this part indicate which action
  2. 2.
    ARGUMENT - what action should do
Example 1: Adding class with class name of my-class
command: .my-class
operator: ' . '
argument: my-class
In Example 1 we can see command for adding one class. In Workspace dot is special character which suggest that class with followed-up name should be added to element.

Operators

All Recoda Workspace commands have operators. Imagine operators as languge between you and Oxygen. When we designed it we were heavily inspired with emmet. Our opinion is that emmet syntax is superb and industry standard so we wanted to adopt something logical, easy to write but with mind in that this is Oxygen specific so there are differences because emmet is string manipulation tool and command is Oxygen manipulation thing.
Operator
What operator does?
>
Add element
+
Add sibling element
^
Select parent (^X), where X is number of repeats
.
Add class eg. .someClassToAdd
'
Change Tag eg. 'li = set <li> custom tag eg. txt'li = add text element with custom li tag
*
Duplicate once or *X = duplicate X times
@
Rename, followed by new nicename eg. @new_name
{}
change content, {Buy it now!}
[]
add attribute, for eg. [data-theme=dark]
()
Import GitHub Gist snippet eg. (https://gist.github.com/re-co/18c7b776fbd20c6d3c1343c04792944c#file-xray-gridguide-css)
/
add stylesheet eg. /stylesheetName
|
add folder eg. |folderName
Table 1: List of command-line operators

Adding elements with commands

If you are adding elements one of following operators (>, +, or ^)should be used before element argument.
How it works?
You write some name from table an it will add Oxygen element with custom tag. Some elements has full version and shorthand version, you can use both it will do same.

Elements

In Table 2 (below) all supported elements are listed. If you want other element you can write HTML tag as argument and command-line will add DIV element with specified custom-tag in argument. (eg >aside = add div element with custom tag aside)
Command argument
Shorthand
Oxygen element
Custom tag
h1-h6
Heading element
h1-h6
p
Text block element
p
a
Text link element
a
awrap
aw
Link wrapper
a
abutton
ab
Button element
a
cb
Code block element
-
button
Button element
button
img
Image element
img
video
v
Video element
-
icon
Icon element
-
testimonial
tt
Testimonial element
-
ibox
ib
Icon box element
-
pbox
pb
Progress bar element
-
gallery
-
Gallery element
-
slider
Slider element
-
section
Section element
-
tabs
Tabs element
-
superbox
Superbox element
-
toggle
gg
Toggle elemet
-
text
txt
Text element
-
textarea
Text element
textarea
modal
Modal element
-
map
Map element
-
some-other
eg.
aside
Div element
some-other
eg.
aside
Table 2: List of command-line elements
Copy link
On this page
What is command?
Operators
Elements