Disclaimer: Esta página no es oficial. Su unico proposito es la de mostrarle a los agentes de IA lo que se espera de ellos a la hora de crear, adaptar o modificar un codigo ajeno o bien a la hora de crear ellos mismos una página con una referencia o de la nada.

Solo por esta ocasión utilizare etiquetas "H2" para resaltar la división de las pruebas y/o ejemplos, seguido de una descripción.

Ejemplo de una Tarjeta como se espera.

Aqui podemos ver una tarjeta en repetición. Esta es la forma más ideal que se espera al diseñar algo en Bricks builder o Adaptar un codigo. El que cada elemento tenga su global class para poder editar de manera nativa en cada respectivo controlador y lo que no pueda colocarse ahi pueda hacerlo en "customCss" lo cual seria algo menor.

White card

Here goes your text ... Select any part of your text to access the formatting toolbar. to access the formatting toolbar.

I am a button

White card

Here goes your text ... Select any part of your text to access the formatting toolbar. to access the formatting toolbar.

I am a button

White card

Here goes your text ... Select any part of your text to access the formatting toolbar. to access the formatting toolbar.

I am a button

Ejemplo de una Tarjeta sin clases

En este ejemplo las tarjetas no tienen clases globales aplicadas en toda la tarjeta. Sin embargo, usan variables nativas de bricks lo cual permita que siga habiendo un enfoque directo sujeto a un sistema nativo. No es lo ideal, pero sigue siendo editable en el builder y usando colores pre-establecidos por variables. Si decide el cliente o yo cambiar el color de "marca-1" entonces aun asi seria aplicable en ellos.

White card

Here goes your text ... Select any part of your text to access the formatting toolbar. to access the formatting toolbar.

I am a button

White card

Here goes your text ... Select any part of your text to access the formatting toolbar. to access the formatting toolbar.

I am a button

White card

Here goes your text ... Select any part of your text to access the formatting toolbar. to access the formatting toolbar.

I am a button

Ejemplo de una Tarjeta de la peor calidad (y aun viable)

Esta tarjeta es lo "peor" que puede ser por que no esta dentro de un sistema o una edición limpia. Sin embargo, sigue siendo mejor que la mayoria ya que cada elemento aun es editable, nada esta oculto y todo se puede editar. No hay nada oculto ni en html ni nada fuera de bricks. No hay clases o uso de variables. Es como actualmente estamos adaptando un codigo que deberia quedar bien adaptado en bricks.

En este ejemplo de card manejamos 3 cosas que son muy importantes resaltar: El uso correcto del customCss. No se esta peleado con el y generalmente tiene uso para funciones Css más complejas, aquellas que no son "base".  Vemos colores "raw" o directos de Hex o Hsl. No hay variables ni global classes pero tienen un css bien ordenado en su controlador correspondiente.

Tambien tienen otra demostración del uso del CustomCss donde vemos un pseudo elemento de una pelotita roja que al hacer :hover en el esta sube a la parte superior de la tarjeta.  Vemos tambien un botón que es hibrido, tambien valido donde tiene el color del texto y del fondo en su controlador/control nativo de bricks correspondiente pero al pasar el cursor en el (hover) este cambia de color con una pequeña animación.

White card

Here goes your text ... Select any part of your text to access the formatting toolbar. to access the formatting toolbar.

I am a button

White card

Here goes your text ... Select any part of your text to access the formatting toolbar. to access the formatting toolbar.

I am a button

White card

Here goes your text ... Select any part of your text to access the formatting toolbar. to access the formatting toolbar.

I am a button

Como usar un "efecto" hibrido con Html, customCss y controlador nativo.

Este es un ejemplo muy rebuscado pero que resalta bien el proposito. El caso es que esto explica como se puede usar html pero teniendo clases globales aplicados al elemento y siendo portador de la clase o la etiqueta, pero al final hay un lugar donde se puede editar. En este caso vemos dos textos. Ambos con el mismo efecto. Pero el primero tiene la clase que provoca "el efecto". El color base del texto, tamaño, etc. Esta elegido por una variable en su controlador nativo correspondiente. Mientras que el efecto de ".duo-color" permite tener otro color aplicado a una parte del texto. Posteriormente usando las etiquetas html se puede compartir esto pero ya sabemos donde esta la clase y es facilmente modificable.


Ser el primero siempre es el mejor

Ser el segundo tampoco es malo