Uso con Bricks

FDS está diseñado para funcionar en WordPress con Bricks Builder, compilándose en caliente via el plugin WindPress.

Instalación en WordPress

1. Instala WindPress en tu WordPress.
2. Importa FDS como archivo .windpress (exportación completa del sistema).
3. Activa WindPress para Bricks Builder desde los ajustes del plugin.
4. Usa cualquier clase de FDS (.btn-primary, .heading, .grid-cols-1-2) en los elementos de Bricks.

WindPress compila Tailwind y FDS directamente desde el admin, sin requerir build tools fuera del sitio.

En el editor de Bricks

En cualquier elemento Bricks, añade clases de FDS desde el panel de clases:

class="btn btn-primary btn-lg"
class="heading"
class="card card-md card-elevated"
class="grid grid-cols-1-2"

Como las clases son Tailwind estándar, Bricks las autocompleta y aplica el preview en tiempo real.

Variables CSS en Bricks

Los tokens de FDS están disponibles como CSS variables en :root. Desde los controles de Custom CSS de Bricks:

.mi-elemento {
  padding: var(--spacing-block);
  color: var(--color-primary-700);
  font-size: var(--text-xl);
  border-radius: var(--radius-card);
}

Overrides del proyecto

WindPress permite añadir @theme del proyecto sin tocar los archivos de FDS:

@theme {
  --color-primary-500: oklch(0.55 0.18 250);
  --font-display: "Inter", sans-serif;
  --ft-text-max: 1.25rem;
}

Cambios inmediatos en el preview del editor.

Custom variants en Bricks

Las tres variantes parent, parent-hover, parent-focus-within funcionan igual que en cualquier proyecto Tailwind. Útiles para interacciones padre/hijo sin JavaScript:

class="parent-hover:translate-x-1 transition"

Integración completa con FlowKit

Si quieres tokens + componentes + flujo editorial integrado (presets de Bricks, panel visual de tokens, helpers PHP), existe FlowKit, el child theme comercial de Bricks que empaqueta FDS con extras:

• Panel visual (TDSM) para editar tokens sin tocar CSS.
• Elementos custom de Bricks: Carrito AJAX, Checkout, Account Addresses.
• Integración WooCommerce.
• Actualizaciones automáticas.

FlowKit consume FDS como capa base. Son compatibles y comparten filosofía.

Exportar e importar

WindPress permite exportar el estado completo (tokens, componentes, utilities, overrides) como archivo .windpress. Útil para:

• Versionar el design system del proyecto en Git.
• Compartir entre sitios del mismo cliente.
• Hacer rollback tras experimentación.