introduction to material design lite MDL

1 / 67
Material Design Lite
MDL - Examples
Eueung Mulyana
https://eueung.github.io/112016/mdl
CodeLabs | Attribution-ShareAlike CC BY-SA

Outline
Introduction
Example Case #1
Example Case #2
2 / 67

4 / 67
MDL
Material Design Lite (MDL) is a library
of components for web developers
based on Google's Material Design
Philosophy.
Material Design is a visual language that synthesizes
the 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. It
doesn'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 immediately
accessible.
The MDL components are created with CSS, JavaScript, and HTML. You can use the
components to construct web pages and web apps that are attractive, consistent, and
functional. Pages developed with MDL will adhere to modern web design principles like
browser portability, device independence, and graceful degradation.
The MDL component library includes new versions of common user interface controls
such as buttons, check boxes, and text elds, adapted to follow Material Design
concepts. The library also includes enhanced and specialized features like cards, column
layouts, sliders, spinners, tabs, typography, and more.
Ref: Material Design Lite

5 / 67
MD+MDL
Material Design is a uni ed system
that combines theory, resources, and
tools 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 basic
set of Material Design components and templates for web sites.
The project does not intend to provide structures to create all
possible UX needs, but to provide a low-friction Material Design
implementation you can build on.
Even within Material Design itself, cards speci cally, it is unfeasible to provide every
combination in a seamless manner. When you nd something not provided, such as
dropdowns 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 to
the promise of lite.
Ref: Material Design

MDL
It's an implementation of the Material Spec targeted at content sites.
Only 27KB gzipped.
How? Vanilla CSS, HTML & JS!
Ref: @addyosmani
6 / 67

For the Following Examples
MDL Version: 1.2.1 (8/Sept/2016)
10 / 67

Template - ANDROID.COM
12 / 67

13 / 67
<!doctypehtml>
<htmllang="en"><head>
...

<linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=e
<linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons">
<linkrel="stylesheet"href="https://code.getmdl.io/1.2.1/material.min.css">
<linkrel="stylesheet"href="styles.css">
<style>...</style>
</head>
<body>
<divclass="mdl-layoutmdl-js-layoutmdl-layout--fixed-header">
<divclass="android-headermdl-layout__headermdl-layout__header--waterfall">
<divclass="mdl-layout__header-row">...</div>
</div>
<divclass="android-drawermdl-layout__drawer">...</div>
<divclass="android-contentmdl-layout__content">
<aname="top"></a>
<divclass="android-be-together-sectionmdl-typography--text-center">...</div>
<divclass="android-screen-sectionmdl-typography--text-center">...</div>
<divclass="android-wear-section">...</div>
<divclass="android-customized-section">...</div>
<divclass="android-more-section">...</div>
<footerclass="android-footermdl-mega-footer">...</footer>
</div>
</div>
<a...>ViewSource</a>
<scriptsrc="https://code.getmdl.io/1.2.1/material.min.js"></script>
</body></html>
Enabling MDL
MDL Layout

