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.
Creando nuestra primera base con Materializecss
Materializecss funciona con una estructura parecida a la de Bootstrap
MiSitioWeb/
|--css/
| |--materialize.css
|
|--font/
| |--material-design-icons/
| |--roboto/
|
|--js/
| |--materialize.js
|
|--index.html
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-1Tablas '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.
 |
|
¿Qué opináis?, ¿conocéis otro framework front-end para Material Design?.
Más información | http://materializecss.com/
Descargar | https://github.com/Dogfalo/materialize
Ver todos los comentarios en https://www.genbeta.com
VER 0 Comentario