Diseño

El podcast de CSS 009: Layout

Imagina que trabajas como desarrollador y un colega del diseñador te entrega un diseño para un sitio web nuevo. Tiene todo tipo de diseños y composiciones interesantes: diseños bidimensionales que tienen en cuenta el ancho y la altura del viewport, así como diseños que deben ser fluidos y flexibles. ¿Cómo decides cuál es la mejor manera de aplicarles un estilo con CSS?

CSS nos proporciona varias formas de resolver problemas de diseño en el eje horizontal, en el vertical o en ambos. Elegir el método de diseño correcto para un contexto puede ser difícil y, con frecuencia, es posible que necesites más de un método de diseño para resolver el problema. Para ayudarte con esto, en los siguientes módulos, aprenderás sobre las funciones únicas de cada mecanismo de diseño de CSS para fundamentar esas decisiones.

Diseño: una breve historia

En los inicios de la Web, los diseños más complejos que un documento simple se presentaban con elementos <table>. La separación del HTML de los estilos visuales se facilitó cuando los navegadores adoptaron ampliamente CSS a fines de la década de 1990. CSS abrió las puertas a los desarrolladores para que pudieran cambiar por completo la apariencia de un sitio web sin tocar HTML. Esta nueva función inspiró proyectos como CSS Zen Garden, que se creó para demostrar el poder de CSS y alentar a más desarrolladores a aprender a usarlo.

CSS evolucionó a medida que evolucionaron nuestras necesidades de diseño web y tecnología de navegadores. Puedes leer cómo el diseño de CSS y nuestro enfoque de diseño evolucionaron con el tiempo en este artículo de Rachel Andrew.

Diseño: el presente y el futuro

El estilo CSS moderno tiene herramientas de diseño excepcionalmente potentes. Tenemos sistemas exclusivos para el diseño y vamos a analizar en detalle lo que tenemos a nuestra disposición, antes de profundizar en Flexbox y Grid en los próximos módulos.

Información sobre la propiedad display

La propiedad display realiza dos tareas. Lo primero que hace es determinar si el cuadro al que se aplica actúa como intercalado o como bloque.

.my-element {
  display: inline;
}

Los elementos intercalados se comportan como las palabras en una oración. Se ubican uno al lado del otro en la dirección intercalada. Los elementos como <span> y <strong>, que por lo general se usan para aplicar estilo a fragmentos de texto que contienen elementos como <p> (párrafo), están intercalados de forma predeterminada. También conservan los espacios en blanco circundantes.

No puedes establecer un ancho y una altura explícitos en los elementos intercalados. Los elementos circundantes ignorarán cualquier margen y padding a nivel de bloque.

.my-element {
    display: block;
}

Los elementos de bloque no deben estar uno junto al otro. Crean una línea nueva para ellos mismos. A menos que lo modifique otro código CSS, un elemento de bloque se expandirá hasta el tamaño de la dimensión intercalada y, por lo tanto, abarcará todo el ancho en un modo de escritura horizontal. Se respetará el margen en todos los lados de un elemento de bloque.

.my-element {
    display: flex;
}

La propiedad display también determina cómo deben comportarse los elementos secundarios de un elemento. Por ejemplo, si estableces la propiedad display en display: flex, el cuadro será de nivel de bloque y también se convertirán sus elementos secundarios en elementos flexibles. Esto habilita las propiedades flexibles que controlan la alineación, el orden y el flujo.

Flexbox y cuadrícula

Existen dos mecanismos de diseño principales que crean reglas de diseño para varios elementos: flexbox y cuadrícula. Comparten similitudes, pero están diseñados para resolver diferentes problemas de diseño.

Caja flexible

.my-element {
    display: flex;
}

Flexbox es un mecanismo para crear diseños unidimensionales. Diseño en un solo eje, ya sea horizontal o vertical. De forma predeterminada, Flexbox alineará los elementos secundarios del elemento uno al lado del otro, en la dirección intercalada, y los estirará en la dirección del bloque para que todos tengan la misma altura.

Los elementos permanecerán en el mismo eje y no se ajustarán cuando se queden sin espacio. En cambio, intentarán aplastarse en la misma línea. Este comportamiento se puede cambiar con las propiedades align-items, justify-content y flex-wrap.

Flexbox también convierte los elementos secundarios en elementos flexibles, lo que significa que puedes escribir reglas sobre cómo se comportan dentro de un contenedor flexible. Puedes cambiar la alineación, el orden y la justificación de un elemento individual. También puedes cambiar la forma en que se reduce o aumenta con la propiedad flex.

.my-element div {
    flex: 1 0 auto;
}

La propiedad flex es una abreviatura de flex-grow, flex-shrink y flex-basis. Puedes expandir el ejemplo anterior de la siguiente manera:

.my-element div {
 flex-grow: 1;
 flex-shrink: 0;
 flex-basis: auto;
}

Los desarrolladores proporcionan estas reglas de bajo nivel para sugerir a un navegador cómo debe comportarse el diseño cuando se enfrenta a las dimensiones del contenido y del viewport. Esto lo convierte en un mecanismo muy útil para el diseño web adaptable.

Cuadrícula

.my-element {
    display: grid;
}

La cuadrícula es similar en muchas formas a flexbox, pero está diseñada para controlar diseños de varios ejes en lugar de diseños de un solo eje (espacio horizontal o vertical).

