Curso Java Codo a Codo: Clase 1 de HTML

Compilado de Patrones de Diseño

Ej.1: Tiny Tweaks: Es el patrón más simple y sencillo de implementar de todos. Se basa en una sóla columna para el contenido

Celular (600px)

COL1

Tablet (800px)

COL1

Laptop 14" (1024px)

COL1

Monitor (1200px)

COL1

Ej.2: Mostly Fluid: Este patrón consiste en tener una grilla o Grid de tamaño flexible

Celular (600px)

TOP

COL1

COL2

Tablet (800px)

TOP

COL1

COL2

Laptop 14" (1024px)

TOP

COL1

COL2

Monitor (1200px)

TOP

COL1

COL2

Ej.3: Column Drop: Este patrón consiste en tener una grilla o Grid de tamaño flexible

Celular (600px)

COL1

COL2

COL3

Tablet (800px)

COL1

COL2

COL3

Laptop 14" (1024px)

COL1

COL2

COL3

Monitor (1200px)

COL1

COL2

COL3

Ej.4: Layout Shifter: Este es uno de los patrones más complejos. Consiste en mover los bloques de contenido cambiando totalmente el Layout, de ahí el nombre del patrón

Celular (600px)

COL1

COL2

COL3

Tablet (800px)

COL1

COL2

COL3

Laptop 14" (1024px)

COL1

COL2

COL3

Monitor (1200px)

COL1

COL2

COL3

Ej.5: Off Canvas: Para el final he dejado el patrón más complejo de implementar pero uno de los más utilizados, sobre todo en aplicaciones móviles. Este patrón esconde contenido en la pantalla y únicamente es visible si realizamos un determinado gesto. Este contenido oculto normalmente es un menú de navegación. Cuando la pantalla es más ancha, este contenido se hace visible.

Celular (600px)

COL1

COL2

Tablet (800px)

COL1

COL2

Laptop 14" (1024px)

COL1

COL2

COL3

Monitor (1200px)

COL1

COL2

COL3