Last active
November 10, 2015 18:26
-
-
Save GuilhermeMatheus/a7956cdb6c8ff9dcf2c9 to your computer and use it in GitHub Desktop.
Material Design Lite components demo
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <!-- Material Design Lite --> | |
| <script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script> | |
| <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"> | |
| <!-- Material Design icon font --> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> | |
| </head> | |
| <body> | |
| <!-- Always shows a header, even in smaller screens. --> | |
| <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> | |
| <header class="mdl-layout__header"> | |
| <div class="mdl-layout__header-row"> | |
| <!-- Title --> | |
| <span class="mdl-layout-title">TEC</span> | |
| <!-- Add spacer, to align navigation to the right --> | |
| <div class="mdl-layout-spacer"></div> | |
| <!-- Navigation. We hide it in small screens. --> | |
| <nav class="mdl-navigation"> | |
| <a class="mdl-navigation__link" href="">Facility</a> | |
| <a class="mdl-navigation__link" href="">Tables</a> | |
| <a class="mdl-navigation__link" href="">Middleware</a> | |
| </nav> | |
| </div> | |
| </header> | |
| <div class="mdl-layout__drawer"> | |
| <span class="mdl-layout-title">TEC</span> | |
| <nav class="mdl-navigation"> | |
| <a class="mdl-navigation__link" href="">Notifications</a> | |
| <a class="mdl-navigation__link" href="">Option 2</a> | |
| <a class="mdl-navigation__link" href="">Option 3</a> | |
| <a class="mdl-navigation__link" href="">One more option here</a> | |
| </nav> | |
| </div> | |
| <main class="mdl-layout__content"> | |
| <div class="page-content"><!-- Your content goes here --></div> | |
| </main> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| TEC Proposal with Material Design Lite components demo | |
| ------------------------------------ | |
| A [Pen](http://codepen.io/anon/pen/YyRQPE) by [Captain Anonymous](http://codepen.io/anon) on [CodePen](http://codepen.io/). | |
| [License](http://codepen.io/anon/pen/YyRQPE/license). |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment