Introducción

Fancy Framework es un plugin gratuito de WordPress que instala, edita y actualiza un sistema de tokens de diseño —colores, espaciado, tipografía, forma— directamente en el almacenamiento nativo de Bricks o de Etch: las variables globales y la paleta de colores de Bricks, o una colección de variables «Fancy Framework» en Etch. No hay ninguna copia propia del plugin que pueda desincronizarse de lo que el builder realmente tiene.

Los tokens empezaron como un generador en fancyframework.com, cuyo resultado se pegaba a mano en Bricks. El plugin hace esa instalación por ti, y además te da un panel de ajustes para seguir editando el sistema después —sin regenerar nada, y con vista previa, revisión y deshacer en cada cambio.

Si desactivas o borras el plugin, nada de tu sitio cambia. Los tokens que escribió se quedan exactamente donde están, en el almacenamiento propio de Bricks o de Etch. El plugin edita ese almacenamiento; no lo sustituye ni se pone delante de él.

Qué te da

• Un panel de ajustes, accesible desde la barra de administración del front, desde dentro del builder de Bricks, y desde su propia pantalla en wp-admin — el mismo panel en los tres sitios, siguiendo por donde lo dejaste.
• Colores con escalas de tono calculadas (una rampa completa de claro a oscuro a partir de un color de marca, con contraste garantizado) y transparencias por color.
• Espaciado y tamaños por función — fluidos entre tu pantalla más pequeña y la más grande, sin puntos de ruptura que mantener.
• Tipografía para el texto normal y cada nivel de encabezado, por separado.
• Forma — radio de borde y sombras, para botones y tarjetas.
• Una capa de CSS base que arregla lo que el builder deja fuera: un anillo de foco de teclado que nunca se quita por accidente, enlaces de ancla que se detienen bajo una cabecera fija, listas y enlaces que se comportan, y algunas cosas más.
• Un sello de accesibilidad que comprueba las propias variables del sistema de diseño contra WCAG 2.2 AA —contraste, foco, texto que crece con el zoom del navegador, tamaño de botón en el móvil— y te dice exactamente qué pasa y qué no.
• Cinco personalidades de partida (Editorial, Tech, Soft, Corporate, Playful) que fijan tipografía, interlineado, peso, radio y sombra juntos, en un clic.
• Un historial visual de cada versión aplicada, para volver a un aspecto anterior con un clic.
• Tu propio asistente de IA, conectado por MCP, que puede leer el sistema de diseño y proponer cambios para que los revises —o, solo si lo activas, aplicarlos en vivo mientras miras.

Qué no es

No es un framework de clases de utilidad. No genera clases CSS para que las apliques a elementos, y no toca tu marcado ni tu maquetación. Gestiona variables —los valores que tus propias clases y los controles nativos de Bricks o de Etch ya leen.

Tampoco toca nunca nada que no haya creado él: tus propias variables, las entradas de tu paleta de colores, tus clases y tu CSS personalizado se quedan exactamente como están. La única excepción deliberada, siempre mostrada en la revisión antes de aplicar, se explica en Base CSS.