My first commands

Lesson Setup
1.Go to Pages
2.Add new Page
3.Set some Page title and publish it 
4.Edit with Oxygen
Wait 10-20s Oxygen Builder to load and we have small CSS framework made to demonstrate basic ideas when using Recoda so you should: 
1.Copy this file: lesson CSS framework​
2.Create new Stylesheet
3.Paste text in newly created Stylesheet
4.Click on comand line and paste command: div>a+a^1*3 
5.Press Enter key to execute command
Classes
Ok, now we have lesson environment ready, let's do some work. Now we have our lesson CSS framework in Stylesheets, but Oxygen and command-line suggestion won't work for that classes so in order to have classes suggestion we need to one hack. 
To import classes we will do hack:
1.Add some dummy div element
2.Click on command-line 
3.Execute command: .demo-buton.demo-button-main.big.red.color-white.bold
4.Save 
5.Delete that dummy div, we used it just to import classes.
To add all CSS framework or part of framework classes you need to write them in .DSV format (Dot Separated Values), if you have .CSV format you can use any text editor and with search and replace all commas with dots.
After adding all classes to element click Save and then you can delete that dummy div which we used just to import all classes via command-line.
If you are using Swiss Knife plugin you can import .CSV there and suggestions will be connected with command-line. 
Adding single class
Find button element on page, select it and then:
1.Press G to focus command-line
2.type:
     .demo-button
3.Press Enter to apply suggestion
4.Press  Enter to execute suggestion
Adding multiple classes at once
Find second button element in first, select it and then:
1.Press G to focus command-line
2.type:
     .demo-button.demo-button-main
3.Press Enter to execute command
When you were writing .my-button-class you could see that you have hint for that. If Class exist in Oxygen you will get auto-complete suggestion. Please do not paste command try to write it first it is very easy and it will onboard you to function which you will use all the time and you will see that suggestion will make writing pretty easy.
Adding multiple classes to multiple elements
We have three sections with two buttons in each, so overall we have six buttons. And usually you need add each class like:
1.click on element 
2.click on selectors to open adding class prompt
3.start typing until suggestion appears 
4.Press Enter to apply class suggestion
So and for other two classes we don't need first step. So it takes 10 actions (typing is calculated as single action). And for just six elements it would took 60 actions.
Let see how command-line compares with it: 
1.Select first button.
2.Press G to focus command-line
3.type:
     .red.big.bold
4.Press Enter to execute
It took four actions to make add three classes (To be true typing action is little longer, but it is not big difference, and wait for impact to see real impact).
Now we have situation like this:
Buttons after first element classes are applied
To add all that classes to all elements we need just five more actions:
Apply last command to others
And after about two seconds and these five easy action, you have added three clasess to five button elements. And result is:
Result
PRO TIP: If you have some command which you want apply to multiple, but it is not last command you can use CTRL+H inside command-line to search history, apply command from history to one and then Shift+Click to others
Attributes
Adding single attribute to multiple elements
OK, button styles are now as we wanted (eye-catching design really 😄
).  And Let's say we need add same attribute for all of them (this can was useful to us when we needed add lightbox trigger attributes, but in this case we will use our fancy buttons).
So we want to add attribute button-data="some-data" to all of them. If you would use Oxygen it can be tricky to copy paste two inputs of data and get every time inside attribute panel.
Lets add attribute to first button : 
1.Select first button.
2.Press G to focus command-line
3.type:
     [button-data=some-data]
4.Press Enter to execute
To add that same attribute to other too, just shift click on them. And result should look like:
Buttons after attributes added to each
Other commands
Rename element
We can see that on the image below that all buttons have generic name. Let's rename first button via command-line.
Let's rename button to my_button : 
1.Select first button.
2.Press G to focus command-line
3.type:
     @my_button
4.Press Enter to execute
Change content
We can see that on the image below that all buttons have generic content. Let's rename first via command-line.
Let's rename button to my_button : 
1.Select first button.
2.Press G to focus command-line
3.type:
     {Get Me!}
4.Press Enter to execute
And first button should look like this:
Chain commands
Rename and change content
Let's Rename and change content of second button, we want nicename to be awsome_button and content to be Click me!
Let's do it for second button : 
1.Select second button.
2.Press G to focus command-line
3.type:
     {Click Me!}@awsome_button
4.Press Enter to execute
Now we learned that we can apply last command with shift, so let's apply this command to the rest of buttons.
Buttons after applying last command to them
​

Command line - Previous

Commands

Next - Command line

Import GH Gist

Last modified 9mo ago

Copy link

Outline

Lesson Setup

Classes

Adding single class

Adding multiple classes at once

Adding multiple classes to multiple elements

Attributes

Adding single attribute to multiple elements

Rename and change content