Infraestructura de diseño web sensible (RWD)

Estas tecnologías y patrones de diseño incluyen las características siguientes:

• Diseños y cuadrículas fluidos (Ejemplo)
• Apilamiento de columnas
• Anidamiento de columnas
• Orden de apilamiento

El fragmento de código siguiente muestra una página con una cuadrícula fluida:

		<div class="row">
			<div class="col12"></div>
		</div>
		<div class="row">
			<div class="col6"></div>
			<div class="col6"></div>
		</div>
		<div class="row">
			<div class="col4"></div>
			<div class="col4"></div>
			<div class="col4"></div>
		</div>
		<div class="row">
			<div class="col3"></div>
			<div class="col3"></div>
			<div class="col3"></div>
			<div class="col3"></div>
		</div>
		<div class="row">
			<div class="col2"></div>
			<div class="col2"></div>
			<div class="col2"></div>
			<div class="col2"></div>
			<div class="col2"></div>
			<div class="col2"></div>
		</div>
		<div class="row">
			<div class="col1"></div>
			<div class="col11"></div>
		</div>
		<div class="row">
			<div class="col2"></div>
			<div class="col10"></div>
		</div>
		<div class="row">
			<div class="col3"></div>
			<div class="col9"></div>
		</div>
		<div class="row">
			<div class="col4"></div>
			<div class="col8"></div>
		</div>
		<div class="row">
			<div class="col5"></div>
			<div class="col7"></div>
		</div>

Observe los puntos siguientes que hay que tener en cuenta al trabajar con diseños y cuadrículas fluidas:

• Una fila siempre está dividida en 12 columnas, independientemente del punto de interrupción
• Un elemento hijo de la fila puede abarcar de 1 - 12 columnas, independientemente del punto de interrupción con una de las clases col*.
• Si una fila que tiene elementos hijo abarca un total de más de 12 columnas, fluyen según cómo HTML maneja los elementos flotantes.
  Por ejemplo, para una fila que contiene tres elementos hijos que abarcan 8, 8 y 4 columnas son los siguientes:

  1. El primero elemento hijo se sitúa en la parte superior izquierda de la fila que abarca ocho columnas. Es decir, 2/3 de la anchura de la fila.
  2. El segundo elemento hijo se sitúa bajo el primer elemento hijo, abarcando también ocho columnas.
  3. El tercer elemento hijo se sitúa a la derecha del segundo elemento hijo, que abarca cuatro columnas. Es decir, 1/3 de la anchura de la fila.
• El elemento hijo de una fila puede responder a puntos de interrupción RWD-A y RWD-C mediante la clase acol* para la clase RWD-A o ccol* para RWD-C.

  Por ejemplo, el elemento hijo de una fila puede abarcar 6 columnas de forma predeterminada y 12 columnas en el punto de interrupción RWD-A mediante class="col6 acol12".

• Las filas y sus elementos hijo deben tener una altura flexible o automática, puesto que una altura de fila fija interfiere con columnas que están apiladas. Las alturas de elementos hijo fijos suelen ser aceptables, pero deben evitarse puesto que las alturas de contenido pueden cambiar a medida que los elementos hijo de una fila cambian su tamaño horizontalmente respecto a la zona de observación.
• El sistema de cuadrícula fluido no tiene medianiles incorporados o márgenes, entre elementos hijo de una fila. Se utiliza un conjunto separado de reglas CSS para definir los márgenes entre widgets.
• No aplique ningún margen a elementos hijo de una fila, puesto que esto provoca que el total de la anchura de columna exceda del 100%.
• Evite bordes o rellenos en elementos hijo de una fila, dado que esto requiere la descodificación box-sizing: border-box. Además, esta regla también se aplica a filas. No obstante, los márgenes de la fila son aceptables.
• Las clases col* no contienen puntos de interrupción. Los elementos con únicamente las clases col* no se apilan, independientemente de la anchura de la zona de observación.col*

El apilamiento de columnas se implementa de la manera siguiente: Se utilizan todos los elementos hijo de una fila acol12. Por ejemplo, para una fila que contiene dos elementos hijo con clases col4 acol12 y clases col8 acol12 respectivamente. En este escenario, los elementos hijo están situados uno junto al otro forma predeterminada, abarcando 4 y 8 columnas respectivamente. Sin embargo, la clase acol12, hace que los elementos hijo abarquen 12 columnas cada uno en el punto de interrupción RWD-A, de forma que estén dispuestos verticalmente, cada uno abarcando la anchura completa de la fila.acol12