Etiquetas
14 artículos
Tokens de diseño, APIs de componentes y los patrones organizativos que convierten un sistema de diseño en un multiplicador de fuerza en lugar de una carga de mantenimiento.
Cómo estructurar el CSS en aplicaciones grandes: tokens de diseño, patrones de componentes, clases de utilidad y los principios que evitan la entropía de las hojas de estilo con el tiempo.
Una guía práctica para crear diseños responsivos con container queries y subgrid en CSS, que aborda la capacidad de respuesta a nivel de componente, la herencia de alineación y patrones aplicables a cuadrículas de tarjetas y paneles de control.
Una guía práctica para crear animaciones de desplazamiento de alto rendimiento usando timelines de scroll nativos de CSS, transiciones de vista y la propiedad animation-timeline, sin dependencias de JavaScript.
Crea componentes verdaderamente responsivos con CSS container queries que se adaptan al tamaño de su contenedor en lugar del viewport, permitiendo layouts reutilizables que funcionan en barras laterales, modales y áreas de contenido principal sin cambios.
Crea animaciones vinculadas al scroll de alto rendimiento con la API de animaciones controladas por scroll de CSS, con ejemplos prácticos de líneas de tiempo de progreso, view timelines, efectos parallax y transformaciones de encabezados sticky que se ejecutan fuera del hilo principal.
Domina técnicas avanzadas de CSS Grid como subgrid, áreas con nombre y reordenamiento responsive, algoritmos de colocación automática, dimensionado intrínseco con minmax y composición de componentes consciente del grid para layouts en producción.
Aprende cómo las container queries de CSS te permiten crear componentes verdaderamente responsivos que se adaptan al tamaño de su elemento padre en lugar del viewport, habilitando módulos de UI portables que funcionan en cualquier contexto de layout.
Domina patrones prácticos de diseño CSS usando Grid, Flexbox, container queries y propiedades lógicas que resuelven desafíos reales de diseño responsivo sin JavaScript ni cadenas complejas de media queries.
Domina las técnicas de animación con CSS y JavaScript aceleradas por GPU que ofrecen un rendimiento constante de 60 fps sin causar layout thrashing ni saltos de fotogramas.
Cómo las container queries de CSS permiten que los componentes respondan al tamaño de su contenedor padre en lugar del viewport, habilitando componentes responsivos realmente reutilizables.
Cómo los design tokens crean una única fuente de verdad para colores, espaciado y tipografía entre herramientas de diseño y código, eliminando la divergencia entre Figma y producción.
Container queries, tipografía fluida, dimensionamiento intrínseco y clamp() de CSS — técnicas modernas de diseño responsivo que reducen la dependencia de las media queries y logran layouts verdaderamente flexibles.
CSS Grid permite layouts bidimensionales que antes eran imposibles sin hacks: aprende el modelo de grid, las reglas de posicionamiento y los patrones responsive que reemplazan a los layouts basados en floats.