Foro | Los últimos tutoriales de desarrollo web
 

Material Design Lite Tutorial


Material de Diseño Lite, MDL es una biblioteca de componentes de interfaz de usuario creado con CSS, JavaScript y HTML. componentes de interfaz de usuario MDL ayuda en la construcción de atractivos, coherentes y funcionales páginas web y aplicaciones web modernas, mientras que se adhieren a los principios de diseño web como la portabilidad del navegador, la independencia de dispositivo, y una degradación elegante. Esto ayuda en la creación de sitios web más rápido, bellos y sensibles. Se inspira de Google Diseño de materiales.


Audiencia

Este tutorial está dirigido a profesionales que deseen aprender las bases de diseño de materiales Lite y cómo utilizarlo para crear más rápido, hermoso y sitios web sensibles. Este tutorial explica todos los conceptos fundamentales de diseño de materiales Lite.


Requisitos previos

Antes de continuar con este tutorial, usted debe tener un conocimiento básico de HTML, CSS, JavaScript, Document Object Model (DOM), y cualquier editor de texto. Además, le ayudará si usted sabe cómo funcionan las aplicaciones basadas en web.


Ejecutar Material de Diseño Lite Online

Para la mayoría de los ejemplos dados en este tutorial, encontrará una opción Try-it. Utilice esta opción para ejecutar sus programas de diseño de materiales Lite en el lugar y disfrutar de su aprendizaje.

El siguiente ejemplo muestra el uso de la opción Try-a disposición en la esquina superior derecha de la siguiente ventana de código de ejemplo -

<html>
   <head>
      <title>The Material Design Lite Example</title>
	  <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  </head>
  <body>
      <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
         <div class="mdl-layout__drawer">
            <span class="mdl-layout-title">Material Design</span>
            <nav class="mdl-navigation">
               <a class="mdl-navigation__link" href="">Home</a>
               <a class="mdl-navigation__link" href="">Features</a>
               <a class="mdl-navigation__link" href="">About Us</a>
               <a class="mdl-navigation__link" href="">Log Out</a>
            </nav>
         </div>
         <main class="mdl-layout__content">
            <div class="page-content" style="padding-left:100px;">Hello World!</div>
         </main>
      </div>
   </body>
</html>