Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

MIME Type: text/cache-manifest

Slide 8

Slide 9

Slide 10

Slide 11

Slide 12

Slide 13

Slide 14

/* Tablet (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* Tablet (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } teegallery.com

Slide 15

Title Stats Score Board

Slide 16

HTML & CSS for the gaming board Game Title Score Stats Board Controls #grid { display: -ms-grid; -ms-grid-columns: auto 1fr; -ms-grid-rows: auto 1fr auto; } #title { -ms-grid-column: 1; -ms-grid-row: 1 } #score { -ms-grid-column: 1; -ms-grid-row: 3 } #stats { -ms-grid-column: 1; -ms-grid-row: 2; -ms-grid-row-align: start } #board { -ms-grid-column: 2; -ms-grid-row: 1; -ms-grid-row-span: 2 } #controls { -ms-grid-column: 2; -ms-grid-row: 3; -ms-grid-column-align: center }

Slide 17

Slide 18

Merging grid & media queries @media (orientation: landscape) { #title { -ms-grid-column: 1; -ms-grid-row: 1 } #score { -ms-grid-column: 1; -ms-grid-row: 3 } #stats { -ms-grid-column: 1; -ms-grid-row: 2; -ms-grid-row-align: start } #board { -ms-grid-column: 2; -ms-grid-row: 1; -ms-grid-row-span: 2 } #controls { -ms-grid-column: 2; -ms-grid-row: 3; -ms-grid-column-align: center } } @media (orientation: portrait) { #title { -ms-grid-column: 1; -ms-grid-row: 1 } #score { -ms-grid-column: 1; -ms-grid-row: 2 } #stats { -ms-grid-column: 2; -ms-grid-row: 1; -ms-grid-row-span: 2 } #board { -ms-grid-column: 1; -ms-grid-row: 3; -ms-grid-column-span: 2 } #controls {-ms-grid-column: 1; -ms-grid-row: 4; -ms-grid-column-span: 2; -ms-grid-column-align: center } }

Slide 19

Slide 20

http://goldengridsystem.com/ http://cssgrid.net/ Less Framework http://lessframework.com/http://foundation.zurb.com/

Slide 21

Slide 22

TransitionsAnimations Delay Duration Timing function Properties to transition Delay Duration Timing function transitionEndanimationStart animationEnd animationIteration Keyframes: , ,

Slide 23

Slide 24

#id_of_the_html_element { animation-name: name_of_the_animation; animation-duration: number_of_seconds s; animation-iteration-count: number | infinite; }

Slide 25

Slide 26

Slide 27

Slide 28

Slide 29

Slide 30

Slide 31

function inferInputModel() { if (window.navigator.msPointerEnabled) { return 'pointer'; } else if (window.ontouchstart !== undefined) { return 'touch'; } else { return 'unknown'; } switch (inferInputModel()) { case 'pointer': element.addEventListener('MSPointerDown', msStart); element.addEventListener('MSPointerOut', msStop); document.addEventListener('MSPointerUp', msStop); document.addEventListener('MSPointerCancel', msStop); document.addEventListener('MSHoldVisual', preventDefault); break; case 'touch': element.addEventListener('touchstart', touchStart); document.addEventListener('touchend', touchStop); element.addEventListener('mousedown', mouseStart); element.addEventListener('mouseout', mouseStop); document.addEventListener('mouseup', mouseStop); break; default: element.addEventListener('mousedown', mouseStart); element.addEventListener('mouseout', mouseStop); document.addEventListener('mouseup', mouseStop); break; }

Slide 32

Slide 33

Slide 34

Slide 35

Slide 36

Slide 37