En nuestro espacio dedicado al Boilerplate para tiendas online con Bricks y Tailwind, damos el primer paso definiendo la Home para una tienda de cosméticos. 🎨🛍️

Queremos que este diseño sea funcional, atractivo y optimizado, por lo que necesitamos tu feedback:

💡 ¿Qué secciones debería incluir la Home?
📌 ¿Qué estructura y jerarquía de contenido son las más efectivas?
🎨 ¿Qué mejoras podríamos aplicar al diseño para hacerlo más atractivo y eficiente?

Este es un proceso colaborativo, así que comenta tus ideas y sugerencias. Queremos construir un Boilerplate flexible y optimizado que funcione como base sólida para futuros proyectos.

🔹 ¡Tu opinión es clave! Deja tus comentarios y participa en la discusión. 💬✨

Nueva versión del bloque Content 01, con mejoras significativas para optimizar su diseño y funcionalidad. Aquí tienes las novedades más destacadas:

🆕 Mejoras en esta versión

1. ✨ Espaciado mejorado:

   • Se ha ajustado el espaciado dentro del bloque para un diseño más limpio y equilibrado.

2. 📱 Comportamiento responsivo optimizado:

   • Ahora el bloque se adapta de manera más fluida a diferentes tamaños de pantalla, ofreciendo una experiencia perfecta en dispositivos móviles y de escritorio.

3. 🖼️ Redondeo aplicado a las imágenes:

   • Las imágenes del bloque ahora incluyen bordes redondeados, aportando un toque moderno y elegante al diseño.

¡Hola comunidad! 👋 Nueva versión de ft-core, nuestro plugin diseñado para para que no te tengas que preocupar de la configuración de tailwind en tus proyectos.

🆕 Novedades y mejoras de esta versión

1. 🔧 Corrección de errores:

   • Se han solucionado varios errores menores para garantizar un funcionamiento más estable y consistente.

2. ✨ Nuevas utilidades en el sistema de espaciado y tamaños:

   • -18: Ahora puedes aplicar este valor negativo para espaciado y tamaños, ampliando la flexibilidad de tus diseños.
   • -content: Se añade este valor configurable y fluido, pensado para adaptarse dinámicamente a las necesidades de tus proyectos.

Nueva versión de nuestro tema hijo de Flowtitude, diseñada para hacer tu experiencia más fluida y personalizada. Aquí te contamos todas las novedades:

🆕 Novedades de esta versión

1. 🔄 Reorganización de opciones en subpáginas
   Ahora las configuraciones están distribuidas en subpáginas, facilitando la navegación y el acceso a las herramientas clave.

2. 📦 Carga y actualización de paquetes de opciones
   Hemos añadido la posibilidad de subir y actualizar paquetes de opciones directamente desde el panel de configuración. Esto te permitirá gestionar tus ajustes de manera más eficiente y reutilizar configuraciones en diferentes proyectos.

3. 🌗 Inicio de la sección de configuración de Tailwind

   • Inyección del selector de modo oscuro: Una herramienta esencial para integrar el modo oscuro en tus proyectos de manera automática y sin complicaciones.
   • JS para inicializar el plugin de intersecciones: Ahora puedes implementar animaciones y efectos basados en scroll con mayor facilidad, gracias a la configuración predefinida del plugin de intersecciones.

💡 ¿Qué significa esto para ti?

Estas actualizaciones están diseñadas para ofrecerte:

• Más control sobre tu flujo de trabajo.
• Mejor organización para gestionar configuraciones avanzadas.
• Integración más sencilla de Tailwind y funcionalidades modernas en tus proyectos.

Hoy vamos a sumergirnos en la configuración de Tailwind CSS 3 para personalizar y extender su sistema de diseño predeterminado. 🛠️

Te proporcionaremos dos archivos clave:

1. main.css: Aquí definimos las variables CSS necesarias para adaptar nuestro sistema de diseño.
2. tailwind.config.js: Configuramos los colores personalizados y extendemos los valores básicos de Tailwind.

¿Qué logramos con esta configuración?

• Colores personalizados que amplían los valores por defecto de Tailwind.
• Tipografía y espaciado fluido, garantizando un diseño más adaptable.
• Cuadrículas dinámicas basadas en auto-fit y auto-fill.
• Parámetros básicos para secciones y contenedores.
• Uso del plugin oficial de query containers para una mayor flexibilidad en el diseño responsivo.

Archivo main.css

