Cómo crear un componente de tarjeta que no responda a consultas de medios

Dato curioso: es posible crear componentes responsivos sin ninguna consulta de medios. Ciertamente, si tuviéramos consultas de contenedor , serían muy útiles para el diseño responsivo a nivel de componente. Pero no lo hacemos. Aún así, con o sin consultas de contenedor, podemos hacer cosas para que nuestros componentes respondan sorprendentemente. Usaremos conceptos de Intrinsic Web Design , presentados por Jen Simmons .

Profundicemos juntos en el caso de uso que se describe a continuación, las soluciones relacionadas con el estado real de CSS y algunos otros trucos que le daré.

Una tarjeta responsiva de “Receta de cocina”

Recientemente tuiteé un video y un lápiz de una demostración de tarjeta responsiva que creé usando una receta de pizza como ejemplo. (Aquí no es importante la tecnología, pero dejé la receta al final porque es deliciosa y no contiene gluten).

Componente de receta de pizza responsivo sin consultas de medios. https://t.co/upft4Vpkp1

Trabajo en progreso basado en un diseño de @WalterStephanie . Diviértete cambiando el tamaño de la ventana de tu navegador pic.twitter.com/FHK2ghMb91

– Geoffrey Crofte (@geoffreycrofte) 18 de julio de 2020

La demostración aquí fue un primer intento basado en un concepto de una de las charlas de Stéphanie Walter . Aquí te dejamos un vídeo para mostrarte cómo se comportará la tarjeta:

Y si quieres jugar con él ahora mismo, aquí tienes el Pen .

Definamos el diseño responsivo

Una clave para la planificación es conocer el contenido real en el que está trabajando y la importancia de esos detalles. No es que debamos ocultar contenido en ningún momento, pero por razones de diseño, es bueno saber qué se debe comunicar primero y así sucesivamente. Mostraremos el mismo contenido sin importar el tamaño o la forma del diseño.

Imaginemos el contenido con una mentalidad centrada en los dispositivos móviles para ayudarnos a centrarnos en lo más importante. Luego, cuando la pantalla es más grande, como en un escritorio, podemos usar el espacio adicional para cosas como gloriosos espacios en blanco y tipografía más grande. Por lo general, una pequeña priorización como esta es suficiente para estar seguro de qué contenido se necesita para las tarjetas en todos y cada uno de los tamaños de ventana gráfica.

Tomemos el ejemplo de un adelanto de una receta de cocina:

En su charla, Stéphanie ya había hecho el trabajo y priorizado el contenido de nuestras tarjetas. Esto es lo que describió, en orden de importancia:

1. Imagen : porque es una receta, ¡se come con los ojos!
2. Título : para estar seguro de lo que vas a cocinar.
3. Palabras clave: para captar información clave a primera vista.
4. Información de calificación: para prueba social.
5. Breve descripción: para la gente que lee.
6. Llamado a la acción : qué esperas que haga el usuario en esta tarjeta.

Esto puede parecer mucho, pero podemos incluirlo todo en un único diseño de tarjeta inteligente.

Tipografía no escalable

Una de las limitaciones de la técnica que les voy a mostrar es que no podrán obtener tipografía escalable según el ancho del contenedor. La tipografía escalable (por ejemplo, “tipo fluido” ) se realiza comúnmente con la vwunidad con ancho de ventana gráfica (), que se basa en la ventana gráfica, no en el elemento principal.

Entonces, si bien podríamos sentirnos tentados a utilizar el tipo fluido como una solución de consulta no multimedia para el contenido de nuestras tarjetas, desafortunadamente no podremos usar el tipo fluido en función de algún porcentaje del ancho del contenedor ni del ancho del elemento en sí. . ¡Sin embargo, eso no nos impedirá alcanzar nuestro objetivo!

Una nota rápida sobre la “perfección de píxeles”

Hablemos con ambas partes aquí…

Diseñadores: Pixel Perfect es súper ideal y ciertamente podemos ser precisos a nivel de componentes. Pero tiene que haber alguna compensación a nivel de diseño. Lo que significa que tendrás que proporcionar algunas variaciones, pero permite que los intermedios sean flexibles. Las cosas cambian en los diseños receptivos y la precisión en todos los anchos de pantalla posibles es una tarea difícil. ¡Sin embargo, todavía podemos hacer que las cosas se vean geniales en todas las escalas!

Desarrolladores: Tendrán que poder llenar los espacios entre los diseños que tienen diseños prescritos para permitir que el contenido sea legible y consistente entre esos estados. Como buena práctica, también recomiendo intentar mantener un flujo lo más natural posible.

También puedes leer el excelente artículo de Ahmad sobre el estado de perfección de los píxeles .

