Diseñar un diseño de página de producto con Flexbox | Programar Plus

Todos los días en Shopify hablo con socios que constantemente están superando los límites de lo que es posible en el diseño de comercio electrónico. Recientemente, he notado que varios diseñadores están experimentando con Flexbox en sus tiendas. Como diseñadores y desarrolladores web, uno de nuestros objetivos principales es enfocar el contenido y facilitar a nuestros visitantes la navegación por ese contenido. Para lograr este objetivo, necesitamos un diseño funcional donde la tecnología se salga del camino y el contenido se convierta en el héroe.

Flexbox puede ayudarnos a crear diseños flexibles que están optimizados para la web y dispositivos móviles. ¿Pero lo estamos usando? Muchos de nosotros todavía usamos flotantes y bloques en línea para el diseño. Por supuesto, usted conoce mejor a su audiencia, por lo que si tiene una tonelada de usuarios en, por ejemplo, IE 9 y hacia abajo, y no está preparado para crear una experiencia alternativa aceptable, es posible que se quede atrapado en la tierra flotante. Pero hay una gran cantidad de (soporte) verde en flexbox-land en estos días.

Creo en el poder de aprender haciendo. Este artículo lo llevará a través de un lanzamiento reciente de un tema gratuito de Shopify llamado Venture y los pasos para recrear el siguiente diseño de producto usando Flexbox.

Si desea continuar con el ejemplo de esta publicación, consulte el Pen completo.

En este artículo tutorial, demostraré cómo crear un diseño de producto flexible y receptivo con Flexbox que enfocará los productos de maneras únicas según el ancho de la ventana gráfica. Además, haremos todo esto en menos de 100 líneas de CSS.

Esto se basa en el tema “Venture”

El equipo de diseño de temas de Shopify lanzó recientemente una plantilla bastante atractiva para Shopify Merchants llamada Venture. El diseño está optimizado para la mejor experiencia de compra y proporciona un enfoque claro en los productos. Si bien el diseño se desarrolló para adaptarse a varios casos comerciales, para este ejemplo de tutorial nos centraremos en el núcleo del diseño y lo recrearemos con flexbox. En los siguientes pasos, aprenderemos cómo centrar elementos de alineación, establecer pies de página adhesivos perfectos, proporcionar prioridad a ciertos productos que dependen de la ventana gráfica y el dispositivo, apuntar a elementos de flexbox con consultas de medios y aprender los conceptos básicos sobre Flexbox para que pueda comenzar a implementar flexbox diseños en su próximo proyecto web.

Si desea utilizar el ejemplo de código de esta publicación en una tienda Shopify con productos reales, regístrese como socio de Shopify y configure una tienda de desarrollo gratuita. Una tienda de desarrollo te brinda acceso a todas las funciones pagas de una tienda Shopify, por lo que puedes usarla como un entorno de prueba para experimentar o trabajar en un tema para un cliente.

El diseño del encabezado

Lo primero que queremos hacer es configurar nuestra navegación de filtro que contiene nuestro encabezado y dos elementos de filtro (menús desplegables) con etiquetas.

Comencemos configurando un contenedor flexbox con su contenido:

<nav class="product-filter">

  <h1>Jackets</h1>

  <div class="sort">

    <div class="collection-sort">
      <label>Filter by:</label>
      <select>
        <option value="https://css-tricks.com/">All Jackets</option>
      </select>
    </div>

    <div class="collection-sort">
      <label>Sort by:</label>
      <select>
        <option value="https://css-tricks.com/">Featured</option>
      </select>
    </div>

  </div>

</nav>

Nuestra .product-filter será nuestro contenedor flexible, por lo que podemos alinear los elementos secundarios del elemento flexible en consecuencia. Declaramos el contenedor flexible de la siguiente manera:

.product-filter {
  display: flex;
}

Nuestra <h1> se le da un elemento flex-grow valor de 1 para que expanda el contenedor flexible al ancho completo y se expanda a sí mismo para llenar el espacio restante (que alinea a la derecha los menús desplegables de clasificación).

.product-filter h1 {
  flex-grow: 1;
}

Para alinear horizontalmente los elementos secundarios de nuestro .sort container, también lo haremos un contenedor flexible. ¡Puedes anidar contenedores flexibles!

