Estilización de Componentes CSS con Container Queries

Curso de Storybook: Sistemas de Diseño con JavaScript

Contenido del curso

Visión general de los sistemas de diseño en desarrollo

Desarrollo de componentes

Historias en Storybook

Essential Addons en Storybook

Pruebas de componentes en Storybook

Próximos pasos

21
Qué sigue después de Storybook
01:17 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0022:02

Estilización de Componentes CSS con Container Queries

Curso de Storybook: Sistemas de Diseño con JavaScript

Clase 10 de 21

Clase 10 / 21

Recursos

¿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:

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.

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:

Uso de búsqueda y reemplazo en Visual Studio Code para cambiar de .button a .cart.
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:

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.

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!

Visión general de los sistemas de diseño en desarrollo

Qué es Storybook y para qué sirve

Creación de Sistemas de Diseño con Storybook

Desarrollo de componentes

Instalación de Storybook con Vanilla JavaScript

Arquitectura de componentes en Storybook con Atomic Design

Exportar design tokens de Figma a CSS

Crear un botón reutilizable con Storybook

Estilización de Botones en CSS: Clases y Hover Interactivo

Componente Card en JavaScript con BEM

Container Queries vs Media Queries en CSS

Estilización de Componentes CSS con Container Queries

Historias en Storybook

Cómo estructurar historias en Storybook

Controles de argTypes para botones en Storybook

Parámetros y decoradores en Storybook

Essential Addons en Storybook

Qué son los add-ons en Storybook

Actions y Backgrounds en Storybook

Viewports y outline en Storybook

Pruebas de componentes en Storybook

Cómo usar el test runner de Storybook

Pruebas de Interacción con Storybook y Testing Library

Pruebas de Accesibilidad en Storybook con Add-ons

Pruebas visuales de UI con Chromatic

Próximos pasos

Qué sigue después de Storybook

Estilización de Componentes CSS con Container Queries

Progreso del curso

Visión general de los sistemas de diseño en desarrollo

Desarrollo de componentes

Historias en Storybook

Essential Addons en Storybook

Pruebas de componentes en Storybook

Próximos pasos

Recursos

Recursos