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-flexEstablece orden de los elementos.

order-flex-smEstablece orden de los elementos en los dispositivos menos de 600px de ancho.

order-flex-gt-smEstablece orden de los elementos en los dispositivos de ms de 600px de ancho.

order-flex-mdEstablece orden de los elementos en los dispositivos entre 600px y 960px de ancho.

order-flex-gt-mdEstablece orden de los elementos en los dispositivos de ms de 960px de ancho.

flex-para-lgEstablece orden de los elementos en los dispositivos entre 960px y 1200px de ancho.

order-flex-gt-lgEstablece 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 | columnlayout-margin= [int, float, %, em]layout-padding= [int, float, %, em]

layoutEstablece el diseo por defecto en todos los dispositivos.

layout-smEstablece la distribucin en dispositivos menos de 600px de ancho (mviles).

layout-gt-smEstablece el diseo de los dispositivos de ms de 600px de ancho (ms grande que los telfonos).

layout-mdEstablece el diseo de los dispositivos entre 600px y 960px de ancho (tabletas en el retrato).

layout-gt-mdEstablece la distribucin en dispositivos superior a 960px de ancho (ms grande que las tabletas en el retrato).

layout-lgEstablece el diseo de los dispositivos entre 960 y 1200px de ancho (tabletas en el paisaje).

layout-gt-lgEstablece 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-alignEstablece la alineacin nio.

layout-align-smEstablece la alineacin nio en dispositivos menos de 600px de ancho.

layout-align-gt-smEstablece la alineacin nio en los dispositivos de ms de 600px de ancho.

layout-align-mdEstablece la alineacin nio en dispositivos entre 600px y 960px de ancho.

layout-align-gt-mdEstablece la alineacin nio en los dispositivos de ms de 960px de ancho.

layout-align-lgEstablece la alineacin nio en dispositivos entre 960px y 1200px de ancho.

layout-align-gt-lgEstablece la alineacin nio en los dispositivos de ms de 1200px de ancho.

Ocultar y mostrar mdulos Responsive

hidedisplay: none

hide-smdisplay: none en dispositivos menos de 600px de ancho.

hide-gt-smdisplay: none en dispositivos mayores de 600px de ancho.

hide-mddisplay: none en dispositivos entre 600px y 960px de ancho.

hide-gt-mddisplay: none en dispositivos mayores de 960px de ancho.

hide-lgdisplay: none en dispositivos entre 960px y 1200px.

hide-gt-lgdisplay: none en los dispositivos de ms de 1200px de ancho.

showNiega ocultar.

show-smNiega ocultar en dispositivos menos de 600px de ancho.

show-gt-smNiega ocultar en los dispositivos de ms de 600px de ancho.

show-mdNiega ocultar en dispositivos entre 600px y 960px de ancho ..

show-gt-mdNiega ocultar en los dispositivos de ms de 960px de ancho.

show-lgNiega ocultar en dispositivos entre 960px y 1200px.

show-gt-lgNiega ocultar en los dispositivos de ms de 1200px de ancho.