My first commands

Let's learn basics

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