Compartir
Publicidad

Materializecss, Framework front-end para Material design

Materializecss, Framework front-end para Material design
0 Comentarios
Publicidad
Publicidad

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



      
      
      

    
    

    
    

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.
    Colores materializecss
    Este panel es de color cyan lighten-1
  • Tablas 'responsive'.
    Tabla adaptable Formato tablet o escritorio > 600px
    Tabla Pequeña Formato smartphone <= 600px
  • Formularios. Materializecss cuenta con todos los elementos que pudiésemos necesitar tales como inputs, labels, text areas, datepicker, etc.
    Elementos del formulario

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.

Menu
Toast



¿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

Temas
Publicidad
Comentarios cerrados
Publicidad
Publicidad
Inicio