Materializecss, Framework front-end para Material design

Material design, la guía de diseño de Google ha roto barreras y en la actualidad se está convirtiendo en una de las guías de diseño más reclamadas. Materializecss es un framework que simplifica el proceso de creación de diseños web. Este modesto framework acaba de actualizar a su primera 'Alpha release' y ya se ha usado para alguna aplicación Android con Cordova y en varias webs.

Algunas características de Materializecss

Este framework ofrece una serie de recursos en CSS, Fuentes y JS así como su versión con Sass para personalizarlo y compilarlo nosotros mismos.

Permite (al igual que que otros frameworks como Bootstrap) crear interfaces que se adapten a distintas resoluciones y navegadores.
Crear menú lateral abierto o desplegable en función de la resolución.
Animaciones con filosofía Material Design.
Crear diseños con Material Design como botones, tarjetas, colecciones, iconos, barras de navegación, etiquetas, ?toast?, modales, etc.
Integra Parallax, Pushpin y scrollspy para hacer un diseño más atractivo

También nos viene con dos plantillas base.

Plantilla de inicio con Parallax

Creando nuestra primera base con Materializecss

Configuración inicial HTML




      
      
      

    
    

<!-- Page Layout here -->
<div class="row">
  <div class="col s12 m4 l3"> <!-- Note that "m4 l3" was added -->
    <!-- Grey navigation panel
          This content will be:
      3-columns-wide on large screens,
      4-columns-wide on medium screens,
      12-columns-wide on small screens  -->
  </div>
  <div class="col s12 m8 l9"> <!-- Note that "m8 l9" was added -->
    <!-- Teal page content
          This content will be:
      9-columns-wide on large screens,
      8-columns-wide on medium screens,
      12-columns-wide on small screens  -->
  </div>
</div>
  <!-- Fin contenido -->
  <!--Importar jQuery antes que materialize.js-->


<!--Fin de la etiqueta <body> -->

Componentes

Botones. Materializecss cuenta con botones con los efectos de pulsado de Material Design. Así como también botones que se despliegan con multi botones.
Media. Plugins jQuery para facilitarnos la visualización de imágenes, vídeos 'responsive' y 'sliders'.
Colores. Gran paleta de colores Material Design.
```
    Este panel es de color cyan lighten-1
                   
```
Tablas 'responsive'.

Formato tablet o escritorio > 600px

Formato smartphone <= 600px
Formularios. Materializecss cuenta con todos los elementos que pudiésemos necesitar tales como inputs, labels, text areas, datepicker, etc.

Por último, pensando en el Smartphone

Como ya sabréis, cada vez son más las personas que buscan información desde sus smartphones. Por ello, cada vez cobra más importancia que un diseño web esté pensado y adaptado para todo tipo de dimensiones de pantalla. Materializecss incluye acciones ‘nativas’ que puedan ser de ayuda para mejorar la experiencia al usuario final.