Documentación

Explora cada area del design system. Cada sección incluye ejemplos interactivos, codigo copiable y referencia completa de las clases disponibles.

Qué es FDS

Flowtitude Design System (FDS) es un design system CSS gratuito construido sobre Tailwind CSS v4. No es un framework — es una extension que añade tokens de diseño fluidos, componentes semánticos y layouts inteligentes a Tailwind.

Principios de diseño

• Fluid-first — Todo el sistema usa clamp() para adaptar tipografía y spacing al viewport sin media queries.
• Knobs + Derived — Unos ~35 valores editables (knobs) generan automáticamente 50+ valores derivados. Cambiar un knob recalcula todo.
• CSS Layers — Cascada controlada con @layer. Cada capa tiene su prioridad definida, evitando conflictos de especificidad.
• WordPress-first — Diseñado para funcionar con WindPress, Bricks Builder y cualquier page builder de WordPress.
• Extend, don't replace — FDS extiende Tailwind, no lo reemplaza. Todas las utilidades de Tailwind siguen funcionando.

Versiones

Arquitectura

FDS organiza su CSS en 6 capas ordenadas por la cascada, con un entry point (main.css) que importa todos los modulos.

CSS Layers

Las capas definen el orden de prioridad en la cascada. Una regla en utilities siempre gana sobre una en base, sin importar la especificidad.

Estructura de archivos

main.css                         # Entry point + custom variants
wizard.css                       # Custom properties del wizard
theme/flowtitude.css             # Tokens: knobs + derived values
base/base.css                    # Reset, body, skip-link, figure
base/typography.css              # h1-h6 preflight, .prose
layouts/section.css              # Secciones inteligentes
layouts/content-flex.css         # Posicionamiento 9 puntos
components/buttons.css           # .btn + variantes
components/typography.css        # .display, .heading, .subheading
components/components.css        # .bg-image, .click-parent
components/custom.css            # .eyebrow
utility/core/utilities.css       # flip-w, flip-h
utility/layout/grid-basic.css    # Grids proporcionales
utility/animations/durations.css # Duraciones semánticas

Knobs + Derived

El sistema de tokens tiene dos niveles:

• Knobs (~35 variables) — Valores que tu editas directamente: viewport range, text min/max, space min/max, step ratios, multipliers.
• Derived (50+ variables) — Valores calculados automáticamente a partir de los knobs via calc() y clamp().

Por ejemplo, cambiar --ft-type-step-max de 1.2 a 1.25 recalcula automáticamente todos los tamaños tipográficos (--text-lg a --text-9xl).

Instalación

FDS se distribuye como archivo .windpress para WordPress. El proceso de instalación es sencillo:

Uso con Bricks Builder

Con WindPress activo, puedes usar las clases de FDS directamente en los campos de clase de Bricks. No necesitas configuración adicional.

Uso sin WordPress

Si quieres usar FDS fuera de WordPress, importa main.css como entry point en tu configuración de Tailwind v4:

Personalización

Edita las variables knob en theme/flowtitude.css para adaptar el sistema a tu marca. Los cambios en los knobs se propagan automáticamente a todos los valores derivados.

Variantes Personalizadas

FDS define tres custom variants en main.css que extienden Tailwind para estilar elementos basándose en el estado del padre: