Instalación

FDS es un conjunto de archivos CSS organizados por responsabilidad, con un único punto de entrada (main.css). No hay build tool obligatorio.

Via copy-paste (recomendado)

1. Clona o descarga el repositorio de Flowtitude Design System.
2. Copia el directorio completo a tu proyecto (por ejemplo, vendor/fds/).
3. Importa main.css desde tu entry point CSS.

/* src/input.css */
@import "tailwindcss";
@import "../vendor/fds/main.css";

4. Compila con la CLI de Tailwind:

npx @tailwindcss/cli -i src/input.css -o dist/output.css --watch

Via WindPress (WordPress)

Para proyectos WordPress con Bricks Builder, el camino oficial es via WindPress:

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

Ver Uso con Bricks para el detalle.

Requisitos

FDS extiende Tailwind, no lo reemplaza. Cualquier utility estándar sigue disponible.

Primera página de prueba

<main>
  <section>
    <div>
      <h1 class="heading">Hola FDS</h1>
      <p class="text-large">
        Este párrafo usa las clases tipográficas de FDS con tipografía fluida.
      </p>
      <a class="btn btn-primary" href="#">Primer botón</a>
    </div>
  </section>
</main>

Al compilar deberías ver tipografía fluida, spacing semántico y botón con tokens de color.

Siguiente paso

• Filosofía para entender cómo está pensado el sistema.
• Tailwind para integraciones más finas.