HTML 5 diseño Responsive Grid - Rejilla adaptable. Método rejilla maquetación

[SamML]

Hola a todos,

Quería tratar de dejar un aporte acerca de  el método de la rejilla, aunque sea ya bastante antiguo sigue evolucionando y se sigue utilizando en la mayoría de maquetaciones.

Muchos frameworks lo utilizan. Por ejemplo Bootstrap 3 ha adaptado un modelo de rejillas para maquetación adaptable (responsive) que funciona de maravilla y hace que la colocación de items deje de ser tediosa a la hora de programar una página. Basado en su método viene este aporte a modo de profundizar en el funcionamiento yo y el que lo necesite.

La teoría del uso de la rejilla o grid consiste en visualizar en entorno como si fuera una cuadricula donde se nos permite colocar columnas flotantes de un ancho determinado sin necesidad de recurrir a medidas si no a porcentajes, para facilitarnos trabajo.

Contaremos entonces con un elemento row y un elemento column. Y añadimos un elemento container que englobará el conjunto.

Lo primero a conocer, pues ha resultado el método mas eficaz a la hora de colocar elementos flotantes de esta forma, es la trampa del clearfix o "Clearfix hack".
Antes se utilizaba de modo que se añadía una clase CSS llamada clearfix y se aplicaba al selector :after para hacer un "clear:both" a continuación del elemento con dicha clase.
Esto ha evolucionado y ahora se considera que el método mas compatible es el de aplicar a los elementos anteriores y posteriores al elemento que vamos a utilizar como contenedor los atributos {display:table; content: " ";zoom:1;}

Se añade content porque es necesario al especificar display table. Y se añade Zoom:1 para navegadores IE6 e IE7. Esta acción digamos que genera un nuevo bloque "delante y detras" en todos los navegadores.  Es el que nos permite generar las filas o los "saltos de linea" utilizando clear:both en ellas.
Con todo esto pues las primeras clases que definiremos serán:

Código: [Seleccionar]