La cuadrícula te permite escribir reglas de diseño en un elemento que tenga display: grid y presenta algunas primitivas nuevas para definir el diseño, como las funciones repeat() y minmax(). Una unidad de cuadrícula útil es la unidad fr, que es una fracción del espacio restante. Puedes compilar cuadrículas tradicionales de 12 columnas, con un espacio entre cada elemento, con 3 propiedades CSS:

.my-element {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

En el ejemplo anterior, se muestra un diseño de un solo eje. Mientras que Flexbox trata principalmente a los elementos como un grupo, la cuadrícula te brinda un control preciso sobre su ubicación en dos dimensiones. Podríamos definir que el primer elemento de esta cuadrícula ocupa 2 filas y 3 columnas:

.my-element :first-child {
  grid-row: 1/3;
  grid-column: 1/4;
}

Las propiedades grid-row y grid-column le indican al primer elemento de la cuadrícula que se extienda hasta el inicio de la cuarta columna, desde la primera columna y, luego, hasta la tercera fila, desde la primera fila.

Diseño de flujo

Si no usas la cuadrícula o flexbox, tus elementos se muestran en el flujo normal. Hay una serie de métodos de diseño que puedes usar para ajustar el comportamiento y la posición de los elementos cuando están en flujo normal.

Bloqueo intercalado

¿Recuerdas que los elementos circundantes no respetan el margen y el padding del bloque en un elemento intercalado? Con inline-block, puedes hacer que eso suceda.

p span {
    display: inline-block;
}

Cuando usas inline-block, aparece un cuadro que tiene algunas de las características de un elemento a nivel de bloque, pero que fluye de manera intercalada con el texto.

p span {
    margin-top: 0.5rem;
}

Anuncio flotante

Si tienes una imagen dentro de un párrafo de texto, ¿no sería útil que el texto envolviera la imagen como la ves en un periódico? Puedes hacerlo con números de punto flotante.

img {
    float: left;
    margin-right: 1em;
}

La propiedad float le indica a un elemento que “flota” en la dirección especificada. Se indica que la imagen de este ejemplo flote hacia la izquierda, lo que permite que los elementos del mismo nivel "se unan" a su alrededor. Puedes indicarle a un elemento que flote left, right o inherit.

Diseño de varias columnas

Si tienes una lista de elementos muy larga, como una lista de todos los países del mundo, puede provocar que el usuario se desplace mucho y desperdicie tiempo. También puede crear un espacio en blanco excesivo en la página. Con las columnas múltiples de CSS, puedes dividir esto en varias columnas para resolver ambos problemas.

<h1>All countries</h1>
<ul class="countries">
  <li>Argentina</li>
  <li>Aland Islands</li>
  <li>Albania</li>
  <li>Algeria</li>
  <li>American Samoa</li>
  <li>Andorra</li>
  …
</ul>

.countries {
    column-count: 2;
    column-gap: 1em;
}

Esto divide automáticamente esa lista larga en dos columnas y agrega un espacio entre las dos columnas.

.countries {
    width: 100%;
    column-width: 260px;
    column-gap: 1em;
}

En lugar de configurar la cantidad de columnas en las que se divide el contenido, también puedes definir un ancho mínimo deseado mediante column-width. A medida que haya más espacio disponible en el viewport, se crearán más columnas automáticamente y, a medida que se reduzca el espacio, también se reducirán las columnas. Esto es muy útil en contextos de diseño web adaptable.

Posicionamiento

El último de esta descripción general de los mecanismos de diseño es el posicionamiento. La propiedad position cambia el comportamiento de un elemento en el flujo normal del documento y la forma en que se relaciona con otros elementos. Las opciones disponibles son relative, absolute, fixed y sticky, y el valor predeterminado es static.

.my-element {
  position: relative;
  top: 10px;
}

Este elemento se desplaza 10 px hacia abajo en función de su posición actual en el documento, ya que se posiciona respecto de sí mismo. Agregar position: relative a un elemento también lo convierte en el bloque contenedor de cualquier elemento secundario con position: absolute. Esto significa que su elemento secundario ahora se reposicionará a este elemento en particular, en lugar del elemento superior relativo superior, cuando tenga una posición absoluta aplicada.

.my-element {
  position: relative;
  width: 100px;
  height: 100px;
}

.another-element {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
}

Cuando configuras position como absolute, se divide el elemento del flujo de documentos actual. Esto significa dos cosas:

1. Puedes posicionar este elemento donde quieras, con top, right, bottom y left en su elemento superior relativo más cercano.
2. Todo el contenido que rodea a un elemento absoluto se reprocesa para llenar el espacio restante que deja ese elemento.

Un elemento con un valor position de fixed se comporta de una manera similar a absolute, y su elemento superior es el elemento raíz <html>. Los elementos de posición fija permanecen anclados desde la parte superior izquierda según los valores top, right, bottom y left que establezcas.

Puedes lograr los aspectos fijos y fijos de fixed y los aspectos más predecibles de respetar el flujo de documentos de relative mediante sticky. Con este valor, a medida que el viewport se desplaza más allá del elemento, permanece anclado a los valores top, right, bottom y left que establezcas.

Conclusión

El diseño CSS ofrece muchas opciones y flexibilidad. Para conocer más sobre la potencia de Flexbox y Grid de CSS, continúa con los siguientes módulos.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre diseño