Estilización de Componentes CSS con Container Queries

¿Cómo integrar Container Queries en tu Design System?

¡Hola a todos los entusiastas de CSS! ¡Prepárense para adentrarse en el fascinante mundo de las Container Queries! Este concepto revolucionario posibilita un control fino sobre el diseño de cada componente, permitiendo agregar especificaciones únicas dependiendo del espacio disponible en su contenedor. Hoy veremos cómo integrar esta funcionalidad dentro de nuestro Design System de Figma a través de CSS y algunas buenas prácticas de codificación en JavaScript. Vamos a comenzar a implementar este poderoso recurso en nuestra clase de CSS.

¿Cómo estilizar la cart inicial en CSS?

Comenzamos a estructurar y estilizar nuestra cart configurando una serie de propiedades básicas que reflejan el diseño decidido en Figma. Los pasos incluyen:

1. Fondo y Borde:

   .cart {
       border: 2px solid var(--black);
       border-radius: 12px;
       background-color: var(--white);
       padding: 24px;
       display: flex;
       flex-direction: row;
   }
   

   • Establece un color de borde y fondo utilizando variables que aseguran consistencia en el diseño.
   • Aplicamos flexbox y direccionamos los elementos internos en una fila para lograr la estructura deseada.

2. Efecto Hover:

   .cart:hover {
       box-shadow: -4px 4px 0px var(--black);
       transform: translate(4px, 4px);
       transition: all 0.3s ease-in-out;
   }
   

   • Agregamos un box-shadow y efectos de transición transform para una experiencia de usuario más fluida y atractiva al pasar el mouse sobre el componente.

¿Cómo replicar estructuras en CSS utilizando plantillas anteriores?

Ahorrar tiempo en el desarrollo es vital y repetir estructuras de código base es una práctica común. Se pueden adaptar estilos anteriores cambiando únicamente el nombre del selector:

1. Uso de búsqueda y reemplazo en Visual Studio Code para cambiar de .button a .cart.
2. Adaptación de la lógica de títulos y descripciones en JavaScript sin necesidad de crear etiquetas innecesarias.

¿Cómo implementar Container Queries?

Container Queries son extremadamente útiles para modificar estilos según el tamaño del contenedor en el que se encuentra un componente. Aquí tienes los pasos que seguimos:

1. Crear un Wrapper para el Contenedor:

   .wrapper {
       resize: horizontal;
       overflow: auto;
       container: cart / inline-size;
   }
   

   • Creamos un container, empleando inline-size para permitir el ajuste a través del contenedor padre.

2. Aplicar Queries:

   @container cart (max-width: 400px) {
       .cart {
           flex-direction: column;
       }
       .cart__avatar {
           margin-bottom: 24px;
       }
   
       .cart__content {
           align-items: center;
       }
   }
   

   • Estas consultas nos permiten ajustar la dirección de los flex-items y los márgenes, alterando el diseño responsivo según el tamaño del contenedor sin depender del ancho del viewport.

¿Cómo revisar los cambios en Storybook?

Vamos a Storybook para observar cómo nuestros estilos CSS y Container Queries afectan dinámicamente a la cart al cambiar las dimensiones del contenedor. Utiliza herramientas de inspección para confirmar el comportamiento esperado de los estilos. Asegúrate de que el contenedor principal, wrapper, esté correctamente implementado en JavaScript para que el CSS haga efecto.

Consejos prácticos con flexbox

• Centrado vertical: Con align-items: center, conseguimos que el contenido del contenedor se alinee verticalmente.
• Espaciado interno: Es fundamental guiarse siempre por las especificaciones de diseño en Figma, aplicando propiedades como gap para mantener un diseño limpio y coherente.

Container Queries son un ejemplo perfecto de cómo CSS sigue evolucionando para dar soluciones más segmentadas y efectivas al diseño flexible y adaptable. Con estos conocimientos, eres capaz de integrar increíbles mejoras responsivas en componentes dentro de un Design System. Sigue experimentando y aplicando, que el mundo del CSS es vasto y lleno de oportunidades para innovar. ¡Nos vemos en nuestra próxima aventura de diseño!