.sort {
  display: flex;
}

Los contenedores de clasificación, siendo <div>s, se apilarán uno encima del otro por defecto:

Por defecto, display: flex; alineará los elementos secundarios horizontalmente. Lo usaremos en el contenedor de clasificación para alinear el lado a lado. También haremos que cada contenedor de clasificación individual sea un contenedor flexible (¡un tercer contenedor flexible anidado!) Y también usaremos flex-direction: column; para los filtros para que se alineen verticalmente:

.collection-sort {
  display: flex;
  flex-direction: column;
}

En unas pocas líneas de CSS, nuestro encabezado y filtros están diseñados de la manera que queremos. Ahora, con nuestro conocimiento actual de flexbox, trabajaremos en nuestro diseño de cuadrícula para nuestros productos.

El diseño de los productos

Usaremos el siguiente HTML para nuestro diseño de Flexbox:

<section class="products">

  <!-- It's likely you'll need to link the card somewhere. You could add a button in the info, link the titles, or even wrap the entire card in an <a href="https://css-tricks.com/designing-a-product-page-layout-with-flexbox/..."> -->

  <div class="product-card">
    <div class="product-image">
      <img src="assets/img/coat-01.jpeg">
    </div>
    <div class="product-info">
      <h5>Winter Jacket</h5>
      <h6>$99.99</h6>
    </div>
  </div>

  <!-- more products -->

</section>

Como antes, necesitamos un contenedor flexible. En este escenario usaremos .products como nuestro contenedor flexible. Vamos a agregar dos nuevas propiedades que permitirán que los niños flexibles se alineen horizontalmente y se envuelvan en nuevas filas a medida que el ancho de la ventana se expande y se contrae:

.products {
  display: flex;
  flex-wrap: wrap;
}

Por defecto, display: flex; colocará a los niños horizontalmente comenzando a la izquierda, pero hemos agregado flex-wrap: wrap; para envolver los elementos secundarios en una nueva fila una vez que no hay suficiente espacio para colocar los elementos en la misma fila dependiendo del ancho de la ventana gráfica.

Para comenzar a ejercer control sobre el ancho de nuestros elementos flexibles, agregaremos flex: 1; para que todos nuestros elementos flexibles ocupen el mismo espacio en la fila. En nuestro ejemplo tenemos 10 productos de chaqueta, y agregando flex: 1; colocará todos los productos en una fila.

Para nuestro diseño, queremos 5 elementos por fila y envolver el resto en nuevas filas según sea necesario. Para obtener cinco por fila, deberán tener un ancho del 20% (5 * 20 = 100). Configuración de base flexible: 20% sería suficiente, pero cuando tomamos en cuenta el relleno, supera el 100% y solo obtendremos 4 por fila. Con un 2% de acolchado en cada lado y un 16% de flexibilidad, será perfecto.

.products {
  display: flex;
  flex-wrap: wrap;
}

.product-card {
  padding: 2%;
  flex-grow: 1;
  flex-basis: 16%;

  display: flex; /* so child elements can use flexbox stuff too! */
}

También podemos hacer esto en forma abreviada de la siguiente manera:

.product-card {
  flex: 1 16%;
}

Tener flex-grow a 1 para los productos garantizará que la fila de productos siempre ocupe todo el espacio.

Para asegurarse de que las imágenes que contiene se ajusten bien:

.product-image img {
  max-width: 100%;
}

Alineación inferior de los pies de página del producto

A veces puede resultar complicado establecer un pie de página fijo o establecer el contenido en la parte inferior de un contenedor. Flexbox también puede ayudarnos allí. Si ha estado siguiendo el código poco a poco, verá que la etiqueta de nuestras chaquetas no está perfectamente alineada debajo de las imágenes de las chaquetas.

Un efecto de escalera de mano generado por la altura variable de las imágenes de la chaqueta.

Este tipo de escenario es común: no podemos controlar la altura o la longitud del contenido, pero nos gustaría tener otro elemento perfectamente colocado en la parte inferior del contenedor. Flexbox ya nos está ayudando a mantener los contenedores a la misma altura por fila, pero las imágenes siguen siendo de altura variable.

Los métodos populares para alinear los fondos pueden requerir el uso de posicionamiento absoluto o incluso JavaScript. Afortunadamente, con flexbox esta compleja tarea se puede lograr simplemente agregando el siguiente CSS a nuestro .product-info envase:

