En esta publicación, se destacan algunas líneas potentes de CSS que realizan tareas importantes 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 sólidas y significativas con solo presionar algunas teclas. En la charla anterior y en esta publicación posterior, se analizan 10 líneas potentes de CSS que realizan tareas importantes.
Para seguir las demostraciones o probarlas por tu cuenta, consulta la incorporación del sitio anterior o visita 1linelayouts.com.
01. Súper centrado: place-items: center
Para el primer diseño de "una sola línea", resolvamos el mayor misterio de todo el mundo de 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 establecer 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 principal, independientemente del tamaño intrínseco.
02. El panqueque deconstruido: flex: <grow> <shrink> <baseWidth>
A continuación, tenemos el panqueque desarmado. 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, algo de texto que describa algunas características de un producto. En dispositivos móviles, queremos que se apilen de forma adecuada y que 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 ubicación de estos elementos cuando 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 casillas se completen hasta su tamaño <flex-basis>, se reduzcan en tamaños más pequeños, pero no se estiren para llenar ningún 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 las casillas se estiren y llenen el espacio a medida que se ajustan 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 flexibles se contraen y expanden.
03. La barra lateral dice: grid-template-columns: minmax(<min>, <max>) …)
En esta demostración, se aprovecha la función minmax para los 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 hasta 25%. La barra lateral siempre ocupará 25% del espacio horizontal de su elemento principal 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 un solo segmento 1fr.
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
04. Pancake Stack: grid-template-rows: auto 1fr auto
A diferencia de Deconstructed Pancake, este ejemplo no ajusta sus elementos secundarios cuando cambia el tamaño de la pantalla. Este diseño, que se conoce comúnmente como pie de página fijo, se suele usar tanto en sitios web como en aplicaciones, en aplicaciones para dispositivos móviles (el pie de página suele ser una barra de herramientas) y en 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, pero 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 que el contenido del encabezado y el pie de página tome automáticamente el tamaño de sus elementos secundarios y aplica el espacio restante (1fr) al área principal, mientras que la fila con tamaño auto tomará el tamaño del contenido mínimo de sus elementos secundarios, de modo que, a medida que ese contenido aumente de tamaño, la fila en sí crecerá para ajustarse.
05. Diseño clásico de Santo Grial: grid-template: auto 1fr auto / auto 1fr auto
En este diseño clásico de Santo Grial, 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 tiene barras laterales.
Para escribir toda esta cuadrícula con una sola línea de código, usa la propiedad grid-template. Esto te permite establecer 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 separadas por espacios es la separació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 dimensionan automáticamente según el tamaño intrínseco de sus elementos secundarios. Sin embargo, esta vez se trata del tamaño horizontal (ancho) en lugar del vertical (alto).
06. Cuadrícula de 12 tramos: 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 cada una.
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}
Ahora que tienes una cuadrícula de seguimiento de 12 columnas, podemos colocar nuestros elementos secundarios en la cuadrícula. Una forma de hacerlo sería 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 usando la palabra clave span. Con span, estableces la línea de inicio y, luego, la cantidad de columnas que se abarcarán 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 (Repeat, Auto, MinMax): 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 adaptable con elementos secundarios flexibles y colocados automáticamente. Es muy útil. 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));
}
Estás usando repeat again, pero esta vez con la palabra clave auto-fit en lugar de un valor numérico explícito. Esto habilita 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 un ancho de 150px cada uno, comenzarán a fluir en la misma línea.
Con auto-fit, las casillas se estirarán a medida que su tamaño horizontal supere los 150 px para llenar todo el espacio restante. Sin embargo, si cambias esto a auto-fill, no se estirarán cuando se exceda 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 delimitador, 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 Flexbox, con la dirección establecida 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 fija el primer (título) y el último (bloque de imagen) elemento 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. Cómo sujetar Mi estilo: clamp(<min>, <actual>, <max>)
Aquí es donde veremos algunas técnicas con menos compatibilidad con el navegador, pero que tienen implicaciones muy interesantes para los diseños y el diseño de IU responsivo. En esta demostración, establecerás el ancho con clamp de la siguiente manera: width: clamp(<min>, <actual>, <max>).
Esto establece un tamaño mínimo y máximo absoluto, y un tamaño real. Con valores, se puede ver 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 tamaño máximo es 46ch, 46 caracteres. Las unidades de ancho de carácter se basan en el tamaño de fuente del elemento (específicamente, el ancho del glifo 0). El tamaño "real" es del 50%, lo que representa el 50% del ancho del elemento principal.
Lo que hace la función clamp() aquí es permitir que este elemento conserve un 50% de ancho hasta que el 50% sea mayor que 46ch (en viewports más anchos) o menor que 23ch (en viewports más pequeños). Puedes ver que, a medida que estiro y achico el tamaño del elemento principal, el ancho de esta tarjeta aumenta hasta su punto máximo restringido y disminuye hasta su mínimo restringido. 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 (por debajo de 23ch).
También es una excelente manera de implementar la tipografía adaptable. Por ejemplo, podrías escribir: font-size: clamp(1.5rem, 20vw, 3rem). En este caso, el tamaño de fuente de un encabezado siempre se mantendría entre 1.5rem y 3rem, pero aumentaría y disminuiría según el valor real de 20vw para ajustarse al ancho de la ventana gráfica.
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 alternativas y realizar pruebas.
10. Respetar la relación de aspecto: aspect-ratio: <width> / <height>
Por último, esta última herramienta de diseño es la más experimental de todas. Se introdujo recientemente en Chrome Canary en Chromium 84, y Firefox está trabajando activamente para implementarlo, pero actualmente no está disponible en ninguna edición estable del navegador.
Sin embargo, quiero mencionarlo porque es un problema que se presenta con frecuencia. 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 x 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ías usar un truco de padding-top y darle un padding de 56.25% para establecer una relación de arriba 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, en realidad, cualquier cosa que necesites para que esta imagen se ajuste con 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, especialmente cuando se trata de videos y elementos iframe.
Conclusión
Gracias por acompañarnos en 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.