En esta publicación, se destacan algunas líneas potentes de CSS que realizan un trabajo pesado y te ayudan a compilar diseños modernos y sólidos.
Los diseños modernos de CSS permiten a los desarrolladores escribir reglas de estilo realmente significativas y sólidas con solo presionar unas pocas teclas. En la charla anterior y en esta publicación posterior, se examinan 10 líneas eficaces de CSS que realizan un trabajo pesado.
Para seguir estas demostraciones o jugar con ellas por tu cuenta, consulta la incorporación de Glitch anterior o visita 1linelayouts.glitch.me.
01. Muy centrado: place-items: center
Para el primer diseño de “una sola línea”, vamos a resolver el mayor misterio que existe en todo el mundo de CSS: centrar los elementos. Quiero que sepas que con place-items: center es más fácil de lo que crees.
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 estableces en center, align-items y justify-items se establecerán en center.
.parent {
display: grid;
place-items: center;
}
Esto permite que el contenido se centre perfectamente en el elemento superior, independientemente del tamaño intrínseco.
02. El panqueque desarmado: flex: <grow> <shrink> <baseWidth>
A continuación, tenemos el panqueque desarmado. Por ejemplo, este es un diseño común para sitios de marketing, que puede tener una fila de tres elementos, por lo general, con una imagen, un título y un poco de texto que describen algunas características de un producto. En los dispositivos móviles, queremos que se apilen bien y se expandan a medida que aumentamos el tamaño de la pantalla.
Al usar 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 lo tanto, si deseas que tus cuadros se completen con su tamaño de <flex-basis>, se reduce en tamaños más pequeños, pero no se estiran 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 deseas que los cuadros se estiren y ocupen el espacio a medida que pasan 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 aumentan.
03. La barra lateral dice: grid-template-columns: minmax(<min>, <max>) …)
Esta demostración aprovecha la función minmax para los diseños de cuadrícula. Lo que haremos aquí es configurar el tamaño mínimo de la barra lateral para que sea 150px, pero en pantallas más grandes, lo que permite que se extienda a 25%. La barra lateral siempre ocupará el 25% del espacio horizontal del elemento superior hasta que 25% sea más pequeño 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 (aquí la sección main) 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 deconstruido, este ejemplo no une sus elementos secundarios cuando cambia el tamaño de la pantalla. Este diseño, que suele denominarse pie de página fijo, se usa a menudo para sitios web y apps, 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 a menudo usan 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 será tan alta como el 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;
}
De esta forma, el contenido del encabezado y el pie de página toma el tamaño de sus elementos secundarios automáticamente y aplica el espacio restante (1fr) al área principal, mientras que la fila con el tamaño auto toma el tamaño del contenido mínimo de sus elementos secundarios. Por lo tanto, a medida que el contenido aumente, la fila en sí se ajustará.
05 Diseño clásico del Santo Grial: grid-template: auto 1fr auto / auto 1fr auto
Para este diseño santo grial 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 de 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 el salto entre filas y columnas.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
Como en el último ejemplo, en el que el encabezado y el pie de página tenían contenido de tamaño automático, aquí la barra lateral izquierda y derecha se ajusta automáticamente en función del tamaño intrínseco de sus elementos secundarios. Sin embargo, esta vez es de tamaño horizontal (ancho) en lugar de vertical (alto).
6. Cuadrícula de 12 intervalos: grid-template-columns: repeat(12, 1fr)
A continuación, tenemos otro clásico: la cuadrícula de 12 intervalos. Puedes escribir cuadrículas rápidamente en CSS con la función repeat(). Si usas repeat(12, 1fr); para las columnas de plantillas de cuadrícula, obtendrás 12 columnas cada una de las 1fr.
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}
Ahora tienes una cuadrícula de 12 columnas, podemos colocar nuestros elementos secundarios en la cuadrícula. Una forma de hacer esto sería colocarlos usando líneas de cuadrícula. Por ejemplo, grid-column: 1 / 13 abarcaría desde la primera línea hasta la última (13.a) 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;
}
7. RAM (repetición, automática, mínima): 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 que se posicionan automáticamente. Muy bien. Los términos clave que debes recordar aquí son repeat, auto-(fit|fill) y minmax()', que recuerdas con el acrónimo RAM.
Todo en conjunto se ve así:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Estás usando la repetición de nuevo, 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 todo el ancho de 1fr y, a medida que alcancen 150px de ancho, comenzarán a fluir en la misma línea.
Con auto-fit, los cuadros se estirarán y 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 supere su tamaño de base en la función minmax:
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
8. Alineación: justify-content: space-between
Para 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. Para estas tarjetas, se colocan en un modo de visualización de Flexbox, y la dirección se establece en columna mediante flex-direction: column.
Esto coloca el título, la descripción y el bloque de imagen en una columna vertical dentro de la tarjeta principal. Luego, si aplicas justify-content: space-between, se anclan el primer (título) y el último (bloque de imagen) en los bordes del flexbox, y el texto descriptivo que se encuentra entre ellos se coloca con el mismo espaciado entre cada extremo.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
9. Sujeción de mi estilo: clamp(<min>, <actual>, <max>)
Aquí es donde nos adentraremos en algunas técnicas que son menos compatibles con los navegadores, pero que tienen algunas implicaciones muy interesantes para los diseños y el diseño de IU responsiva. En esta demostración, configurarás el ancho con una abrazadera 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 los valores, puede verse de la siguiente manera:
.parent {
width: clamp(23ch, 60%, 46ch);
}
El tamaño mínimo es de 23ch o 23 unidades de caracteres, y el tamaño máximo es de 46ch (46 caracteres). Las unidades de ancho de caracteres se basan en el tamaño de la fuente del elemento (específicamente, el ancho del glifo 0). El tamaño "real" es del 50%, lo que representa el 50% del ancho superior de este elemento.
La función clamp() permite que este elemento retenga un ancho del 50% 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 redojo el tamaño del elemento superior, el ancho de esta tarjeta aumenta hasta su punto máximo fijo y disminuye a su mínimo fijo. Luego, permanece centrada 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 (más de 46ch) ni demasiado apretado y angosto (menor que 23ch).
Esta también es una excelente manera de implementar tipografía responsiva. Por ejemplo, puedes escribir: font-size: clamp(1.5rem, 20vw, 3rem). En este caso, el tamaño de la fuente de un título siempre se mantendría entre 1.5rem y 3rem, pero aumentaría o se reducirá según el valor real 20vw para adaptarse al ancho del viewport.
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 realiza las pruebas.
10. Respeto por el aspecto: aspect-ratio: <width> / <height>
Y, por último, esta última herramienta de diseño es la más experimental de la lista. Recientemente, se introdujo Chrome Canary en Chromium 84, y Firefox realiza un esfuerzo continuo para implementarlo, pero, por el momento, no está disponible en ninguna edición estable del navegador.
Sin embargo, me gustaría mencionarlo porque es un problema que se resuelve con frecuencia. Y eso es simplemente mantener la relación de aspecto de una imagen.
Con la propiedad aspect-ratio, a medida que se cambia 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 × 9 sin esta propiedad, debes usar un hackeo de padding-top y asignarle un padding de 56.25% para establecer una relación de ancho superior a ancho. Pronto tendremos una propiedad para esto a fin de evitar el hackeo y la necesidad de calcular el porcentaje. Puedes crear un cuadrado con una relación de 1 / 1, una de 2:1 con 2 / 1 y, en realidad, lo que necesites para que esta imagen escale con una relación de tamaño establecida.
.square {
aspect-ratio: 1 / 1;
}
Aunque esta función sigue disponible, es una buena idea conocerla, ya que resuelve muchos conflictos de desarrolladores que enfrenté varias veces, en especial con respecto a los videos y los iframes.
Conclusión
Gracias por seguir este recorrido a través de 10 poderosas líneas de CSS. Para obtener más información, mira el video completo y prueba las demostraciones por tu cuenta.