Una receta para cero consultas de medios

Recuerde, lo que buscamos no es solo una tarjeta responsiva, sino una que no dependa de consultas de los medios. No es que deban evitarse las consultas de los medios; se trata más de que CSS sea lo suficientemente potente y flexible como para que tengamos otras opciones disponibles.

Para crear nuestra tarjeta responsiva, me preguntaba si flexbox sería suficiente o si necesitaría hacerlo con CSS grid . Resulta que flexbox es suficiente para nosotros esta vez, usando el comportamiento y la magia de las propiedades flex-wrapand flex-basisen CSS.

La esencia flex-wrapes que permite que los elementos se divida en una nueva línea cuando el espacio para el contenido se vuelve demasiado reducido. Puedes ver la diferencia entre flex con un valor sin ajuste y con ajuste en esta demostración:

El flex-basisvalor de 200px es más una instrucción que una sugerencia para el navegador, pero si el contenedor no ofrece suficiente espacio para ello, los elementos bajan a una nueva línea. El margen entre columnas incluso fuerza el ajuste inicial.

Utilicé esta lógica de envoltura para crear la base de mi tarjeta. Adam Argyle también lo usó en la siguiente demostración que presenta cuatro diseños de formulario con solo 10 líneas de CSS:

En su ejemplo, Adam usa flex-basis y flex-grow (usados ​​juntos en la propiedad abreviada flex) para permitir que la entrada del correo electrónico ocupe tres veces el espacio ocupado por la entrada del nombre o el botón. Cuando el navegador estima que no hay suficientes espacios para mostrar todo en la misma fila, el diseño se divide en varias líneas por sí solo, sin que tengamos que gestionar los cambios en las consultas de medios.

También utilicé clamp()la función para agregar aún más flexibilidad. Esta función es algo mágica. Nos permite resolver un cálculo min()y un max()en una sola función. La sintaxis es la siguiente:

clamp(MIN, VALUE, MAX)

Es como resolver una combinación de las funciones max()y min():

max(MIN, min(VAL, MAX))

Puede usarlo para todo tipo de propiedades que cubran: length, frequency, angle, time, percentage, numbero integer.

La demostración de la “Tarjeta que responde a consultas sin medios”

Con todos estos nuevos poderes de CSS, creé una tarjeta responsiva flexible sin consultas de los medios. Quizás sea mejor ver esta demostración en una nueva pestaña o con una opción de 0,5x en el inserto a continuación.

Algo que debes notar de inmediato es que el código HTML para las 2 tarjetas es exactamente el mismo, la única diferencia es que la primera tarjeta está dentro de un contenedor de 65% de ancho y la segunda dentro de un contenedor de 35% de ancho. También puedes jugar con la dimensión de tu ventana para probar su capacidad de respuesta.

La parte importante del código en esa demostración está en estos selectores:

• .recipees el contenedor flexible principal.
• .pizza-boxes un elemento flexible que es el contenedor de la imagen de la tarjeta.
• .recipe-contentes un segundo elemento flexible y es el contenedor del contenido de la tarjeta.

Ahora que sabemos cómo flex-wrapfunciona y cómo flex-basisinfluye flex-grow en el tamaño del elemento, solo necesitamos explicar rápidamente la clamp()función porque la usé para el tamaño de fuente responsivo en lugar de donde normalmente habríamos llegado para el tipo fluido.

Quería usar calc()propiedades personalizadas para calcular los tamaños de fuente en función del ancho del contenedor principal, pero no pude encontrar una manera, ya que un valor de 100% tiene una interpretación diferente según el contexto. Lo guardé para el valor medio de mi clamp()función, pero el resultado final fue diseñado en exceso y no terminó funcionando como esperaba o esperaba.

/* No need, really */font-size: clamp(1.4em, calc(.5em * 2.1vw), 2.1em);

Here’s where I landed instead:

font-size: clamp(1.4em, 2.1vw, 2.1em);

That’s what I did to make the card title’s size adjust against the screen size but, like we discussed much earlier when talking about fluid type, we won’t be able to size the text by the parent container’s width.

Instead, we’re basically saying this with that one line of CSS:

I want the font-size to equal to 2.1vw (2.1% of the viewport width), but please don’t let it go below 1.4em or above 2.1em.

This maintains the title’s prioritized importance by allowing it to stay larger than the rest of the content, while keeping it readable. And, hey, it still makes grows and shrinks on the screen size!

And let’s not forget about responsive images, The content requirements say the image is the most important piece in the bunch, so we definitely need to account for it and make sure it looks great at all screen sizes. Now, you may want to do something like this and call it a day:

max-width: 100%;height: auto;

