Oxygenados La comunidad hispana
Recoda White Full Logo
Patrocinador
post oxygen builderOxigenados Tip del dia
Características
A  Fondo
Roadmap
Feedback
ChangelogWorkspaceFacebookDiscordComprar

Mi Primer Comando

Configuración

 1 - Ir a Páginas. 
2  - Añadir una nueva página.
3 - Poner un título a la página y publicarla.
4 - Editar con Oxygen.

 Una vez cargado el editor:
 1 - Copiar este archivo: lesson CSS framework.
 2 - Crear un nuevo Stylesheet.
 3 - Pegar el texto en la nueva Stylesheet creada.
 4 - Hacer click en la línea de comandos y pegar el comando: div>a+a^1*3. 
 5 - Pulsar la tecla Enter para ejecutar el comando.

Clases

Ahora que tenemos el entorno listo vamos a hacer algo de trabajo. 
Tenemos nuestro framework CSS  en Stylesheets, pero Oxygen y la sugerencia de línea de comandos no funcionarán para esas clases así que para tener la sugerencia de clases necesitamos un hack.
Para importar clases vamos a hacer un hack:
 1 - Añadir algún elemento div ficticio.
 2 - Hacer click en la línea de comandos.
 3 - Ejecutar el comando: .demo-buton.demo-button-main.big.red.color-white.bold
 4 - Guardar.
 5 - Elimina ese div ficticio, lo usamos sólo para importar clases.

Para añadir todas las clases del framework CSS o parte del mismo tienes que escribirlas en formato .DSV (Dot Separated Values), si tienes el formato .CSV puedes utilizar cualquier editor de texto y con buscar y sustituir todas las comas por puntos.
Después de añadir todas las clases al elemento haz click en Guardar y luego puedes eliminar ese div ficticio que usamos sólo para importar todas las clases a través de la línea de comandos.
Si estás utilizando el plugin de Swiss Knife puedes importar .CSV allí y las sugerencias estarán conectadas con la línea de comandos.

Añadir una clase

Busca el elemento botón en la página, selecciónalo y luego:

1 - Pulsar G para ir a la línea de comandos.
2 - Escribe:
       .demo-button
3 - Pulsar Enter para aplicar la sugerencia.
4 - Pulsar Enter para ejecutar la sugerencia.

Añadir múltiples clases

Busca el segundo elemento botón en la página, selecciónalo y luego:

1 - Pulsar G para ir a la línea de comandos.
2 - Escribe:
       .demo-button.demo-button-main
3 - Pulsar Enter para aplicar la sugerencia.
4 - Pulsar Enter para ejecutar la sugerencia.

Cuando escribiste .my-button-class pudiste ver que tenías una sugerencia. Si la clase existe en Oxygen obtendrás la sugerencia de autocompletar. Por favor, no pegues el comando, intenta escribirlo primero, es muy fácil y te llevará a la función que usarás todo el tiempo y verás que la sugerencia hará que la escritura sea bastante fácil.

Añadir múltiples clases a múltiples elementos

Tenemos tres secciones con dos botones en cada una, así que en total tenemos seis botones. 
Y por lo general se necesita añadir cada clase como:
 1 - Click en el elemento.
 2 - Click en selectores para abrir el prompt de agregar clase,
 3 - Empezar a escribir hasta que aparezca la sugerencia.
 4 - Pulsar Enter para aplicar la sugerencia de clase.
  Así que se necesitan 10 acciones (la escritura se calcula como una sola acción). 
  Y para sólo seis elementos se necesitan 60 acciones.

Veamos cómo se compara con la línea de comandos:

1 - Selecciona el primer botón.
2 - Pulsa G para ir a la línea de comandos.
Escribe:
     .red.big.bold
3 - Pulsa Enter.

Se han necesitado cuatro acciones para añadir tres clases (cierto es que la acción de escribir es un poco más larga, pero no es una gran diferencia, y hay que esperar al final para ver el impacto real).
Ahora tenemos una situación como esta:

recoda primer comando

Para añadir todas esas clases a todos los elementos sólo necesitamos cinco acciones más:

recoda primer comando 1

Y después de unos dos segundos y de estas cinco sencillas acciones, has añadido tres clases a cinco elementos de botones. Y el resultado es:

recoda primer comando 2

CONSEJO PROFESIONAL:
 Si tienes algún comando que quieres aplicar a varios, pero no es el último, puedes utilizar CTRL+H dentro de la línea de comandos para buscar en el historial, aplicar el comando del historial a uno y luego Shift+Click a otros.

Atributos

Añadir un solo atributo a múltiples elementos

Los estilos de los botones son ahora como queríamos (un diseño realmente llamativo). Y digamos que necesitamos añadir el mismo atributo a todos ellos (esto puede ser útil cuando necesitemos añadir atributos de activación de lightbox, pero en este caso usaremos botones).
Así que queremos añadir el atributo button-data="some-data" a todos ellos. Si utilizas Oxygen puede ser complicado copiar y pegar dos entradas de datos y obtener cada vez dentro del panel de atributos.
Vamos a añadir el atributo al primer botón:

1 - Selecciona el primer botón.
2 - Pulsa G para ir a la línea de comandos:
           [button-data=some-data]
3 - Pulsa Enter.

Para añadir también ese mismo atributo a otros, sólo hay que hacer Shift-Click en ellos. Y el resultado debería ser así:

recoda primer comando 3

Otros Comandos

Renombrar Elementos

Podemos ver en la imagen de abajo que todos los botones tienen nombre genérico. Vamos a cambiar el nombre del primer botón a través de la línea de comandos.

recoda primer comando 4

Renombrar button to my_button

1 - Selecciona el primer botón.
2 - Pulsa G para ir a la línea de comandos:
              {Get Me!}
3 - Pulsa Enter.

El pimer botón se mostrará así:

recoda primer comando 5

Comandos en cadena

Cambiar el nombre y el contenido

¡Vamos a cambiar el nombre y el contenido del segundo botón, queremos que el nombre sea "awsome_button" y el contenido sea "Click me"!

recoda primer comando 6

Hagámoslo para el segundo botón :

1 - Selecciona el primer botón.
2 - Pulsa G para ir a la línea de comandos:
              {Click Me!}@awsome_button
3 - Pulsa Enter.

Hemos aprendido que podemos aplicar el último comando con shift, así que apliquemos este comando al resto de botones.

recoda primer comando 7