body{
margin:0;
}
/*DisableuglyboxesaroundimagesinIE10*/
aimg{
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{
color:#64ffda!important;
font-size:16px;
}
.android-alt-link:hover{
color:#00bfa5!important; 14 / 67
Custom CSS

15 / 67
<divclass="android-headermdl-layout__headermdl-layout__header--waterfall">
<divclass="mdl-layout__header-row">
<spanclass="android-title mdl-layout-title"><imgclass="android-logo-image"src="images/android-logo.png"
<spanclass="android-mobile-titlemdl-layout-title"><imgclass="android-logo-image"src="images/android-logo.png"
<divclass="android-header-spacermdl-layout-spacer"></div>
<divclass="android-search-boxmdl-textfieldmdl-js-textfieldmdl-textfield--expandablemdl-textfield--floating-labelmdl-textfield--align-
<labelclass="mdl-buttonmdl-js-buttonmdl-button--icon"for="search-field"><iclass="material-icons"
<divclass="mdl-textfield__expandable-holder"><inputclass="mdl-textfield__input"type="text"
</div>
<divclass="android-navigation-container">
<navclass="android-navigationmdl-navigation">
<aclass="mdl-navigation__linkmdl-typography--text-uppercase"href="">Phones</a>
...
<aclass="mdl-navigation__linkmdl-typography--text-uppercase"href="">Play</a>
</nav>
</div>
<buttonclass="android-more-buttonmdl-buttonmdl-js-buttonmdl-button--iconmdl-js-ripple-effect"
<ulclass="mdl-menumdl-js-menumdl-menu--bottom-rightmdl-js-ripple-effect"for="more-button"
<liclass="mdl-menu__item">5.0Lollipop</li>
...
<liclass="mdl-menu__item">AndroidHistory</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{
/*Simplehacktomaketheoverflowhappentotheleftinstead...*/
direction:rtl;
-webkit-order:1;
-ms-flex-order:1;
order:1;
width:500px;
transition:opacity0.2scubic-bezier(0.4,0,0.2,1),
width0.2scubic-bezier(0.4,0,0.2,1);
}
.android-navigation{
/*...andnowmakesurethecontentisactuallyLTR*/
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

18 / 67
<divclass="android-drawermdl-layout__drawer">
<spanclass="mdl-layout-title">
<imgclass="android-logo-image"src="images/android-logo-white.png">
</span>
<navclass="mdl-navigation">
<aclass="mdl-navigation__link"href="">Phones</a>
<aclass="mdl-navigation__link"href="">Tablets</a>
...
<aclass="mdl-navigation__link"href="">Play</a>
<divclass="android-drawer-separator"></div>
<spanclass="mdl-navigation__link"href="">Versions</span>
<aclass="mdl-navigation__link"href="">Lollipop5.0</a>
...
<aclass="mdl-navigation__link"href="">Androidhistory</a>
<spanclass="mdl-navigation__link"href="">Resources</span>
<aclass="mdl-navigation__link"href="">Officialblog</a>
...
<spanclass="mdl-navigation__link"href="">Fordevelopers</span>
<aclass="mdl-navigation__link"href="">Appdeveloperresources</a>
...
</nav>
</div>
mdl-layout__drawer

.android-drawer{
border-right:none;
}
.android-drawer-separator{
height:1px;
background-color:#dcdcdc;
margin:8px0;
}
.android-drawer.mdl-navigation__link.mdl-navigation__link{
font-size:14px;
color:#757575;
}
.android-drawerspan.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

21 / 67
<divclass="android-be-together-sectionmdl-typography--text-center">
<divclass="logo-fontandroid-slogan">betogether.notthesame.</div>
<divclass="logo-fontandroid-sub-slogan">welcometoandroid...beyourself.doyourthing.seewhat'sgoingon.
<divclass="logo-fontandroid-create-character">
<ahref=""><imgsrc="images/andy.png">createyourandroidcharacter</a>
</div>
<ahref="#screens">
<buttonclass="android-fabmdl-buttonmdl-button--coloredmdl-js-buttonmdl-button--fabmdl-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')center30%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-charactera{
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

24 / 67
<divclass="android-screen-sectionmdl-typography--text-center">
<aname="screens"></a>
<divclass="mdl-typography--display-1-color-contrast">Poweringscreensofallsizes</div>
<divclass="android-screens">
<divclass="android-wearandroid-screen">
<aclass="android-image-link"href="">
<imgclass="android-screen-image"src="images/wear-silver-on.png">
<imgclass="android-screen-image"src="images/wear-black-on.png">
</a>
<aclass="android-linkmdl-typography--font-regularmdl-typography--text-uppercase"href=""
</div>
<divclass="android-phoneandroid-screen">
<aclass="android-image-link"href=""><imgclass="android-screen-image"src="images/nexus6-on.jpg"
</div>
<divclass="android-tabletandroid-screen">
<aclass="android-image-link"href=""><imgclass="android-screen-image"src="images/nexus9-on.jpg"
</div>
<divclass="android-tvandroid-screen">
<aclass="android-image-link"href=""><imgclass="android-screen-image"src="images/tv-on.jpg"
</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{
}
25 / 67
mdl-layout__content
android-screen-section
Custom CSS

27 / 67
<divclass="android-wear-section">
<divclass="android-wear-band">
<divclass="android-wear-band-text">
<divclass="mdl-typography--display-2mdl-typography--font-thin">ThebestofGooglebuiltin
<pclass="mdl-typography--headlinemdl-typography--font-thin">
AndroidworksperfectlywithyourfavouriteappslikeGoogleMaps,
CalendarandYouTube.
</p>
<p>
<aclass="mdl-typography--font-regularmdl-typography--text-uppercaseandroid-alt-link"href
Seewhat'snewinthePlayStore <iclass="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{
width:64px;
margin-right:48px;
}
.android-phone.android-screen-image{
width:100%;
z-index:1;
}
.android-tablet{
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{
width:300px;
margin-right:80px;
}
28 / 67
mdl-layout__content
android-wear-section
Custom CSS

30 / 67
<divclass="android-customized-section">
<divclass="android-customized-section-text">
<divclass="mdl-typography--font-lightmdl-typography--display-1-color-contrast">Customisedbyyou,foryou
<pclass="mdl-typography--font-light">
Putthestuffthatyoucareaboutrightonyourhomescreen:thelatestnews,theweatherorastreamofyourrecentphotos.
<br>
<ahref=""class="android-linkmdl-typography--font-light">Customiseyourphone</a>
</p>
</div>
<divclass="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:80px16px016px;
}
.android-customized-section-textp{
padding-top:16px;
}
.android-customized-section-image{
background:url('images/devices.jpg')centertopno-repeat;
height:400px;
}
31 / 67
mdl-layout__content
android-customized-section
Custom CSS

33 / 67
<divclass="android-more-section">
<divclass="android-section-titlemdl-typography--display-1-color-contrast">MorefromAndroid</
<divclass="android-card-containermdl-grid">
<divclass="mdl-cellmdl-cell--3-colmdl-cell--4-col-tabletmdl-cell--4-col-phonemdl-cardmdl-shadow--3dp"
<divclass="mdl-card__media"><imgsrc="images/more-from-1.png"></div>
<divclass="mdl-card__title"><h4class="mdl-card__title-text">GetgoingonAndroid</h4></div
<divclass="mdl-card__supporting-text">
<spanclass="mdl-typography--font-lightmdl-typography--subhead">FourtipstomakeyourswitchtoAndroidquickandeasy
</div>
<divclass="mdl-card__actions">
<aclass="android-linkmdl-buttonmdl-js-buttonmdl-typography--text-uppercase"href="">
Maketheswitch<iclass="material-icons">chevron_right</i>
</a>
</div>
</div>
<divclass="mdl-cellmdl-cell--3-colmdl-cell--4-col-tabletmdl-cell--4-col-phonemdl-cardmdl-shadow--3dp"
<divclass="mdl-card__media"><imgsrc="images/more-from-4.png"></div>
<divclass="mdl-card__title"><h4class="mdl-card__title-text">CreateyourownAndroidcharacter
<divclass="mdl-card__supporting-text"><spanclass="mdl-typography--font-lightmdl-typography--subhead"
<aclass="android-linkmdl-buttonmdl-js-buttonmdl-typography--text-uppercase"href="">
androidify.com<iclass="material-icons">chevron_right</i>
</a>
</div>
</div>
...
</div>
</div>
mdl-layout__content
android-more-section

.android-more-section{
padding:80px0;
max-width:1044px;
margin-left:auto;
margin-right:auto;
}
.android-more-section.android-section-title{
margin-left:12px;
}
.android-card-container{
}
.android-card-container.mdl-card__media{
overflow:hidden;
}
.android-card-container.mdl-card__mediaimg{
width:100%;
}
.android-card-container.mdl-card__title{
height:auto;
}
.android-card-container.mdl-card__title-text{
color:black;
height:auto;
}
.android-card-container.mdl-card__supporting-text{
height:auto;
color:black;
}
.android-card-container.mdl-card__actions{
position:absolute;
bottom:0;
} 34 / 67
mdl-layout__content
android-more-section
Custom CSS

36 / 67
<footerclass="android-footermdl-mega-footer">
<divclass="mdl-mega-footer--top-section">
<divclass="mdl-mega-footer--left-section">
<buttonclass="mdl-mega-footer--social-btn"></button> 
</div>
<divclass="mdl-mega-footer--right-section">
<aclass="mdl-typography--font-light"href="#top">BacktoTop<iclass="material-icons">expand_less
</div>
</div>
<divclass="mdl-mega-footer--middle-section">
<pclass="mdl-typography--font-light">Satelliteimagery:2014Astrium,DigitalGlobe</p>
<pclass="mdl-typography--font-light">Somefeaturesanddevicesmaynotbeavailableinallareas
</div>
<divclass="mdl-mega-footer--bottom-section">
<aclass="android-linkandroid-link-menumdl-typography--font-light"id="version-dropdown">
Versions<iclass="material-icons">arrow_drop_up</i>
</a>
<ulclass="mdl-menumdl-js-menumdl-menu--top-leftmdl-js-ripple-effect"for="version-dropdown"
<liclass="mdl-menu__item">5.0Lollipop</li><liclass="mdl-menu__item">4.4KitKat</li>...
</ul>
<aclass="android-linkandroid-link-menumdl-typography--font-light"id="developers-dropdown"
<aclass="android-linkmdl-typography--font-light"href="">Blog</a>
<aclass="android-linkmdl-typography--font-light"href="">PrivacyPolicy</a>
</div>
</footer>
mdl-layout__content
android-footer

.android-footer{
background-color:#fafafa;
position:relative;
}
.android-footera: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-sectiona{
margin-right:2em;
}
.android-footer.mdl-mega-footer--right-sectiona.material-icons{
position:relative;
top:6px;
}
/****Mobilelayout****/
@media(max-width:900px){
.android-footer.mdl-mega-footer--bottom-section{
display:none;
}
}
37 / 67
mdl-layout__content
android-footer
Custom CSS

SitePoint - @AntoniettaPerna
40 / 67

SitePoint - @AntoniettaPerna
41 / 67

<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>DemoTemplateUsingMaterialDesignLite</title>
<metaname="viewport"content="width=device-width,initial-scale=1">
<linkrel='stylesheetprefetch'href='https://fonts.googleapis.com/css?family=Roboto:400,100,500,300italic,500italic,700italic,900,300'
<linkrel='stylesheetprefetch'href='https://fonts.googleapis.com/icon?family=Material+Icons'
<linkrel='stylesheetprefetch'href='https://code.getmdl.io/1.2.1/material.indigo-pink.min.css'
<linkrel="stylesheet"href="css/style.css">
</head>
<body>
<divclass="mdl-layoutmdl-js-layoutmdl-layout--fixed-header
mdl-layout--fixed-tabs">
<headerclass="mdl-layout__header">...</header>
<divclass="mdl-layout__drawer">...</div>
<mainclass="mdl-layout__content">
<divclass="mdl-layout__tab-panelis-active"id="fixed-tab-1">
<divclass="page-content">
<divclass="hero-section">...</div>
<divid="intro"class="mdl-gridintro-section">...</div>
<divclass="mdl-gridmdl-grid--no-spacingfullwidth-panel">...</div>
</div>
</div>
<divclass="mdl-layout__tab-panel"id="fixed-tab-2">
<divclass="page-content">

<divclass="mdl-gridcards-section">
<divclass="mdl-cellmdl-cell--6-colmdl-cell--12-col-tabletmdl-cardmdl-shadow--2dphome-bringing-card"
<divclass="mdl-cellmdl-cell--4-colmdl-cell--4-col-tabletmdl-cell--4-col-phonemdl-cardmdl-shadow--2dpplay-card"
<divclass="mdl-cellmdl-cell--2-colmdl-cell--4-col-tabletmdl-cell--4-col-phonemdl-cardmdl-shadow--2dpimage-card"
<divclass="mdl-cellmdl-cell--6-colmdl-cell--8-col-tabletmdl-cell--4-col-phonemdl-cardmdl-shadow--2dplitter-card"
<divclass="mdl-cellmdl-cell--6-colmdl-cell--8-col-tabletmdl-cell--4-col-phonemdl-cardmdl-shadow--2dpdiet-card"
<divclass="mdl-cellmdl-cell--3-colmdl-cell--8-col-tabletmdl-cell--4-col-phonemdl-cardmdl-shadow--2dpcard-small"
<divclass="mdl-cellmdl-cell--3-colmdl-cell--8-col-tabletmdl-cell--4-col-phonemdl-cardmdl-shadow--2dpcard-small"
42 / 67
Enabling MDL
MDL 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:0auto;
max-width:300px;
}
43 / 67
Custom CSS

44 / 67
<headerclass="mdl-layout__header">
<divclass="mdl-layout__header-row">

<spanclass="mdl-layout-title">KaptainKitty</span>
</div>

<divclass="mdl-layout__tab-barmdl-js-ripple-effect">
<ahref="#fixed-tab-1"class="mdl-layout__tabis-active">About</a>
<ahref="#fixed-tab-2"class="mdl-layout__tab">Learn</a>
</div>
</header>
mdl-layout__header

46 / 67
<divclass="mdl-layout__drawer">
<spanclass="mdl-layout-title">KaptainKitty</span>
<divclass="avatar">
<imgsrc="https://dl.dropboxusercontent.com/u/32494584/avatar.jpg"alt="KaptainKitty"class=
</div>
<divclass="drawer-text">
Loremipsumdolorsitamet,consecteturadipisicingelit.Aspernaturofficiisanimi,solutaabdeseruntdolorefugitvoluptatemlaboriosam,
</div>
</div>
mdl-layout__drawer

/*DRAWER*/
.mdl-layout__drawer-button,
.mdl-layout__drawer-buttoni{
color:white;
}
@media(max-width:900px){
.mdl-layout__drawer-button{
width:100%;
margin:0;
background-color:transparent;
}
}
.avatar{
height:200px;
width:200px;
margin:0auto2em;
}
.avatar-img{
height:200px;
width:200px;
margin:0auto;
border-radius:50%;
}
.drawer-text{
padding:1em;
text-align:center;
}
47 / 67
mdl-layout__drawer
Custom CSS

49 / 67
<divclass="hero-section">
<divclass="hero-textmdl-typography--text-center">
<h1class="mdl-typography--display-2">I'mKaptainKitty</h1>
<pclass="mdl-typography--display-1">
I'llteachyouloadsaboutyourkitten
</p>
<aclass="mdl-buttonmdl-js-buttonmdl-button--fabmdl-js-ripple-effectmdl-button--accentkitty-hero__text-button"
<iclass="material-icons">keyboard_arrow_down</i>
</a>
</div>
</div>
mdl-layout__content
.mdl-layout__tab-panel
# xed-tab-1
hero-section

/*HEROSECTION*/
.hero-section{
height:100vh;
/*IE11doesn'tlikemin-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.j
background-position:centercenter;
background-repeat:no-repeat;
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;
}
@mediascreenand(max-width:580px){
.hero-textp{
white-space:pre-line;
}
}
.kitty-hero__text-button{
position:absolute;
bottom:-28px;
left:50%;
50 / 67
mdl-layout__content
# xed-tab-1
hero-section
Custom CSS

<divid="intro"class="mdl-gridintro-section">
<divclass="about-kittymdl-cellmdl-cell--12-col">
<pclass="mdl-typography--headline">
WelcometoKaptainKitty!ThisisademoHTMLtemplatethataccompaniesanarticleforSitePoint.Thearticleillustrateshowtousethe
demoarecourtesyof<ahref="https://pixabay.com/">Pixabay.com</a>.
</p>
</div>
<p>Loremipsumdolorsitamet,consecteturadipisicingelit.Sintdolorumconsecteturnatussequi,estsimilique!Temporibusremconsequunt
<p>Loremipsumdolorsitamet,consecteturadipisicingelit.Ut,dictaaliquid,inventoreaullamexcepturisimiliquesit,nobisinciduntl
</div>
<divclass="about-kittymdl-cellmdl-cell--5-colmdl-cell--1-col-tabletmdl-cell--hide-phone"
<divclass="circle-container">
<divclass="circle"></div>
</div>
</div>
<divclass="about-kittymdl-cellmdl-cell--7-colmdl-cell--6-col-tabletmdl-cell--4-col-phone"
<divclass="topics-container">
<divclass="topic">Feeding</div>
<divclass="topic">Choosingtherightvet</div>
<divclass="topic">Keepingyoukittenshealthy</div>
<divclass="topic">Adoptingakitten</div>
<divclass="topic">Vaccinatingyourkitten</div>
</div>
</div>
<pclass="clearfix">
<imgsrc="https://dl.dropboxusercontent.com/u/32494584/avatar.jpg"alt="KaptainKitty"class
remconsequunturlaudantium,illoexcepturivelitquas.Culpaipsumdolortemporeaccusantiumsediusto.Loremipsumdolorsitamet,cons
laboriosamametmaximeiustonamfacilispossimusquooptio?Dolor,et?
</p>
<p>Loremipsumdolorsitamet,consecteturadipisicingelit.Ut,dictaaliquid,inventoreaullamexcepturisimiliquesit,nobisinciduntl
</div>
</div>
52 / 67
mdl-layout__content
# xed-tab-1
intro-section

/*ABOUTKITTYINTRO+CARDS*/
.intro-section,
.cards-section{
max-width:960px;
}
/*ABOUTKITTYINTRO*/
.intro-section{
padding:5em2em5em;
}
.about-kittyp{
max-width:640px;
margin:auto;
}
.circle-container{
width:100%;
min-height:100px;
padding:2em0;
display:flex;
-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:03px9px;
53 / 67
mdl-layout__content
# xed-tab-1
intro-section
Custom CSS

55 / 67
<divclass="mdl-gridmdl-grid--no-spacingfullwidth-panel">
<divclass="mdl-cellmdl-cell--12-colmdl-typography--text-centerquote-panel">
<blockquote>
<p>
Loremipsumdolorsitamet,consecteturadipisicingelit.Sintdolorumconsecteturnatussequi,estsimilique!Temporibusremconsequun
</p>
<footer>
-<cite>HappyKittenOwner</cite>
</footer>
</blockquote>
</div>
</div>
mdl-layout__content
# xed-tab-1
quote-panel

/*FULLWIDTHBACKGROUNDSECTION*/
.fullwidth-panel{
color:white;
background-color:rgba(156,39,176,0.6);
}
.fullwidth-panelp{
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
background-position:center5%;
background-repeat:no-repeat;
padding:4em2em2em;
display:flex;
-webkit-align-content:flex-start;
-ms-flex-line-pack:start;
align-content:flex-start;
}
@mediascreenand(min-width:800px){
.quote-panel{
background-position:center0;
padding:6em2em;
}
}
.quote-panel{
background-position:center8%;
padding:10em2em8em;
}
}
56 / 67
mdl-layout__content
# xed-tab-1
quote-panel
Custom CSS

<divclass="mdl-gridcards-section">
<divclass="mdl-cellmdl-cell--6-colmdl-cell--12-col-tabletmdl-cardmdl-shadow--2dphome-bringing-card"
<divclass="mdl-card__title">
<h2class="mdl-card__title-text">Bringingakittenintoyourhome</h2>
</div>
Loremipsumdolorsitamet,consecteturadipisicingelit.Doloremexplicaboreiciendiscorporis,optioanimiautem,quisquam,temporibus
</div>
</div>
<divclass="mdl-cellmdl-cell--4-colmdl-cell--4-col-tabletmdl-cell--4-col-phonemdl-cardmdl-shadow--2dpplay-card"
<h2class="mdl-card__title-text">Playingwithyourkitten</h2>
</div>
</div>
</div>
<divclass="mdl-cellmdl-cell--2-colmdl-cell--4-col-tabletmdl-cell--4-col-phonemdl-cardmdl-shadow--2dpimage-card"
<spanclass="image-card__title">KaptainKitty.jpg</span>
</div>
</div>
<divclass="mdl-cellmdl-cell--6-colmdl-cell--8-col-tabletmdl-cell--4-col-phonemdl-cardmdl-shadow--2dplitter-card"
<h2class="mdl-card__title-text">Takingcareofalitterofkittens</h2>
</div>
</div>
</div>
<divclass="mdl-cellmdl-cell--6-colmdl-cell--8-col-tabletmdl-cell--4-col-phonemdl-cardmdl-shadow--2dpdiet-card"
<h2class="mdl-card__title-text">Healthydietforyourkitten</h2>
</div>
</div>
<divclass="mdl-card__actionsmdl-card--border">
58 / 67
mdl-layout__content
# xed-tab-2
cards-section

/*CARDSSECTION*/
.cards-section{
padding:5em0;
}
.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.jp
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.jp
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
# xed-tab-2
cards-section
Custom CSS

<divclass="mdl-gridmdl-grid--no-spacing">
<divclass="mdl-cellmdl-cell--12-colcontact-intromdl-color--indigo-900">
<h2class="mdl-typography--titlemdl-typography--title-color-contrastmdl-typography--font-thinmdl-typography--text-center"
</div>
<divclass="mdl-cellmdl-cell--6-colmdl-cell--8-col-tabletmdl-cell--4-col-phonecontact-panelform-panelmdl-color--indigo-50"
<formaction="#">
<divclass="mdl-textfieldmdl-js-textfieldmdl-textfield--floating-label">
<inputclass="mdl-textfield__input"type="text"id="name">
<labelclass="mdl-textfield__label"for="name">Yourname</label>
</div>
<divclass="mdl-textfieldmdl-js-textfieldmdl-textfield--floating-label">
<inputclass="mdl-textfield__input"type="email"id="email">
<labelclass="mdl-textfield__label"for="email">Youremail</label>
</div>
<divclass="button-containerclearfix">
<buttonclass="mdl-buttonmdl-js-buttonmdl-button--raisedmdl-js-ripple-effectmdl-button--accentsubscribe-button"
Joinmyfans
</button>
</div>
</form>
</div>
<divclass="mdl-cellmdl-cell--6-colmdl-cell--8-col-tabletmdl-cell--4-col-phonecontact-paneladdress-panelmdl-typography--text-centermdl
<pclass="mdl-typography--title-color-contrastmdl-typography--text-nowrapmdl-typography--font-thin"
<iclass="material-icons">email</i><ahref="mailto:info@captain.kitty.com">info@kaptain.kitty.com
</p>
<pclass="mdl-typography--title-color-contrastmdl-typography--text-nowrapmdl-typography--font-thin"
<aclass="mdl-buttonmdl-js-buttonmdl-button--raisedmdl-js-ripple-effect"href="twitter.com"
<aclass="mdl-buttonmdl-js-buttonmdl-button--raisedmdl-js-ripple-effect"href="plus.google.com"
<aclass="mdl-buttonmdl-js-buttonmdl-button--raisedmdl-js-ripple-effect"href="facebook.com"
</p>
</div>
</div>
61 / 67
mdl-layout__content
contact-intro
contact-panel

.contact-intro{
color:rgba(255,255,255,0.87);
}
.contact-panel{
padding:6em4em;
display:flex;
margin:auto;
}
.mdl-textfield{
display:block;
width:100%;
padding:20px0;
}
.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;
height:30px;
width:30px;
line-height:30px;
background-color:#ff4081; 62 / 67
mdl-layout__content
contact-intro
contact-panel
Custom CSS

64 / 67
<footerclass="mdl-mini-footermdl-color--indigo-200">
<divclass="mdl-mini-footer__left-section">
<divclass="mdl-logo">KaptainKitty–designedby<ahref="http://wpthememakeover.com">
<ulclass="mdl-mini-footer__link-list">
<li><ahref="#">Help</a></li>
<li><ahref="#">Privacy&Terms</a></li>
</ul>
©MariaAntoniettaPerna2016
</div>
</footer>
mdl-layout__content
footer

Refs
1. Material Design Lite
2. Introduction - Material design - Material design guidelines
3. Material Design
4. Deck by @addyosmani - Material Design for the Web
5. Resizer - Material Design
6. A Practical Introduction to Material Design Lite by Google
7. Google Design
8. Introduction - Material design - Material design guidelines
9. google/material-design-lite
66 / 67

67 / 67
END
Eueung Mulyana
https://eueung.github.io/112016/mdl
CodeLabs | Attribution-ShareAlike CC BY-SA

introduction to material design lite MDL

More Related Content

Similar to introduction to material design lite MDL

More from Eueung Mulyana

Recently uploaded

introduction to material design lite MDL