Diseño

Podcast de CSS - 009: Diseño

Imagina que estás trabajando como desarrollador y un colega de diseño te entrega un diseño para un sitio web nuevo. Tiene todo tipo de disposiciones 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 la mejor manera de diseñarlos con CSS?

CSS nos brinda varias formas de resolver problemas de diseño, en un eje horizontal, en un eje vertical o en ambos. Elegir el método de diseño correcto para un contexto puede ser difícil, y, a menudo, es posible que necesites más de un método de diseño para resolver el problema. Para ayudar con esto, en los siguientes módulos, aprenderás sobre las características únicas de cada mecanismo de diseño 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 diseñaron con elementos <table>. Se facilitó la separación del HTML de los estilos visuales cuando los navegadores adoptaron ampliamente CSS a fines de la década de 1990. CSS les permitió a los desarrolladores cambiar por completo el aspecto de un sitio web sin tocar HTML. Esta nueva función inspiró proyectos como El jardín zen de CSS, que se creó para demostrar el poder de CSS y alentar a más desarrolladores a aprenderlo.

CSS ha evolucionado junto con nuestras necesidades de diseño web y tecnología de navegadores. Puedes leer cómo el diseño de CSS y nuestro enfoque han evolucionado con el tiempo en este artículo de Rachel Andrew.

Cronograma que muestra cómo evolucionó los CSS a lo largo de los años, desde 1996 hasta 2021

Diseño: el presente y el futuro

El CSS moderno tiene herramientas de diseño excepcionalmente potentes. Tenemos sistemas dedicados para el diseño y tendremos una visión de alto nivel de lo que tenemos antes de profundizar en Flexbox y Grid en los próximos módulos.

Información sobre la propiedad display

La propiedad display realiza dos acciones. Lo primero que hace es determinar si la caja a la que se aplica actúa como intercalada o como bloque.

.my-element {
  display: inline;
}

Los elementos intercalados se comportan como palabras en una oración. Se sitúan una al lado de la otra, en la dirección en línea. Elementos como <span> y <strong>, que suelen usarse para dar estilo a fragmentos de texto dentro de elementos que contienen, como un <p> (párrafo), están intercalados de forma predeterminada. También conservan el espacio en blanco que las rodea.

Un diagrama que muestra todos los diferentes tamaños de una caja y dónde comienza y termina cada sección de tallas

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

.my-element {
    display: block;
}

Los elementos de bloque no deben ubicarse uno junto al otro. Crean una línea nueva para sí mismos. A menos que se modifique mediante otro código CSS, un elemento de bloque se expandirá al tamaño de la dimensión intercalada lo que abarca 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. Por ejemplo: Si configuras la propiedad display como display: flex, el cuadro será de nivel de bloque. y también convierte 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

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

Flexbox

.my-element {
    display: flex;
}

Flexbox es un mecanismo para diseños unidimensionales. Diseño en un solo eje, ya sea horizontal o vertical De forma predeterminada, Flexbox alineará los elementos secundarios uno al lado del otro. en la dirección intercalada, y estirarlos 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 su lugar, intentarán aplascarse en la misma línea que los demás. Puedes cambiar este comportamiento con las propiedades align-items, justify-content y flex-wrap.

Flexbox también convierte los elementos secundarios para que sean 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 sugerirle a un navegador cómo debe comportarse el diseño. cuando se ve afectado por las dimensiones de contenido y 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 muchos aspectos a flexbox. pero está diseñado 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 tiene display: grid, e incluye algunas primitivas nuevas para aplicar ajustes de estilo al 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, y puedes crear 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 flexbox trata principalmente a los elementos como un grupo, 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 ocupe 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. de la primera columna, luego se extiende hasta la tercera fila, desde la primera fila.

Diseño de flujo

Si no usas grid o flexbox, tus elementos se muestran en el flujo normal. Existen varios métodos de diseño que puedes usar para ajustar el comportamiento y la posición de los elementos cuando se encuentran en el flujo normal.

Bloque intercalado

¿Recuerdas que los elementos circundantes no respetan el margen de bloqueo ni el padding en un elemento intercalado? Con inline-block, puedes provocar que eso suceda.

p span {
    display: inline-block;
}

Usar inline-block te proporciona un cuadro con algunas de las características de un elemento de nivel de bloque. pero aun así fluye alineado 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 ese texto envuelva esa imagen como se ve en un periódico? Puedes hacer esto con flotantes.

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

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

Diseño de varias columnas

Si tienes una lista realmente larga de elementos, como una lista de todos los países del mundo, Esto puede provocar que el usuario tenga mucho desplazamiento y tiempo que se desperdicia. También puede generar exceso de espacio en blanco en la página. Con CSS de varias columnas, puede dividir esto en varias columnas para ayudar con 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 vez de establecer el número de columnas en las que se divide el contenido también puedes definir un ancho mínimo deseado con 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, columnas también se reducen. Esto es muy útil en contextos de diseño web adaptable.

Posicionamiento

Por último, en 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 cómo se relaciona con otros elementos. Las opciones disponibles son relative, absolute, fixed y sticky, con el valor predeterminado 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 está posicionado respecto a sí mismo. Si agregas position: relative a un elemento, también será 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 tiene aplicada una posición absoluta.

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

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

Cuando configuras position en absolute, saca el elemento del flujo del documento actual. Esto implica 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 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 en función de los valores de top, right, bottom y left que establezcas.

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

Conclusión

El diseño CSS ofrece muchas opciones y flexibilidad. Para profundizar más en el poder de Flexbox y Grid de CSS, continúa con los próximos módulos.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre diseño

¿Cuáles son las 2 tareas que realiza la propiedad display?

Determina inline, block o none.
El motor de diseño necesita saber si este cuadro es de ancho completo o no y si necesita una línea nueva.
Determina el marco de diseño de cuadrícula.
La propiedad de visualización puede establecer la visualización en cuadrícula, pero no tiene nada que ver con un marco de diseño.
Determina cómo deben comportarse los elementos secundarios.
Flexbox y grid tienen opiniones y funciones nuevas para sus hijos.
Determina si el cuadro debe desplazarse.
Esa es la propiedad overflow.

Para fluir varios párrafos en columnas, ¿para qué propiedad de CSS es mejor? esta tarea?

display: grid
Si bien la cuadrícula podría poner varios párrafos en columnas, esas columnas serían sus propias columnas, no fluyen juntas de una a la siguiente.
column-count
Los párrafos fluyen desde el final de una columna hasta el inicio de la siguiente, como sucede con una revista o un periódico.
display: flex
Si bien Flex podría colocar varios párrafos en columnas, esas columnas serían sus propias columnas, no fluyen juntas de una a la siguiente como es necesario.
float
Vuelve a intentarlo.

¿Qué significa que un bloque esté fuera del flujo?

Está atrapado en la orilla del río.
En este caso, el contexto es CSS, no la geografía.
Se le asignó un valor de posición top o left.
El hecho de contar con estas propiedades por sí solas no hace que sea indispensable.
Ya no está posicionado en función de las posiciones de sus elementos del mismo nivel.
Un cuadro con position: absolute, por ejemplo, ahora se posiciona con coordenadas x e y según el bloque contenedor y no su orden con otros elementos del mismo nivel.

¿Flexbox y Grid unen sus elementos secundarios de forma predeterminada?

Verdadero
Se debe habilitar con flex-wrap: wrap o repeat(auto-fit, 30ch).
Falso
Flexbox y Grid tienen características de ajuste especiales que necesitan estilos adicionales para aplicarse.