Fórum | tutoriais mais recente desenvolvimento web
 

Material Design Lite Tutorial


Material de concepção Lite, MDL é uma biblioteca de componentes de interface do usuário criado com CSS, JavaScript e HTML. componentes MDL UI ajuda na construção atraentes, consistentes e funcionais páginas web e aplicações web, enquanto que aderem aos princípios de web design modernos, como a portabilidade do navegador, a independência do dispositivo e degradação suave. Ele ajuda na criação de mais rápido, bonito, e responsivos websites. É inspirado pela Design Google material.


Público

Este tutorial é destinado a profissionais que gostariam de aprender as noções básicas de material de concepção Lite e como usá-lo para criar mais rápido, bonito e sites responsivos. Este tutorial explica todos os conceitos fundamentais de material de concepção Lite.


Pré-requisitos

Antes de prosseguir com este tutorial, você deve ter um conhecimento básico de HTML, CSS, JavaScript, Document Object Model (DOM), e qualquer editor de texto. Além disso, ele vai ajudar se você sabe como aplicativos baseados na Web funciona.


Executar material design Lite on-line

Para a maioria dos exemplos dados neste tutorial, você vai encontrar uma opção Try-lo. Use esta opção para executar seus programas de materiais Projeto Lite no local e desfrutar da sua aprendizagem.

Tente o seguinte exemplo usando a opção Try-lo disponível no canto superior direito da caixa de código de exemplo a seguir -

<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>