En este archivo, creamos las variables CSS necesarias para controlar aspectos clave como colores, tipografía, espaciado, etc. Este es a partir del cual debes de personalizar tus proyectos:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        /* Variables para definir las fuentes a utilizar para las clases font-display y font-body */
        --ft-font-body:     'Helvetica', 'Arial';
        --ft-font-display:  'Poppins',  'Helvetica', 'Arial';

        /* Variables para la tipografia fluida */
        --ft-text-xs:   clamp(0.69rem, 0.05vi + 0.68rem, 0.72rem);
        --ft-text-sm:   clamp(0.83rem, 0.12vi + 0.80rem, 0.90rem);
        --ft-text-base: clamp(1.00rem, 0.23vi + 0.94rem, 1.13rem);
        --ft-text-lg:   clamp(1.20rem, 0.38vi + 1.10rem, 1.41rem);
        --ft-text-xl:   clamp(1.44rem, 0.59vi + 1.29rem, 1.76rem);
        --ft-text-2xl:  clamp(1.73rem, 0.86vi + 1.51rem, 2.20rem);
        --ft-text-3xl:  clamp(2.07rem, 1.24vi + 1.76rem, 2.75rem);
        --ft-text-4xl:  clamp(2.49rem, 1.74vi + 2.04rem, 3.43rem);
        --ft-text-5xl:  clamp(2.99rem, 2.40vi + 2.37rem, 4.29rem);
        --ft-text-6xl:  clamp(3.58rem, 3.28vi + 2.74rem, 5.36rem);
        --ft-text-7xl:  clamp(4.30rem, 4.43vi + 3.16rem, 6.71rem);
        --ft-text-8xl:  clamp(5.16rem, 5.93vi + 3.64rem, 8.38rem);
        --ft-text-9xl:  clamp(6.19rem, 7.89vi + 4.16rem, 10.48rem);

        /* Variables para configurar el espaciado fluido */
        --ft-space-4xs: clamp(0.125rem, 0.1042rem + 0.1042vi, 0.1875rem);
        --ft-space-3xs: clamp(0.25rem, 0.2292rem + 0.1042vi, 0.3125rem);
        --ft-space-2xs: clamp(0.5rem, 0.4583rem + 0.2083vi, 0.625rem);
        --ft-space-xs:  clamp(0.75rem, 0.6875rem + 0.3125vi, 0.9375rem);
        --ft-space-sm:  clamp(1rem, 0.9167rem + 0.4167vi, 1.25rem);
        --ft-space-md:  clamp(1.5rem, 1.375rem + 0.625vi, 1.875rem);
        --ft-space-lg:  clamp(2rem, 1.8333rem + 0.8333vi, 2.5rem);
        --ft-space-xl:  clamp(3rem, 2.75rem + 1.25vi, 3.75rem);
        --ft-space-2xl: clamp(4rem, 3.6667rem + 1.6667vi, 5rem);
        --ft-space-3xl: clamp(6rem, 5.5rem + 2.5vi, 7.5rem);
        --ft-space-4xl: clamp(8rem, 7.3333rem + 3.3333vi, 10rem);
        --ft-space-5xl: clamp(9rem, 8.25rem + 3.75vi, 11.25rem);
        --ft-space-6xl: clamp(12rem, 11rem + 5vi, 15rem);
        --ft-space-7xl: clamp(14rem, 12.8333rem + 5.8333vi, 17.5rem);
        --ft-space-8xl: clamp(16rem, 14.6667rem + 6.6667vi, 20rem);

        --ft-space-4xs-3xs: clamp(0.125rem, 0.0625rem + 0.3125vi, 0.3125rem);
        --ft-space-3xs-2xs: clamp(0.25rem, 0.125rem + 0.625vi, 0.625rem);
        --ft-space-2xs-xs:  clamp(0.5rem, 0.3542rem + 0.7292vi, 0.9375rem);
        --ft-space-xs-sm:   clamp(0.75rem, 0.5833rem + 0.8333vi, 1.25rem);
        --ft-space-sm-md:   clamp(1rem, 0.7083rem + 1.4583vi, 1.875rem);
        --ft-space-md-lg:   clamp(1.5rem, 1.1667rem + 1.6667vi, 2.5rem);
        --ft-space-lg-xl:   clamp(2rem, 1.4167rem + 2.9167vi, 3.75rem);
        --ft-space-xl-2xl:  clamp(3rem, 2.3333rem + 3.3333vi, 5rem);
        --ft-space-2xl-3xl: clamp(4rem, 2.8333rem + 5.8333vi, 7.5rem);
        --ft-space-3xl-4xl: clamp(6rem, 4.6667rem + 6.6667vi, 10rem);
        --ft-space-4xl-5xl: clamp(8rem, 6.9167rem + 5.4167vi, 11.25rem);
        --ft-space-5xl-6xl: clamp(9rem, 7rem + 10vi, 15rem);
        --ft-space-6xl-7xl: clamp(12rem, 10.1667rem + 9.1667vi, 17.5rem);
        --ft-space-7xl-8xl: clamp(14rem, 12rem + 10vi, 20rem);

        --ft-space-jumbotron: clamp(9rem, 7rem + 10vi, 15rem);

        /* Variables que definen un borde redondeado para utilziar en los botones, tarjetas o personalizado (rounded-button, rounded-card y rounded-custom) */
        --ft-rounded-button: 0.25rem;
        --ft-rounded-card: 1rem;
        --ft-rounded-custom: 1.5rem;

        /* Variables que definen un grosor de borde para utilziar en los botones, tarjetas o personalizado (border-button, border-card y border-custom) */
        --ft-border-button: 0;
        --ft-border-card:   3px;
        --ft-border-custom: 0.8rem;

        /* Variables para definir el tamaño del content-grid y el espacio adicional (content-wide) */
        --ft-container: 80rem;
        --ft-padding-content-x: clamp(1.5rem, 1.0588rem + 1.9608vw, 2rem);
        --ft-padding-content-y: var(--ft-space-xl);
        --ft-gap-content: var(--ft-space-md);

        /* Variables para definir el tamaño de las utilidades de auto-grid y auto-fit */
        --ft-card-xs: 12rem;
        --ft-card-sm: 14rem;
        --ft-card-md: 18rem;
        --ft-card-lg: 24rem;
        --ft-card-xl: 36rem;
    }
}

