Inicio rápido

Pon en marcha Fancy Etch en pocos minutos. El único requisito es un framework CSS compatible que aporte los tokens de diseño base — elige el que mejor se adapte a tu flujo de trabajo, y listo:

• Fancy Framework — solución gratuita, nativa de Etch.
• ACSS 4 (Automatic.css) — framework premium.

Copiar y pegar

Una vez tengas la sesión iniciada en tu cuenta, ve al listado de plantillas, elige la que necesites y pégala directamente en el editor de Etch.

Para que esto funcione, tu sitio debe servirse por HTTPS con un certificado SSL válido, y tendrás que permitir los permisos del portapapeles en tu navegador la primera vez que pegues.

Animaciones @keyframes en Etch

Etch escribe el CSS de una clase dentro de su selector, y el navegador descarta un @keyframes que encuentra ahí: la clase dice animation-name y no se mueve nada. El editor no se queja, así que parece que debería funcionar. Hay dos formas de hacer que funcione.

En la clase, con el plugin Fancy Etch

Con el plugin Fancy Etch activo, escribe el @keyframes en la clase que lo usa, como cualquier otra regla:

/* El CSS de .fe-hero__title */
animation: fe-hero__title-in 0.8s ease both;

@keyframes fe-hero__title-in {
  from { opacity: 0; translate: 0 1.5rem; }
  to   { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  animation: none;
}

El plugin lo lleva a donde el navegador lo conserva, en la página y en el builder, mientras escribes. No se guarda nada en tus estilos: la clase queda tal como la escribiste.

• La animación vive con su elemento. Selecciona el elemento y sus fotogramas están en su CSS, listos para cambiarlos.
• Viaja con la plantilla. Pégala en otro sitio y no hay nada que crear en el Style Manager. Ese sitio también necesita el plugin: sin él la animación no se mueve, y el resto de la clase sigue funcionando.
• Una clase puede definir una animación que usan otras. Una página recibe todos los @keyframes que nombran sus clases, estén escritos donde estén.
• La condición que lo rodea se mantiene. Un @keyframes dentro de un @media, @supports o @container de la clase conserva esa condición.
• Los nombres son de todo el sitio. Empieza cada uno por su clase, como arriba. Si dos clases escriben fotogramas distintos con el mismo nombre, sólo funciona el último, y el builder lo avisa en la consola del navegador.
• Un stylesheet con el mismo nombre gana. Cuando pases una animación del Style Manager a su clase, borra la antigua.
• Se puede apagar en Fancy Etch → Etch, dentro de Styles.

En un stylesheet, sin el plugin

El @keyframes va en un stylesheet del Style Manager, en la pestaña Stylesheets, y la clase se queda sólo con el animation que lo nombra.

1. Abre el Style Manager. En la barra lateral izquierda, haz clic en el icono del Style Manager. Se abre el gestor con cuatro pestañas: Selectors, Variables, Stylesheets y Custom Media Definitions.
2. Ve a la pestaña Stylesheets. Verás una lista de los stylesheets ya existentes en el proyecto (Main, Fancy, y uno por cada componente o layout animado).
3. Crea un stylesheet nuevo. Al final de la lista, haz clic en Add Stylesheet. Dale un nombre descriptivo relacionado con el componente o layout al que pertenece la animación (ej. "Fancy Accordion").
4. Pega tus @keyframes. En el editor de código de la derecha, pega tu animación.

De dónde copiar los keyframes. Una plantilla que usa animaciones tiene un botón Copy keyframes junto a Copy template en su página:

Y en el listado de plantillas, esas plantillas enseñan un segundo botón en su tarjeta, junto al de copiar, que copia sus keyframes:

Consejo

Crea un stylesheet por componente o layout. Esto mantiene el proyecto organizado y facilita encontrar y actualizar animaciones concretas más adelante.

Custom Media Definitions

Fancy Etch usa un conjunto de custom media definitions para gestionar el diseño responsivo y garantizar consistencia visual en todos los layouts y componentes.

@custom-media --fe-2col (inline-size >= 560px);
@custom-media --fe-3col (inline-size >= 840px);
@custom-media --fe-4col (inline-size >= 1120px);
@custom-media --fe-5col (inline-size >= 1400px);

@custom-media --fe-landscape (inline-size >= 478px);
@custom-media --fe-tablet (inline-size >= 767px);
@custom-media --fe-desktop (inline-size >= 991px);

@custom-media --fe-below-tablet (inline-size < 767px);
@custom-media --fe-nav-mobile (min-width: 901px);

Consejo

Cuando pegas un layout o componente, sus custom media definitions necesarias se importan automáticamente. Aun así, es buena idea copiar todas las definiciones de una vez y pegarlas en la pestaña Custom Media Definitions — esto te permite gestionar y ajustar todos los breakpoints globalmente desde el principio, en un solo lugar.

Uno de estos tokens, --fe-nav-mobile, está definido con sintaxis de media query (min-width: 901px) en vez de la sintaxis de container query inline-size >= que usa el resto — es intencional, el breakpoint de navegación se comporta como una media query real, no como una container query.

Estilos de componentes

Para evitar saturar el panel del componente con demasiadas opciones, los estilos de un componente están en las variables de su clase principal — abre esa clase y cada ajuste temático (colores, espaciado, tamaños, timing) está ahí mismo como una variable --fe-*, editable sin tocar un solo selector anidado. Ver Acordeón para un ejemplo completo.