En esta publicación, se destacan algunas líneas potentes de CSS que hacen un trabajo pesado y te ayudan a crear diseños modernos y sólidos.
Los diseños de CSS modernos permiten a los desarrolladores escribir reglas de diseño realmente significativas y sólidas con solo unas pocas pulsaciones de teclas. En la charla anterior y en esta publicación posterior, se analizan 10 líneas potentes de CSS que hacen un trabajo pesado.
Para seguir estas demostraciones o jugar con ellas por tu cuenta, consulta la incorporación de Glitch que aparece más arriba o visita 1linelayouts.glitch.me.
01. Super centrado: place-items: center
Para el primer diseño de "línea única", resolvamos el mayor misterio de todo el mundo del CSS: centrar elementos. Quiero que sepas que es más fácil de lo que crees con place-items: center.
Primero, especifica grid como el método display y, luego, escribe place-items: center en el mismo elemento. place-items es una abreviatura para configurar align-items y justify-items a la vez. Si lo configuras en center, tanto align-items como justify-items se establecerán en center.
.parent {
display: grid;
place-items: center;
}
Esto permite que el contenido se centre perfectamente dentro del elemento superior, independientemente del tamaño intrínseco.
02. El panqueque desmenuzado: flex: <grow> <shrink> <baseWidth>
A continuación, tenemos el panqueque desmenuzado. Este es un diseño común para los sitios de marketing, por ejemplo, que pueden tener una fila de 3 elementos, por lo general, con una imagen, un título y, luego, un texto que describe algunas características de un producto. En dispositivos móviles, queremos que se apilen bien y se expandan a medida que aumentamos el tamaño de la pantalla.
Si usas Flexbox para este efecto, no necesitarás consultas de medios para ajustar la posición de estos elementos cuando se cambie el tamaño de la pantalla.
La abreviatura flex significa flex: <flex-grow> <flex-shrink> <flex-basis>.
Por este motivo, si deseas que tus cuadros se expandan hasta su tamaño <flex-basis>, se reduzcan en tamaños más pequeños, pero no se expandan para llenar cualquier espacio adicional, escribe: flex: 0 1 <flex-basis>. En este caso, tu <flex-basis> es 150px, por lo que se ve de la siguiente manera:
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
Si quieres que los cuadros se estiren y llenen el espacio a medida que se unen a la siguiente línea, establece <flex-grow> en 1, de modo que se vea de la siguiente manera:
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
Ahora, a medida que aumentas o disminuyes el tamaño de la pantalla, estos elementos flex se contraen y crecen.
03. La barra lateral dice: grid-template-columns: minmax(<min>, <max>) …)
Esta demostración aprovecha la función minmax para diseños de cuadrícula. Lo que hacemos aquí es establecer el tamaño mínimo de la barra lateral en 150px, pero en pantallas más grandes, permitimos que se extienda a 25%. La barra lateral siempre ocupará 25% del espacio horizontal de su elemento superior hasta que ese 25% sea menor que 150px.
Agrega esto como un valor de grid-template-columns con el siguiente valor: minmax(150px, 25%) 1fr. El elemento de la primera columna (la barra lateral en este caso) obtiene un minmax de 150px en 25%, y el segundo elemento (la sección main aquí) ocupa el resto del espacio como una sola pista 1fr.
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
04. Pila de panqueques: grid-template-rows: auto 1fr auto
A diferencia del panqueque desmenuzado, este ejemplo no une sus elementos secundarios cuando cambia el tamaño de la pantalla. Comúnmente conocido como pie de página fijo, este diseño se usa con frecuencia para sitios web y aplicaciones, en aplicaciones para dispositivos móviles (el pie de página suele ser una barra de herramientas) y sitios web (las aplicaciones de una sola página suelen usar este diseño global).
Si agregas display: grid al componente, obtendrás una cuadrícula de una sola columna. Sin embargo, el área principal solo tendrá la altura del contenido con el pie de página debajo.
Para que el pie de página se quede en la parte inferior, agrega lo siguiente:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
Esto establece el contenido del encabezado y el pie de página para que tome automáticamente el tamaño de sus elementos secundarios y aplique el espacio restante (1fr) al área principal, mientras que la fila de tamaño auto tomará el tamaño del contenido mínimo de sus elementos secundarios, de modo que, a medida que el contenido aumente de tamaño, la fila en sí crecerá para ajustarse.
05. Diseño clásico de Holy Grail: grid-template: auto 1fr auto / auto 1fr auto
En este diseño clásico, hay un encabezado, un pie de página, una barra lateral izquierda, una barra lateral derecha y contenido principal. Es similar al diseño anterior, pero ahora con barras laterales.
Para escribir toda esta cuadrícula con una sola línea de código, usa la propiedad grid-template. Esto te permite configurar las filas y las columnas al mismo tiempo.
El par propiedad y valor es: grid-template: auto 1fr auto / auto 1fr auto. La barra entre la primera y la segunda lista separada por espacios es la división entre filas y columnas.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
Al igual que en el último ejemplo, en el que el encabezado y el pie de página tenían contenido con tamaño automático, aquí las barras laterales izquierda y derecha se ajustan automáticamente según el tamaño intrínseco de sus elementos secundarios. Sin embargo, esta vez es el tamaño horizontal (ancho) en lugar del vertical (altura).
06. Cuadrícula de 12 divisiones: grid-template-columns: repeat(12, 1fr)
A continuación, tenemos otro clásico: la cuadrícula de 12 tramos. Puedes escribir cuadrículas rápidamente en CSS con la función repeat(). Si usas repeat(12, 1fr); para las columnas de la plantilla de cuadrícula, obtendrás 12 columnas de 1fr.
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}
Ahora que tienes una cuadrícula de segmentos de 12 columnas, podemos colocar nuestros elementos secundarios en ella. Una forma de hacerlo es colocarlos con líneas de cuadrícula. Por ejemplo, grid-column: 1 / 13 abarcaría desde la primera línea hasta la última (la 13ª) y abarcaría 12 columnas. grid-column: 1 / 5; abarcaría los primeros cuatro.
Otra forma de escribir esto es con la palabra clave span. Con span, estableces la línea de partida y, luego, cuántas columnas abarcará desde ese punto de partida. En este caso, grid-column: 1 / span 12 sería equivalente a grid-column: 1 / 13, y grid-column: 2 / span 6 sería equivalente a grid-column: 2 / 8.
.child-span-12 {
grid-column: 1 / span 12;
}
07. RAM (repetir, automático, min-max): grid-template-columns(auto-fit, minmax(<base>, 1fr))
En este séptimo ejemplo, combina algunos de los conceptos que ya aprendiste para crear un diseño responsivo con elementos secundarios flexibles y posicionados automáticamente. Muy bien. Los términos clave que debes recordar aquí son repeat, auto-(fit|fill) y minmax()', que puedes recordar con el acrónimo RAM.
En conjunto, se ve de la siguiente manera:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Vuelves a usar la función repetir, pero esta vez, con la palabra clave auto-fit en lugar de un valor numérico explícito. Esto permite la colocación automática de estos elementos secundarios. Estos elementos secundarios también tienen un valor mínimo base de 150px con un valor máximo de 1fr, lo que significa que, en pantallas más pequeñas, ocuparán el ancho completo de 1fr y, a medida que alcancen 150px de ancho cada uno, comenzarán a fluir en la misma línea.
Con auto-fit, los cuadros se estirarán a medida que su tamaño horizontal supere los 150 px para llenar todo el espacio restante. Sin embargo, si lo cambias a auto-fill, no se estirarán cuando se supere su tamaño base en la función minmax:
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
08. Alineación: justify-content: space-between
En el siguiente diseño, el punto principal que se debe demostrar aquí es justify-content: space-between, que coloca el primer y el último elemento secundario en los bordes de su cuadro de límite, con el espacio restante distribuido de manera uniforme entre los elementos. En el caso de estas tarjetas, se colocan en un modo de visualización de Flexbox, y la dirección se establece en columna con flex-direction: column.
Esto coloca el título, la descripción y el bloque de imágenes en una columna vertical dentro de la tarjeta principal. Luego, aplicar justify-content: space-between ancla los elementos primero (título) y último (bloque de imagen) a los bordes del flexbox, y el texto descriptivo entre ellos se coloca con el mismo espaciado en cada extremo.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09. Clamping My Style: clamp(<min>, <actual>, <max>)
Aquí es donde abordamos algunas técnicas con menos compatibilidad con los navegadores, pero que tienen implicaciones muy interesantes para los diseños de la IU responsiva y de los diseños. En esta demostración, estableces el ancho con el límite de la siguiente manera: width: clamp(<min>, <actual>, <max>).
De esta manera, se establece un tamaño mínimo y máximo absolutos, y un tamaño real. Con valores, puede verse de la siguiente manera:
.parent {
width: clamp(23ch, 60%, 46ch);
}
El tamaño mínimo aquí es 23ch o 23 unidades de caracteres, y el máximo es 46ch, 46 caracteres. Las unidades de ancho de caracteres se basan en el tamaño de fuente del elemento (específicamente, el ancho del glifo 0). El tamaño "real" es del 50%, que representa el 50% del ancho superior de este elemento.
Lo que hace la función clamp() aquí es permitir que este elemento retenga un ancho del 50% hasta que el 50% sea mayor que 46ch (en viewports más amplios) o menor que 23ch (en viewports más pequeños). Puedes ver que, a medida que estiro y reduzco el tamaño superior, el ancho de esta tarjeta aumenta hasta su punto máximo ajustado y disminuye hasta su punto mínimo ajustado. Luego, permanece centrado en el elemento superior, ya que aplicamos propiedades adicionales para centrarlo. Esto permite diseños más legibles, ya que el texto no será demasiado ancho (por encima de 46ch) ni demasiado comprimido y estrecho (menos de 23ch).
Esta también es una excelente manera de implementar la tipografía responsiva. Por ejemplo, puedes escribir lo siguiente: font-size: clamp(1.5rem, 20vw, 3rem). En este caso, el tamaño de fuente de un título siempre se mantendría entre 1.5rem y 3rem, pero aumentaría y disminuiría según el valor real de 20vw para adaptarse al ancho de la vista del puerto.
Esta es una excelente técnica para garantizar la legibilidad con un valor de tamaño mínimo y máximo, pero recuerda que no es compatible con todos los navegadores modernos, así que asegúrate de tener resguardos y realizar las pruebas.
10. Respeto por el aspecto: aspect-ratio: <width> / <height>
Por último, esta última herramienta de diseño es la más experimental de todas. Recientemente, se introdujo en Chrome Canary en Chromium 84, y Firefox está trabajando activamente para implementarlo, pero actualmente no se encuentra en ninguna edición estable del navegador.
Sin embargo, quiero mencionar esto porque es un problema muy frecuente. Y eso es simplemente mantener la relación de aspecto de una imagen.
Con la propiedad aspect-ratio, a medida que cambio el tamaño de la tarjeta, el bloque visual verde mantiene esta relación de aspecto de 16 × 9. Respetamos la relación de aspecto con aspect-ratio: 16 / 9.
.video {
aspect-ratio: 16 / 9;
}
Para mantener una relación de aspecto de 16 x 9 sin esta propiedad, deberás usar un hack de padding-top y darle un padding de 56.25% para establecer una relación de altura a ancho. Pronto tendremos una propiedad para evitar el hackeo y la necesidad de calcular el porcentaje. Puedes crear un cuadrado con una proporción de 1 / 1, una proporción de 2 a 1 con 2 / 1 y cualquier cosa que necesites para que esta imagen se ajuste a una proporción de tamaño establecida.
.square {
aspect-ratio: 1 / 1;
}
Si bien esta función aún está en desarrollo, es bueno conocerla, ya que resuelve muchos problemas de los desarrolladores que yo mismo he enfrentado muchas veces, en especial en el caso de los videos y los iframes.
Conclusión
Gracias por seguir este recorrido por 10 líneas potentes de CSS. Para obtener más información, mira el video completo y prueba las demostraciones por tu cuenta.