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

Introduction 3 / 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

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 < ! d o c t y p e h t m l > < h t m l l a n g = " e n " > < h e a d > . . . < ! - - P a g e s t y l e s - - > < l i n k r e l = " s t y l e s h e e t " h r e f = " h t t p s : / / f o n t s . g o o g l e a p i s . c o m / c s s ? f a m i l y = R o b o t o : r e g u l a r , b o l d , i t a l i c , t h i n , l i g h t , b o l d i t a l i c , b l a c k , m e d i u m & a m p ; l a n g = e < l i n k r e l = " s t y l e s h e e t " h r e f = " h t t p s : / / f o n t s . g o o g l e a p i s . c o m / i c o n ? f a m i l y = M a t e r i a l + I c o n s " > < l i n k r e l = " s t y l e s h e e t " h r e f = " h t t p s : / / c o d e . g e t m d l . i o / 1 . 2 . 1 / m a t e r i a l . m i n . c s s " > < l i n k r e l = " s t y l e s h e e t " h r e f = " s t y l e s . c s s " > < s t y l e > . . . < / s t y l e > < / h e a d > < b o d y > < d i v c l a s s = " m d l - l a y o u t m d l - j s - l a y o u t m d l - l a y o u t - - f i x e d - h e a d e r " > < d i v c l a s s = " a n d r o i d - h e a d e r m d l - l a y o u t _ _ h e a d e r m d l - l a y o u t _ _ h e a d e r - - w a t e r f a l l " > < d i v c l a s s = " m d l - l a y o u t _ _ h e a d e r - r o w " > . . . < / d i v > < / d i v > < d i v c l a s s = " a n d r o i d - d r a w e r m d l - l a y o u t _ _ d r a w e r " > . . . < / d i v > < d i v c l a s s = " a n d r o i d - c o n t e n t m d l - l a y o u t _ _ c o n t e n t " > < a n a m e = " t o p " > < / a > < d i v c l a s s = " a n d r o i d - b e - t o g e t h e r - s e c t i o n m d l - t y p o g r a p h y - - t e x t - c e n t e r " > . . . < / d i v > < d i v c l a s s = " a n d r o i d - s c r e e n - s e c t i o n m d l - t y p o g r a p h y - - t e x t - c e n t e r " > . . . < / d i v > < d i v c l a s s = " a n d r o i d - w e a r - s e c t i o n " > . . . < / d i v > < d i v c l a s s = " a n d r o i d - c u s t o m i z e d - s e c t i o n " > . . . < / d i v > < d i v c l a s s = " a n d r o i d - m o r e - s e c t i o n " > . . . < / d i v > < f o o t e r c l a s s = " a n d r o i d - f o o t e r m d l - m e g a - f o o t e r " > . . . < / f o o t e r > < / d i v > < / d i v > < a . . . > V i e w S o u r c e < / a > < s c r i p t s r c = " h t t p s : / / c o d e . g e t m d l . i o / 1 . 2 . 1 / m a t e r i a l . m i n . j s " > < / s c r i p t > < / b o d y > < / h t m l > Enabling MDL MDL Layout