.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.row:before, .row:after {
display: table;
content: " ";
zoom:1;
}
.column {
position: relative;
float:left;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.container:before, .container:after {
display: table;
content: " ";
zoom:1;
}
.row:after {
clear:both;
}

Decir que el padding y el margin(negativo) de el contenedor y la fila son "de amarre" por compatibilidades y las columnas pues quedan, como se ve, con un padding de 15px. Esto es visual y nos puede interesar adaptarlo o no.

Añadimos también las propiedades al principio

Código: [Seleccionar]

* {
  margin:0px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
Para el dimensionamiento de bloques de contenido adaptable.  y un margin:0 ; a modo de reset cutre. 

Asi pues ya tenemos el núcleo del sistema y nos falta definir las columnas.
Aquí es donde decidimos el diseño responsive y aplicamos tamaños. Para simplificar vamos a suponer que solo dispondremos de dos tamaños de columna de 50% y 20% del ancho y adaptamos el contenedor para 3 resoluciones.

Decir que no es el sistema exacto que utiliza Bootstrap que mencioné al principio pero si la metodología. Donde especificamos en la clase de la columna el tamaño del dispositivo. Usaré small, medium y large.
Y definimos en primer lugar los atributos en dispositivos pequeños por lo que usamos min-width para especificarlos dejando la que clase "global" (que definimos antes) sea la que afecte a los pequeños dispositivos.
Como dato ya que se ha hablado de este tema bastante, este metodo a mi forma de verlo  es el "partir desde el 0" en las resoluciones y no desde una resolución conocida (método también utilizado) personalmente considero que esta es la forma mas correcta por muchos motivos y al final a mi parecer la mas simple.

Y al grano colocamos:

Código: [Seleccionar]


.column.smallscreen-20{
    width:20%;
}
.column.smallscreen-50{
    width:50%;
}

@media (min-width:518px) {
    .container {
        width:500px;}
    .column.mediumscreen-20 {
    width:20%;}
    .column.medium-50 {
    width:50%;}
   
}
@media (min-width:922px) {
    .container {
        width:900px;}
    .column.largescreen-20 {
    width:20%;}
     .column.largescreen-50 {
    width:50%;}
   
}

Y de esta forma podemos especificar mediante la clase que tamaño tomara la columna en cada resolución. Si queremos que en resolucion pequeña sea el grande class="column smallscreen-50" por ejemplo y podemos ir anidando si queremos que cambie el tamaño porcentual de una resolución a otra.

Quizá esté algo mal si eso comentar y espero a alguien le sirva

A modo de ejemplo y resumen dejo la siguiente página.

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title>Grid Responsive, SamML para aprenderaprogramar.com</title>
        <style>
        @charset "utf-8";*{margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}.row{margin-right:-15px;margin-left:-15px}.row:before,.row:after{display:table;content:" ";zoom:1}.column{position:relative;float:left;min-height:1px;padding-right:15px;padding-left:15px}.container:before,.container:after{display:table;content:" ";zoom:1}.row:after{clear:both}.column.smallscreen-20{width:20%}.column.smallscreen-50{width:50%}@media(min-width:518px){.container{width:500px}.column.mediumscreen-20{width:20%}.column.medium-50{width:50%}}@media(min-width:922px){.container{width:900px}.column.largescreen-20{width:20%}.column.largescreen-50{width:50%}}h1{padding:10px;color:#393}.column:nth-child(2n+1) p{padding:15px 15px;color:white;background-color:#333}.column:nth-child(2n) p{padding:15px 15px;color:black;background-color:#EEE}/*SamML para aprenderaprogramar.com*/
        </style>
    </head>
    <body>
        <h1>Podemos insertar elementos de ancho porcentual que habiamos definido, en una fila, y cambian de linea si sobrepasa el tamaño </h1>
        <div class="container">
            <div class="row">
                <div class="column smallscreen-50 mediumscreen-20 largescreen-20">
                    <p>Lorem ipsum dolor sit amet.</p>
                </div>
                <div class="column smallscreen-50 mediumscreen-20 largescreen-20">
                    <p>Lorem ipsum dolor sit amet.</p>
                </div>
                <div class="column smallscreen-50 mediumscreen-50 largescreen-20">
                    <p>Lorem ipsum dolor sit amet.</p>
                </div>
               
            </div>
            <h1>O podemos insertar una fila nueva</h1>
            <div class="row">
                <div class="column smallscreen-50 mediumscreen-50 largescreen-20">
                    <p>Lorem ipsum dolor sit amet.</p>
                </div>
                <div class="column">
                    <p>Lorem ipsum dolor sit amet.</p>
                    <p>Lorem ipsum dolor sit amet.</p>
                    <p>Lorem ipsum dolor sit amet.</p>
                </div>
                <div class="column smallscreen-50 mediumscreen-50 largescreen-50">
                    <p>Lorem ipsum dolor sit amet.</p>
                    <p>Lorem ipsum dolor sit amet.</p>
                    <p>Lorem ipsum dolor sit amet.</p>
                    <p>Lorem ipsum dolor sit amet.</p>
                    <p>Lorem ipsum dolor sit amet.</p>
                </div>
                <div class="column">
                    <p>Lorem ipsum dolor sit amet.</p>
                    <p>Lorem ipsum dolor sit amet.</p>
                    <p>Lorem ipsum dolor sit amet.</p>
                </div>
                <div class="column smallscreen-50 mediumscreen-50 largescreen-20">
                    <p>Lorem ipsum dolor sit amet.</p>
                </div>
            </div>
        </div>
    </body>
</html>

¡Saludos!

[César Krall]

Hola Sam, gracias por el aporte. Creo que contiene ideas muy interesantes. También he estado leyendo algo sobre Bootstrap y parece también interesante, si no me equivoco es el front-end framework que más se utiliza en desarrollos web. Saludos!

[SamML]

Buenos dias!,
gracias por la respuesta César. Como bien dices bootstrap 3 a dia de hoy esta en el top como front-end framework. A mi parecer un puesto merecido por varios motivos.
Para mi gusto aunque el uso de interfaces visuales tipo Dreamweaver, resulta mas visual e intuitivo al final llega a resultar tedioso el echo de colocar elementos y muchos recurrimos al código, para lo cual dreamweaver deja de ser la mejor herramienta a mi parecer.

Y aquí bootstrap es donde se convierte en "magia" una vez lo empezamos a entender pues nos permite maquetaciones rápidas utilizando sus propias clases, que no son feas aunque empiezan a repetirse bastante. Podemos hacer nuestras modificaciones sencillas de los elementos(colores, espacios...). Crear elementos propios..  Y siempre podremos eliminar del código finalmente elementos que no usemos sin comernos mucho el coco ya que no contiene un código extenso. Recibe muchos aportes de la comunidad de programadores, via GitHub, por lo que realmente para mi gusto acaba por fuerza adaptandose a nuestras verdaderas necesidades y, ademas de aportarnos herramientas y elementos, indagando nos aporta métodos y fundamentos que para mi es lo mas interesante.

No lo recomendaría si no hay conocimientos previos de HTML y CSS pues sin conocer el método nuestras maquetaciones acaban resultando copias, pero cualquiera con conocimientos medios debería echarle un vistazo y conocerlo pues yo creo que sobre todo con el tema "responsive" va a dar para largo como opinión personal.

Salud!

[César Krall]

Buenos días, no me considero experto en el tema por lo que solo hablo en base a lo que he oído. Mucha gente e incluso empresas usan dreamweaver, sin embargo cuando hablamos de desarrolladores o empresas profesionales de la programación web en general parece que detestan dreamweaver. En cuanto a los diseños responsive yo todavía no acabo de ver claro el tratar de hacer que una web se muestre bien tanto en una pequeña pantalla de un smartphone como en una pantalla gigante, la impresión que da es que se va a necesitar codificar realmente la respuesta a dos situaciones distintas y eso hace complejas las cosas, casi como si tuviéramos dos webs distintas, de hecho algunas empresas tienen su web normal y su web .mobi sin embargo muchas otras no tienen esto. Finalmente sobre los frameworks para desarrollo web el problema que veo es que existen muchos, algunos se solapan en lo que hacen e incluso pueden presentar incompatibilidades. Creo que jQuery y AngularJS son de los más usados pero aprender bien estas herramientas requiere su tiempo.

Saludos!

[SamML]

Estoy totalmente de acuerdo contigo y creo que has dado en el kit de la cuestión en cuanto al sistema responsive.
Hay que tener en cuenta que no es algo que se haya "estandarizado" todavia ni éxiste digamos un método, o el mejor. Y la tecnología base mas usada HTML5 y CSS3 no tenía como propósito el modelo responsive. Asi como tampoco las librerías Javascript mas usadas lo eran.
Por ello tanto estas como los propios programadores hace un tiempo que van buscando un modo de aplicarlo.

Como dices los primeros desarrollos fueron el crear paginas independientes que redirigían en función de la resolución del dispositivo. No es un mal método, realmente es la forma de "cargar lo que necesitas", pero si es el mas costoso a mi punto de verlo.
Luego se empezó a encajar diseños mediante CSS, utilizando el archiconocido @media que ya supuso un cambio y en principio estaba bien visto el adaptar paginas para resoluciones grandes a tamaños pequeños.

Con la práctica creo que la mayoría coincidimos en que el planteamiento inverso resulta mas simple partiendo del diseño para pequeños dispositivos, que cada vez se utilizan mas, y progresando hacia lo que sería la pagina en un tamaño mas amplio. Dejando al aire tamaños gigantes que es lo que vendrá en un futuro, también.

Para entender esto no hay mas que ver el modo práctico. Si creamos una página a vista media por ejemplo vamos a observar como al dismunuir el tamaño los bloques pierden sentido pues suelen acabar siendo demasiado pequeños. En el caso contrario encontraremos siempre menos dificultades o "arreglos" a realizar, en principio uno de los motivos. "Lo pequeño se adapta mejor a un espacio grande que lo grande lo hace a un tamaño pequeño". Así lo veo yo al menos y me resulta mas útil partir del 0 que de una resolución conocida hacia el 0.

Ahora bien, una vez parece esta surgiendo el metodo de clases para redimensionar los bloques a nuestro antojo en funcion de la resolución de forma simple mediante el uso de rejillas que a su vez se adaptan a la resolución creo que es un buen camino para lo que venga. Pero como dices habrá que ver como librerías JS por ejemplo se comportan a la hora de añadir dinamismo y referirse a estos "nuevos objetos" y también a los propios navegadores de cada dispositivo. Ya que aunque Jquery por ejemplo esta en continuo desarrollo y revisión seguro que con los nuevos métodos surje algún problema y también seguro nuevos métodos.

Como resumen decir que el método responsive a dia de hoy para mi se resume en aplicar un <meta> para que el navegador "bloquee" el zoom y crear la página en un contenedor que se adapta. A partir de ahi redirigir por estilos CSS los cambios que harán los elementos, si los tienen que hacer, en cada resolución. Pero no supone realmente crear páginas para cada una en sí ya que una buena estructura va a requerir pocos cambios. Yo  espero que el futuro sea sistemas que autogestionen bloques, que sería un buen proyecto, hasta ahora no nos quedará mas que definirlos.
Habrá que ver