Diseño

Imagine que está trabajando como desarrollador y un colega diseñador le entrega el diseño para un nuevo sitio web. El diseño tiene todo tipo de distribución de elementos y composiciones interesantes: diseños bidimensionales que tienen en cuenta el ancho y la altura de la ventana gráfica, así como diseños que deben ser fluidos y flexibles. ¿Cómo decides la mejor manera de llevarlos a cabo con CSS?
El CSS nos proporciona varias formas de resolver problemas de diseño en un eje vertical, horizontal o incluso ambos. Elegir el método de diseño adecuado para un contexto puede ser difícil y, a menudo, es posible que necesite más de un método de diseño para resolver su problema. Para ayudar con esto, en los siguientes módulos, aprenderá sobre las características únicas de cada mecanismo de diseño CSS para informar esas decisiones.
Diseño: una breve historia #
En los primeros días de la web, los diseños más complejos que un simple documento se presentaban con elementos <table>
. La separación de HTML de los estilos visuales se hizo más fácil cuando los navegadores adoptaron CSS ampliamente a finales de los noventa. El CSS abrió la puerta a que los desarrolladores pudieran cambiar completamente la apariencia de un sitio web sin tener que tocar el HTML. Esta nueva capacidad inspiró proyectos como The CSS Zen Garden, creado para demostrar el poder del CSS y alentar a más desarrolladores a aprenderlo. El CSS ha evolucionado a medida que evolucionan nuestras necesidades de diseño web y tecnología de navegador. Puede leer cómo el diseño CSS y nuestro enfoque de diseño han evolucionado con el tiempo en este artículo de Rachel Andrew.
Diseño: el presente y el futuro #
El CSS moderno tiene herramientas de diseño excepcionalmente poderosas. Tenemos sistemas dedicados para el diseño y vamos a tener una visión de alto nivel sobre lo que tenemos a nuestra disposición, antes de profundizar en más detalles de Flexbox y Grid en los próximos módulos.
Comprender la propiedad display
#
La propiedad display
hace dos cosas. Lo primero es determinar si la caja a la que se aplica actúa como en línea o en bloque.
.my-element {
display: inline;
}
Los elementos en línea se comportan como palabras en una oración. Se sientan uno al lado del otro en la dirección en línea. Los elementos como <span>
y <strong>
, que se utilizan normalmente para dar estilo a fragmentos de texto dentro de elementos que contienen elementos como un <p>
(párrafo), van en línea de forma predeterminada. También conservan los espacios en blanco circundantes. No puede establecer un ancho y un alto explícito en elementos en línea. Los elementos circundantes ignorarán cualquier margen y espacio de relleno a nivel de bloque.
.my-element {
display: block;
}
Los elementos de bloque no se sientan uno al lado del otro. Crean una nueva línea para ellos mismos. Un elemento de bloque se expandirá al tamaño de la dimensión en línea (a menos que sea cambiado por otro código CSS), 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 el comportamiento de los hijos de un elemento. Por ejemplo, establecer la propiedad display
a display: flex
hace de la caja una caja a nivel de bloque, y también convierte a sus hijos en elementos flexibles. Esto habilita las propiedades flexibles que controlan la alineación, el orden y el flujo.
Flexbox y Grid #
Hay dos mecanismos de diseño principales que crean reglas de diseño para múltiples elementos, flexbox y grid. Comparten similitudes, pero están dirigidos a resolver diferentes problemas de diseño.
Flexbox #
.my-element {
display: flex;
}
Flexbox es un mecanismo de diseño para diseños unidimensionales, es decir, disposición en un solo eje, ya sea horizontal o vertical. De forma predeterminada, flexbox alineará los elementos hijos del elemento uno al lado del otro, en la dirección en línea, y los estirará en la dirección del bloque para que todos tengan la misma altura.
.my-element div {
flex: 1 0 auto;
}
La propiedad flex
es una abreviatura de flex-grow
, flex-shrink
y flex-basis
. El ejemplo anterior se puede desglosar 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 indicarle al navegador cómo debe comportarse el diseño cuando se ve desafiado por el contenido y las dimensiones de la ventana gráfica. Esto lo convierte en un mecanismo muy útil para el diseño web receptivo.
Grid #
.my-element {
display: grid;
}
Grid 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 vertical u horizontal). Grid le permite escribir reglas de diseño en un elemento que tiene display: grid
e introduce algunas primitivas nuevas para el estilo de diseño, como las funciones repeat()
y minmax()
. La unidad fr
(una fracción del espacio restante) es una unidad de cuadrícula útil. Puede construir cuadrículas tradicionales de 12 columnas, con un espacio entre cada objeto, con 3 propiedades CSS:
.my-element {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1rem;
}
.my-element :first-child {
grid-row: 1/3;
grid-column: 1/4;
}
Las propiedades grid-row
y grid-column
indican al primer elemento de la cuadrícula que se extienda desde la primera columna hasta el inicio de la cuarta columna, luego se extienda desde la primera fila hasta la tercera fila.
Disposición de flujo #
Si no usa grid o flexbox, sus elementos se muestran en flujo normal. Hay varios métodos de diseño que puede utilizar para ajustar el comportamiento y la posición de los elementos cuando están en flujo normal.
Bloque en línea #
¿Recuerda cómo los elementos circundantes no respetan el margen de bloque y el relleno en un elemento en línea? Con inline-block
puede hacer que esto suceda.
p span {
display: inline-block;
}
El uso de inline-block
le brinda un cuadro que tiene algunas de las características de un elemento a nivel de bloque, pero que aún fluye en línea con el texto.
p span {
margin-top: 0.5rem;
}
Flotadores #
Si tiene una imagen que se encuentra dentro de un párrafo de texto, ¿no sería útil que ese texto se situara alrededor de esa imagen como podría ver en un periódico? Puede hacer esto con los flotadores.
img {
float: left;
margin-right: 1em;
}
La propiedad float
indica a un elemento que "flote" en el lugar especificado. A la imagen de este ejemplo se le indica que flote a la izquierda, lo que permite que los elementos hermanos se "envuelvan" a su alrededor. Puede indicarle a un elemento que flote a la left
, right
o inherit
.
Disposición multicolumna #
Si tiene una lista muy larga de elementos, como una lista de todos los países del mundo, puede ser resultar en un desplazamiento y pérdida de tiempo muy grandes para un usuario. También puede crear un exceso de espacios en blanco en la página. Con el CSS multicolumna, puede dividir su lista 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 columnas.
.countries {
width: 100%;
column-width: 260px;
column-gap: 1em;
}
Posicionamiento #
Lo último en esta descripción general de los mecanismos de diseño es el posicionamiento. La propiedad position
cambia el comportamiento de un elemento dentro del flujo normal del documento y la manera en que se relaciona con otros elementos. Las opciones disponibles son relative
, absolute
, fixed
y sticky
con el valor predeterminado de static
.
.my-element {
position: relative;
top: 10px;
}
Este elemento se desplaza 10 píxeles hacia abajo en función de su posición actual en el documento, ya que está posicionado con respecto a sí mismo. Agregar position: relative
a un elemento también lo convierte en el bloque contenedor de cualquier elemento hijo con position: absolute
. Esto significa que el hijo ahora se reposicionará de acuerdo a este elemento en particular, en lugar de al padre relativo superior, cuando se le aplique 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 establece position
en absolute
, el elemento del flujo de documentos actual se separa. Esto significa dos cosas:
- Puede usar
top
,right
,bottom
yleft
en el padre relativo más cercano de un elemento para colocarlo donde quiera. - Todo el contenido que rodea a un elemento absoluto se reajusta para llenar el espacio restante. Un elemento con un valor de
position
fixed
se comporta de manera similar aabsolute
, siendo su padre el elemento raíz<html>
. Los elementos de posición fija permanecen anclados desde la parte superior izquierda según los valorestop
,right
,bottom
yleft
que establezca. Puede lograr los aspectos anclados y fijos defixed
y los aspectos más predecibles que respetan el flujo de documentos derelative
mediante el uso desticky
. Con este valor, a medida que la ventana gráfica se desplaza más allá del elemento, permanece anclada a los valorestop
,right
,bottom
yleft
establecidos.En conclusión #
Hay muchas opciones y una gran flexibilidad con el diseño CSS. Para sumergirse más en el poder del CSS de Flexbox y Grid, continúe con los siguientes módulos.
Test your knowledge of layoutWhat 2 things does the
Determinesdisplay
property do?inline
orblock
ornone
. Determines the grid layout frame. Determines how the children should behave. Determines if the box should scroll.The layout engine needs to know if this box be full width or not and does it need a new line.
The display property can set display to grid but it doesn't have anything to do with a layout frame.
Flexbox and grid have opinions and new features for their children.
That's the
overflow
property.To flow multiple paragraphs into columns, which CSS property is best for this task?
display: grid
column-count
display: flex
float
While grid could put multiple paragraphs into columns, those columns would be their own columns, not flowing together from one to the next.
Paragraphs will flow from the end of one column into the start of the next, like a magazine or newspaper will do.
While flex could put multiple paragraphs into columns, those columns would be their own columns, not flowing together from one to the next like is needed.
Try again!
What does it mean if a block is out of flow?
It's stuck on the side of the river. It's been given atop
orleft
position value. It's no longer positioned based on its siblings positions.Context is CSS here, not geography.
Having these properties alone do not pull a box out of flow.
A box with
position: absolute
for example, is now positioned with x and y coordinates based on the containing block, and not its order with other sibling elements.Flexbox and Grid wrap their children by default?
True FalseIt must be opted into with
flex-wrap: wrap
orrepeat(auto-fit, 30ch)
.Flexbox and Grid have special wrapping features that need additional styles to apply.
Next and previous lessons