Revisin documentacin de Material design

Sistema de grillas
Concepto de cajas flexibles: Lo que caracteriza un diseo flexible es su habilidad para alterar el ancho y
alto de sus elementos para ajustarse lo mejor posible al espacio disponible en cualquier dispositivo. Un
contenedor flexible expande sus elementos para rellenar el espacio libre, o los comprime para evitar que
rebasen el rea prevista.
Nota: El modelo en bloque tiende a operar bajo una funcin de apilamiento en lnea.
Ventajas de aplicacin
1. Diseo de construccin ms efectivo que el de bloque, ya que no se vale de instrucciones float para los
contenedores internos.
2. Se ajusta al espacio disponible en la pantalla, ya sea rellenando el espacio o reducindolo.
3. Es irrelevante la organizacin en el cdigo fuente frente a los mdulos en la pantalla.

Sentencias
flow-direction: [row | row-reverse | column | column-reverse | initial | inherit;]
order: [1,2,3,4 ...]
flex: flex-grow | flex-shrink | flex-basis | auto | initial |inherit;
La propiedad flex especifica la longitud del artculo, en relacin con el resto de los elementos flexibles en el
interior del mismo contenedor.

Material Design - Sistema de grillas

Los siguientes son los atributos del parmetro FLEX disponibles en el framework, para diferentes
aplicaciones.

flex = int (1,2,3,4,5,...)

order-flex

Establece orden de los elementos.

order-flex-sm

Establece orden de los elementos en los dispositivos menos de 600px

de ancho.

order-flex-gt-sm

Establece orden de los elementos en los dispositivos de ms de 600px

de ancho.

order-flex-md

Establece orden de los elementos en los dispositivos entre 600px y

960px de ancho.

order-flex-gt-md

Establece orden de los elementos en los dispositivos de ms de 960px

de ancho.

flex-para-lg

Establece orden de los elementos en los dispositivos entre 960px y

1200px de ancho.

order-flex-gt-lg

Establece orden de los elementos en los dispositivos de ms de 1200px

de ancho.

Material Design - Contenedores responsive

Para la construccin de las app el framework ofrece algunos atributos importantes a los mdulos layout.

layout = row | column

layout-margin= [int, float, %, em]
layout-padding= [int, float, %, em]

layout

Establece el diseo por defecto en todos los dispositivos.

layout-sm

Establece la distribucin en dispositivos menos de 600px de ancho

(mviles).

layout-gt-sm

Establece el diseo de los dispositivos de ms de 600px de ancho (ms

grande que los telfonos).

layout-md

Establece el diseo de los dispositivos entre 600px y 960px de ancho

(tabletas en el retrato).

layout-gt-md

Establece la distribucin en dispositivos superior a 960px de ancho (ms

grande que las tabletas en el retrato).

layout-lg

Establece el diseo de los dispositivos entre 960 y 1200px de ancho

(tabletas en el paisaje).

layout-gt-lg

Establece el diseo de los dispositivos de ms de 1200px de ancho

(ordenadores y pantallas de gran tamao).

Disposicin y alineacin de los mdulos [hijos y padres]

Propiedades de entrada la primera indica la disposicin del mdulo flex y la segunda la alineacin dentro del
espacio de trabajo ejes [x, y].

layout = row | column

layout-align= start | center | end | space-around | space-between (Horiz)
start | center | end
(Vertical)

layout-align

Establece la alineacin nio.

layout-align-sm

Establece la alineacin nio en dispositivos menos de 600px de

ancho.

layout-align-gt-sm

Establece la alineacin nio en los dispositivos de ms de 600px de

ancho.

layout-align-md

Establece la alineacin nio en dispositivos entre 600px y 960px de

ancho.

layout-align-gt-md

Establece la alineacin nio en los dispositivos de ms de 960px de

ancho.

layout-align-lg

Establece la alineacin nio en dispositivos entre 960px y 1200px

de ancho.

layout-align-gt-lg

Establece la alineacin nio en los dispositivos de ms de 1200px

de ancho.

Ocultar y mostrar mdulos Responsive

hide

display: none

hide-sm

display: none en dispositivos menos de 600px de ancho.

hide-gt-sm

display: none en dispositivos mayores de 600px de ancho.

hide-md

display: none en dispositivos entre 600px y 960px de ancho.

hide-gt-md

display: none en dispositivos mayores de 960px de ancho.

hide-lg

display: none en dispositivos entre 960px y 1200px.

hide-gt-lg

display: none en los dispositivos de ms de 1200px de ancho.

show

Niega ocultar.

show-sm

Niega ocultar en dispositivos menos de 600px de ancho.

show-gt-sm

Niega ocultar en los dispositivos de ms de 600px de ancho.

show-md

Niega ocultar en dispositivos entre 600px y 960px de ancho ..

show-gt-md

Niega ocultar en los dispositivos de ms de 960px de ancho.

show-lg

Niega ocultar en dispositivos entre 960px y 1200px.

show-gt-lg

Niega ocultar en los dispositivos de ms de 1200px de ancho.