Esta publicación destaca algunas líneas poderosas de CSS que hacen un gran trabajo pesado y lo ayudan a crear diseños modernos y sólidos.
Los diseños de CSS modernos permiten a los desarrolladores escribir reglas de estilo realmente significativas y sólidas con solo unas pocas teclas. La charla anterior y esta publicación posterior examinan 10 poderosas líneas de CSS que hacen un gran trabajo pesado.
Para seguir o jugar con estas demostraciones por su cuenta, consulte la inserción de Glitch arriba o visite 1linelayouts.glitch.me.
01. Supercentrado: place-items: center
Para el primer diseño de ‘una sola línea’, resolvamos el mayor misterio en todo el terreno de CSS: centrar las cosas. Quiero que sepas que es más fácil de lo que piensas con place-items: center.
Primero especifique grid como el display método, y luego escribir place-items: center en el mismo elemento. place-items es una forma abreviada de definir tanto align-items y justify-items En seguida. Configurándolo en center, ambos align-items y justify-items están configurados para center.
.parent {
display: grid;
place-items: center;
}Esto permite que el contenido esté perfectamente centrado dentro del padre, independientemente del tamaño intrínseco.
02. El panqueque deconstruido: flex: <grow> <shrink> <baseWidth>
¡A continuación tenemos el panqueque deconstruido! 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, 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.
Al usar Flexbox para este efecto, no necesitará consultas de medios para ajustar la ubicación de estos elementos cuando la pantalla cambie de tamaño.
los flex abreviatura significa: flex: <flex-grow> <flex-shrink> <flex-basis>.
Por eso, si desea que sus casillas se llenen a su <flex-basis> tamaño, encoger en tamaños más pequeños, pero no tramo para llenar cualquier espacio adicional, escriba: flex: 0 1 <flex-basis>. En este caso, su <flex-basis> es 150px entonces se ve así:
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}Si tu hacer desea que los cuadros se estiren y llenen el espacio a medida que se ajustan a la siguiente línea, configure el <flex-grow> a 1, por lo que se vería así:
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}Ahora, a medida que aumenta o disminuye el tamaño de la pantalla, estos elementos flexibles se encogen y crecen.
Esta demostración aprovecha las mínimo máximo función para diseños de cuadrícula. Lo que estamos haciendo aquí es establecer el tamaño mínimo de la barra lateral en 150px, pero en pantallas más grandes, permitiendo que eso se extienda a 25%. La barra lateral siempre ocupará 25% del espacio horizontal de su padre hasta que 25% se vuelve más pequeño que 150px.
Agregue esto como un valor de grid-template-columnas 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 a 25%, y el segundo elemento (el main sección aquí) ocupa el resto del espacio como un solo 1fr pista.
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}04. Pila de panqueques: grid-template-rows: auto 1fr auto
A diferencia de Deconstructed Pancake, este ejemplo no envuelve a sus hijos cuando cambia el tamaño de la pantalla. Comúnmente conocido como pie de página pegajoso, este diseño se usa a menudo tanto para sitios web como para aplicaciones, en aplicaciones móviles (el pie de página es comúnmente una barra de herramientas) y sitios web (las aplicaciones de una sola página a menudo usan este diseño global).
Añadiendo display: grid al componente le dará 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 pegue al final, agregue:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}Esto configura el contenido del encabezado y pie de página para que tome automáticamente el tamaño de sus hijos y aplica el espacio restante (1fr) al área principal, mientras que el auto La fila de tamaño tomará el tamaño del contenido mínimo de sus hijos, de modo que a medida que el contenido aumente de tamaño, la fila en sí crecerá para ajustarse.
05. Disposición clásica del Santo Grial: grid-template: auto 1fr auto / auto 1fr auto
Para este diseño clásico del santo grial, hay un encabezado, pie de página, barra lateral izquierda, barra lateral derecha y contenido principal. Es similar al diseño anterior, ¡pero ahora con barras laterales!
Para escribir esta cuadrícula completa usando una sola línea de código, use el grid-template propiedad. Esto le permite establecer filas y columnas al mismo tiempo.
El par de propiedad y valor es: grid-template: auto 1fr auto / auto 1fr auto. La barra inclinada entre la primera y la segunda lista separadas 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, 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 dimensionan 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 (alto).
06. Cuadrícula de 12 tramos: grid-template-columns: repeat(12, 1fr)
A continuación tenemos otro clásico: la rejilla de 12 vanos. Puede escribir cuadrículas rápidamente en CSS con la repeat() función. Utilizando: repeat(12, 1fr); para las columnas de la plantilla de cuadrícula le da 12 columnas cada una 1fr.
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}Ahora que tiene una cuadrícula de pistas de 12 columnas, podemos colocar a nuestros hijos 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 usando el span palabra clave. Con span, establece la línea de inicio y luego la cantidad de columnas que se van a abarcar desde ese punto de inicio. En este caso, grid-column: 1 / span 12 sería equivalente a grid-column: 1 / 13y grid-column: 2 / span 6 sería equivalente a grid-column: 2 / 8.
.child-span-12 {
grid-column: 1 / span 12;
}07. RAM (Repetir, Auto, MinMax): grid-template-columns(auto-fit, minmax(<base>, 1fr))
Para este séptimo ejemplo, combine algunos de los conceptos que ya ha aprendido para crear un diseño receptivo con elementos secundarios flexibles y colocados automáticamente. Con buena pinta. Los términos clave para recordar aquí son repeat, auto-(fit|fill)y minmax()', que recuerda por el acrónimo RAM.
Todo junto, parece:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}Está utilizando repetir de nuevo, pero esta vez, utilizando el auto-fit palabra clave en lugar de un valor numérico explícito. Esto permite la colocación automática de estos elementos secundarios. Estos niños también tienen un valor mínimo base de 150px con un valor máximo 1fr, es decir, en pantallas más pequeñas, ocuparán la totalidad 1fr ancho, y a medida que alcanzan 150px de ancho cada uno, comenzarán a fluir hacia la misma línea.
Con auto-fit, las cajas se estirarán a medida que su tamaño horizontal supere los 150px para llenar todo el espacio restante. Sin embargo, si cambia 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
Para el siguiente diseño, el punto principal para demostrar aquí es justify-content: space-between, que coloca el primer y último elemento secundario en los bordes de su cuadro delimitador, con el espacio restante distribuido uniformemente entre los elementos. Para estas tarjetas, se colocan en un modo de visualización Flexbox, con la dirección configurada en columna usando 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. Entonces, aplicando justify-content: space-between ancla el primer (título) y el último (bloque de imagen) elementos a los bordes de la caja flexible, y el texto descriptivo entre ellos se coloca con el mismo espaciado en cada punto final.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}09. Sujetar mi estilo: clamp(<min>, <actual>, <max>)
Aquí es donde entramos en algunas técnicas con menos soporte de navegador, pero tienen algunas implicaciones realmente interesantes para los diseños y el diseño de interfaz de usuario receptivo. En esta demostración, está configurando el ancho usando 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 valores, eso puede verse así:
.parent {
width: clamp(23ch, 50%, 46ch);
}El tamaño mínimo aquí es 23ch o 23 unidades de caracteres, y el tamaño máximo es 46ch, 46 caracteres. Unidades de ancho de caracteres se basan en el tamaño de fuente del elemento (específicamente el ancho de la 0 glifo). El tamaño ‘real’ es 50%, que representa el 50% del ancho principal de este elemento.
Que clamp() La función que está haciendo aquí es permitir que este elemento retenga un 50% de ancho hasta 50% es mayor que 46ch (en ventanas gráficas más amplias) o más pequeño que 23ch (en ventanas gráficas más pequeñas). Puede ver que a medida que estiro y encojo el tamaño principal, el ancho de esta tarjeta aumenta hasta su punto máximo de sujeción y disminuye hasta su mínimo de sujeción. Luego permanece centrado en el padre ya que hemos aplicado propiedades adicionales para centrarlo. Esto permite diseños más legibles, ya que el texto no será demasiado ancho (arriba 46ch) o demasiado aplastado y estrecho (menos de 23ch).
Esta también es una excelente manera de implementar tipografía receptiva. Por ejemplo, podrías escribir: 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 crecería y se encogería en función de la 20vw valor real para ajustarse al ancho de la ventana gráfica.
Esta es una gran técnica para garantizar la legibilidad con un valor de tamaño mínimo y máximo, pero recuerde que no es compatible con todos los navegadores modernos, así que asegúrese de tener alternativas y haga sus pruebas.
10. Respeto por el aspecto: aspect-ratio: <width> / <height>
Y finalmente, esta última herramienta de diseño es la más experimental del grupo. Recientemente se introdujo en Chrome Canary en Chromium 84, y hay un esfuerzo activo de Firefox para implementarlo, pero actualmente no se encuentra en ninguna edición de navegador estable.
Sin embargo, quiero mencionar esto porque es un problema que se encuentra con mucha frecuencia. Y eso es simplemente mantener la relación de aspecto de una imagen.
Con el aspect-ratio propiedad, al cambiar 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, debe utilizar un padding-top cortar a tajos y darle un relleno de 56.25% para establecer una relación entre la parte superior y el ancho. Pronto tendremos una propiedad para que esto evite el hack y la necesidad de calcular el porcentaje. Puedes hacer un cuadrado con 1 / 1 proporción, una proporción de 2 a 1 con 2 / 1, y realmente cualquier cosa que necesite para escalar esta imagen con una proporción de tamaño establecida.
.square {
aspect-ratio: 1 / 1;
}Si bien esta función aún está en auge, es bueno conocerla, ya que resuelve muchos conflictos de desarrolladores que he enfrentado muchas veces, especialmente cuando se trata de videos e iframes.
Conclusión
Gracias por seguir este viaje a través de 10 poderosas líneas de CSS. Para obtener más información, mire el video completoy prueba las demostraciones usted mismo.