.product-info {
  margin-top: auto;
}

¡Eso es! Flexbox es lo suficientemente inteligente como para colocar el elemento en el fondo del contenedor Flex. Con un par de líneas de estilos obtenemos el siguiente resultado:

Fondos bien alineados.

Flexboxing receptivo

Como tenemos menos espacio horizontal para trabajar, nos gustaría reducir la cantidad de productos por fila. Por ejemplo, si la ventana gráfica máxima es de 920 px, nos gustaría que la cantidad de elementos por fila se limitara a cuatro, lo que podemos lograr con lo siguiente:

@media (max-width: 920px) {
  .product-card {
    flex: 1 21%;
  }
}

(Recuerde que no es el 25% (100% / 4) porque tenemos que compensar el relleno que agregué anteriormente. Podríamos evitar esto con box-sizing: border-box, pero esa es su decisión).

Las líneas anteriores de CSS casi nos dan el resultado deseado que queremos porque obtenemos cuatro elementos por fila. Pero la última fila tiene dos elementos grandes.

Flexbox es lo suficientemente inteligente como para llenar cualquier espacio disponible, algo de lo que no tenemos que preocuparnos con otros métodos de diseño. Para mejorar el diseño de esta ventana, preferiríamos tener imágenes más grandes de las chaquetas en la parte superior que en la parte inferior para resaltar mejor los productos.

Una de las formas en que podemos ampliar el primero en lugar de los dos últimos es seleccionarlos y cambiar su tamaño directamente:

/* Select the first two */
.products .product-card:first-child, 
.products .product-card:nth-child(2) {
  flex: 2 46%;
}

Ahora, con nuestro CSS aplicado, obtenemos un diseño realmente excelente que está optimizado para ventanas gráficas más pequeñas, como iPads en modo vertical.

Para ventanas gráficas aún más pequeñas, preferiríamos un diseño de dos columnas para las chaquetas. Podemos lograr este diseño con la siguiente consulta de medios:

@media (max-width: 600px) {
  .product-card {
    flex: 1 46%;
  }
}

Si ahora vemos nuestra página en una ventana más pequeña como un iPhone 6, veremos que nuestra barra de navegación de filtro se superpone a nuestro encabezado.

Esto está sucediendo porque nuestro .product-filter está configurado para contener todos nuestros elementos flexibles en una línea horizontal, sin importar cuántos elementos contenga (sin envoltura). Con el siguiente código, podemos cambiar esto fácilmente con una consulta de medios para que nuestro contenido se establezca verticalmente:

@media (max-width: 480px) {
  .product-filter {
    flex-direction: column;
  }
}

Nuestro encabezado y filtros ya no se superponen, pero aún podemos mejorar el diseño flotando los filtros a la izquierda. Anteriormente, flotamos los elementos a la derecha con el align-self: flex-end; propiedad. Ahora, queremos agregar align-self: flex-start;

@media (max-width: 480px) {
  .product-filter {
    flex-direction: column;
  }
  .sort {
    align-self: flex-start;
  }
}

Y así, ahora tenemos un diseño flexible y receptivo para nuestros productos.

Compatibilidad

El mayor rechazo con flexbox es siempre la compatibilidad con el navegador. Pero como mencionamos anteriormente en este artículo, el soporte es bastante bueno en estos días. El IE más antiguo que no es compatible con flexbox ya no es compatible con Microsoft.

Como todos los proyectos web en los que trabaja, siempre debe realizar pruebas exhaustivas para asegurarse de que la experiencia de sus visitantes esté optimizada y que su diseño cumpla con los requisitos de su proyecto.

Conclusión

En el tutorial anterior, creamos un poderoso diseño receptivo para mostrar un conjunto de productos usando flexbox. A diferencia de otros métodos CSS que no están pensados ​​para crear diseños, flexbox es una herramienta poderosa enfocada en este objetivo, y debe aprovecharla. Los diseños de Flexbox pueden hacer que nuestros sitios y aplicaciones sean más flexibles y resistentes.

Hay mucho que saber sobre flexbox, así que asegúrese de usar la guía completa de Flexbox como referencia.

(Visited 13 times, 1 visits today)