Krypton Solid

Diseñando un futuro flexible para el diseño web con las mejores prácticas de Flexbox – Smashing Magazine

Diseñando un futuro flexible para el diseño web con las mejores prácticas de Flexbox – Smashing Magazine

CSS flota y borra definen el diseño web hoy. Basados ​​en principios derivados de siglos de diseño de impresión, han funcionado bastante bien, incluso si, estrictamente hablando, los flotadores no fueron diseñados para ese propósito. Tampoco las mesas, pero eso no nos detuvo en la década de 1990.

CSS flota y borra definen el diseño web hoy. Basados ​​en principios derivados de siglos de diseño de impresión, han funcionado bastante bien, incluso si, estrictamente hablando, los flotadores no estaban destinados a ese propósito. Tampoco las mesas, pero eso no nos detuvo en la década de 1990.

Sin embargo, el el futuro del diseño web es brillante, gracias a flexbox. El mecanismo de diseño de CSS nos permite organizar los elementos de una manera realmente similar a la web. Algunos elementos se pueden arreglar, mientras que otros se desplazan. El orden en el que aparecen puede ser independiente del orden de origen. Y todo puede adaptarse a una variedad de tamaños de pantalla, desde televisores de pantalla ancha hasta teléfonos inteligentes, e incluso dispositivos aún inimaginables. La compatibilidad con el navegador es fantástica (excepto Sabes quién). Sí, es un buen momento para saltar a flexbox si aún no lo ha hecho.

Otras lecturas en SmashingMag:

Pero cambiar nuestras costumbres no es fácil. Flexbox tiene una increíble variedad de características, pocos de los cuales son familiares. Es mucho para asimilar. Afortunadamente, para fines de diseño, solo necesita conocer algunos conceptos básicos. Echemos un vistazo a cómo podríamos crear una interfaz básica basada en flexbox, similar a Gmail. Si aún no ha explorado o entendido completamente flexbox, esta pieza revisará y explicará algunas cosas que pueden ser confusas al principio.

La mentalidad de Flexbox

Flexbox requiere una nueva forma de pensar. En lugar de organizar los elementos en filas y columnas de izquierda a derecha, de arriba a abajo, organizamos los bloques en una línea: dos líneas, de hecho, un eje principal y un eje transversal, el primero de los cuales usaremos hoy. . Pensar en eje principal como una cuerda a lo largo de los cuales se encadenan los cuadros (divs u otros elementos HTML). La cuerda metafórica corre de un extremo al otro de su contenedor, un eje tenso e invisible. Esto conduce a cuatro conceptos interesantes.

Alineación

Primero, podemos deslizar las “cajas” a un lado de la “cuerda” o al otro, centrarlas o distribuirlas uniformemente. Eso significa que los objetos pueden adherirse a un lado de un diseño o al otro, por ejemplo, en el borde izquierdo o derecho de la pantalla, sin importar el ancho de la pantalla. Una distribución uniforme significa que se adaptarán bien a cualquier tamaño de pantalla, lo que es ideal en nuestro mundo de pantallas múltiples.

mejores prácticas de flexbox
Flexbox permite a los diseñadores llevar elementos HTML a cualquier extremo de la «cuerda».

Dirección

También podemos contrarrestar la cadena, de modo que los cuadros se ejecuten en la dirección opuesta, sin editar el HTML. Esto es similar al técnica de orden de clasificación eso nos permite cambiar las columnas, excepto que el tercer rasgo lo lleva un paso más allá.

Ilustración de cajas empujadas hacia la derecha.
Tanto el orden como la posición de los elementos pueden cambiarse.

Orientación

En tercer lugar, podemos girar la cuerda 90 grados para que cuelgue de la parte superior de su contenedor, en lugar de correr de un lado a otro. Las consultas de medios y la capacidad de flexbox permiten ejecutar elementos, por ejemplo, un encabezado, un artículo y un pie de página, en la pantalla de un teléfono inteligente, pero de izquierda a derecha en una computadora de escritorio. Lo que antes se llamaba filas ahora se puede ejecutar de arriba hacia abajo o de abajo hacia arriba con una pizca de CSS.

Ilustración de cajas que cuelgan de la parte superior de una caja.
Todo el arreglo puede girar 90 grados, “colgando” de la parte superior del contenedor.

Pedido