@layer components {
}

@layer utilities {
}

Estas variables se conectarán a la configuración de nuestro sistema diseño de forma que puedas hacer los cambios que consideres necesarios para personalizar cada proyecto. En principio las variables que son necesarias modificar es el primer grupo donde definimos la tipografia que vamos a usar. Es recomendable eliminar aquellas variables que no necesites modificar, ya que van incluidas en los plugins que instalamos en el resto de la configuración.

Archivo tailwind.config.js

Configura tus colores personalizados y añade los plugins que necesitas:

export default {
    darkMode: 'class',
    theme: { 
        extend: {
            colors: {
                "primary": {
                    50: "#FFF7EB",
                    100: "#FFF1DB",
                    200: "#FFE0B3",
                    300: "#FFCC80",
                    400: "#FFB647",
                    500: "#FF9900",
                    600: "#E68A00",
                    700: "#C77700",
                    800: "#A86500",
                    900: "#7A4900",
                    950: "#523100"
                },
                "secondary": {
                    50: "#F5F5F9",
                    100: "#ECECF4",
                    200: "#DBDBEB",
                    300: "#C5C5DE",
                    400: "#A7A7CD",
                    500: "#8888BB",
                    600: "#7A7AB3",
                    700: "#6A6AAA",
                    800: "#575799",
                    900: "#3B3B68",
                    950: "#2C2C4E"
                }
            }
        }
    },
    plugins: [
        require('<a data-user_name="flowtitude" class="fcom_mention fcom_route" href="https://flowtitude.com/comunidad/u/flowtitude/">Angel Julian</a>/ft-variables'),
        require('<a data-user_name="flowtitude" class="fcom_mention fcom_route" href="https://flowtitude.com/comunidad/u/flowtitude/">Angel Julian</a>/ft-core'),
        require('@tailwindcss/container-queries'),
    ],
    corePlugins: {
         preflight: false,
    },
}

¿Qué plugins hemos incluido?

1. Variables dinámicas: Integra variables personalizadas basadas en la configuración de Tailwind.
2. Sistema de diseño básico: Añade tipografía y espaciado fluido, cuadrículas dinámicas (auto-fit y auto-fill), y utilidades para secciones y contenedores.
3. Query Containers: Optimiza tu diseño responsivo con el plugin oficial.

Ventajas de esta configuración

💡 Consistencia visual: Usa variables CSS y una base sólida para todos los proyectos.
💡 Escalabilidad: Perfecto para proyectos que evolucionan constantemente.
💡 Flexibilidad: Los plugins permiten una personalización avanzada sin romper la simplicidad de Tailwind.

🎉 Descarga los archivos y comienza ahora mismo desde aquí: Repositorio en Flowtitude

Flowtitude ha liberado un plugin que facilita la generación de variables CSS basadas en la configuración de Tailwind CSS 3.0. Estas variables utilizan los mismos nombres que Tailwind CSS 4.0, garantizando compatibilidad y una migración sencilla al actualizar.

Descripción:

El plugin permite incorporar variables CSS directamente en tus proyectos con Tailwind 3.0, facilitando la personalización y alineándose con los estándares de la próxima versión. Está diseñado para mantener consistencia en tus estilos mientras preparas tu proyecto para futuras actualizaciones.

Instalación:

Puedes integrarlo añadiéndolo en la sección plugins de tu configuración:

require(‘flowtitude/ft-variables’),

Además, este plugin aborda los desafíos específicos al trabajar con Bricks, como la dificultad para aplicar estilos a widgets compuestos donde no es posible añadir clases de utilidad a los elementos internos. También resulta invaluable cuando es necesario escribir CSS personalizado, asegurando que puedas utilizar los valores definidos en tu configuración de Tailwind 3.0.