introduction to material design lite mdl

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

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

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

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>

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>

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

<div class="mdl-layout__tab-panel" id="fixed-tab-2"> <div class="page-content">  <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">  <span class="mdl-layout-title">Kaptain Kitty</span> </div>

<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

<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

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

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

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

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

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

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

cards-sectionCustom CSS

60 / 67

<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:info@captain.kitty.com">info@kaptain.kitty.com </p>

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

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

introduction to material design lite mdl

Technology

hedex lite v200r002 training material

cec.md chiril - declaratie de avere.pdf · salariu salariu...

mdl ebplus

chase mdl complaint

diagnostico mdl ecuador

variability enso: mdl < obs neut: mdl > obs

paparan publik (public expose) insidentil · 2019. 11....

orthopaedic casting and splinting example book ·...

7777.md · 2019. 6. 26. · 3 500 000 mdl 3 000 000 mdl 9...

mdl 1bekerja ilmiah

ledgestone ledgestone -...

7777.md...2020/09/30 · 22 500 80 000 62 500 219 600 176...

mdl report

mdl ecologie

freshguide mdl#107

z } ·íòrôñôwp í}(íì · 2017-06-07 · as < mdl...

freshguide mdl #118

produk psr mdl

about hi-lite systems...about hi-lite systems aluminum is...

Обзор material design light (mdl). Александр...