Finalmente, podemos controlar qué cajas vienen primero, segundo, tercero y así sucesivamente en la cuerda. sin editar el HTML. Esto es enorme. Significa que podemos estructurar un documento HTML para, digamos, SEO, accesibilidad o simplemente viejo semántica – independiente del diseño. ¿Quiere centrar elementos verticalmente? No hay problema. ¿Quiere navegación al final de su HTML pero al principio de su diseño? Seguro. ¿Quieres experimentar con diferentes diseños? Todo está en el CSS. Y así, ya estamos pensando en términos de contenido y dispositivos, no en cuadrículas rígidas.

Ilustración de cajas en orden aleatorio.
El orden exacto de los elementos puede cambiar con CSS y sin cambiar el HTML.

Hay más, pero esto cubre lo básico por ahora. Recordar:

  1. Los bloques se colocan a lo largo de una línea invisible.
  2. Podemos empujarlos de un lado a otro a lo largo de esa línea.
  3. Podemos invertir la línea, invirtiendo así el orden de las cajas.
  4. La línea puede girar 90 grados.
  5. Podemos mezclar las cosas a lo largo de la línea en el orden que queramos, independientemente del HTML.

Pedido

El orden es un concepto importante en flexbox. Tomemos un documento HTML básico: una publicación de blog típica incluiría cierta información.

  • encabezamiento título del sitio web, descripción, formulario de búsqueda (Estos enmarcan el contenido e informan a las personas dónde se encuentran).
  • metadatos autor / editor, fecha, tema (s) (ayudan a las personas a decidir si el contenido es relevante para sus necesidades).
  • contenido principal de qué se trata la página (la razón por la que existe la página)
  • contenido complementario información relacionada (avances, enlaces, «Ver también»)
  • navegación enlaces a otras partes del sitio web (temas de alto nivel)
  • pie de página derechos de autor, RSS, redes sociales, registro de boletines

Estos elementos se enumeran en orden de lo que los motores de búsqueda o lectores de pantalla pueden escanear. Ahora, colguemos una «cuerda» de la parte superior de un dispositivo móvil y reordenémoslos para poner el contenido en primer lugar.

  1. contenido principal
  2. metadatos
  3. contenido complementario
  4. encabezamiento
  5. navegación
  6. pie de página

Mientras tanto, las computadoras de escritorio tendrían una vista diferente.

  1. encabezamiento
  2. metadatos
  3. contenido principal
  4. contenido complementario
  5. navegación
  6. pie de página

Espera, eso no está del todo bien. Queremos navegación en la parte superior, y flexbox lo hace muy fácil.

De ello se deduce que también puede poner «cuerdas» dentro de las cajas, y todas las reglas se aplican de nuevo. Pero primero, hablemos de orden. Aquí es donde las cosas se ponen complicadas.

Cajas y cuerdas de anidación

Cada diseño de caja flexible, cada caja, puede contener otro conjunto de cajas ensartadas a lo largo de su propia cuerda. Esa cuerda puede correr de izquierda a derecha o viceversa, de arriba a abajo o viceversa, y empujar objetos hacia cualquier extremo, centrarlos o distribuirlos. Y aunque esa flexibilidad abre muchas posibilidades, también significa que debemos planificar nuestros diseños con cuidado.

Ilustración de cajas dentro de una caja.
Los elementos a lo largo de una cuerda de caja flexible pueden, a su vez, contener otras cuerdas de caja flexible.

Comencemos con algo de contenido para entender por qué las cosas se complican; esto no está necesariamente en orden de diseño (es decir, el orden en que la gente lo ve). Imagínese dar una presentación a una audiencia. Les dices lo que vas a decir, luego lo dices y terminas con un resumen de lo que has dicho. Nuestra página hipotética sigue una estructura familiar:

  • encabezamiento
  • el mensaje actual
  • lista de mensajes
  • enlaces a la (s) bandeja (s) de entrada, archivo, etc.
  • pie de página

Dibujar un diseño

Para simplificar las cosas, trabajaremos con un diseño familiar.

Ilustración de un diseño de aplicación de correo electrónico
Un arreglo típico para una aplicación de correo electrónico.

Aquí hay dos diseños de caja flexible. El primero tiene tres casillas de arriba a abajo. El segundo diseño reside dentro del cuadro del medio, de derecha a izquierda.

El encabezado y el pie de página abarcan el ancho de la ventana gráfica. La navegación cabe en una pequeña columna a la izquierda y el área de contenido permite al usuario desplazarse cuando contiene más información de la que se puede mostrar. Podríamos lograr esto con unos pocos flotadores y posiciones fijas, pero flexbox nos da más opciones con menos marcado. Vamos a ver.