But that’s doesnt always result in the best rendering of an image. Instead, we have the object-fit property, which not only responds to the height and width of the image’s content-box, but allows us to crop the image and control how it stretches inside the box when used with the object-position property.

img {  max-width: 100%;  min-height: 100%;  width: auto;  height: auto;  object-fit: cover;  object-position: 50% 50%;}  

As you can see, that is a lot of properties to write down. It’s mandatory because of the explicit width and height properties in the HTML img code. If you remove the HTML part (which I don’t recommend for performance reason) you can keep the object-* properties in CSS and remove the others.

An alternative recipe for no media queries

Another technique is to use flex-grow as a unit-based growing value, with an absurdly enormous value for flex-basis. The idea is stolen straight from the Heydon Pickering’s great “Holy Albatross” demo.

The interesting part of the code is this:

/* Container */.recipe {  --modifier: calc(70ch - 100%);
  display: flex;  flex-wrap: wrap;}
/* Image dimension */.pizza-box {  flex-grow: 3;  flex-shrink: 1;  flex-basis: calc(var(--modifier) * 999);}
/* Text content dimension */.recipe-content {  flex-grow: 4;  flex-shrink: 1;  flex-basis: calc(var(--modifier) * 999);}

Proportional dimensions are created by flex-grow while the flex-basis dimension can be either invalid or extremely high. The value gets extremely high when calc(70ch - 100%), the value of --modifier, reaches a positive value. When the values are extremely high each of them fills the space creating a column layout; when the values are invalid, they lay out inline.

The value of 70ch acts like the breakpoint in the recipe component (almost like a container query). Change it depending on your needs.

Let’s break down the ingredients once again

Here are the CSS ingredients we used for a media-query-less card component:

• The clamp() function helps resolve a “preferred” vs. “minimum” vs. “maximum” value.
• The flex-basis property with a negative value decides when the layout breaks into multiple lines.
• The flex-grow property is used as a unit value for proportional growth.
• The vw unit helps with responsive typography.
• The object-fit property provides finer responsiveness for the card image, as it allows us to alter the dimensions of the image without distorting it.

Going further with quantity queries

I’ve got another trick for you: we can adjust the layout depending on the number of items in the container. That’s not really a responsiveness brought by the dimension of a container, but more by the context where the content lays.

There is no actual media query for number of items. It’s a little CSS trick to reverse-count the number of items and apply style modifications accordingly.

The demo uses the following selector:

.container  :nth-last-child(n+3),.container  :nth-last-child(n+3) ~ * {  flex-direction: column;}

Looks tricky, right? This selector allows us to apply styles from the last-child and all it’s siblings. Neat!

Una Kravets explains this concept really well. We can translate this specific usage like this:

• .container :nth-last-child(n+3): The third .container element or greater from the last .container in the group.
• .container :nth-last-child(n+3) ~ *: The same exact thing, but selects any .container element after the last one. This helps account for any other cards we add.

Kitty Giraudel’s “Selectors Explained” tool really helps translate complex selectors into plain English, if you’d like another translation of how these selectors work.

Another way to get “quantity” containers in CSS is to use binary conditions. But the syntax is not easy and seems a bit hacky. You can reach me on Twitter if you need to talk about that — or any other tricks and tips about CSS or design.

Is this future proof?

All the techniques I presented you here can be used today in a production environment. They’re well supported and offer opportunities for graceful degradation.

Worst case scenario? Some unsupported browser, say Internet Explorer 9, won’t change the layout based on the conditions we specify, but the content will still be readable. So, it’s supported, but might not be “optimized” for the ideal experience.

Maybe one day we will finally get see the holy grail of container queries in the wild. Hopefully the Intrinsic Web Design patterns we’ve used here resonate with you and help you build flexible and “intrinsicly-responsive” components in the meantime.

Let’s get to the “rea” reason for this post… the pizza!

---

Gluten free pan pizza recipe

You can pick the toppings. The important part is the dough, and here is that:

Ingredients

• 3¼ cups (455g) gluten free flour
• 1 tablespoon, plus 1 teaspoon (29g) brown sugar
• 2 teaspoons of kosher salt
• 1/2 cube of yeast
• 2½ cups (400 ml) whole almond milk
• 4 tablespoons of melted margarine
• 1 tablespoon of maizena

Instructions

1. Mix all the dry ingredients together.
2. Add the liquids.
3. Let it double size for 2 hours. I’d recommend putting a wet dish towel over your bowl where the dough is, and place the dish close to a hot area (but not too hot because we don’t want it to cook right this second).
4. Put it in the pan with oil. Let it double size for approximately 1 hour.
5. Cook in the oven at 250 degrees for 20 minutes.

Thanks Stéphanie for the recipe