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.OPERATOR - this part indicate which action
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
-
Table 2: List of command-line elements

Command line - Previous

Intro

Next - Command line

My first commands

Last modified 2mo ago

Copy link

Contents

What is command?

Operators

Elements