Configurar el documento

El contenedor exterior tiene solo tres secciones, envueltas en un .flex-container elemento:

<body>
  <div class="flex-container">
    <header>…</header>
    <main class="flex-container">…</main>
    <footer>…</footer>
  </div>
</body>

Lo llamamos flex-container para describir su propósito de una manera algo semántica. Al menos nuestro CSS tendrá sentido.

Dentro de main elemento, necesitamos tres bloques:

<main class="flex-container content">
  <article class="message">…</article>
  <div class="message-list">…</div>
  <nav class="mailbox-list">…</nav>
</main>

Este ejemplo usa article como entidad independiente, no en el sentido de la revista.

Declare estos elementos como Flexbox

Necesitamos decirle a los navegadores que estos elementos serán, um, flexibles.

.flex-container,
.flex-container header,
.flex-container footer {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

Tenga en cuenta que esto aplica flexbox a los contenedores principales, no al contenido.

Agregar algunas dimensiones

Según el boceto del diseño, sabemos que ciertos elementos tendrán anchos y alturas. La bodyEl encabezado y pie de página, por ejemplo, serán tiras largas y delgadas en comparación con el mainbarras de navegación de la izquierda, altas y relativamente estrechas. La articleEl área de contenido ocupa el resto del espacio. Con el fin de mantenerse flexible independientemente del tamaño de la pantalla (y la claridad en este tutorial), estas áreas no tendrán anchos fijos.

.message {
  flex-basis: 70%;
}
.message-list {
  flex-basis: 15%;
}
.mailbox-list {
  flex-basis: 15%;
}
.flex-container header,
.flex-container footer {
  width: 100%;
  height: 5rem;
}

Aquí, flex-basis es como el ancho, siempre que el eje principal sea horizontal. Si colgamos la cuerda desde la parte superior, entonces flex-basis se convierte en altura automáticamente. ¡Práctico!

Hacer que la sección principal sea desplazable

Este es fácil. Solo agrega overflow: scroll hacia main elemento para evitar que anule el encabezado y el pie de página. Consejo útil: Intentar overflow: auto para ocultar las barras de desplazamiento (cuando son innecesarias) en la mayoría de los navegadores.

.message {
  flex-basis: 70%;
  overflow: scroll;
}

Prueba el contenido

En este punto, la forma del encabezado debería flotar con un pequeño margen, incluso cuando se cambia el tamaño del navegador. El contenido debe fluir bien en las ventanas del navegador de cualquier tamaño. Y si un navegador no es compatible con flexbox, la página se convertirá en un diseño de contenido primero.

Eso es importante porque ya sabes quién no es compatible con flexbox aún. Sin embargo, todas las versiones modernas lo hacen, por lo que es una cuestión de cuándo los usuarios actualizan su software. Entonces, ¿dónde se admite flexbox?

Clicky tiene un gráfico del cuota de mercado de una variedad de navegadores móviles.

¿Qué pasa con los navegadores más antiguos? Las soluciones varían enormemente según el diseño que intente lograr, aunque podemos derivar algunos consejos.

La forma más segura de admitir navegadores incapaces de flexbox es escribir CSS en el orden en que desea que aparezca. Empiece por pensar semánticamente. Las versiones antiguas de Internet Explorer ignorarán las propiedades de flexbox; afortunadamente, buen ol ‘ comentarios condicionales nos permite aplicar flotadores y claros a diseños semánticos. Las versiones antiguas de otros navegadores tienden a ofrecer diseños optimizados para dispositivos móviles que apilan el contenido en un orden lógico. Entonces flexbox puede coexistir con flotadores, display: table-cell y posicionamiento, de modo que los navegadores inteligentes apliquen propiedades de flexbox mientras que los navegadores heredados las ignorarán. Finalmente, si se siente experimental, intente Flexie, que modifica los navegadores antiguos con un polyfill basado en JavaScript.

Prueba flexbox. Si bien ofrece muchas opciones, la mayoría, como la alineación, entran en juego después de haber decidido cómo se organizan los elementos. Las técnicas centrales, que hemos cubierto aquí, son alineación, dirección, orientación, orden y anidamiento. Descubrimos que estos son críticos en el nuevo marco de diseño de Foundation: si puede entender la alineación, la dirección, la orientación y el orden, entonces está en camino hacia un futuro flexible. Mira mi demo para verlo en acción (tenga en cuenta que todavía no responde).

Otras lecturas

Para obtener más información sobre flexbox, consulte lo siguiente:

Deja un comentario