Estamos trabajando en una mejora importante de nuestro tema hijo, especialmente en todo lo relacionado con el módulo de IA.
Hasta ahora, parte de estas funciones estaban repartidas en distintos campos de texto y ubicaciones concretas dentro del sistema. Pero creemos que ha llegado el momento de dar un paso más y ordenar mejor la experiencia.
Por eso, vamos a centralizar estas capacidades en un único asistente.
La idea es que este asistente no solo sirva para tareas de diseño con Tailwind o para la creación de secciones, sino que se convierta poco a poco en un punto de apoyo mucho más potente dentro del flujo de trabajo.
En las próximas semanas iremos ampliando sus capacidades para que sea más útil, más coherente y más cómodo de usar en el día a día.
Todavía estamos afinando esta nueva dirección, pero queríamos compartirla ya con vosotros porque supone un cambio importante en cómo entendemos esta parte del sistema.
Hemos preparado un espacio específico para tener siempre a mano la documentación del sistema de diseño de Flowtitude, de forma más clara, centralizada y actualizada.
La idea es que este portal sirva como referencia práctica para consultar la estructura del sistema, su lógica, los elementos disponibles y su evolución, sin depender de mensajes sueltos o documentación dispersa.
🔗 Ya podéis acceder aquí:
fds.flowtitude.com
La base ya está disponible, y la documentación se irá actualizando a medida que se produzcan cambios y mejoras en el sistema.
Como siempre, si veis algo que falta o cualquier detalle a revisar, podéis comentarlo en la comunidad.
Ultima versión del tema hijo
El componente de botones ya no necesita modificarse para adaptar colores o espaciado. Todo se configura desde flowtitude.css con nuevos tokens: color de texto independiente en primary y secondary, fondo/borde/texto configurables en outline, y padding global en em.
Padding en em
Las variantes de tamaño (xs, sm, lg, xl) ya no definen su propio padding. Al estar en em, el padding base escala automáticamente con el font-size de cada variante.
Outline configurable
Fondo, borde y texto ahora son tokens independientes. Por defecto border: currentColor, así el borde sigue al color del texto sin configuración extra.
Accesibilidad en botones
Se añade :focus-visible con outline en primary-500. El foco solo se muestra en navegación por teclado, no con ratón.
Mejoras en block-bleed
Se revisa y mejora la implementación de la clase block-bleed para mayor robustez en distintos contextos de layout.
Corrección de utilidades
Se corrigen errores menores en algunas clases de utilidad.
Grises unificados a neutral
Todo el sistema usa ahora la escala neutral de Tailwind. Se elimina el uso mixto de zinc.
Esta semana estamos trabajando en algo que muchos me habíais pedido:
🎓 Un pequeño minicurso práctico para explicar cómo funciona la configuración de Tailwind dentro del sistema Flowtitude.
No será teoría genérica sobre Tailwind.
Será específico sobre:
- Cómo está estructurado el archivo con
@theme - Cómo organizamos tokens y variables
- Cómo se relaciona con Bricks
- Qué se puede modificar en segundos
- Y qué decisiones hay detrás del sistema
La idea es que entiendas el por qué, no solo el cómo.
✨ Además… nuevas variantes personalizadas
Hemos añadido dos nuevas variantes que amplían bastante las posibilidades cuando trabajas con componentes y estados:
@custom-variant parent-hover (*:hover > &);
/* variante parent-hover: dar estilo un elemento cuando se hace hover sobre su elemento padre */
@custom-variant parent-focus-within (*:focus-within > &);
/* variante parent-focus-within : dar estilo un elemento cuando el elemento padre tiene el foco */
🔎 ¿Qué permiten?
parent-hover:
Aplicar estilos a un hijo cuando el padre está en hover.
Ideal para:
- Cards interactivas
- Iconos que cambian al pasar el ratón por toda la tarjeta
- Animaciones coordinadas sin JS
parent-focus-within:
Aplicar estilos a un elemento cuando el contenedor tiene foco (muy útil en formularios).
Perfecto para:
- Inputs accesibles
- Estados visuales en bloques con foco
- Componentes más profesionales sin añadir complejidad
📌 ¿Por qué esto es importante?
Porque Flowtitude no es solo “usar Tailwind”.
Es tener un sistema coherente, ampliable y pensado para trabajar bien en WordPress y especialmente con Bricks.
Estas pequeñas mejoras son las que marcan la diferencia cuando trabajas en proyectos reales.
El Tema Hijo Flowtitude es la capa de implementación avanzada del ecosistema.
Está diseñado para trabajar en conjunto con el FDS y ofrecer una base sólida, optimizada y lista para producción en proyectos reales con Bricks y WordPress.
🎯 ¿Qué aporta el Tema Hijo?
- Estructura técnica optimizada.
- Integración directa con el FDS.
- Organización limpia del CSS.
- Snippets preparados para producción.
- Mejoras de rendimiento y orden interno.
- Base preparada para crecer sin romper consistencia.
No es un tema decorativo.
Es una arquitectura de trabajo.
🛠 Cómo usarlo correctamente
1️⃣ Instálalo sobre un entorno limpio.
2️⃣ Asegúrate de tener configurado el FDS correctamente.
3️⃣ No modifiques archivos base sin entender su función.
4️⃣ Usa snippets y estructura como están pensados.
🐞 Reporte de incidencias
Si detectas algún comportamiento inesperado, publica en este canal indicando:
- Versión del tema.
- Versión de WordPress.
- Versión de Bricks.
- Qué esperabas que ocurriera.
- Qué ocurrió realmente.
- Captura o contexto si es necesario.
Cuanto más contexto aportes, mejor podremos ayudarte.
💡 Importante
El Tema Hijo evoluciona de forma progresiva.
Las mejoras se basan en:
- Uso real en proyectos.
- Feedback de miembros Pro.
- Optimización continua del flujo de trabajo.
Este canal es exclusivamente para miembros Pro y está orientado a uso técnico real.
El FDS es la base técnica sobre la que trabajamos en esta comunidad.
No es solo una configuración de Tailwind.
Es un sistema estructurado para construir interfaces consistentes, escalables y mantenibles en WordPress con Bricks y Gutenberg.
🎯 ¿Qué resuelve?
- Evita decisiones improvisadas.
- Define escalas coherentes de espaciado.
- Establece jerarquía tipográfica clara.
- Organiza la paleta de color.
- Mejora la velocidad de implementación.
El objetivo es trabajar con criterio, no con valores arbitrarios.
📦 Descarga actual (FDS Lite)
Incluye:
- Escalas optimizadas.
- Sistema tipográfico base.
- Estructura de color organizada.
- Convenciones claras de uso.
🚀 Cómo empezar
1️⃣ Instala el archivo.
2️⃣ Construye una sección simple (hero + bloque + botón).
3️⃣ Aplica las clases del sistema sin improvisar.
4️⃣ Ajusta siempre dentro de la escala definida.
❓ ¿Dónde publicar tus dudas?
- Si es sobre el FDS (configuración, uso, estructura), publícalo en este canal.
- Si es una consulta general, usa el canal Consultas.
- Si necesitas revisión avanzada o soporte prioritario → Flowtitude Pro 🔒.
💡 Filosofía
El sistema no limita tu creatividad.
La organiza.
Hemos actualizado la configuración Free de Flowtitude con un foco muy claro: mejor base, menos peso y un comportamiento más fino en móvil.
✅ Qué cambia en Flowtitude Free
- Tipografía fluida mejorada: ahora el escalado en móvil es más suave, con una escala independiente para que no “salte” tanto entre tamaños.
- Archivos reducidos al mínimo: hemos recortado y dejado solo lo esencial para que la base sea ligera y fácil de mantener.
- Espaciado fluido simplificado: más directo y usable. Para ajustes avanzados y microcontrol, la idea es apoyarse en el plugin de tipografía fluida.
⭐️ ¿Y la versión Pro?
La Pro se enfocará en aportar valor real con una serie de componentes y utilidades adicionales, pensados para acelerar el trabajo y mantener consistencia sin complicarte.
Si ya estabas usando la Free, te recomiendo actualizar y probar sobre todo la parte de móvil. Si notas cualquier cosa rara con tamaños/espaciados, coméntalo y lo revisamos.
Incluye correcciones en el visor de logs (mejoras y ajustes que veníamos arrastrando) y todo esto también irá incluido en la próxima actualización 1.0.6.
📥 Si quieres tenerlo ya, puedes descargarlo desde el área de descargas.
🧩 Si prefieres esperar, en cuanto salga la 1.0.6 lo tendrás igualmente dentro del update.
Si notas cualquier cosa rara en el visor de logs después de actualizar, dejadme un comentario (idealmente con captura o el caso concreto) y lo revisamos.
En este vídeo retomamos la última variación del hero y la reconstruimos sin cambiar la estructura, pero añadiendo un paso clave: importar el sistema de diseño.
Verás, en tiempo real:
- cómo se instala con un solo archivo
- qué incluye (tokens + estilos base + componentes)
- cómo empezamos a eliminar clases que ya no hacen falta
- y cómo usar el componente de botones para no repetir estilos en cada sección
La idea de esta serie es ir de lo simple a lo pro, y enseñar cómo trabajar con Tailwind en WordPress con un flujo cada vez más rápido y escalable.