b o d y { m a r g i n : 0 ; } / * D i s a b l e u g l y b o x e s a r o u n d i m a g e s i n I E 1 0 * / a i m g { b o r d e r : 0 p x ; } : : - m o z - s e l e c t i o n { b a c k g r o u n d - c o l o r : # 6 a b 3 4 4 ; c o l o r : # f f f ; } : : s e l e c t i o n { b a c k g r o u n d - c o l o r : # 6 a b 3 4 4 ; c o l o r : # f f f ; } / * - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * / . a n d r o i d - l i n k { t e x t - d e c o r a t i o n : n o n e ; c o l o r : # 8 b c 3 4 a ! i m p o r t a n t ; } . a n d r o i d - l i n k : h o v e r { c o l o r : # 7 c b 3 4 2 ! i m p o r t a n t ; } . a n d r o i d - l i n k . m a t e r i a l - i c o n s { p o s i t i o n : r e l a t i v e ; t o p : - 1 p x ; v e r t i c a l - a l i g n : m i d d l e ; } / * - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * / . a n d r o i d - a l t - l i n k { t e x t - d e c o r a t i o n : n o n e ; c o l o r : # 6 4 f f d a ! i m p o r t a n t ; f o n t - s i z e : 1 6 p x ; } . a n d r o i d - a l t - l i n k : h o v e r { c o l o r : # 0 0 b f a 5 ! i m p o r t a n t ; 14 / 67 Custom CSS

15 / 67 < d i v c l a s s = " a n d r o i d - h e a d e r m d l - l a y o u t _ _ h e a d e r m d l - l a y o u t _ _ h e a d e r - - w a t e r f a l l " > < d i v c l a s s = " m d l - l a y o u t _ _ h e a d e r - r o w " > < s p a n c l a s s = " a n d r o i d - t i t l e m d l - l a y o u t - t i t l e " > < i m g c l a s s = " a n d r o i d - l o g o - i m a g e " s r c = " i m a g e s / a n d r o i d - l o g o . p n g " < s p a n c l a s s = " a n d r o i d - m o b i l e - t i t l e m d l - l a y o u t - t i t l e " > < i m g c l a s s = " a n d r o i d - l o g o - i m a g e " s r c = " i m a g e s / a n d r o i d - l o g o . p n g " < d i v c l a s s = " a n d r o i d - h e a d e r - s p a c e r m d l - l a y o u t - s p a c e r " > < / d i v > < d i v c l a s s = " a n d r o i d - s e a r c h - b o x m d l - t e x t f i e l d m d l - j s - t e x t f i e l d m d l - t e x t f i e l d - - e x p a n d a b l e m d l - t e x t f i e l d - - f l o a t i n g - l a b e l m d l - t e x t f i e l d - - a l i g n - < l a b e l c l a s s = " m d l - b u t t o n m d l - j s - b u t t o n m d l - b u t t o n - - i c o n " f o r = " s e a r c h - f i e l d " > < i c l a s s = " m a t e r i a l - i c o n s " < d i v c l a s s = " m d l - t e x t f i e l d _ _ e x p a n d a b l e - h o l d e r " > < i n p u t c l a s s = " m d l - t e x t f i e l d _ _ i n p u t " t y p e = " t e x t " < / d i v > < d i v c l a s s = " a n d r o i d - n a v i g a t i o n - c o n t a i n e r " > < n a v c l a s s = " a n d r o i d - n a v i g a t i o n m d l - n a v i g a t i o n " > < a c l a s s = " m d l - n a v i g a t i o n _ _ l i n k m d l - t y p o g r a p h y - - t e x t - u p p e r c a s e " h r e f = " " > P h o n e s < / a > . . . < a c l a s s = " m d l - n a v i g a t i o n _ _ l i n k m d l - t y p o g r a p h y - - t e x t - u p p e r c a s e " h r e f = " " > P l a y < / a > < / n a v > < / d i v > < b u t t o n c l a s s = " a n d r o i d - m o r e - b u t t o n m d l - b u t t o n m d l - j s - b u t t o n m d l - b u t t o n - - i c o n m d l - j s - r i p p l e - e f f e c t " < u l c l a s s = " m d l - m e n u m d l - j s - m e n u m d l - m e n u - - b o t t o m - r i g h t m d l - j s - r i p p l e - e f f e c t " f o r = " m o r e - b u t t o n " < l i c l a s s = " m d l - m e n u _ _ i t e m " > 5 . 0 L o l l i p o p < / l i > . . . < l i c l a s s = " m d l - m e n u _ _ i t e m " > A n d r o i d H i s t o r y < / l i > < / u l > < / d i v > < / d i v > mdl-layout__header

. a n d r o i d - h e a d e r { o v e r f l o w : v i s i b l e ; b a c k g r o u n d - c o l o r : w h i t e ; } . a n d r o i d - h e a d e r . m a t e r i a l - i c o n s { c o l o r : # 7 6 7 7 7 7 ! i m p o r t a n t ; } . a n d r o i d - h e a d e r . m d l - l a y o u t _ _ d r a w e r - b u t t o n { b a c k g r o u n d : t r a n s p a r e n t ; c o l o r : # 7 6 7 7 7 7 ; } . a n d r o i d - h e a d e r . m d l - n a v i g a t i o n _ _ l i n k { c o l o r : # 7 5 7 5 7 5 ; f o n t - w e i g h t : 7 0 0 ; f o n t - s i z e : 1 4 p x ; } . a n d r o i d - n a v i g a t i o n - c o n t a i n e r { / * S i m p l e h a c k t o m a k e t h e o v e r f l o w h a p p e n t o t h e l e f t i n s t e a d . . . * / d i r e c t i o n : r t l ; - w e b k i t - o r d e r : 1 ; - m s - f l e x - o r d e r : 1 ; o r d e r : 1 ; w i d t h : 5 0 0 p x ; t r a n s i t i o n : o p a c i t y 0 . 2 s c u b i c - b e z i e r ( 0 . 4 , 0 , 0 . 2 , 1 ) , w i d t h 0 . 2 s c u b i c - b e z i e r ( 0 . 4 , 0 , 0 . 2 , 1 ) ; } . a n d r o i d - n a v i g a t i o n { / * . . . a n d n o w m a k e s u r e t h e c o n t e n t i s a c t u a l l y L T R * / d i r e c t i o n : l t r ; - w e b k i t - j u s t i f y - c o n t e n t : f l e x - e n d ; - m s - f l e x - p a c k : e n d ; j u s t i f y - c o n t e n t : f l e x - e n d ; w i d t h : 8 0 0 p x ; } . a n d r o i d - s e a r c h - b o x . i s - f o c u s e d + . a n d r o i d - n a v i g a t i o n - c o n t a i n e r { o p a c i t y : 0 ; w i d t h : 1 0 0 p x ; 16 / 67 mdl-layout__header Custom CSS

17 / 67

18 / 67 < d i v c l a s s = " a n d r o i d - d r a w e r m d l - l a y o u t _ _ d r a w e r " > < s p a n c l a s s = " m d l - l a y o u t - t i t l e " > < i m g c l a s s = " a n d r o i d - l o g o - i m a g e " s r c = " i m a g e s / a n d r o i d - l o g o - w h i t e . p n g " > < / s p a n > < n a v c l a s s = " m d l - n a v i g a t i o n " > < a c l a s s = " m d l - n a v i g a t i o n _ _ l i n k " h r e f = " " > P h o n e s < / a > < a c l a s s = " m d l - n a v i g a t i o n _ _ l i n k " h r e f = " " > T a b l e t s < / a > . . . < a c l a s s = " m d l - n a v i g a t i o n _ _ l i n k " h r e f = " " > P l a y < / a > < d i v c l a s s = " a n d r o i d - d r a w e r - s e p a r a t o r " > < / d i v > < s p a n c l a s s = " m d l - n a v i g a t i o n _ _ l i n k " h r e f = " " > V e r s i o n s < / s p a n > < a c l a s s = " m d l - n a v i g a t i o n _ _ l i n k " h r e f = " " > L o l l i p o p 5 . 0 < / a > . . . < a c l a s s = " m d l - n a v i g a t i o n _ _ l i n k " h r e f = " " > A n d r o i d h i s t o r y < / a > < d i v c l a s s = " a n d r o i d - d r a w e r - s e p a r a t o r " > < / d i v > < s p a n c l a s s = " m d l - n a v i g a t i o n _ _ l i n k " h r e f = " " > R e s o u r c e s < / s p a n > < a c l a s s = " m d l - n a v i g a t i o n _ _ l i n k " h r e f = " " > O f f i c i a l b l o g < / a > . . . < d i v c l a s s = " a n d r o i d - d r a w e r - s e p a r a t o r " > < / d i v > < s p a n c l a s s = " m d l - n a v i g a t i o n _ _ l i n k " h r e f = " " > F o r d e v e l o p e r s < / s p a n > < a c l a s s = " m d l - n a v i g a t i o n _ _ l i n k " h r e f = " " > A p p d e v e l o p e r r e s o u r c e s < / a > . . . < / n a v > < / d i v > mdl-layout__drawer

. a n d r o i d - d r a w e r { b o r d e r - r i g h t : n o n e ; } . a n d r o i d - d r a w e r - s e p a r a t o r { h e i g h t : 1 p x ; b a c k g r o u n d - c o l o r : # d c d c d c ; m a r g i n : 8 p x 0 ; } . a n d r o i d - d r a w e r . m d l - n a v i g a t i o n _ _ l i n k . m d l - n a v i g a t i o n _ _ l i n k { f o n t - s i z e : 1 4 p x ; c o l o r : # 7 5 7 5 7 5 ; } . a n d r o i d - d r a w e r s p a n . m d l - n a v i g a t i o n _ _ l i n k . m d l - n a v i g a t i o n _ _ l i n k { c o l o r : # 8 b c 3 4 a ; } . a n d r o i d - d r a w e r . m d l - l a y o u t - t i t l e { p o s i t i o n : r e l a t i v e ; b a c k g r o u n d : # 6 a b 3 4 4 ; h e i g h t : 1 6 0 p x ; } . a n d r o i d - d r a w e r . a n d r o i d - l o g o - i m a g e { p o s i t i o n : a b s o l u t e ; b o t t o m : 1 6 p x ; } 19 / 67 mdl-layout__drawer Custom CSS

20 / 67

21 / 67 < d i v c l a s s = " a n d r o i d - b e - t o g e t h e r - s e c t i o n m d l - t y p o g r a p h y - - t e x t - c e n t e r " > < d i v c l a s s = " l o g o - f o n t a n d r o i d - s l o g a n " > b e t o g e t h e r . n o t t h e s a m e . < / d i v > < d i v c l a s s = " l o g o - f o n t a n d r o i d - s u b - s l o g a n " > w e l c o m e t o a n d r o i d . . . b e y o u r s e l f . d o y o u r t h i n g . s e e w h a t ' s g o i n g o n . < d i v c l a s s = " l o g o - f o n t a n d r o i d - c r e a t e - c h a r a c t e r " > < a h r e f = " " > < i m g s r c = " i m a g e s / a n d y . p n g " > c r e a t e y o u r a n d r o i d c h a r a c t e r < / a > < / d i v > < a h r e f = " # s c r e e n s " > < b u t t o n c l a s s = " a n d r o i d - f a b m d l - b u t t o n m d l - b u t t o n - - c o l o r e d m d l - j s - b u t t o n m d l - b u t t o n - - f a b m d l - j s - r i p p l e - e f f e c t " < / a > < / d i v > mdl-layout__content android-be-together-section

. a n d r o i d - b e - t o g e t h e r - s e c t i o n { p o s i t i o n : r e l a t i v e ; h e i g h t : 8 0 0 p x ; w i d t h : a u t o ; b a c k g r o u n d - c o l o r : # f 3 f 3 f 3 ; b a c k g r o u n d : u r l ( ' i m a g e s / s l i d e 0 1 . j p g ' ) c e n t e r 3 0 % n o - r e p e a t ; b a c k g r o u n d - s i z e : c o v e r ; } . l o g o - f o n t { f o n t - f a m i l y : ' R o b o t o ' , ' H e l v e t i c a ' , ' A r i a l ' , s a n s - s e r i f ; l i n e - h e i g h t : 1 ; c o l o r : # 7 6 7 7 7 7 ; f o n t - w e i g h t : 5 0 0 ; } . a n d r o i d - s l o g a n { f o n t - s i z e : 6 0 p x ; p a d d i n g - t o p : 1 6 0 p x ; } . a n d r o i d - s u b - s l o g a n { f o n t - s i z e : 2 1 p x ; p a d d i n g - t o p : 2 4 p x ; } . a n d r o i d - c r e a t e - c h a r a c t e r { f o n t - s i z e : 2 1 p x ; p a d d i n g - t o p : 4 0 0 p x ; } . a n d r o i d - c r e a t e - c h a r a c t e r a { t e x t - d e c o r a t i o n : n o n e ; c o l o r : # 7 6 7 7 7 7 ; f o n t - w e i g h t : 3 0 0 ; } . a n d r o i d - f a b { p o s i t i o n : a b s o l u t e ; r i g h t : 2 0 % ; b o t t o m : - 2 6 p x ; z - i n d e x : 3 ; b a c k g r o u n d : # 6 4 f f d a ! i m p o r t a n t ; 22 / 67 mdl-layout__content android-be-together-section Custom CSS

23 / 67

24 / 67 < d i v c l a s s = " a n d r o i d - s c r e e n - s e c t i o n m d l - t y p o g r a p h y - - t e x t - c e n t e r " > < a n a m e = " s c r e e n s " > < / a > < d i v c l a s s = " m d l - t y p o g r a p h y - - d i s p l a y - 1 - c o l o r - c o n t r a s t " > P o w e r i n g s c r e e n s o f a l l s i z e s < / d i v > < d i v c l a s s = " a n d r o i d - s c r e e n s " > < d i v c l a s s = " a n d r o i d - w e a r a n d r o i d - s c r e e n " > < a c l a s s = " a n d r o i d - i m a g e - l i n k " h r e f = " " > < i m g c l a s s = " a n d r o i d - s c r e e n - i m a g e " s r c = " i m a g e s / w e a r - s i l v e r - o n . p n g " > < i m g c l a s s = " a n d r o i d - s c r e e n - i m a g e " s r c = " i m a g e s / w e a r - b l a c k - o n . p n g " > < / a > < a c l a s s = " a n d r o i d - l i n k m d l - t y p o g r a p h y - - f o n t - r e g u l a r m d l - t y p o g r a p h y - - t e x t - u p p e r c a s e " h r e f = " " < / d i v > < d i v c l a s s = " a n d r o i d - p h o n e a n d r o i d - s c r e e n " > < a c l a s s = " a n d r o i d - i m a g e - l i n k " h r e f = " " > < i m g c l a s s = " a n d r o i d - s c r e e n - i m a g e " s r c = " i m a g e s / n e x u s 6 - o n . j p g " < a c l a s s = " a n d r o i d - l i n k m d l - t y p o g r a p h y - - f o n t - r e g u l a r m d l - t y p o g r a p h y - - t e x t - u p p e r c a s e " h r e f = " " < / d i v > < d i v c l a s s = " a n d r o i d - t a b l e t a n d r o i d - s c r e e n " > < a c l a s s = " a n d r o i d - i m a g e - l i n k " h r e f = " " > < i m g c l a s s = " a n d r o i d - s c r e e n - i m a g e " s r c = " i m a g e s / n e x u s 9 - o n . j p g " < a c l a s s = " a n d r o i d - l i n k m d l - t y p o g r a p h y - - f o n t - r e g u l a r m d l - t y p o g r a p h y - - t e x t - u p p e r c a s e " h r e f = " " < / d i v > < d i v c l a s s = " a n d r o i d - t v a n d r o i d - s c r e e n " > < a c l a s s = " a n d r o i d - i m a g e - l i n k " h r e f = " " > < i m g c l a s s = " a n d r o i d - s c r e e n - i m a g e " s r c = " i m a g e s / t v - o n . j p g " < a c l a s s = " a n d r o i d - l i n k m d l - t y p o g r a p h y - - f o n t - r e g u l a r m d l - t y p o g r a p h y - - t e x t - u p p e r c a s e " h r e f = " " < / d i v > . . . < / d i v > < / d i v > mdl-layout__content android-screen-section

. a n d r o i d - s c r e e n - s e c t i o n { p o s i t i o n : r e l a t i v e ; p a d d i n g - t o p : 6 0 p x ; p a d d i n g - b o t t o m : 8 0 p x ; } . a n d r o i d - s c r e e n s { t e x t - a l i g n : r i g h t ; w i d t h : 1 0 0 % ; w h i t e - s p a c e : n o w r a p ; o v e r f l o w - x : a u t o ; } . a n d r o i d - s c r e e n { t e x t - a l i g n : c e n t e r ; } . a n d r o i d - s c r e e n . a n d r o i d - l i n k { m a r g i n - t o p : 1 6 p x ; d i s p l a y : b l o c k ; z - i n d e x : 2 ; } . a n d r o i d - i m a g e - l i n k { t e x t - d e c o r a t i o n : n o n e ; } 25 / 67 mdl-layout__content android-screen-section Custom CSS

26 / 67

27 / 67 < d i v c l a s s = " a n d r o i d - w e a r - s e c t i o n " > < d i v c l a s s = " a n d r o i d - w e a r - b a n d " > < d i v c l a s s = " a n d r o i d - w e a r - b a n d - t e x t " > < d i v c l a s s = " m d l - t y p o g r a p h y - - d i s p l a y - 2 m d l - t y p o g r a p h y - - f o n t - t h i n " > T h e b e s t o f G o o g l e b u i l t i n < p c l a s s = " m d l - t y p o g r a p h y - - h e a d l i n e m d l - t y p o g r a p h y - - f o n t - t h i n " > A n d r o i d w o r k s p e r f e c t l y w i t h y o u r f a v o u r i t e a p p s l i k e G o o g l e M a p s , C a l e n d a r a n d Y o u T u b e . < / p > < p > < a c l a s s = " m d l - t y p o g r a p h y - - f o n t - r e g u l a r m d l - t y p o g r a p h y - - t e x t - u p p e r c a s e a n d r o i d - a l t - l i n k " h r e f S e e w h a t ' s n e w i n t h e P l a y S t o r e & n b s p ; < i c l a s s = " m a t e r i a l - i c o n s " > c h e v r o n _ r i g h t < / i > < / a > < / p > < / d i v > < / d i v > < / d i v > mdl-layout__content android-wear-section

. a n d r o i d - w e a r { d i s p l a y : i n l i n e - b l o c k ; w i d t h : 1 6 0 p x ; m a r g i n - r i g h t : 3 2 p x ; } . a n d r o i d - w e a r . a n d r o i d - s c r e e n - i m a g e { w i d t h : 4 0 % ; z - i n d e x : 1 ; } . a n d r o i d - p h o n e { d i s p l a y : i n l i n e - b l o c k ; w i d t h : 6 4 p x ; m a r g i n - r i g h t : 4 8 p x ; } . a n d r o i d - p h o n e . a n d r o i d - s c r e e n - i m a g e { w i d t h : 1 0 0 % ; z - i n d e x : 1 ; } . a n d r o i d - t a b l e t { d i s p l a y : i n l i n e - b l o c k ; w i d t h : 1 1 0 p x ; m a r g i n - r i g h t : 6 4 p x ; } . a n d r o i d - t a b l e t . a n d r o i d - s c r e e n - i m a g e { w i d t h : 1 0 0 % ; z - i n d e x : 1 ; } . a n d r o i d - t a b l e t . a n d r o i d - l i n k { d i s p l a y : b l o c k ; z - i n d e x : 2 ; } . a n d r o i d - t v { d i s p l a y : i n l i n e - b l o c k ; w i d t h : 3 0 0 p x ; m a r g i n - r i g h t : 8 0 p x ; } 28 / 67 mdl-layout__content android-wear-section Custom CSS

29 / 67

30 / 67 < d i v c l a s s = " a n d r o i d - c u s t o m i z e d - s e c t i o n " > < d i v c l a s s = " a n d r o i d - c u s t o m i z e d - s e c t i o n - t e x t " > < d i v c l a s s = " m d l - t y p o g r a p h y - - f o n t - l i g h t m d l - t y p o g r a p h y - - d i s p l a y - 1 - c o l o r - c o n t r a s t " > C u s t o m i s e d b y y o u , f o r y o u < p c l a s s = " m d l - t y p o g r a p h y - - f o n t - l i g h t " > P u t t h e s t u f f t h a t y o u c a r e a b o u t r i g h t o n y o u r h o m e s c r e e n : t h e l a t e s t n e w s , t h e w e a t h e r o r a s t r e a m o f y o u r r e c e n t p h o t o s . < b r > < a h r e f = " " c l a s s = " a n d r o i d - l i n k m d l - t y p o g r a p h y - - f o n t - l i g h t " > C u s t o m i s e y o u r p h o n e < / a > < / p > < / d i v > < d i v c l a s s = " a n d r o i d - c u s t o m i z e d - s e c t i o n - i m a g e " > < / d i v > < / d i v > mdl-layout__content android-customized-section

. a n d r o i d - c u s t o m i z e d - s e c t i o n { t e x t - a l i g n : c e n t e r ; } . a n d r o i d - c u s t o m i z e d - s e c t i o n - t e x t { m a x - w i d t h : 5 0 0 p x ; m a r g i n - l e f t : a u t o ; m a r g i n - r i g h t : a u t o ; p a d d i n g : 8 0 p x 1 6 p x 0 1 6 p x ; } . a n d r o i d - c u s t o m i z e d - s e c t i o n - t e x t p { p a d d i n g - t o p : 1 6 p x ; } . a n d r o i d - c u s t o m i z e d - s e c t i o n - i m a g e { b a c k g r o u n d : u r l ( ' i m a g e s / d e v i c e s . j p g ' ) c e n t e r t o p n o - r e p e a t ; b a c k g r o u n d - s i z e : c o v e r ; h e i g h t : 4 0 0 p x ; } 31 / 67 mdl-layout__content android-customized-section Custom CSS

32 / 67

33 / 67 < d i v c l a s s = " a n d r o i d - m o r e - s e c t i o n " > < d i v c l a s s = " a n d r o i d - s e c t i o n - t i t l e m d l - t y p o g r a p h y - - d i s p l a y - 1 - c o l o r - c o n t r a s t " > M o r e f r o m A n d r o i d < / < d i v c l a s s = " a n d r o i d - c a r d - c o n t a i n e r m d l - g r i d " > < d i v c l a s s = " m d l - c e l l m d l - c e l l - - 3 - c o l m d l - c e l l - - 4 - c o l - t a b l e t m d l - c e l l - - 4 - c o l - p h o n e m d l - c a r d m d l - s h a d o w - - 3 d p " < d i v c l a s s = " m d l - c a r d _ _ m e d i a " > < i m g s r c = " i m a g e s / m o r e - f r o m - 1 . p n g " > < / d i v > < d i v c l a s s = " m d l - c a r d _ _ t i t l e " > < h 4 c l a s s = " m d l - c a r d _ _ t i t l e - t e x t " > G e t g o i n g o n A n d r o i d < / h 4 > < / d i v < d i v c l a s s = " m d l - c a r d _ _ s u p p o r t i n g - t e x t " > < s p a n c l a s s = " m d l - t y p o g r a p h y - - f o n t - l i g h t m d l - t y p o g r a p h y - - s u b h e a d " > F o u r t i p s t o m a k e y o u r s w i t c h t o A n d r o i d q u i c k a n d e a s y < / d i v > < d i v c l a s s = " m d l - c a r d _ _ a c t i o n s " > < a c l a s s = " a n d r o i d - l i n k m d l - b u t t o n m d l - j s - b u t t o n m d l - t y p o g r a p h y - - t e x t - u p p e r c a s e " h r e f = " " > M a k e t h e s w i t c h < i c l a s s = " m a t e r i a l - i c o n s " > c h e v r o n _ r i g h t < / i > < / a > < / d i v > < / d i v > < d i v c l a s s = " m d l - c e l l m d l - c e l l - - 3 - c o l m d l - c e l l - - 4 - c o l - t a b l e t m d l - c e l l - - 4 - c o l - p h o n e m d l - c a r d m d l - s h a d o w - - 3 d p " < d i v c l a s s = " m d l - c a r d _ _ m e d i a " > < i m g s r c = " i m a g e s / m o r e - f r o m - 4 . p n g " > < / d i v > < d i v c l a s s = " m d l - c a r d _ _ t i t l e " > < h 4 c l a s s = " m d l - c a r d _ _ t i t l e - t e x t " > C r e a t e y o u r o w n A n d r o i d c h a r a c t e r < d i v c l a s s = " m d l - c a r d _ _ s u p p o r t i n g - t e x t " > < s p a n c l a s s = " m d l - t y p o g r a p h y - - f o n t - l i g h t m d l - t y p o g r a p h y - - s u b h e a d " < d i v c l a s s = " m d l - c a r d _ _ a c t i o n s " > < a c l a s s = " a n d r o i d - l i n k m d l - b u t t o n m d l - j s - b u t t o n m d l - t y p o g r a p h y - - t e x t - u p p e r c a s e " h r e f = " " > a n d r o i d i f y . c o m < i c l a s s = " m a t e r i a l - i c o n s " > c h e v r o n _ r i g h t < / i > < / a > < / d i v > < / d i v > . . . < / d i v > < / d i v > mdl-layout__content android-more-section

. a n d r o i d - m o r e - s e c t i o n { p a d d i n g : 8 0 p x 0 ; m a x - w i d t h : 1 0 4 4 p x ; m a r g i n - l e f t : a u t o ; m a r g i n - r i g h t : a u t o ; } . a n d r o i d - m o r e - s e c t i o n . a n d r o i d - s e c t i o n - t i t l e { m a r g i n - l e f t : 1 2 p x ; p a d d i n g - b o t t o m : 2 4 p x ; } . a n d r o i d - c a r d - c o n t a i n e r { } . a n d r o i d - c a r d - c o n t a i n e r . m d l - c a r d _ _ m e d i a { o v e r f l o w : h i d d e n ; b a c k g r o u n d : t r a n s p a r e n t ; } . a n d r o i d - c a r d - c o n t a i n e r . m d l - c a r d _ _ m e d i a i m g { w i d t h : 1 0 0 % ; } . a n d r o i d - c a r d - c o n t a i n e r . m d l - c a r d _ _ t i t l e { b a c k g r o u n d : t r a n s p a r e n t ; h e i g h t : a u t o ; } . a n d r o i d - c a r d - c o n t a i n e r . m d l - c a r d _ _ t i t l e - t e x t { c o l o r : b l a c k ; h e i g h t : a u t o ; } . a n d r o i d - c a r d - c o n t a i n e r . m d l - c a r d _ _ s u p p o r t i n g - t e x t { h e i g h t : a u t o ; c o l o r : b l a c k ; p a d d i n g - b o t t o m : 5 6 p x ; } . a n d r o i d - c a r d - c o n t a i n e r . m d l - c a r d _ _ a c t i o n s { p o s i t i o n : a b s o l u t e ; b o t t o m : 0 ; } 34 / 67 mdl-layout__content android-more-section Custom CSS

35 / 67

36 / 67 < f o o t e r c l a s s = " a n d r o i d - f o o t e r m d l - m e g a - f o o t e r " > < d i v c l a s s = " m d l - m e g a - f o o t e r - - t o p - s e c t i o n " > < d i v c l a s s = " m d l - m e g a - f o o t e r - - l e f t - s e c t i o n " > < b u t t o n c l a s s = " m d l - m e g a - f o o t e r - - s o c i a l - b t n " > < / b u t t o n > & n b s p ; < b u t t o n c l a s s = " m d l - m e g a - f o o t e r - - s o c i a l - b t n " > < / b u t t o n > & n b s p ; < b u t t o n c l a s s = " m d l - m e g a - f o o t e r - - s o c i a l - b t n " > < / b u t t o n > < / d i v > < d i v c l a s s = " m d l - m e g a - f o o t e r - - r i g h t - s e c t i o n " > < a c l a s s = " m d l - t y p o g r a p h y - - f o n t - l i g h t " h r e f = " # t o p " > B a c k t o T o p < i c l a s s = " m a t e r i a l - i c o n s " > e x p a n d _ l e s s < / d i v > < / d i v > < d i v c l a s s = " m d l - m e g a - f o o t e r - - m i d d l e - s e c t i o n " > < p c l a s s = " m d l - t y p o g r a p h y - - f o n t - l i g h t " > S a t e l l i t e i m a g e r y : 2 0 1 4 A s t r i u m , D i g i t a l G l o b e < / p > < p c l a s s = " m d l - t y p o g r a p h y - - f o n t - l i g h t " > S o m e f e a t u r e s a n d d e v i c e s m a y n o t b e a v a i l a b l e i n a l l a r e a s < / d i v > < d i v c l a s s = " m d l - m e g a - f o o t e r - - b o t t o m - s e c t i o n " > < a c l a s s = " a n d r o i d - l i n k a n d r o i d - l i n k - m e n u m d l - t y p o g r a p h y - - f o n t - l i g h t " i d = " v e r s i o n - d r o p d o w n " > V e r s i o n s < i c l a s s = " m a t e r i a l - i c o n s " > a r r o w _ d r o p _ u p < / i > < / a > < u l c l a s s = " m d l - m e n u m d l - j s - m e n u m d l - m e n u - - t o p - l e f t m d l - j s - r i p p l e - e f f e c t " f o r = " v e r s i o n - d r o p d o w n " < l i c l a s s = " m d l - m e n u _ _ i t e m " > 5 . 0 L o l l i p o p < / l i > < l i c l a s s = " m d l - m e n u _ _ i t e m " > 4 . 4 K i t K a t < / l i > . . . < / u l > < a c l a s s = " a n d r o i d - l i n k a n d r o i d - l i n k - m e n u m d l - t y p o g r a p h y - - f o n t - l i g h t " i d = " d e v e l o p e r s - d r o p d o w n " < a c l a s s = " a n d r o i d - l i n k m d l - t y p o g r a p h y - - f o n t - l i g h t " h r e f = " " > B l o g < / a > < a c l a s s = " a n d r o i d - l i n k m d l - t y p o g r a p h y - - f o n t - l i g h t " h r e f = " " > P r i v a c y P o l i c y < / a > < / d i v > < / f o o t e r > mdl-layout__content android-footer

. a n d r o i d - f o o t e r { b a c k g r o u n d - c o l o r : # f a f a f a ; p o s i t i o n : r e l a t i v e ; } . a n d r o i d - f o o t e r a : h o v e r { c o l o r : # 8 b c 3 4 a ; } . a n d r o i d - f o o t e r . m d l - m e g a - f o o t e r - - t o p - s e c t i o n : : a f t e r { b o r d e r - b o t t o m : n o n e ; } . a n d r o i d - f o o t e r . m d l - m e g a - f o o t e r - - m i d d l e - s e c t i o n : : a f t e r { b o r d e r - b o t t o m : n o n e ; } . a n d r o i d - f o o t e r . m d l - m e g a - f o o t e r - - b o t t o m - s e c t i o n { p o s i t i o n : r e l a t i v e ; } . a n d r o i d - f o o t e r . m d l - m e g a - f o o t e r - - b o t t o m - s e c t i o n a { m a r g i n - r i g h t : 2 e m ; } . a n d r o i d - f o o t e r . m d l - m e g a - f o o t e r - - r i g h t - s e c t i o n a . m a t e r i a l - i c o n s { p o s i t i o n : r e l a t i v e ; t o p : 6 p x ; } / * * * * M o b i l e l a y o u t * * * * / @ m e d i a ( m a x - w i d t h : 9 0 0 p x ) { . a n d r o i d - f o o t e r . m d l - m e g a - f o o t e r - - b o t t o m - s e c t i o n { d i s p l a y : n o n e ; } } 37 / 67 mdl-layout__content android-footer Custom CSS

38 / 67

Example #2 39 / 67

SitePoint - @AntoniettaPerna 40 / 67

SitePoint - @AntoniettaPerna 41 / 67

< ! D O C T Y P E h t m l > < h t m l > < h e a d > < m e t a c h a r s e t = " U T F - 8 " > < t i t l e > D e m o T e m p l a t e U s i n g M a t e r i a l D e s i g n L i t e < / t i t l e > < m e t a n a m e = " v i e w p o r t " c o n t e n t = " w i d t h = d e v i c e - w i d t h , i n i t i a l - s c a l e = 1 " > < l i n k r e l = ' s t y l e s h e e t p r e f e t c h ' h r e f = ' h t t p s : / / f o n t s . g o o g l e a p i s . c o m / c s s ? f a m i l y = R o b o t o : 4 0 0 , 1 0 0 , 5 0 0 , 3 0 0 i t a l i c , 5 0 0 i t a l i c , 7 0 0 i t a l i c , 9 0 0 , 3 0 0 ' < l i n k r e l = ' s t y l e s h e e t p r e f e t c h ' h r e f = ' h t t p s : / / f o n t s . g o o g l e a p i s . c o m / i c o n ? f a m i l y = M a t e r i a l + I c o n s ' < l i n k r e l = ' s t y l e s h e e t p r e f e t c h ' h r e f = ' h t t p s : / / c o d e . g e t m d l . i o / 1 . 2 . 1 / m a t e r i a l . i n d i g o - p i n k . m i n . c s s ' < l i n k r e l = " s t y l e s h e e t " h r e f = " c s s / s t y l e . c s s " > < / h e a d > < b o d y > < d i v c l a s s = " m d l - l a y o u t m d l - j s - l a y o u t m d l - l a y o u t - - f i x e d - h e a d e r m d l - l a y o u t - - f i x e d - t a b s " > < h e a d e r c l a s s = " m d l - l a y o u t _ _ h e a d e r " > . . . < / h e a d e r > < d i v c l a s s = " m d l - l a y o u t _ _ d r a w e r " > . . . < / d i v > < m a i n c l a s s = " m d l - l a y o u t _ _ c o n t e n t " > < d i v c l a s s = " m d l - l a y o u t _ _ t a b - p a n e l i s - a c t i v e " i d = " f i x e d - t a b - 1 " > < d i v c l a s s = " p a g e - c o n t e n t " > < d i v c l a s s = " h e r o - s e c t i o n " > . . . < / d i v > < d i v i d = " i n t r o " c l a s s = " m d l - g r i d i n t r o - s e c t i o n " > . . . < / d i v > < d i v c l a s s = " m d l - g r i d m d l - g r i d - - n o - s p a c i n g f u l l w i d t h - p a n e l " > . . . < / d i v > < / d i v > < / d i v > < d i v c l a s s = " m d l - l a y o u t _ _ t a b - p a n e l " i d = " f i x e d - t a b - 2 " > < d i v c l a s s = " p a g e - c o n t e n t " > < ! - - C A R D S - - > < d i v c l a s s = " m d l - g r i d c a r d s - s e c t i o n " > < d i v c l a s s = " m d l - c e l l m d l - c e l l - - 6 - c o l m d l - c e l l - - 1 2 - c o l - t a b l e t m d l - c a r d m d l - s h a d o w - - 2 d p h o m e - b r i n g i n g - c a r d " < d i v c l a s s = " m d l - c e l l m d l - c e l l - - 4 - c o l m d l - c e l l - - 4 - c o l - t a b l e t m d l - c e l l - - 4 - c o l - p h o n e m d l - c a r d m d l - s h a d o w - - 2 d p p l a y - c a r d " < d i v c l a s s = " m d l - c e l l m d l - c e l l - - 2 - c o l m d l - c e l l - - 4 - c o l - t a b l e t m d l - c e l l - - 4 - c o l - p h o n e m d l - c a r d m d l - s h a d o w - - 2 d p i m a g e - c a r d " < d i v c l a s s = " m d l - c e l l m d l - c e l l - - 6 - c o l m d l - c e l l - - 8 - c o l - t a b l e t m d l - c e l l - - 4 - c o l - p h o n e m d l - c a r d m d l - s h a d o w - - 2 d p l i t t e r - c a r d " < d i v c l a s s = " m d l - c e l l m d l - c e l l - - 6 - c o l m d l - c e l l - - 8 - c o l - t a b l e t m d l - c e l l - - 4 - c o l - p h o n e m d l - c a r d m d l - s h a d o w - - 2 d p d i e t - c a r d " < d i v c l a s s = " m d l - c e l l m d l - c e l l - - 3 - c o l m d l - c e l l - - 8 - c o l - t a b l e t m d l - c e l l - - 4 - c o l - p h o n e m d l - c a r d m d l - s h a d o w - - 2 d p c a r d - s m a l l " < d i v c l a s s = " m d l - c e l l m d l - c e l l - - 3 - c o l m d l - c e l l - - 8 - c o l - t a b l e t m d l - c e l l - - 4 - c o l - p h o n e m d l - c a r d m d l - s h a d o w - - 2 d p c a r d - s m a l l " 42 / 67 Enabling MDL MDL Layout

i m g { m a x - w i d t h : 1 0 0 % ; h e i g h t : a u t o ; d i s p l a y : b l o c k ; } u l { l i s t - s t y l e - t y p e : n o n e ; } / * U T I L I T I E S * / . c l e a r f i x : a f t e r { c o n t e n t : " " ; d i s p l a y : t a b l e ; c l e a r : b o t h ; } . f l o a t - r i g h t { f l o a t : r i g h t ; } . f l o a t - l e f t { f l o a t : l e f t ; } / * T A B S * / . m d l - l a y o u t _ _ t a b - b a r { m a r g i n : 0 a u t o ; m a x - w i d t h : 3 0 0 p x ; } 43 / 67 Custom CSS

44 / 67 < h e a d e r c l a s s = " m d l - l a y o u t _ _ h e a d e r " > < d i v c l a s s = " m d l - l a y o u t _ _ h e a d e r - r o w " > < ! - - T i t l e - - > < s p a n c l a s s = " m d l - l a y o u t - t i t l e " > K a p t a i n K i t t y < / s p a n > < / d i v > < ! - - T a b s - - > < d i v c l a s s = " m d l - l a y o u t _ _ t a b - b a r m d l - j s - r i p p l e - e f f e c t " > < a h r e f = " # f i x e d - t a b - 1 " c l a s s = " m d l - l a y o u t _ _ t a b i s - a c t i v e " > A b o u t < / a > < a h r e f = " # f i x e d - t a b - 2 " c l a s s = " m d l - l a y o u t _ _ t a b " > L e a r n < / a > < / d i v > < / h e a d e r > mdl-layout__header

45 / 67

46 / 67 < d i v c l a s s = " m d l - l a y o u t _ _ d r a w e r " > < s p a n c l a s s = " m d l - l a y o u t - t i t l e " > K a p t a i n K i t t y < / s p a n > < d i v c l a s s = " a v a t a r " > < i m g s r c = " h t t p s : / / d l . d r o p b o x u s e r c o n t e n t . c o m / u / 3 2 4 9 4 5 8 4 / a v a t a r . j p g " a l t = " K a p t a i n K i t t y " c l a s s = < / d i v > < d i v c l a s s = " d r a w e r - t e x t " > L o r e m i p s u m d o l o r s i t a m e t , c o n s e c t e t u r a d i p i s i c i n g e l i t . A s p e r n a t u r o f f i c i i s a n i m i , s o l u t a a b d e s e r u n t d o l o r e f u g i t v o l u p t a t e m l a b o r i o s a m , < / d i v > < / d i v > mdl-layout__drawer

/ * D R A W E R * / . m d l - l a y o u t _ _ d r a w e r - b u t t o n , . m d l - l a y o u t _ _ d r a w e r - b u t t o n i { c o l o r : w h i t e ; } @ m e d i a ( m a x - w i d t h : 9 0 0 p x ) { . m d l - l a y o u t _ _ d r a w e r - b u t t o n { w i d t h : 1 0 0 % ; m a r g i n : 0 ; b a c k g r o u n d - c o l o r : t r a n s p a r e n t ; } } . a v a t a r { h e i g h t : 2 0 0 p x ; w i d t h : 2 0 0 p x ; m a r g i n : 0 a u t o 2 e m ; } . a v a t a r - i m g { h e i g h t : 2 0 0 p x ; w i d t h : 2 0 0 p x ; m a r g i n : 0 a u t o ; b o r d e r - r a d i u s : 5 0 % ; } . d r a w e r - t e x t { p a d d i n g : 1 e m ; t e x t - a l i g n : c e n t e r ; } 47 / 67 mdl-layout__drawer Custom CSS

48 / 67

49 / 67 < d i v c l a s s = " h e r o - s e c t i o n " > < d i v c l a s s = " h e r o - t e x t m d l - t y p o g r a p h y - - t e x t - c e n t e r " > < h 1 c l a s s = " m d l - t y p o g r a p h y - - d i s p l a y - 2 " > I ' m K a p t a i n K i t t y < / h 1 > < p c l a s s = " m d l - t y p o g r a p h y - - d i s p l a y - 1 " > I ' l l t e a c h y o u l o a d s a b o u t y o u r k i t t e n < / p > < a c l a s s = " m d l - b u t t o n m d l - j s - b u t t o n m d l - b u t t o n - - f a b m d l - j s - r i p p l e - e f f e c t m d l - b u t t o n - - a c c e n t k i t t y - h e r o _ _ t e x t - b u t t o n " < i c l a s s = " m a t e r i a l - i c o n s " > k e y b o a r d _ a r r o w _ d o w n < / i > < / a > < / d i v > < / d i v > mdl-layout__content .mdl-layout__tab-panel # xed-tab-1 hero-section

/ * H E R O S E C T I O N * / . h e r o - s e c t i o n { h e i g h t : 1 0 0 v h ; / * I E 1 1 d o e s n ' t l i k e m i n - h e i g h t * / w i d t h : 1 0 0 % ; m a r g i n : 0 ; p a d d i n g : 0 ; b a c k g r o u n d - c o l o r : r g b a ( 6 3 , 8 1 , 1 8 1 , 0 . 6 ) ; b a c k g r o u n d - i m a g e : - w e b k i t - l i n e a r - g r a d i e n t ( r g b a ( 6 3 , 8 1 , 1 8 1 , 0 . 3 ) , r g b a ( 6 3 , 8 1 , 1 8 1 , 0 . 3 ) ) , u r l b a c k g r o u n d - i m a g e : l i n e a r - g r a d i e n t ( r g b a ( 6 3 , 8 1 , 1 8 1 , 0 . 3 ) , r g b a ( 6 3 , 8 1 , 1 8 1 , 0 . 3 ) ) , u r l ( h t t p s : / / d l . d r o p b o x u s e r c o n t e n t . c o m / u / 3 2 4 9 4 5 8 4 / h e r o - b g . j b a c k g r o u n d - p o s i t i o n : c e n t e r c e n t e r ; b a c k g r o u n d - r e p e a t : n o - r e p e a t ; b a c k g r o u n d - s i z e : c o v e r ; p o s i t i o n : r e l a t i v e ; d i s p l a y : - w e b k i t - b o x ; d i s p l a y : - w e b k i t - f l e x ; d i s p l a y : - m s - f l e x b o x ; d i s p l a y : f l e x ; - w e b k i t - b o x - o r i e n t : v e r t i c a l ; - w e b k i t - b o x - d i r e c t i o n : n o r m a l ; - w e b k i t - f l e x - d i r e c t i o n : c o l u m n ; - m s - f l e x - d i r e c t i o n : c o l u m n ; f l e x - d i r e c t i o n : c o l u m n ; m a r g i n : a u t o ; } . h e r o - t e x t { c o l o r : w h i t e ; m a r g i n : a u t o ; } @ m e d i a s c r e e n a n d ( m a x - w i d t h : 5 8 0 p x ) { . h e r o - t e x t p { w h i t e - s p a c e : p r e - l i n e ; } } . k i t t y - h e r o _ _ t e x t - b u t t o n { p o s i t i o n : a b s o l u t e ; b o t t o m : - 2 8 p x ; l e f t : 5 0 % ; 50 / 67 mdl-layout__content .mdl-layout__tab-panel # xed-tab-1 hero-section Custom CSS

51 / 67

< d i v i d = " i n t r o " c l a s s = " m d l - g r i d i n t r o - s e c t i o n " > < d i v c l a s s = " a b o u t - k i t t y m d l - c e l l m d l - c e l l - - 1 2 - c o l " > < p c l a s s = " m d l - t y p o g r a p h y - - h e a d l i n e " > W e l c o m e t o K a p t a i n K i t t y ! T h i s i s a d e m o H T M L t e m p l a t e t h a t a c c o m p a n i e s a n a r t i c l e f o r S i t e P o i n t . T h e a r t i c l e i l l u s t r a t e s h o w t o u s e t h e d e m o a r e c o u r t e s y o f < a h r e f = " h t t p s : / / p i x a b a y . c o m / " > P i x a b a y . c o m < / a > . < / p > < / d i v > < d i v c l a s s = " a b o u t - k i t t y m d l - c e l l m d l - c e l l - - 1 2 - c o l " > < p > L o r e m i p s u m d o l o r s i t a m e t , c o n s e c t e t u r a d i p i s i c i n g e l i t . S i n t d o l o r u m c o n s e c t e t u r n a t u s s e q u i , e s t s i m i l i q u e ! T e m p o r i b u s r e m c o n s e q u u n t < p > L o r e m i p s u m d o l o r s i t a m e t , c o n s e c t e t u r a d i p i s i c i n g e l i t . U t , d i c t a a l i q u i d , i n v e n t o r e a u l l a m e x c e p t u r i s i m i l i q u e s i t , n o b i s i n c i d u n t l < / d i v > < d i v c l a s s = " a b o u t - k i t t y m d l - c e l l m d l - c e l l - - 5 - c o l m d l - c e l l - - 1 - c o l - t a b l e t m d l - c e l l - - h i d e - p h o n e " < d i v c l a s s = " c i r c l e - c o n t a i n e r " > < d i v c l a s s = " c i r c l e " > < / d i v > < d i v c l a s s = " c i r c l e " > < / d i v > < d i v c l a s s = " c i r c l e " > < / d i v > < d i v c l a s s = " c i r c l e " > < / d i v > < d i v c l a s s = " c i r c l e " > < / d i v > < / d i v > < / d i v > < d i v c l a s s = " a b o u t - k i t t y m d l - c e l l m d l - c e l l - - 7 - c o l m d l - c e l l - - 6 - c o l - t a b l e t m d l - c e l l - - 4 - c o l - p h o n e " < d i v c l a s s = " t o p i c s - c o n t a i n e r " > < d i v c l a s s = " t o p i c " > F e e d i n g < / d i v > < d i v c l a s s = " t o p i c " > C h o o s i n g t h e r i g h t v e t < / d i v > < d i v c l a s s = " t o p i c " > K e e p i n g y o u k i t t e n s h e a l t h y < / d i v > < d i v c l a s s = " t o p i c " > A d o p t i n g a k i t t e n < / d i v > < d i v c l a s s = " t o p i c " > V a c c i n a t i n g y o u r k i t t e n < / d i v > < / d i v > < / d i v > < d i v c l a s s = " a b o u t - k i t t y m d l - c e l l m d l - c e l l - - 1 2 - c o l " > < p c l a s s = " c l e a r f i x " > < i m g s r c = " h t t p s : / / d l . d r o p b o x u s e r c o n t e n t . c o m / u / 3 2 4 9 4 5 8 4 / a v a t a r . j p g " a l t = " K a p t a i n K i t t y " c l a s s r e m c o n s e q u u n t u r l a u d a n t i u m , i l l o e x c e p t u r i v e l i t q u a s . C u l p a i p s u m d o l o r t e m p o r e a c c u s a n t i u m s e d i u s t o . L o r e m i p s u m d o l o r s i t a m e t , c o n s l a b o r i o s a m a m e t m a x i m e i u s t o n a m f a c i l i s p o s s i m u s q u o o p t i o ? D o l o r , e t ? < / p > < p > L o r e m i p s u m d o l o r s i t a m e t , c o n s e c t e t u r a d i p i s i c i n g e l i t . U t , d i c t a a l i q u i d , i n v e n t o r e a u l l a m e x c e p t u r i s i m i l i q u e s i t , n o b i s i n c i d u n t l < / d i v > < / d i v > 52 / 67 mdl-layout__content .mdl-layout__tab-panel # xed-tab-1 intro-section

/ * A B O U T K I T T Y I N T R O + C A R D S * / . i n t r o - s e c t i o n , . c a r d s - s e c t i o n { m a x - w i d t h : 9 6 0 p x ; } / * A B O U T K I T T Y I N T R O * / . i n t r o - s e c t i o n { p a d d i n g : 5 e m 2 e m 5 e m ; } . a b o u t - k i t t y p { m a x - w i d t h : 6 4 0 p x ; m a r g i n : a u t o ; } . c i r c l e - c o n t a i n e r { w i d t h : 1 0 0 % ; m i n - h e i g h t : 1 0 0 p x ; p a d d i n g : 2 e m 0 ; d i s p l a y : - w e b k i t - b o x ; d i s p l a y : - w e b k i t - f l e x ; d i s p l a y : - m s - f l e x b o x ; d i s p l a y : f l e x ; - w e b k i t - b o x - o r i e n t : v e r t i c a l ; - w e b k i t - b o x - d i r e c t i o n : n o r m a l ; - w e b k i t - f l e x - d i r e c t i o n : c o l u m n ; - m s - f l e x - d i r e c t i o n : c o l u m n ; f l e x - d i r e c t i o n : c o l u m n ; - w e b k i t - b o x - a l i g n : e n d ; - w e b k i t - a l i g n - i t e m s : f l e x - e n d ; - m s - f l e x - a l i g n : e n d ; a l i g n - i t e m s : f l e x - e n d ; } . c i r c l e - c o n t a i n e r . c i r c l e { h e i g h t : 1 6 p x ; w i d t h : 1 6 p x ; b a c k g r o u n d - c o l o r : # c 5 1 1 6 2 ; b o r d e r - r a d i u s : 5 0 % ; m a r g i n : 0 3 p x 9 p x ; 53 / 67 mdl-layout__content .mdl-layout__tab-panel # xed-tab-1 intro-section Custom CSS

54 / 67

55 / 67 < d i v c l a s s = " m d l - g r i d m d l - g r i d - - n o - s p a c i n g f u l l w i d t h - p a n e l " > < d i v c l a s s = " m d l - c e l l m d l - c e l l - - 1 2 - c o l m d l - t y p o g r a p h y - - t e x t - c e n t e r q u o t e - p a n e l " > < b l o c k q u o t e > < p > L o r e m i p s u m d o l o r s i t a m e t , c o n s e c t e t u r a d i p i s i c i n g e l i t . S i n t d o l o r u m c o n s e c t e t u r n a t u s s e q u i , e s t s i m i l i q u e ! T e m p o r i b u s r e m c o n s e q u u n < / p > < f o o t e r > - < c i t e > H a p p y K i t t e n O w n e r < / c i t e > < / f o o t e r > < / b l o c k q u o t e > < / d i v > < / d i v > mdl-layout__content .mdl-layout__tab-panel # xed-tab-1 quote-panel

/ * F U L L W I D T H B A C K G R O U N D S E C T I O N * / . f u l l w i d t h - p a n e l { c o l o r : w h i t e ; b a c k g r o u n d - c o l o r : r g b a ( 1 5 6 , 3 9 , 1 7 6 , 0 . 6 ) ; } . f u l l w i d t h - p a n e l p { m a x - w i d t h : 6 4 0 p x ; m a r g i n : a u t o ; } . q u o t e - p a n e l { b a c k g r o u n d - i m a g e : - w e b k i t - l i n e a r - g r a d i e n t ( r g b a ( 6 3 , 8 1 , 1 8 1 , 0 . 5 ) , r g b a ( 6 3 , 8 1 , 1 8 1 , 0 . 5 ) ) , u r l b a c k g r o u n d - i m a g e : l i n e a r - g r a d i e n t ( r g b a ( 6 3 , 8 1 , 1 8 1 , 0 . 5 ) , r g b a ( 6 3 , 8 1 , 1 8 1 , 0 . 5 ) ) , u r l ( ' h t t p s : / / d l . d r o p b o x u s e r c o n t e n t . c o m / u / 3 2 4 9 4 5 8 4 / p a n e l - b g b a c k g r o u n d - p o s i t i o n : c e n t e r 5 % ; b a c k g r o u n d - r e p e a t : n o - r e p e a t ; b a c k g r o u n d - s i z e : c o v e r ; p a d d i n g : 4 e m 2 e m 2 e m ; d i s p l a y : - w e b k i t - b o x ; d i s p l a y : - w e b k i t - f l e x ; d i s p l a y : - m s - f l e x b o x ; d i s p l a y : f l e x ; - w e b k i t - a l i g n - c o n t e n t : f l e x - s t a r t ; - m s - f l e x - l i n e - p a c k : s t a r t ; a l i g n - c o n t e n t : f l e x - s t a r t ; } @ m e d i a s c r e e n a n d ( m i n - w i d t h : 8 0 0 p x ) { . q u o t e - p a n e l { b a c k g r o u n d - p o s i t i o n : c e n t e r 0 ; p a d d i n g : 6 e m 2 e m ; } } @ m e d i a s c r e e n a n d ( m i n - w i d t h : 1 2 0 0 p x ) { . q u o t e - p a n e l { b a c k g r o u n d - p o s i t i o n : c e n t e r 8 % ; p a d d i n g : 1 0 e m 2 e m 8 e m ; } } 56 / 67 mdl-layout__content .mdl-layout__tab-panel # xed-tab-1 quote-panel Custom CSS

57 / 67

< d i v c l a s s = " m d l - g r i d c a r d s - s e c t i o n " > < d i v c l a s s = " m d l - c e l l m d l - c e l l - - 6 - c o l m d l - c e l l - - 1 2 - c o l - t a b l e t m d l - c a r d m d l - s h a d o w - - 2 d p h o m e - b r i n g i n g - c a r d " < d i v c l a s s = " m d l - c a r d _ _ t i t l e " > < h 2 c l a s s = " m d l - c a r d _ _ t i t l e - t e x t " > B r i n g i n g a k i t t e n i n t o y o u r h o m e < / h 2 > < / d i v > < d i v c l a s s = " m d l - c a r d _ _ s u p p o r t i n g - t e x t " > L o r e m i p s u m d o l o r s i t a m e t , c o n s e c t e t u r a d i p i s i c i n g e l i t . D o l o r e m e x p l i c a b o r e i c i e n d i s c o r p o r i s , o p t i o a n i m i a u t e m , q u i s q u a m , t e m p o r i b u s < / d i v > < / d i v > < d i v c l a s s = " m d l - c e l l m d l - c e l l - - 4 - c o l m d l - c e l l - - 4 - c o l - t a b l e t m d l - c e l l - - 4 - c o l - p h o n e m d l - c a r d m d l - s h a d o w - - 2 d p p l a y - c a r d " < d i v c l a s s = " m d l - c a r d _ _ t i t l e " > < h 2 c l a s s = " m d l - c a r d _ _ t i t l e - t e x t " > P l a y i n g w i t h y o u r k i t t e n < / h 2 > < / d i v > < d i v c l a s s = " m d l - c a r d _ _ s u p p o r t i n g - t e x t " > L o r e m i p s u m d o l o r s i t a m e t , c o n s e c t e t u r a d i p i s i c i n g e l i t . D o l o r e m e x p l i c a b o r e i c i e n d i s c o r p o r i s , o p t i o a n i m i a u t e m , q u i s q u a m , t e m p o r i b u s < / d i v > < / d i v > < d i v c l a s s = " m d l - c e l l m d l - c e l l - - 2 - c o l m d l - c e l l - - 4 - c o l - t a b l e t m d l - c e l l - - 4 - c o l - p h o n e m d l - c a r d m d l - s h a d o w - - 2 d p i m a g e - c a r d " < d i v c l a s s = " m d l - c a r d _ _ a c t i o n s " > < s p a n c l a s s = " i m a g e - c a r d _ _ t i t l e " > K a p t a i n K i t t y . j p g < / s p a n > < / d i v > < / d i v > < d i v c l a s s = " m d l - c e l l m d l - c e l l - - 6 - c o l m d l - c e l l - - 8 - c o l - t a b l e t m d l - c e l l - - 4 - c o l - p h o n e m d l - c a r d m d l - s h a d o w - - 2 d p l i t t e r - c a r d " < d i v c l a s s = " m d l - c a r d _ _ t i t l e " > < h 2 c l a s s = " m d l - c a r d _ _ t i t l e - t e x t " > T a k i n g c a r e o f a l i t t e r o f k i t t e n s < / h 2 > < / d i v > < d i v c l a s s = " m d l - c a r d _ _ s u p p o r t i n g - t e x t " > L o r e m i p s u m d o l o r s i t a m e t , c o n s e c t e t u r a d i p i s i c i n g e l i t . D o l o r e m e x p l i c a b o r e i c i e n d i s c o r p o r i s , o p t i o a n i m i a u t e m , q u i s q u a m , t e m p o r i b u s < / d i v > < / d i v > < d i v c l a s s = " m d l - c e l l m d l - c e l l - - 6 - c o l m d l - c e l l - - 8 - c o l - t a b l e t m d l - c e l l - - 4 - c o l - p h o n e m d l - c a r d m d l - s h a d o w - - 2 d p d i e t - c a r d " < d i v c l a s s = " m d l - c a r d _ _ t i t l e " > < h 2 c l a s s = " m d l - c a r d _ _ t i t l e - t e x t " > H e a l t h y d i e t f o r y o u r k i t t e n < / h 2 > < / d i v > < d i v c l a s s = " m d l - c a r d _ _ s u p p o r t i n g - t e x t " > L o r e m i p s u m d o l o r s i t a m e t , c o n s e c t e t u r a d i p i s i c i n g e l i t . D o l o r e m e x p l i c a b o r e i c i e n d i s c o r p o r i s , o p t i o a n i m i a u t e m , q u i s q u a m , t e m p o r i b u s < / d i v > < d i v c l a s s = " m d l - c a r d _ _ a c t i o n s m d l - c a r d - - b o r d e r " > 58 / 67 mdl-layout__content .mdl-layout__tab-panel # xed-tab-2 cards-section

/ * C A R D S S E C T I O N * / . c a r d s - s e c t i o n { p a d d i n g : 5 e m 0 ; } . m d l - c a r d _ _ t i t l e { m i n - h e i g h t : 3 0 0 p x ; c o l o r : w h i t e ; } . h o m e - b r i n g i n g - c a r d . m d l - c a r d _ _ t i t l e { b a c k g r o u n d : - w e b k i t - l i n e a r - g r a d i e n t ( r g b a ( 0 , 0 , 0 , 0 . 1 ) , r g b a ( 0 , 0 , 0 , 0 . 8 ) ) , u r l ( ' h t t p s : / / d l . d r o p b o x u s e r c o n t e n t . c o m / u / 3 2 4 9 4 5 8 4 / k i t t e n - h o m e . j p b a c k g r o u n d : l i n e a r - g r a d i e n t ( r g b a ( 0 , 0 , 0 , 0 . 1 ) , r g b a ( 0 , 0 , 0 , 0 . 8 ) ) , u r l ( ' h t t p s : / / d l . d r o p b o x u s e r c o n t e n t . c o m / u / 3 2 4 9 4 5 8 4 / k i t t e n - h o m e . j p g ' } . p l a y - c a r d . m d l - c a r d _ _ t i t l e { b a c k g r o u n d : u r l ( ' h t t p s : / / d l . d r o p b o x u s e r c o n t e n t . c o m / u / 3 2 4 9 4 5 8 4 / k i t t e n - o n - t r e e . j p g ' ) c e n t e r / c o v e r ; } . i m a g e - c a r d { b a c k g r o u n d : u r l ( ' h t t p s : / / d l . d r o p b o x u s e r c o n t e n t . c o m / u / 3 2 4 9 4 5 8 4 / i m a g e - c a r d . j p g ' ) c e n t e r / c o v e r ; } . i m a g e - c a r d > . m d l - c a r d _ _ a c t i o n s { h e i g h t : 5 2 p x ; p a d d i n g : 1 6 p x ; b a c k g r o u n d : r g b a ( 0 , 0 , 0 , 0 . 6 ) ; } . i m a g e - c a r d _ _ t i t l e { c o l o r : # f f f ; f o n t - s i z e : 1 4 p x ; f o n t - w e i g h t : 5 0 0 ; } . l i t t e r - c a r d . m d l - c a r d _ _ t i t l e { b a c k g r o u n d : - w e b k i t - l i n e a r - g r a d i e n t ( r g b a ( 0 , 0 , 0 , 0 . 1 ) , r g b a ( 0 , 0 , 0 , 0 . 8 ) ) , u r l ( ' h t t p s : / / d l . d r o p b o x u s e r c o n t e n t . c o m / u / 3 2 4 9 4 5 8 4 / l i t t e r - c a r d . j p b a c k g r o u n d : l i n e a r - g r a d i e n t ( r g b a ( 0 , 0 , 0 , 0 . 1 ) , r g b a ( 0 , 0 , 0 , 0 . 8 ) ) , u r l ( ' h t t p s : / / d l . d r o p b o x u s e r c o n t e n t . c o m / u / 3 2 4 9 4 5 8 4 / l i t t e r - c a r d . j p g ' } . d i e t - c a r d . m d l - c a r d _ _ t i t l e { b a c k g r o u n d : - w e b k i t - l i n e a r - g r a d i e n t ( r g b a ( 0 , 0 , 0 , 0 . 1 ) , r g b a ( 0 , 0 , 0 , 0 . 8 ) ) , u r l ( ' h t t p s : / / d l . d r o p b o x u s e r c o n t e n t . c o m / u / 3 2 4 9 4 5 8 4 / d i e t - c a r d . j p g ' 59 / 67 mdl-layout__content .mdl-layout__tab-panel # xed-tab-2 cards-section Custom CSS

60 / 67

< d i v c l a s s = " m d l - g r i d m d l - g r i d - - n o - s p a c i n g " > < d i v c l a s s = " m d l - c e l l m d l - c e l l - - 1 2 - c o l c o n t a c t - i n t r o m d l - c o l o r - - i n d i g o - 9 0 0 " > < h 2 c l a s s = " m d l - t y p o g r a p h y - - t i t l e m d l - t y p o g r a p h y - - t i t l e - c o l o r - c o n t r a s t m d l - t y p o g r a p h y - - f o n t - t h i n m d l - t y p o g r a p h y - - t e x t - c e n t e r " < / d i v > < d i v c l a s s = " m d l - c e l l m d l - c e l l - - 6 - c o l m d l - c e l l - - 8 - c o l - t a b l e t m d l - c e l l - - 4 - c o l - p h o n e c o n t a c t - p a n e l f o r m - p a n e l m d l - c o l o r - - i n d i g o - 5 0 " < f o r m a c t i o n = " # " > < d i v c l a s s = " m d l - t e x t f i e l d m d l - j s - t e x t f i e l d m d l - t e x t f i e l d - - f l o a t i n g - l a b e l " > < i n p u t c l a s s = " m d l - t e x t f i e l d _ _ i n p u t " t y p e = " t e x t " i d = " n a m e " > < l a b e l c l a s s = " m d l - t e x t f i e l d _ _ l a b e l " f o r = " n a m e " > Y o u r n a m e < / l a b e l > < / d i v > < d i v c l a s s = " m d l - t e x t f i e l d m d l - j s - t e x t f i e l d m d l - t e x t f i e l d - - f l o a t i n g - l a b e l " > < i n p u t c l a s s = " m d l - t e x t f i e l d _ _ i n p u t " t y p e = " e m a i l " i d = " e m a i l " > < l a b e l c l a s s = " m d l - t e x t f i e l d _ _ l a b e l " f o r = " e m a i l " > Y o u r e m a i l < / l a b e l > < / d i v > < d i v c l a s s = " b u t t o n - c o n t a i n e r c l e a r f i x " > < b u t t o n c l a s s = " m d l - b u t t o n m d l - j s - b u t t o n m d l - b u t t o n - - r a i s e d m d l - j s - r i p p l e - e f f e c t m d l - b u t t o n - - a c c e n t s u b s c r i b e - b u t t o n " J o i n m y f a n s < / b u t t o n > < / d i v > < / f o r m > < / d i v > < d i v c l a s s = " m d l - c e l l m d l - c e l l - - 6 - c o l m d l - c e l l - - 8 - c o l - t a b l e t m d l - c e l l - - 4 - c o l - p h o n e c o n t a c t - p a n e l a d d r e s s - p a n e l m d l - t y p o g r a p h y - - t e x t - c e n t e r m d l < p c l a s s = " m d l - t y p o g r a p h y - - t i t l e - c o l o r - c o n t r a s t m d l - t y p o g r a p h y - - t e x t - n o w r a p m d l - t y p o g r a p h y - - f o n t - t h i n " < i c l a s s = " m a t e r i a l - i c o n s " > e m a i l < / i > < a h r e f = " m a i l t o : i n f o @ c a p t a i n . k i t t y . c o m " > i n f o @ k a p t a i n . k i t t y . c o m < / p > < p c l a s s = " m d l - t y p o g r a p h y - - t i t l e - c o l o r - c o n t r a s t m d l - t y p o g r a p h y - - t e x t - n o w r a p m d l - t y p o g r a p h y - - f o n t - t h i n " < a c l a s s = " m d l - b u t t o n m d l - j s - b u t t o n m d l - b u t t o n - - r a i s e d m d l - j s - r i p p l e - e f f e c t " h r e f = " t w i t t e r . c o m " < a c l a s s = " m d l - b u t t o n m d l - j s - b u t t o n m d l - b u t t o n - - r a i s e d m d l - j s - r i p p l e - e f f e c t " h r e f = " p l u s . g o o g l e . c o m " < a c l a s s = " m d l - b u t t o n m d l - j s - b u t t o n m d l - b u t t o n - - r a i s e d m d l - j s - r i p p l e - e f f e c t " h r e f = " f a c e b o o k . c o m " < / p > < / d i v > < / d i v > 61 / 67 mdl-layout__content contact-intro contact-panel

. c o n t a c t - i n t r o { c o l o r : r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 8 7 ) ; } . c o n t a c t - p a n e l { p a d d i n g : 6 e m 4 e m ; d i s p l a y : - w e b k i t - b o x ; d i s p l a y : - w e b k i t - f l e x ; d i s p l a y : - m s - f l e x b o x ; d i s p l a y : f l e x ; - w e b k i t - b o x - o r i e n t : v e r t i c a l ; - w e b k i t - b o x - d i r e c t i o n : n o r m a l ; - w e b k i t - f l e x - d i r e c t i o n : c o l u m n ; - m s - f l e x - d i r e c t i o n : c o l u m n ; f l e x - d i r e c t i o n : c o l u m n ; m a r g i n : a u t o ; } . m d l - t e x t f i e l d { d i s p l a y : b l o c k ; w i d t h : 1 0 0 % ; p a d d i n g : 2 0 p x 0 ; } @ m e d i a s c r e e n a n d ( m i n - w i d t h : 8 0 0 p x ) { . s u b s c r i b e - b u t t o n { f l o a t : r i g h t ; } } . a d d r e s s - p a n e l { b a c k g r o u n d - c o l o r : # d b d e f 1 ; c o l o r : r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 8 7 ) ; } . a d d r e s s - p a n e l . m a t e r i a l - i c o n s { p o s i t i o n : r e l a t i v e ; t o p : 0 . 2 e m ; d i s p l a y : i n l i n e - b l o c k ; h e i g h t : 3 0 p x ; w i d t h : 3 0 p x ; l i n e - h e i g h t : 3 0 p x ; b a c k g r o u n d - c o l o r : # f f 4 0 8 1 ; 62 / 67 mdl-layout__content contact-intro contact-panel Custom CSS

63 / 67

64 / 67 < f o o t e r c l a s s = " m d l - m i n i - f o o t e r m d l - c o l o r - - i n d i g o - 2 0 0 " > < d i v c l a s s = " m d l - m i n i - f o o t e r _ _ l e f t - s e c t i o n " > < d i v c l a s s = " m d l - l o g o " > K a p t a i n K i t t y & n d a s h ; d e s i g n e d b y < a h r e f = " h t t p : / / w p t h e m e m a k e o v e r . c o m " > < u l c l a s s = " m d l - m i n i - f o o t e r _ _ l i n k - l i s t " > < l i > < a h r e f = " # " > H e l p < / a > < / l i > < l i > < a h r e f = " # " > P r i v a c y & T e r m s < / a > < / l i > < / u l > & c o p y ; M a r i a A n t o n i e t t a P e r n a 2 0 1 6 < / d i v > < / f o o t e r > mdl-layout__content footer

Refs 65 / 67

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