En esta publicación, se destacan algunas líneas potentes de CSS que realizan un trabajo pesado y te ayudan a crear 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 unas pocas teclas. La charla anterior y la publicación subsiguiente analizan 10 potentes líneas de CSS que realizan un trabajo pesado.
Para seguir o probar estas demostraciones por tu cuenta, echa un vistazo a la incorporación de Glitch anterior o visita 1linelayouts.glitch.me.
01. Supercentrado: place-items: center
Para el primer diseño de una sola línea, resuelvamos el mayor misterio de todo el terreno de las CSS: centrar las cosas. 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 establecer align-items y justify-items a la vez. Si se establece en center, tanto align-items como justify-items se establecerán en center.
.parent {
display: grid;
place-items: center;
}
Esto permite que el contenido esté perfectamente centrado en el elemento superior, independientemente del tamaño intrínseco.
02. El panqueque desarmado: flex: <grow> <shrink> <baseWidth>
Ahora tenemos el panqueque desarmado. Este es un diseño común para los sitios de marketing, por ejemplo, que puede tener una fila de 3 elementos, generalmente con una imagen, un título y, luego, algo de texto en el que se describen algunas características de un producto. En dispositivos móviles, querremos que se apilen bien y se expandan a medida que aumentemos 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 lo tanto, si quieres que tus cuadros se completen a su tamaño de <flex-basis>, redúcelos a tamaños más pequeños, pero no estira para llenar cualquier espacio adicional, escribe: flex: 0 1 <flex-basis>. En este caso, tu <flex-basis> es 150px, por lo que se verá de la siguiente manera:
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
Si sí quieres que los cuadros se estiren y llenen el espacio a medida que se ajustan a la siguiente línea, establece <flex-grow> en 1, para 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 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% se vuelva 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 (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 Pancake deconstruido, este ejemplo no une sus elementos secundarios cuando cambia el tamaño de la pantalla. Este diseño, que comúnmente se conoce como pie de página fijo, se usa 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. 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 adhiera a la parte inferior, agrega lo siguiente:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
De esta manera, se configura el contenido del encabezado y del pie de página para que tome automáticamente el tamaño de sus elementos secundarios, y se aplica el espacio restante (1fr) al área principal, mientras que la fila de tamaño auto tomará el tamaño mínimo de sus elementos secundarios, de modo que, a medida que aumente de tamaño el contenido, la fila en sí se ampliará para ajustarse.
05 Diseño clásico del Santo Grial: grid-template: auto 1fr auto / auto 1fr auto
Para este diseño clásico del 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 con barras laterales.
Para escribir esta cuadrícula completa con una sola línea de código, usa la propiedad grid-template. Esto te permite establecer las filas y columnas al mismo tiempo.
El par de propiedad y valor es: grid-template: auto 1fr auto / auto 1fr auto. La barra que se encuentra entre la primera y la segunda lista separada por espacios es la interrupción entre filas y columnas.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
Como en el último ejemplo, donde 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 hijos. Sin embargo, esta vez es de tamaño horizontal (ancho) en lugar de vertical (altura).
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 la plantilla 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 seguimiento 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) 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 inicio y, luego, la cantidad de columnas que deseas abarcar desde ese punto de partida. En este caso, grid-column: 1 / span 12 equivaldría a grid-column: 1 / 13, y grid-column: 2 / span 6 a grid-column: 2 / 8.
.child-span-12 {
grid-column: 1 / span 12;
}
7. RAM (repetición, automática, mín. máx.): grid-template-columns(auto-fit, minmax(<base>, 1fr))
Para este séptimo ejemplo, combina algunos de los conceptos que ya aprendiste para crear un diseño adaptable con elementos secundarios flexibles y ubicados automáticamente. Estupendo. Los términos clave que debes recordar aquí son repeat, auto-(fit|fill) y minmax()', que recuerdas con el acrónimo RAM.
Todo junto, se ve así:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Estás usando la función de nuevo, pero esta vez, con la palabra clave auto-fit en lugar de un valor numérico explícito. De esta manera, podrás colocar automáticamente esos 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, comenzarán a fluir en la misma línea.
Con auto-fit, los cuadros se estirarán a medida que su tamaño horizontal supera 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 base en la función minmax:
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
8. Selección de contenido: 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 de límite, con el espacio restante distribuido de manera uniforme entre los elementos. Para estas tarjetas, se colocan en un modo de visualización de Flexbox, con la dirección que se establece en la columna mediante flex-direction: column.
Esto colocará el título, la descripción y el bloque de imagen en una columna vertical dentro de la tarjeta principal. Luego, aplicar justify-content: space-between ancla el primer elemento (título) y el último (bloque de imagen) a los bordes del flexbox, y el texto descriptivo intermedio se coloca con un espaciado igual a cada extremo.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
9. Aplicar ajustes de estilo: clamp(<min>, <actual>, <max>)
Aquí veremos algunas técnicas con menos compatibilidad con navegadores, pero tuvieron 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, es decir, 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%, que representa el 50% del ancho principal de este elemento.
Lo que hace la función clamp() aquí es permitir que este elemento retenga un 50% de ancho hasta que un 50% sea mayor que 46ch (en viewports más amplios) o inferior a 23ch (en viewports más pequeños). Puedes ver que, a medida que estiro y redujo el tamaño superior, el ancho de esta tarjeta aumenta a su punto máximo restringido y disminuye a su mínimo restringido. Luego, permanece centrada en el elemento superior, ya que le aplicamos propiedades adicionales. De esta manera, se permiten diseños más legibles, ya que el texto no será demasiado ancho (más de 46ch) ni demasiado apretado y estrecho (menos de 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 fijaría entre 1.5rem y 3rem, pero aumentaría y se reduciría en función del 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 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. Hace poco se introdujo Chrome Canary en Chromium 84, y Firefox realiza un esfuerzo activo para implementar esta función, pero, por el momento, no se encuentra disponible en ninguna edición estable de los navegadores.
Sin embargo, quiero mencionar esto, ya que es un problema que se resuelve con mucha 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, tendrías que usar un truco de padding-top y agregarle un padding de 56.25% para establecer una relación de ancho de parte superior. Pronto tendremos una propiedad para evitar el hackeo y la necesidad de calcular el porcentaje. Puedes hacer un cuadrado con una relación de aspecto de 1 / 1, una de 2 a 1 con 2 / 1 y, en realidad, todo lo que necesites para que esta imagen se ajuste con una relación de tamaño establecida.
.square {
aspect-ratio: 1 / 1;
}
Si bien esta función sigue en desarrollo, es una buena idea conocerla, ya que resuelve muchas dificultades de los desarrolladores a las que me he enfrentado muchas veces, especialmente cuando se trata de videos e iframes.
Conclusión
Gracias por seguir este recorrido por 10 potentes líneas de CSS. Para obtener más información, mira el video completo y prueba las demostraciones por tu cuenta.