introduction to material design lite mdl
TRANSCRIPT
1 / 67
Material Design Lite
MDL - ExamplesEueung Mulyana
https://eueung.github.io/112016/mdlCodeLabs | Attribution-ShareAlike CC BY-SA
Outline
Introduction
Example Case #1
Example Case #2
2 / 67
Introduction
3 / 67
4 / 67
MDLMaterial Design Lite (MDL) is a library
of components for web developersbased on Google's Material Design
Philosophy.
Material Design is a visual language that synthesizesthe classic principles of good design with the
innovation and possibility of technology and science.
Material Design Lite lets you add a Material Design look and feel to your websites. Itdoesn't rely on any JavaScript frameworks and aims to optimize for cross-device use,gracefully degrade in older browsers, and o�er an experience that is immediatelyaccessible.
The MDL components are created with CSS, JavaScript, and HTML. You can use thecomponents to construct web pages and web apps that are attractive, consistent, andfunctional. Pages developed with MDL will adhere to modern web design principles likebrowser portability, device independence, and graceful degradation.
The MDL component library includes new versions of common user interface controlssuch as buttons, check boxes, and text �elds, adapted to follow Material Designconcepts. The library also includes enhanced and specialized features like cards, columnlayouts, sliders, spinners, tabs, typography, and more.
Ref: Material Design Lite
5 / 67
MD+MDLMaterial Design is a uni�ed system
that combines theory, resources, andtools for crafting digital experiences.
Material is a methaphor, a system for uniting style,and motion under a consistent set of principles..
Material Design Lite is built to provide a lightweight and basicset of Material Design components and templates for web sites.The project does not intend to provide structures to create allpossible UX needs, but to provide a low-friction Material Designimplementation you can build on.
Even within Material Design itself, cards speci�cally, it is unfeasible to provide everycombination in a seamless manner. When you �nd something not provided, such asdropdowns in the drawer, you may need to code your own component.
The team is committed to providing a great experience to developers while staying true tothe promise of lite.
Ref: Material Design
MDLIt's an implementation of the Material Spec targeted at content sites.
Only 27KB gzipped. How? Vanilla CSS, HTML & JS!
Ref: @addyosmani
6 / 67
Templates
7 / 67
Components
8 / 67
Styles
9 / 67
For the Following Examples
MDL Version: 1.2.1 (8/Sept/2016)
10 / 67
Example #1
11 / 67
Template - ANDROID.COM
12 / 67
13 / 67
<!doctype html><html lang="en"><head> ...
<!-- Page styles --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en" <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.min.css"> <link rel="stylesheet" href="styles.css"> <style>...</style></head><body> <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> <div class="android-header mdl-layout__header mdl-layout__header--waterfall"> <div class="mdl-layout__header-row">...</div> </div> <div class="android-drawer mdl-layout__drawer">...</div> <div class="android-content mdl-layout__content"> <a name="top"></a> <div class="android-be-together-section mdl-typography--text-center">...</div> <div class="android-screen-section mdl-typography--text-center">...</div> <div class="android-wear-section">...</div> <div class="android-customized-section">...</div> <div class="android-more-section">...</div> <footer class="android-footer mdl-mega-footer">...</footer> </div> </div>
<a...>View Source</a> <script src="https://code.getmdl.io/1.2.1/material.min.js"></script></body></html>
Enabling MDLMDL Layout
body { margin: 0;}
/* Disable ugly boxes around images in IE10 */a img{ border: 0px;}
::-moz-selection { background-color: #6ab344; color: #fff;}
::selection { background-color: #6ab344; color: #fff;}/* ---------------------------------------- */
.android-link { text-decoration: none; color: #8bc34a !important;}
.android-link:hover { color: #7cb342 !important;}
.android-link .material-icons { position: relative; top: -1px; vertical-align: middle;}/* ---------------------------------------- */
.android-alt-link { text-decoration: none; color: #64ffda !important; font-size: 16px;}
.android-alt-link:hover { color: #00bfa5 !important; 14 / 67
Custom CSS
15 / 67
<div class="android-header mdl-layout__header mdl-layout__header--waterfall"> <div class="mdl-layout__header-row"> <span class="android-title mdl-layout-title"><img class="android-logo-image" src="images/android-logo.png" <span class="android-mobile-title mdl-layout-title"><img class="android-logo-image" src="images/android-logo.png"
<div class="android-header-spacer mdl-layout-spacer"></div> <div class="android-search-box mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right mdl-textfield--full-width" <label class="mdl-button mdl-js-button mdl-button--icon" for="search-field"><i class="material-icons" <div class="mdl-textfield__expandable-holder"><input class="mdl-textfield__input" type="text" </div>
<div class="android-navigation-container"> <nav class="android-navigation mdl-navigation"> <a class="mdl-navigation__link mdl-typography--text-uppercase" href="">Phones</a> ... <a class="mdl-navigation__link mdl-typography--text-uppercase" href="">Play</a> </nav> </div>
<button class="android-more-button mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect" <ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right mdl-js-ripple-effect" for="more-button" <li class="mdl-menu__item">5.0 Lollipop</li> ... <li class="mdl-menu__item">Android History</li> </ul> </div></div>
mdl-layout__header
.android-header { overflow: visible; background-color: white;}
.android-header .material-icons { color: #767777 !important;}
.android-header .mdl-layout__drawer-button { background: transparent; color: #767777;}
.android-header .mdl-navigation__link { color: #757575; font-weight: 700; font-size: 14px;}
.android-navigation-container { /* Simple hack to make the overflow happen to the left instead... */ direction: rtl; -webkit-order: 1; -ms-flex-order: 1; order: 1; width: 500px; transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), width 0.2s cubic-bezier(0.4, 0, 0.2, 1);}
.android-navigation { /* ... and now make sure the content is actually LTR */ direction: ltr; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; width: 800px;}
.android-search-box.is-focused + .android-navigation-container { opacity: 0; width: 100px; 16 / 67
mdl-layout__header
Custom CSS
17 / 67
18 / 67
<div class="android-drawer mdl-layout__drawer"> <span class="mdl-layout-title"> <img class="android-logo-image" src="images/android-logo-white.png"> </span>
<nav class="mdl-navigation"> <a class="mdl-navigation__link" href="">Phones</a> <a class="mdl-navigation__link" href="">Tablets</a> ... <a class="mdl-navigation__link" href="">Play</a>
<div class="android-drawer-separator"></div> <span class="mdl-navigation__link" href="">Versions</span> <a class="mdl-navigation__link" href="">Lollipop 5.0</a> ... <a class="mdl-navigation__link" href="">Android history</a>
<div class="android-drawer-separator"></div> <span class="mdl-navigation__link" href="">Resources</span> <a class="mdl-navigation__link" href="">Official blog</a> ... <div class="android-drawer-separator"></div> <span class="mdl-navigation__link" href="">For developers</span> <a class="mdl-navigation__link" href="">App developer resources</a> ... </nav></div>
mdl-layout__drawer
.android-drawer { border-right: none;}
.android-drawer-separator { height: 1px; background-color: #dcdcdc; margin: 8px 0;}
.android-drawer .mdl-navigation__link.mdl-navigation__link { font-size: 14px; color: #757575;}
.android-drawer span.mdl-navigation__link.mdl-navigation__link { color: #8bc34a;}
.android-drawer .mdl-layout-title { position: relative; background: #6ab344; height: 160px;}
.android-drawer .android-logo-image { position: absolute; bottom: 16px;}
19 / 67
mdl-layout__drawer
Custom CSS
20 / 67
21 / 67
<div class="android-be-together-section mdl-typography--text-center"> <div class="logo-font android-slogan">be together. not the same.</div> <div class="logo-font android-sub-slogan">welcome to android... be yourself. do your thing. see what's going on.
<div class="logo-font android-create-character"> <a href=""><img src="images/andy.png"> create your android character</a> </div>
<a href="#screens"> <button class="android-fab mdl-button mdl-button--colored mdl-js-button mdl-button--fab mdl-js-ripple-effect" </a></div>
mdl-layout__content
android-be-together-section
.android-be-together-section { position: relative; height: 800px; width: auto; background-color: #f3f3f3; background: url('images/slide01.jpg') center 30% no-repeat; background-size: cover;}
.logo-font { font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif; line-height: 1; color: #767777; font-weight: 500;}
.android-slogan { font-size: 60px; padding-top: 160px;}
.android-sub-slogan { font-size: 21px; padding-top: 24px;}
.android-create-character { font-size: 21px; padding-top: 400px;}
.android-create-character a { text-decoration: none; color: #767777; font-weight: 300;}
.android-fab { position: absolute; right: 20%; bottom: -26px; z-index: 3; background: #64ffda !important; 22 / 67
mdl-layout__content
android-be-together-section
Custom CSS
23 / 67
24 / 67
<div class="android-screen-section mdl-typography--text-center"> <a name="screens"></a> <div class="mdl-typography--display-1-color-contrast">Powering screens of all sizes</div> <div class="android-screens"> <div class="android-wear android-screen"> <a class="android-image-link" href=""> <img class="android-screen-image" src="images/wear-silver-on.png"> <img class="android-screen-image" src="images/wear-black-on.png"> </a> <a class="android-link mdl-typography--font-regular mdl-typography--text-uppercase" href="" </div>
<div class="android-phone android-screen"> <a class="android-image-link" href=""><img class="android-screen-image" src="images/nexus6-on.jpg" <a class="android-link mdl-typography--font-regular mdl-typography--text-uppercase" href="" </div>
<div class="android-tablet android-screen"> <a class="android-image-link" href=""><img class="android-screen-image" src="images/nexus9-on.jpg" <a class="android-link mdl-typography--font-regular mdl-typography--text-uppercase" href="" </div>
<div class="android-tv android-screen"> <a class="android-image-link" href=""><img class="android-screen-image" src="images/tv-on.jpg" <a class="android-link mdl-typography--font-regular mdl-typography--text-uppercase" href="" </div> ... </div></div>
mdl-layout__content
android-screen-section
.android-screen-section { position: relative; padding-top: 60px; padding-bottom: 80px;}
.android-screens { text-align: right; width: 100%; white-space: nowrap; overflow-x: auto;}
.android-screen { text-align: center;}
.android-screen .android-link { margin-top: 16px; display: block; z-index: 2;}
.android-image-link { text-decoration: none;}
25 / 67
mdl-layout__content
android-screen-section
Custom CSS
26 / 67
27 / 67
<div class="android-wear-section"> <div class="android-wear-band"> <div class="android-wear-band-text"> <div class="mdl-typography--display-2 mdl-typography--font-thin">The best of Google built in
<p class="mdl-typography--headline mdl-typography--font-thin"> Android works perfectly with your favourite apps like Google Maps, Calendar and YouTube. </p>
<p> <a class="mdl-typography--font-regular mdl-typography--text-uppercase android-alt-link" href See what's new in the Play Store <i class="material-icons">chevron_right</i> </a> </p> </div> </div></div>
mdl-layout__content
android-wear-section
.android-wear { display: inline-block; width: 160px; margin-right: 32px;}
.android-wear .android-screen-image { width: 40%; z-index: 1;}
.android-phone { display: inline-block; width: 64px; margin-right: 48px;}
.android-phone .android-screen-image { width: 100%; z-index: 1;}
.android-tablet { display: inline-block; width: 110px; margin-right: 64px;}
.android-tablet .android-screen-image { width: 100%; z-index: 1;}
.android-tablet .android-link { display: block; z-index: 2;}
.android-tv { display: inline-block; width: 300px; margin-right: 80px;} 28 / 67
mdl-layout__content
android-wear-section
Custom CSS
29 / 67
30 / 67
<div class="android-customized-section"> <div class="android-customized-section-text"> <div class="mdl-typography--font-light mdl-typography--display-1-color-contrast">Customised by you, for you
<p class="mdl-typography--font-light"> Put the stuff that you care about right on your home screen: the latest news, the weather or a stream of your recent photos. <br> <a href="" class="android-link mdl-typography--font-light">Customise your phone</a> </p> </div>
<div class="android-customized-section-image"></div></div>
mdl-layout__content
android-customized-section
.android-customized-section { text-align: center;}
.android-customized-section-text { max-width: 500px; margin-left: auto; margin-right: auto; padding: 80px 16px 0 16px;}
.android-customized-section-text p { padding-top: 16px; }
.android-customized-section-image { background: url('images/devices.jpg') center top no-repeat; background-size: cover; height: 400px;}
31 / 67
mdl-layout__content
android-customized-section
Custom CSS
32 / 67
33 / 67
<div class="android-more-section"> <div class="android-section-title mdl-typography--display-1-color-contrast">More from Android</ <div class="android-card-container mdl-grid">
<div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--3dp" <div class="mdl-card__media"><img src="images/more-from-1.png"></div> <div class="mdl-card__title"><h4 class="mdl-card__title-text">Get going on Android</h4></div <div class="mdl-card__supporting-text"> <span class="mdl-typography--font-light mdl-typography--subhead">Four tips to make your switch to Android quick and easy </div> <div class="mdl-card__actions"> <a class="android-link mdl-button mdl-js-button mdl-typography--text-uppercase" href=""> Make the switch <i class="material-icons">chevron_right</i> </a> </div> </div>
<div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--3dp" <div class="mdl-card__media"><img src="images/more-from-4.png"></div> <div class="mdl-card__title"><h4 class="mdl-card__title-text">Create your own Android character <div class="mdl-card__supporting-text"><span class="mdl-typography--font-light mdl-typography--subhead" <div class="mdl-card__actions"> <a class="android-link mdl-button mdl-js-button mdl-typography--text-uppercase" href=""> androidify.com <i class="material-icons">chevron_right</i> </a> </div> </div>
... </div></div>
mdl-layout__content
android-more-section
.android-more-section { padding: 80px 0; max-width: 1044px; margin-left: auto; margin-right: auto;}
.android-more-section .android-section-title { margin-left: 12px; padding-bottom: 24px;}
.android-card-container {}
.android-card-container .mdl-card__media { overflow: hidden; background: transparent;}
.android-card-container .mdl-card__media img { width: 100%;}
.android-card-container .mdl-card__title { background: transparent; height: auto;}
.android-card-container .mdl-card__title-text { color: black; height: auto;}
.android-card-container .mdl-card__supporting-text { height: auto; color: black; padding-bottom: 56px;}
.android-card-container .mdl-card__actions { position: absolute; bottom: 0;} 34 / 67
mdl-layout__content
android-more-section
Custom CSS
35 / 67
36 / 67
<footer class="android-footer mdl-mega-footer"> <div class="mdl-mega-footer--top-section"> <div class="mdl-mega-footer--left-section"> <button class="mdl-mega-footer--social-btn"></button> <button class="mdl-mega-footer--social-btn"></button> <button class="mdl-mega-footer--social-btn"></button> </div> <div class="mdl-mega-footer--right-section"> <a class="mdl-typography--font-light" href="#top">Back to Top <i class="material-icons">expand_less </div> </div>
<div class="mdl-mega-footer--middle-section"> <p class="mdl-typography--font-light">Satellite imagery: 2014 Astrium, DigitalGlobe</p> <p class="mdl-typography--font-light">Some features and devices may not be available in all areas </div>
<div class="mdl-mega-footer--bottom-section"> <a class="android-link android-link-menu mdl-typography--font-light" id="version-dropdown"> Versions <i class="material-icons">arrow_drop_up</i> </a> <ul class="mdl-menu mdl-js-menu mdl-menu--top-left mdl-js-ripple-effect" for="version-dropdown" <li class="mdl-menu__item">5.0 Lollipop</li><li class="mdl-menu__item">4.4 KitKat</li> ... </ul>
<a class="android-link android-link-menu mdl-typography--font-light" id="developers-dropdown" <a class="android-link mdl-typography--font-light" href="">Blog</a> <a class="android-link mdl-typography--font-light" href="">Privacy Policy</a> </div></footer>
mdl-layout__content
android-footer
.android-footer { background-color: #fafafa; position: relative;}
.android-footer a:hover { color: #8bc34a;}
.android-footer .mdl-mega-footer--top-section::after { border-bottom: none;}
.android-footer .mdl-mega-footer--middle-section::after { border-bottom: none;}
.android-footer .mdl-mega-footer--bottom-section { position: relative;}
.android-footer .mdl-mega-footer--bottom-section a { margin-right: 2em;}
.android-footer .mdl-mega-footer--right-section a .material-icons { position: relative; top: 6px;}
/**** Mobile layout ****/@media (max-width: 900px) { .android-footer .mdl-mega-footer--bottom-section { display: none; }}
37 / 67
mdl-layout__content
android-footer
Custom CSS
38 / 67
Example #2
39 / 67
SitePoint - @AntoniettaPerna
40 / 67
SitePoint - @AntoniettaPerna
41 / 67
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Demo Template Using Material Design Lite</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:400,100,500,300italic,500italic,700italic,900,300' <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons' <link rel='stylesheet prefetch' href='https://code.getmdl.io/1.2.1/material.indigo-pink.min.css' <link rel="stylesheet" href="css/style.css"> </head>
<body><div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">
<header class="mdl-layout__header">...</header> <div class="mdl-layout__drawer">...</div>
<main class="mdl-layout__content">
<div class="mdl-layout__tab-panel is-active" id="fixed-tab-1"> <div class="page-content"> <div class="hero-section">...</div> <div id="intro" class="mdl-grid intro-section">...</div> <div class="mdl-grid mdl-grid--no-spacing fullwidth-panel">...</div> </div> </div>
<div class="mdl-layout__tab-panel" id="fixed-tab-2"> <div class="page-content"> <!-- CARDS --> <div class="mdl-grid cards-section"> <div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-card mdl-shadow--2dp home-bringing-card" <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--2dp play-card" <div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--2dp image-card"
<div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--2dp litter-card" <div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--2dp diet-card"
<div class="mdl-cell mdl-cell--3-col mdl-cell--8-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--2dp card-small" <div class="mdl-cell mdl-cell--3-col mdl-cell--8-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--2dp card-small"
42 / 67
Enabling MDLMDL Layout
img { max-width: 100%; height: auto; display: block;}
ul { list-style-type: none;}
/* UTILITIES */
.clearfix:after { content: ""; display: table; clear: both;}
.float-right { float: right;}
.float-left { float: left;}
/* TABS */
.mdl-layout__tab-bar { margin: 0 auto; max-width: 300px;}
43 / 67
Custom CSS
44 / 67
<header class="mdl-layout__header"> <div class="mdl-layout__header-row"> <!-- Title --> <span class="mdl-layout-title">Kaptain Kitty</span> </div>
<!-- Tabs --> <div class="mdl-layout__tab-bar mdl-js-ripple-effect"> <a href="#fixed-tab-1" class="mdl-layout__tab is-active">About</a> <a href="#fixed-tab-2" class="mdl-layout__tab">Learn</a> </div></header>
mdl-layout__header
45 / 67
46 / 67
<div class="mdl-layout__drawer"> <span class="mdl-layout-title">Kaptain Kitty</span> <div class="avatar"> <img src="https://dl.dropboxusercontent.com/u/32494584/avatar.jpg" alt="Kaptain Kitty" class= </div>
<div class="drawer-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur officiis animi, soluta ab deserunt dolore fugit voluptatem laboriosam, magni. Eligendi quia quasi qui cupiditate optio fugit vel, suscipit harum illum. </div></div>
mdl-layout__drawer
/* DRAWER */
.mdl-layout__drawer-button,
.mdl-layout__drawer-button i { color: white;}
@media (max-width: 900px) { .mdl-layout__drawer-button { width: 100%; margin: 0; background-color: transparent; }}
.avatar { height: 200px; width: 200px; margin: 0 auto 2em;}
.avatar-img { height: 200px; width: 200px; margin: 0 auto; border-radius: 50%;}
.drawer-text { padding: 1em; text-align: center;}
47 / 67
mdl-layout__drawer
Custom CSS
48 / 67
49 / 67
<div class="hero-section"> <div class="hero-text mdl-typography--text-center">
<h1 class="mdl-typography--display-2">I'm Kaptain Kitty</h1> <p class="mdl-typography--display-1"> I' ll teach you loads about your kitten </p>
<a class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--accent kitty-hero__text-button" <i class="material-icons">keyboard_arrow_down</i> </a>
</div></div>
mdl-layout__content
.mdl-layout__tab-panel#�xed-tab-1
hero-section
/* HERO SECTION */
.hero-section { height: 100vh; /* IE11 doesn't like min-height */ width: 100%; margin: 0; padding: 0; background-color: rgba(63, 81, 181, 0.6); background-image: -webkit-linear-gradient(rgba(63, 81, 181, 0.3), rgba(63, 81, 181, 0.3)), url background-image: linear-gradient(rgba(63, 81, 181, 0.3), rgba(63, 81, 181, 0.3)), url(https://dl.dropboxusercontent.com/u/32494584/hero-bg.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin: auto;}
.hero-text { color: white; margin: auto;}
@media screen and (max-width: 580px) { .hero-text p { white-space: pre-line; }}
.kitty-hero__text-button { position: absolute; bottom: -28px; left: 50%;
50 / 67
mdl-layout__content
.mdl-layout__tab-panel#�xed-tab-1
hero-sectionCustom CSS
51 / 67
<div id="intro" class="mdl-grid intro-section"> <div class="about-kitty mdl-cell mdl-cell--12-col"> <p class="mdl-typography--headline"> Welcome to Kaptain Kitty! This is a demo HTML template that accompanies an article for SitePoint. The article illustrates how to use the Material Design Lite library to build a web page. You're free to use this template as you like. All images on this demo are courtesy of <a href="https://pixabay.com/">Pixabay.com</a>. </p> </div>
<div class="about-kitty mdl-cell mdl-cell--12-col"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint dolorum consectetur natus sequi, est similique! Temporibus rem consequuntur laudantium, illo excepturi velit quas. Culpa ipsum dolor tempore accusantium sed iusto. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, dicta aliquid, inventore a ullam excepturi similique sit, nobis incidunt laboriosam amet maxime iusto nam facilis possimus quo optio? Dolor, et? </div>
<div class="about-kitty mdl-cell mdl-cell--5-col mdl-cell--1-col-tablet mdl-cell--hide-phone" <div class="circle-container"> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> </div> </div>
<div class="about-kitty mdl-cell mdl-cell--7-col mdl-cell--6-col-tablet mdl-cell--4-col-phone" <div class="topics-container"> <div class="topic">Feeding</div> <div class="topic">Choosing the right vet</div> <div class="topic">Keeping you kittens healthy</div> <div class="topic">Adopting a kitten</div> <div class="topic">Vaccinating your kitten</div> </div> </div>
<div class="about-kitty mdl-cell mdl-cell--12-col"> <p class="clearfix"> <img src="https://dl.dropboxusercontent.com/u/32494584/avatar.jpg" alt="Kaptain Kitty" class rem consequuntur laudantium, illo excepturi velit quas. Culpa ipsum dolor tempore accusantium sed iusto. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, dicta aliquid, inventore a ullam excepturi similique sit, nobis incidunt laboriosam amet maxime iusto nam facilis possimus quo optio? Dolor, et? </p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, dicta aliquid, inventore a ullam excepturi similique sit, nobis incidunt laboriosam amet maxime iusto nam facilis possimus quo optio? Dolor, et? </div></div>
52 / 67
mdl-layout__content
.mdl-layout__tab-panel#�xed-tab-1
intro-section
/* ABOUT KITTY INTRO + CARDS */
.intro-section,
.cards-section { max-width: 960px;}
/* ABOUT KITTY INTRO */
.intro-section { padding: 5em 2em 5em;}
.about-kitty p { max-width: 640px; margin: auto;}
.circle-container { width: 100%; min-height: 100px; padding: 2em 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end;}
.circle-container .circle { height: 16px; width: 16px; background-color: #c51162; border-radius: 50%; margin: 0 3px 9px; 53 / 67
mdl-layout__content
.mdl-layout__tab-panel#�xed-tab-1
intro-sectionCustom CSS
54 / 67
55 / 67
<div class="mdl-grid mdl-grid--no-spacing fullwidth-panel"> <div class="mdl-cell mdl-cell--12-col mdl-typography--text-center quote-panel"> <blockquote> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint dolorum consectetur natus sequi, est similique! Temporibus rem consequuntur laudantium, illo excepturi velit quas. Culpa ipsum dolor tempore accusantium sed iusto. </p> <footer> - <cite>Happy Kitten Owner</cite> </footer> </blockquote> </div></div>
mdl-layout__content
.mdl-layout__tab-panel#�xed-tab-1
quote-panel
/* FULLWIDTH BACKGROUND SECTION */
.fullwidth-panel { color: white; background-color: rgba(156, 39, 176, 0.6);}
.fullwidth-panel p { max-width: 640px; margin: auto;}
.quote-panel { background-image: -webkit-linear-gradient(rgba(63, 81, 181, 0.5), rgba(63, 81, 181, 0.5)), url background-image: linear-gradient(rgba(63, 81, 181, 0.5), rgba(63, 81, 181, 0.5)), url('https://dl.dropboxusercontent.com/u/32494584/panel-bg.jpg' background-position: center 5%; background-repeat: no-repeat; background-size: cover; padding: 4em 2em 2em; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start;}
@media screen and (min-width: 800px) { .quote-panel { background-position: center 0; padding: 6em 2em; }}
@media screen and (min-width: 1200px) { .quote-panel { background-position: center 8%; padding: 10em 2em 8em; }}
56 / 67
mdl-layout__content
.mdl-layout__tab-panel#�xed-tab-1
quote-panelCustom CSS
57 / 67
<div class="mdl-grid cards-section"> <div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-card mdl-shadow--2dp home-bringing-card" <div class="mdl-card__title"> <h2 class="mdl-card__title-text">Bringing a kitten into your home</h2> </div> <div class="mdl-card__supporting-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem explicabo reiciendis corporis, optio animi autem, quisquam, temporibus sed deleniti officiis dolor eveniet tempore ad nulla deserunt laudantium, obcaecati esse! Officia. </div> </div>
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--2dp play-card" <div class="mdl-card__title"> <h2 class="mdl-card__title-text">Playing with your kitten</h2> </div> <div class="mdl-card__supporting-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem explicabo reiciendis corporis, optio animi autem, quisquam, temporibus sed deleniti officiis dolor eveniet tempore ad nulla deserunt laudantium, obcaecati esse! Officia. </div> </div>
<div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--2dp image-card" <div class="mdl-card__actions"> <span class="image-card__title">KaptainKitty.jpg</span> </div> </div>
<div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--2dp litter-card" <div class="mdl-card__title"> <h2 class="mdl-card__title-text">Taking care of a litter of kittens</h2> </div> <div class="mdl-card__supporting-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem explicabo reiciendis corporis, optio animi autem, quisquam, temporibus sed deleniti officiis dolor eveniet tempore ad nulla deserunt laudantium, obcaecati esse! Officia. </div> </div>
<div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--2dp diet-card" <div class="mdl-card__title"> <h2 class="mdl-card__title-text">Healthy diet for your kitten</h2> </div> <div class="mdl-card__supporting-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem explicabo reiciendis corporis, optio animi autem, quisquam, temporibus sed deleniti officiis dolor eveniet tempore ad nulla deserunt laudantium, obcaecati esse! Officia. </div> <div class="mdl-card__actions mdl-card--border">
58 / 67
mdl-layout__content
.mdl-layout__tab-panel#�xed-tab-2
cards-section
/* CARDS SECTION */
.cards-section { padding: 5em 0;}
.mdl-card__title { min-height: 300px; color: white;}
.home-bringing-card .mdl-card__title { background: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.8)), url('https://dl.dropboxusercontent.com/u/32494584/kitten-home.jpg' background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.8)), url('https://dl.dropboxusercontent.com/u/32494584/kitten-home.jpg'}
.play-card .mdl-card__title { background: url('https://dl.dropboxusercontent.com/u/32494584/kitten-on-tree.jpg') center / cover;}
.image-card { background: url('https://dl.dropboxusercontent.com/u/32494584/image-card.jpg') center / cover;}
.image-card > .mdl-card__actions { height: 52px; padding: 16px; background: rgba(0, 0, 0, 0.6);}
.image-card__title { color: #fff; font-size: 14px; font-weight: 500;}
.litter-card .mdl-card__title { background: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.8)), url('https://dl.dropboxusercontent.com/u/32494584/litter-card.jpg' background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.8)), url('https://dl.dropboxusercontent.com/u/32494584/litter-card.jpg'}
.diet-card .mdl-card__title { background: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.8)), url('https://dl.dropboxusercontent.com/u/32494584/diet-card.jpg'
59 / 67
mdl-layout__content
.mdl-layout__tab-panel#�xed-tab-2
cards-sectionCustom CSS
60 / 67
<div class="mdl-grid mdl-grid--no-spacing"> <div class="mdl-cell mdl-cell--12-col contact-intro mdl-color--indigo-900"> <h2 class="mdl-typography--title mdl-typography--title-color-contrast mdl-typography--font-thin mdl-typography--text-center" </div>
<div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet mdl-cell--4-col-phone contact-panel form-panel mdl-color--indigo-50" <form action="#"> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input class="mdl-textfield__input" type="text" id="name"> <label class="mdl-textfield__label" for="name">Your name</label> </div> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input class="mdl-textfield__input" type="email" id="email"> <label class="mdl-textfield__label" for="email">Your email</label> </div> <div class="button-container clearfix"> <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent subscribe-button" Join my fans </button> </div> </form> </div>
<div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet mdl-cell--4-col-phone contact-panel address-panel mdl-typography--text-center mdl-color--indigo-100" <p class="mdl-typography--title-color-contrast mdl-typography--text-nowrap mdl-typography--font-thin" <i class="material-icons">email</i> <a href="mailto:[email protected]">[email protected] </p>
<p class="mdl-typography--title-color-contrast mdl-typography--text-nowrap mdl-typography--font-thin" <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" href="twitter.com" <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" href="plus.google.com" <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" href="facebook.com" </p> </div></div>
61 / 67
mdl-layout__content
contact-introcontact-panel
.contact-intro { color: rgba(255, 255, 255, 0.87);}
.contact-panel { padding: 6em 4em; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin: auto;}
.mdl-textfield { display: block; width: 100%; padding: 20px 0;}
@media screen and (min-width: 800px) { .subscribe-button { float: right; }}
.address-panel { background-color: #dbdef1; color: rgba(255, 255, 255, 0.87);}
.address-panel .material-icons { position: relative; top: 0.2em; display: inline-block; height: 30px; width: 30px; line-height: 30px; background-color: #ff4081; 62 / 67
mdl-layout__content
contact-introcontact-panelCustom CSS
63 / 67
64 / 67
<footer class="mdl-mini-footer mdl-color--indigo-200"> <div class="mdl-mini-footer__left-section"> <div class="mdl-logo">Kaptain Kitty – designed by <a href="http://wpthememakeover.com"> <ul class="mdl-mini-footer__link-list"> <li><a href="#">Help</a></li> <li><a href="#">Privacy & Terms</a></li> </ul> © Maria Antonietta Perna 2016 </div></footer>
mdl-layout__content
footer
Refs
65 / 67
Refs1. Material Design Lite2. Introduction - Material design - Material design guidelines3. Material Design4. Deck by @addyosmani - Material Design for the Web5. Resizer - Material Design6. A Practical Introduction to Material Design Lite by Google7. Google Design8. Introduction - Material design - Material design guidelines9. google/material-design-lite
66 / 67
67 / 67
ENDEueung Mulyana
https://eueung.github.io/112016/mdlCodeLabs | Attribution-ShareAlike CC BY-SA