├── .gitignore ├── code ├── Base │ ├── index.html │ └── layout.css ├── Chapter2 │ ├── demo_create │ │ ├── index.html │ │ └── layout.css │ ├── demo_viewport │ │ ├── index.html │ │ └── layout.css │ ├── media_features │ │ ├── index.html │ │ └── layout.css │ ├── media_query │ │ ├── index.html │ │ └── layout.css │ └── start │ │ ├── index.html │ │ └── layout.css ├── Chapter3 │ ├── bootstrap │ │ ├── index.html │ │ └── layout.css │ ├── chapter_start │ │ ├── index.html │ │ └── layout.css │ ├── flexbox │ │ ├── index.html │ │ └── layout.css │ ├── foundation │ │ ├── foundation │ │ │ ├── css │ │ │ │ ├── app.css │ │ │ │ ├── foundation.css │ │ │ │ └── foundation.min.css │ │ │ └── js │ │ │ │ ├── app.js │ │ │ │ └── vendor │ │ │ │ ├── foundation.js │ │ │ │ ├── foundation.min.js │ │ │ │ ├── jquery.js │ │ │ │ └── what-input.js │ │ ├── index.html │ │ └── layout.css │ ├── grid │ │ ├── index.html │ │ └── layout.css │ └── vanilla_final │ │ ├── index.html │ │ └── layout.css ├── Chapter4 │ ├── chapter_start │ │ ├── index.html │ │ └── layout.css │ ├── demo_refactor_finish │ │ ├── index.html │ │ └── layout.css │ ├── em cascade │ │ ├── index.html │ │ └── layout.css │ ├── em sizing │ │ ├── index.html │ │ └── layout.css │ ├── percentage sizing │ │ ├── index.html │ │ └── layout.css │ ├── rem sizing │ │ ├── index.html │ │ └── layout.css │ └── vw_vh sizing │ │ ├── index.html │ │ └── layout.css ├── chapter5 │ ├── background_poster │ │ ├── index.html │ │ └── layout.css │ ├── chapter_start │ │ ├── index.html │ │ └── layout.css │ ├── clickable_image │ │ ├── index.html │ │ └── layout.css │ ├── image_width │ │ ├── index.html │ │ └── layout.css │ ├── images │ │ ├── show1-large.jpg │ │ ├── show1-medium.jpg │ │ ├── show1-small.jpg │ │ ├── show1.jpg │ │ ├── show2-large.jpg │ │ ├── show2-medium.jpg │ │ ├── show2-small.jpg │ │ ├── show2.jpg │ │ ├── show3-large.jpg │ │ ├── show3-medium.jpg │ │ ├── show3-small.jpg │ │ ├── show3.jpg │ │ ├── show4-large.jpg │ │ ├── show4-medium.jpg │ │ ├── show4-small.jpg │ │ ├── show4.jpg │ │ ├── show5-large.jpg │ │ ├── show5-medium.jpg │ │ ├── show5-small.jpg │ │ └── show5.jpg │ ├── picture_tag │ │ ├── index.html │ │ └── layout.css │ ├── restructure │ │ ├── index.html │ │ └── layout.css │ ├── srcset │ │ ├── index.html │ │ └── layout.css │ └── video_tag │ │ ├── index.html │ │ └── layout.css ├── chapter6 │ ├── battery │ │ ├── index.html │ │ ├── index.js │ │ └── layout.css │ ├── battery_mobile_first │ │ ├── index.html │ │ ├── index.js │ │ └── layout.css │ ├── cookies │ │ ├── index.html │ │ ├── index.js │ │ └── layout.css │ ├── geolocation │ │ ├── index.html │ │ ├── index.js │ │ └── layout.css │ ├── images │ │ ├── show1-large.jpg │ │ ├── show1-medium.jpg │ │ ├── show1-small.jpg │ │ ├── show1.jpg │ │ ├── show2-large.jpg │ │ ├── show2-medium.jpg │ │ ├── show2-small.jpg │ │ ├── show2.jpg │ │ ├── show3-large.jpg │ │ ├── show3-medium.jpg │ │ ├── show3-small.jpg │ │ ├── show3.jpg │ │ ├── show4-large.jpg │ │ ├── show4-medium.jpg │ │ ├── show4-small.jpg │ │ ├── show4.jpg │ │ ├── show5-large.jpg │ │ ├── show5-medium.jpg │ │ ├── show5-small.jpg │ │ └── show5.jpg │ ├── luminosity │ │ ├── index.html │ │ ├── index.js │ │ └── layout.css │ ├── orientation │ │ ├── index.html │ │ └── layout.css │ ├── time │ │ ├── index.html │ │ ├── index.js │ │ └── layout.css │ └── vibration │ │ ├── index.html │ │ ├── index.js │ │ └── layout.css └── readme.txt └── videos ├── show1.mp4 ├── show1.ogg ├── show2.mp4 ├── show2.ogg ├── show3.mp4 ├── show3.ogg ├── show4.mp4 ├── show4.ogg ├── show5.mp4 └── show5.ogg /.gitignore: -------------------------------------------------------------------------------- 1 | *.swp 2 | *.xml~ 3 | *.rb~ 4 | *.css~ 5 | *.js~ 6 | tmp/ 7 | log/ 8 | .DS_Store 9 | 10 | code/Base/.idea 11 | .idea 12 | -------------------------------------------------------------------------------- /code/Base/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | App Name 7 | 8 | 9 | 10 |

Site Name

11 |
12 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Septem autem illi non suo, sed populorum suffragio omnium 13 | nominati sunt. Itaque sensibus rationem adiunxit et ratione effecta sensus non reliquit. Videmus igitur ut 14 | conquiescere ne infantes quidem possint. Quod iam a me expectare noli.

15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 29 | 32 | 33 | -------------------------------------------------------------------------------- /code/Base/layout.css: -------------------------------------------------------------------------------- 1 | .left { 2 | float: left; 3 | } 4 | 5 | body { 6 | background: black; 7 | color: white; 8 | font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; 9 | } 10 | 11 | header { 12 | height: 180px; 13 | } 14 | 15 | section { 16 | width: 66%; 17 | } 18 | 19 | .thumbnail { 20 | display: inline-block; 21 | width: 200px; 22 | height: 100px; 23 | } 24 | 25 | aside { 26 | width: 33%; 27 | } 28 | 29 | footer { 30 | clear: both; 31 | } -------------------------------------------------------------------------------- /code/Chapter2/demo_create/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | App Name 6 | 7 | 8 | 9 |

Site Name

10 | 17 |
18 |
19 |

Site Introduction

20 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Septem autem illi non suo, sed populorum suffragio 21 | omnium 22 | nominati sunt. Itaque sensibus rationem adiunxit et ratione effecta sensus non reliquit. Videmus igitur ut 23 | conquiescere ne infantes quidem possint. Quod iam a me expectare noli.

24 |
25 |

Show

26 | 27 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

28 |
29 |
30 |

Show

31 | 32 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

33 |
34 |
35 |

Show

36 | 37 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

38 |
39 |
40 |

Show

41 | 42 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

43 |
44 |
45 |

Show

46 | 47 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

48 |
49 |
50 | 57 |
58 | 61 | 62 | -------------------------------------------------------------------------------- /code/Chapter2/demo_create/layout.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: black; 3 | color: white; 4 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 5 | } 6 | 7 | .left { 8 | float: left; 9 | } 10 | 11 | header { 12 | } 13 | 14 | nav { 15 | } 16 | 17 | nav ul { 18 | list-style-type: none; 19 | margin: 0; 20 | padding: 0; 21 | } 22 | 23 | nav ul li { 24 | display: inline 25 | } 26 | 27 | nav ul li a { 28 | padding: 8px; 29 | color: #999; 30 | } 31 | 32 | section { 33 | } 34 | 35 | section.showslisting { 36 | margin-bottom: 25px; 37 | } 38 | 39 | section.tvshow { 40 | width: 125px; 41 | height: 150px; 42 | display: inline-block; 43 | } 44 | 45 | .showdescription { 46 | } 47 | 48 | .thumbnail { 49 | display: inline-block; 50 | width: 100px; 51 | height: 100px; 52 | } 53 | 54 | footer { 55 | clear: both; 56 | } 57 | 58 | /* Media Queries */ 59 | 60 | /* For example, older phones */ 61 | @media only screen and (min-width: 320px) { 62 | aside { 63 | display: none; 64 | } 65 | 66 | section.showslisting { 67 | width: 100%; 68 | } 69 | 70 | .showdescription { 71 | display: none; 72 | } 73 | } 74 | 75 | /* For example, newer phones */ 76 | @media only screen and (min-width: 480px) { 77 | } 78 | 79 | /* For example, small computer screens and larger tablets */ 80 | @media only screen and (min-width: 768px) { 81 | .showdescription { 82 | text-overflow: ellipsis; 83 | display: block; 84 | white-space: nowrap; 85 | width: 100px; 86 | overflow: hidden; 87 | } 88 | } 89 | 90 | /* For example, typical desktop monitors or larger tablet devices */ 91 | @media only screen and (min-width: 992px) { 92 | aside { 93 | width: 33%; 94 | display: block; 95 | } 96 | 97 | section.showslisting { 98 | width: 66%; 99 | } 100 | 101 | .showdescription { 102 | white-space: normal; 103 | width: 125px; 104 | } 105 | } 106 | 107 | /* Large Devices, for example large monitors and TVs */ 108 | @media only screen and (min-width: 1200px) { 109 | } -------------------------------------------------------------------------------- /code/Chapter2/demo_viewport/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | App Name 6 | 7 | 8 | 9 | 10 |

Site Name

11 | 18 |
19 |
20 |

Site Introduction

21 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Septem autem illi non suo, sed populorum suffragio 22 | omnium 23 | nominati sunt. Itaque sensibus rationem adiunxit et ratione effecta sensus non reliquit. Videmus igitur ut 24 | conquiescere ne infantes quidem possint. Quod iam a me expectare noli.

25 |
26 |

Show

27 | 28 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

29 |
30 |
31 |

Show

32 | 33 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

34 |
35 |
36 |

Show

37 | 38 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

39 |
40 |
41 |

Show

42 | 43 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

44 |
45 |
46 |

Show

47 | 48 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

49 |
50 |
51 | 58 |
59 | 62 | 63 | -------------------------------------------------------------------------------- /code/Chapter2/demo_viewport/layout.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: black; 3 | color: white; 4 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 5 | } 6 | 7 | .left { 8 | float: left; 9 | } 10 | 11 | header { 12 | } 13 | 14 | nav { 15 | } 16 | 17 | nav ul { 18 | list-style-type: none; 19 | margin: 0; 20 | padding: 0; 21 | } 22 | 23 | nav ul li { 24 | display: inline 25 | } 26 | 27 | nav ul li a { 28 | padding: 8px; 29 | color: #999; 30 | } 31 | 32 | section { 33 | } 34 | 35 | section.showslisting { 36 | margin-bottom: 25px; 37 | } 38 | 39 | section.tvshow { 40 | width: 125px; 41 | height: 150px; 42 | display: inline-block; 43 | } 44 | 45 | .showdescription { 46 | } 47 | 48 | .thumbnail { 49 | display: inline-block; 50 | width: 100px; 51 | height: 100px; 52 | } 53 | 54 | footer { 55 | clear: both; 56 | } 57 | 58 | /* Media Queries */ 59 | 60 | /* For example, older phones */ 61 | @media only screen and (min-width: 320px) { 62 | aside { 63 | display: none; 64 | } 65 | 66 | section.showslisting { 67 | width: 100%; 68 | } 69 | 70 | .showdescription { 71 | display: none; 72 | } 73 | } 74 | 75 | /* For example, newer phones */ 76 | @media only screen and (min-width: 480px) { 77 | } 78 | 79 | /* For example, small computer screens and larger tablets */ 80 | @media only screen and (min-width: 768px) { 81 | .showdescription { 82 | text-overflow: ellipsis; 83 | display: block; 84 | white-space: nowrap; 85 | width: 100px; 86 | overflow: hidden; 87 | } 88 | } 89 | 90 | /* For example, typical desktop monitors or larger tablet devices */ 91 | @media only screen and (min-width: 992px) { 92 | aside { 93 | width: 33%; 94 | display: block; 95 | } 96 | 97 | section.showslisting { 98 | width: 66%; 99 | } 100 | 101 | .showdescription { 102 | white-space: normal; 103 | width: 125px; 104 | } 105 | } 106 | 107 | /* Large Devices, for example large monitors and TVs */ 108 | @media only screen and (min-width: 1200px) { 109 | } -------------------------------------------------------------------------------- /code/Chapter2/media_features/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | App Name 6 | 7 | 8 | 9 |

Site Name

10 | 17 |
18 |
19 |

Site Introduction

20 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Septem autem illi non suo, sed populorum suffragio 21 | omnium 22 | nominati sunt. Itaque sensibus rationem adiunxit et ratione effecta sensus non reliquit. Videmus igitur ut 23 | conquiescere ne infantes quidem possint. Quod iam a me expectare noli.

24 |
25 |

Show

26 | 27 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

28 |
29 |
30 |

Show

31 | 32 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

33 |
34 |
35 |

Show

36 | 37 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

38 |
39 |
40 |

Show

41 | 42 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

43 |
44 |
45 |

Show

46 | 47 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

48 |
49 |
50 | 57 |
58 | 61 | 62 | -------------------------------------------------------------------------------- /code/Chapter2/media_features/layout.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: black; 3 | color: white; 4 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 5 | } 6 | 7 | .left { 8 | float: left; 9 | } 10 | 11 | header { 12 | } 13 | 14 | nav { 15 | } 16 | 17 | nav ul { 18 | list-style-type: none; 19 | margin: 0; 20 | padding: 0; 21 | } 22 | 23 | nav ul li { 24 | display: inline 25 | } 26 | 27 | nav ul li a { 28 | padding: 8px; 29 | color: #999; 30 | } 31 | 32 | section { 33 | } 34 | 35 | aside { 36 | display: none; 37 | } 38 | 39 | section.showslisting { 40 | margin-bottom: 25px; 41 | width: 100%; 42 | } 43 | 44 | section.tvshow { 45 | width: 125px; 46 | height: 150px; 47 | display: inline-block; 48 | } 49 | 50 | .showdescription { 51 | display: none; 52 | } 53 | 54 | .thumbnail { 55 | display: inline-block; 56 | width: 100px; 57 | height: 100px; 58 | } 59 | 60 | footer { 61 | clear: both; 62 | } 63 | 64 | /* Media Queries */ 65 | 66 | /* For example, older phones */ 67 | @media only screen and (min-width: 320px) { 68 | } 69 | 70 | /* For example, newer phones */ 71 | @media only screen and (min-width: 480px) { 72 | } 73 | 74 | /* For example, small computer screens and larger tablets */ 75 | @media only screen and (min-width: 768px) { 76 | .showdescription { 77 | text-overflow: ellipsis; 78 | display: block; 79 | white-space: nowrap; 80 | width: 100px; 81 | overflow: hidden; 82 | } 83 | } 84 | 85 | /* For example, typical desktop monitors or larger tablet devices */ 86 | @media only screen and (min-width: 992px) { 87 | aside { 88 | width: 33%; 89 | display: block; 90 | } 91 | 92 | section.showslisting { 93 | width: 66%; 94 | } 95 | 96 | .showdescription { 97 | white-space: normal; 98 | width: 125px; 99 | } 100 | } 101 | 102 | /* Large Devices, for example large monitors and TVs */ 103 | @media only screen and (min-width: 1200px) { 104 | } -------------------------------------------------------------------------------- /code/Chapter2/media_query/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | App Name 6 | 7 | 8 | 9 |

Site Name

10 | 17 |
18 |
19 |

Site Introduction

20 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Septem autem illi non suo, sed populorum suffragio 21 | omnium 22 | nominati sunt. Itaque sensibus rationem adiunxit et ratione effecta sensus non reliquit. Videmus igitur ut 23 | conquiescere ne infantes quidem possint. Quod iam a me expectare noli.

24 |
25 |

Show

26 | 27 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

28 |
29 |
30 |

Show

31 | 32 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

33 |
34 |
35 |

Show

36 | 37 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

38 |
39 |
40 |

Show

41 | 42 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

43 |
44 |
45 |

Show

46 | 47 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

48 |
49 |
50 | 57 |
58 | 61 | 62 | -------------------------------------------------------------------------------- /code/Chapter2/media_query/layout.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: black; 3 | color: white; 4 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 5 | } 6 | 7 | .left { 8 | float: left; 9 | } 10 | 11 | header { 12 | } 13 | 14 | nav { 15 | } 16 | 17 | nav ul { 18 | list-style-type: none; 19 | margin: 0; 20 | padding: 0; 21 | } 22 | 23 | nav ul li { 24 | display: inline 25 | } 26 | 27 | nav ul li a { 28 | padding: 8px; 29 | color: #999; 30 | } 31 | 32 | section { 33 | } 34 | 35 | section.showslisting { 36 | margin-bottom: 25px; 37 | } 38 | 39 | section.tvshow { 40 | width: 125px; 41 | height: 150px; 42 | display: inline-block; 43 | } 44 | 45 | .thumbnail { 46 | display: inline-block; 47 | width: 100px; 48 | height: 100px; 49 | } 50 | 51 | footer { 52 | clear: both; 53 | } 54 | 55 | /* Media Queries */ 56 | 57 | @media screen and (min-width: 680px) { 58 | aside { 59 | width: 33%; 60 | } 61 | 62 | section.showslisting { 63 | width: 66%; 64 | } 65 | } 66 | 67 | @media screen and (max-width: 680px), screen and (orientation: landscape) and (max-width: 750px) { 68 | aside { 69 | display: none; 70 | } 71 | 72 | section.showslisting { 73 | width: 100%; 74 | } 75 | } -------------------------------------------------------------------------------- /code/Chapter2/start/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | App Name 6 | 7 | 8 | 9 |

Site Name

10 | 17 |
18 |
19 |

Site Introduction

20 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Septem autem illi non suo, sed populorum suffragio 21 | omnium 22 | nominati sunt. Itaque sensibus rationem adiunxit et ratione effecta sensus non reliquit. Videmus igitur ut 23 | conquiescere ne infantes quidem possint. Quod iam a me expectare noli.

24 |
25 |

Show

26 | 27 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

28 |
29 |
30 |

Show

31 | 32 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

33 |
34 |
35 |

Show

36 | 37 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

38 |
39 |
40 |

Show

41 | 42 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

43 |
44 |
45 |

Show

46 | 47 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

48 |
49 |
50 | 57 |
58 | 61 | 62 | -------------------------------------------------------------------------------- /code/Chapter2/start/layout.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: black; 3 | color: white; 4 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 5 | } 6 | 7 | .left { 8 | float: left; 9 | } 10 | 11 | header { 12 | } 13 | 14 | nav { 15 | 16 | } 17 | 18 | nav ul { 19 | list-style-type: none; 20 | margin: 0; 21 | padding: 0; 22 | } 23 | 24 | nav ul li { 25 | display: inline 26 | } 27 | 28 | nav ul li a { 29 | padding: 8px; 30 | color: #999; 31 | } 32 | 33 | section { 34 | } 35 | 36 | section.showslisting { 37 | width: 66%; 38 | margin-bottom: 25px; 39 | } 40 | 41 | section.tvshow { 42 | width: 125px; 43 | height: 150px; 44 | display: inline-block; 45 | } 46 | 47 | .thumbnail { 48 | display: inline-block; 49 | width: 100px; 50 | height: 100px; 51 | } 52 | 53 | aside { 54 | width: 33%; 55 | } 56 | 57 | footer { 58 | clear: both; 59 | } -------------------------------------------------------------------------------- /code/Chapter3/bootstrap/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | App Name 7 | 8 | 9 | 11 | 12 | 13 | 15 | 16 | 17 | 20 | 21 | 22 |
23 |
24 |

Site Name

25 |
26 | 33 |
34 |
35 |

Site Introduction

36 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Septem autem illi non suo, sed populorum 37 | suffragio 38 | omnium 39 | nominati sunt. Itaque sensibus rationem adiunxit et ratione effecta sensus non reliquit. Videmus igitur 40 | ut 41 | conquiescere ne infantes quidem possint. Quod iam a me expectare noli.

42 |
43 |

Show

44 | 45 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

46 |
47 |
48 |

Show

49 | 50 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

51 |
52 |
53 |

Show

54 | 55 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

56 |
57 |
58 |

Show

59 | 60 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

61 |
62 |
63 |

Show

64 | 65 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

66 |
67 |
68 | 69 | 76 |
77 | 80 |
81 | 82 | 83 | 84 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /code/Chapter3/bootstrap/layout.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: black; 3 | color: white; 4 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 5 | } 6 | 7 | .container { 8 | width: 95%; 9 | margin-left: auto; 10 | margin-right: auto; 11 | max-width: 1180px; 12 | } 13 | .row, 14 | .column { 15 | box-sizing: border-box; 16 | } 17 | .row:before, 18 | .row:after { 19 | content: " "; 20 | display: table; 21 | } 22 | .row:after { 23 | clear: both; 24 | } 25 | .column { 26 | position: relative; 27 | float: left; 28 | } 29 | 30 | .column + .column { 31 | margin-left: 1.6%; 32 | } 33 | 34 | .column-1 { 35 | width: 6.86666666667%; 36 | } 37 | 38 | .column-2 { 39 | width: 15.3333333333%; 40 | } 41 | 42 | .column-3 { 43 | width: 23.8%; 44 | } 45 | 46 | .column-4 { 47 | width: 32.2666666667%; 48 | } 49 | 50 | .column-5 { 51 | width: 40.7333333333%; 52 | } 53 | 54 | .column-6 { 55 | width: 49.2%; 56 | } 57 | 58 | .column-7 { 59 | width: 57.6666666667%; 60 | } 61 | 62 | .column-8 { 63 | width: 66.1333333333%; 64 | } 65 | 66 | .column-9 { 67 | width: 74.6%; 68 | } 69 | 70 | .column-10 { 71 | width: 83.0666666667%; 72 | } 73 | 74 | .column-11 { 75 | width: 91.5333333333%; 76 | } 77 | 78 | .column-12 { 79 | width: 100%; 80 | } 81 | 82 | header { 83 | } 84 | 85 | nav { 86 | 87 | } 88 | 89 | nav ul { 90 | list-style-type: none; 91 | margin: 0; 92 | padding: 0; 93 | } 94 | 95 | nav ul li { 96 | display: inline 97 | } 98 | 99 | nav ul li a { 100 | padding: 8px; 101 | color: #999; 102 | } 103 | 104 | section { 105 | } 106 | 107 | section.showslisting { 108 | margin-bottom: 25px; 109 | } 110 | 111 | section.tvshow { 112 | height: auto; 113 | } 114 | 115 | .thumbnail { 116 | display: inline-block; 117 | width: 100px; 118 | height: 100px; 119 | } 120 | 121 | aside { 122 | } 123 | 124 | footer { 125 | clear: both; 126 | } -------------------------------------------------------------------------------- /code/Chapter3/chapter_start/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | App Name 7 | 8 | 9 | 10 |

Site Name

11 | 18 |
19 |
20 |

Site Introduction

21 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Septem autem illi non suo, sed populorum suffragio 22 | omnium nominati sunt. Itaque sensibus rationem adiunxit et ratione effecta sensus non reliquit. Videmus igitur ut 23 | conquiescere ne infantes quidem possint. Quod iam a me expectare noli.

24 |
25 |

Show

26 | 27 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

28 |
29 |
30 |

Show

31 | 32 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

33 |
34 |
35 |

Show

36 | 37 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

38 |
39 |
40 |

Show

41 | 42 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

43 |
44 |
45 |

Show

46 | 47 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

48 |
49 |
50 | 57 |
58 | 61 | 62 | -------------------------------------------------------------------------------- /code/Chapter3/chapter_start/layout.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: black; 3 | color: white; 4 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 5 | } 6 | 7 | .left { 8 | float: left; 9 | } 10 | 11 | header { 12 | } 13 | 14 | nav { 15 | } 16 | 17 | nav ul { 18 | list-style-type: none; 19 | margin: 0; 20 | padding: 0; 21 | } 22 | 23 | nav ul li { 24 | display: inline 25 | } 26 | 27 | nav ul li a { 28 | padding: 8px; 29 | color: #999; 30 | } 31 | 32 | section { 33 | } 34 | 35 | section.showslisting { 36 | margin-bottom: 25px; 37 | } 38 | 39 | section.tvshow { 40 | width: 125px; 41 | height: 150px; 42 | display: inline-block; 43 | } 44 | 45 | .showdescription { 46 | } 47 | 48 | .thumbnail { 49 | display: inline-block; 50 | width: 100px; 51 | height: 100px; 52 | } 53 | 54 | footer { 55 | clear: both; 56 | } 57 | 58 | /* Media Queries */ 59 | 60 | /* iPhone Retina */ 61 | @media only screen and (min-width: 320px) { 62 | aside { 63 | display: none; 64 | } 65 | 66 | section.showslisting { 67 | width: 100%; 68 | } 69 | 70 | .showdescription { 71 | display: none; 72 | } 73 | } 74 | 75 | /* Extra Small Devices and Phones */ 76 | @media only screen and (min-width: 480px) { 77 | } 78 | 79 | /* Small Devices and Tablets */ 80 | @media only screen and (min-width: 768px) { 81 | .showdescription { 82 | text-overflow: ellipsis; 83 | display: block; 84 | white-space: nowrap; 85 | width: 100px; 86 | overflow: hidden; 87 | } 88 | } 89 | 90 | /* Medium Devices and Desktops */ 91 | @media only screen and (min-width: 992px) { 92 | aside { 93 | width: 33%; 94 | display: block; 95 | } 96 | 97 | section.showslisting { 98 | width: 66%; 99 | } 100 | 101 | .showdescription { 102 | white-space: normal; 103 | width: 125px; 104 | } 105 | } 106 | 107 | /* Large Devices, Wide Screens, TVs */ 108 | @media only screen and (min-width: 1200px) { 109 | } -------------------------------------------------------------------------------- /code/Chapter3/flexbox/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | App Name 7 | 8 | 9 | 10 |
11 |

Site Name

12 | 19 |
20 |

Site Introduction

21 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Septem autem illi non suo, sed populorum suffragio 22 | omnium 23 | nominati sunt. Itaque sensibus rationem adiunxit et ratione effecta sensus non reliquit. Videmus igitur ut 24 | conquiescere ne infantes quidem possint. Quod iam a me expectare noli.

25 |
26 |
27 |

Show

28 | 29 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

30 |
31 |
32 |

Show

33 | 34 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

35 |
36 |
37 |

Show

38 | 39 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

40 |
41 |
42 |

Show

43 | 44 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

45 |
46 |
47 |

Show

48 | 49 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

50 |
51 |
52 |
53 | 60 | 63 |
64 | 65 | -------------------------------------------------------------------------------- /code/Chapter3/flexbox/layout.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: black; 3 | color: white; 4 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 5 | } 6 | 7 | .container { 8 | display: flex; 9 | flex-flow: row wrap; 10 | } 11 | 12 | main { 13 | flex-grow: 2; 14 | flex-basis: 66%; 15 | } 16 | 17 | aside { 18 | flex-grow: 1; 19 | flex-basis: 33%; 20 | } 21 | 22 | nav ul { 23 | list-style-type: none; 24 | margin: 0; 25 | padding: 0; 26 | } 27 | 28 | nav ul li { 29 | display: inline 30 | } 31 | 32 | nav ul li a { 33 | padding: 8px; 34 | color: #999; 35 | } 36 | 37 | section { 38 | } 39 | 40 | section.showslisting { 41 | display: flex; 42 | flex-wrap: wrap; 43 | flex-direction: row; 44 | margin-bottom: 25px; 45 | } 46 | 47 | section.tvshow { 48 | width: 125px; 49 | height: auto; 50 | } 51 | 52 | .showdescription { 53 | } 54 | 55 | .thumbnail { 56 | display: inline-block; 57 | width: 100px; 58 | height: 100px; 59 | } 60 | 61 | header, nav, footer { 62 | flex: 1 100%; 63 | } 64 | 65 | /*nav { order: 1;}*/ 66 | /*header { order: 2;}*/ 67 | /*main { order: 3;}*/ 68 | /*footer { order: 4;}*/ 69 | 70 | /* Media Queries */ 71 | 72 | /* iPhone Retina */ 73 | @media only screen and (min-width: 320px) { 74 | aside { 75 | display: none; 76 | } 77 | 78 | section.showslisting { 79 | } 80 | 81 | .showdescription { 82 | display: none; 83 | } 84 | } 85 | 86 | /* Extra Small Devices and Phones */ 87 | @media only screen and (min-width: 480px) { 88 | } 89 | 90 | /* Small Devices and Tablets */ 91 | @media only screen and (min-width: 768px) { 92 | .showdescription { 93 | text-overflow: ellipsis; 94 | display: block; 95 | white-space: nowrap; 96 | width: 100px; 97 | overflow: hidden; 98 | } 99 | } 100 | 101 | /* Medium Devices and Desktops */ 102 | @media only screen and (min-width: 992px) { 103 | aside { 104 | display: block; 105 | } 106 | 107 | section.showslisting { 108 | } 109 | 110 | .showdescription { 111 | white-space: normal; 112 | width: 125px; 113 | } 114 | } 115 | 116 | /* Large Devices, Wide Screens, TVs */ 117 | @media only screen and (min-width: 1200px) { 118 | } -------------------------------------------------------------------------------- /code/Chapter3/foundation/foundation/css/app.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/code/Chapter3/foundation/foundation/css/app.css -------------------------------------------------------------------------------- /code/Chapter3/foundation/foundation/js/app.js: -------------------------------------------------------------------------------- 1 | $(document).foundation() 2 | -------------------------------------------------------------------------------- /code/Chapter3/foundation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | App Name 7 | 8 | 9 | 10 | 11 |
12 |
13 |

Site Name

14 |
15 | 24 |
25 |
26 |
27 |

Site Introduction

28 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Septem autem illi non suo, sed populorum 29 | suffragio 30 | omnium 31 | nominati sunt. Itaque sensibus rationem adiunxit et ratione effecta sensus non reliquit. Videmus igitur 32 | ut 33 | conquiescere ne infantes quidem possint. Quod iam a me expectare noli.

34 |
35 |

Show

36 | 37 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

38 |
39 |
40 |

Show

41 | 42 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

43 |
44 |
45 |

Show

46 | 47 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

48 |
49 |
50 |

Show

51 | 52 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

53 |
54 |
55 |

Show

56 | 57 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

58 |
59 |
60 |
61 | 62 | 69 |
70 | 73 |
74 | 75 | 76 | 77 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /code/Chapter3/foundation/layout.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: black; 3 | color: white; 4 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 5 | } 6 | 7 | .container { 8 | width: 95%; 9 | margin-left: auto; 10 | margin-right: auto; 11 | max-width: 1180px; 12 | } 13 | .row, 14 | .column { 15 | box-sizing: border-box; 16 | } 17 | .row:before, 18 | .row:after { 19 | content: " "; 20 | display: table; 21 | } 22 | .row:after { 23 | clear: both; 24 | } 25 | .column { 26 | position: relative; 27 | float: left; 28 | } 29 | 30 | .column + .column { 31 | margin-left: 1.6%; 32 | } 33 | 34 | .column-1 { 35 | width: 6.86666666667%; 36 | } 37 | 38 | .column-2 { 39 | width: 15.3333333333%; 40 | } 41 | 42 | .column-3 { 43 | width: 23.8%; 44 | } 45 | 46 | .column-4 { 47 | width: 32.2666666667%; 48 | } 49 | 50 | .column-5 { 51 | width: 40.7333333333%; 52 | } 53 | 54 | .column-6 { 55 | width: 49.2%; 56 | } 57 | 58 | .column-7 { 59 | width: 57.6666666667%; 60 | } 61 | 62 | .column-8 { 63 | width: 66.1333333333%; 64 | } 65 | 66 | .column-9 { 67 | width: 74.6%; 68 | } 69 | 70 | .column-10 { 71 | width: 83.0666666667%; 72 | } 73 | 74 | .column-11 { 75 | width: 91.5333333333%; 76 | } 77 | 78 | .column-12 { 79 | width: 100%; 80 | } 81 | 82 | header { 83 | } 84 | 85 | nav { 86 | 87 | } 88 | 89 | nav ul { 90 | list-style-type: none; 91 | margin: 0; 92 | padding: 0; 93 | } 94 | 95 | nav ul li { 96 | display: inline 97 | } 98 | 99 | nav ul li a { 100 | padding: 8px; 101 | color: #999; 102 | } 103 | 104 | section { 105 | } 106 | 107 | section.showslisting { 108 | margin-bottom: 25px; 109 | } 110 | 111 | section.tvshow { 112 | height: auto; 113 | } 114 | 115 | .thumbnail { 116 | display: inline-block; 117 | width: 100px; 118 | height: 100px; 119 | } 120 | 121 | aside { 122 | } 123 | 124 | footer { 125 | clear: both; 126 | } -------------------------------------------------------------------------------- /code/Chapter3/grid/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | App Name 7 | 8 | 9 | 10 |
11 |

Site Name

12 | 19 |
20 |
21 |

Site Introduction

22 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Septem autem illi non suo, sed populorum 23 | suffragio 24 | omnium 25 | nominati sunt. Itaque sensibus rationem adiunxit et ratione effecta sensus non reliquit. Videmus igitur 26 | ut 27 | conquiescere ne infantes quidem possint. Quod iam a me expectare noli.

28 |
29 |

Show

30 | 31 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

32 |
33 |
34 |

Show

35 | 36 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

37 |
38 |
39 |

Show

40 | 41 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

42 |
43 |
44 |

Show

45 | 46 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

47 |
48 |
49 |

Show

50 | 51 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

52 |
53 |
54 |
55 | 62 | 65 |
66 | 67 | -------------------------------------------------------------------------------- /code/Chapter3/grid/layout.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: black; 3 | color: white; 4 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 5 | } 6 | 7 | .container { 8 | display: grid; 9 | grid-template-columns: [left] 100%; 10 | grid-template-rows: [header] 80px [main-nav] 40px [shows] auto [footer] 20px; 11 | } 12 | 13 | .left { 14 | float: left; 15 | } 16 | 17 | header { 18 | grid-column-start: left; 19 | grid-column-end: right; 20 | grid-row-start: header; 21 | grid-row-end: header; 22 | } 23 | 24 | nav { 25 | grid-column-start: left; 26 | grid-column-end: right; 27 | grid-row-start: main-nav; 28 | grid-row-end: main-nav; 29 | } 30 | 31 | main { 32 | grid-column-start: left; 33 | grid-column-end: right; 34 | grid-row-start: shows; 35 | grid-row-end: shows; 36 | } 37 | 38 | aside { 39 | grid-column-start: right; 40 | grid-column-end: right; 41 | grid-row-start: header; 42 | grid-row-end: header; 43 | } 44 | 45 | footer { 46 | grid-column-start: left; 47 | grid-column-end: right; 48 | grid-row-start: footer; 49 | grid-row-end: footer; 50 | } 51 | 52 | nav ul { 53 | list-style-type: none; 54 | margin: 0; 55 | padding: 0; 56 | } 57 | 58 | nav ul li { 59 | display: inline 60 | } 61 | 62 | nav ul li a { 63 | padding: 8px; 64 | color: #999; 65 | } 66 | 67 | section { 68 | } 69 | 70 | section.showslisting { 71 | margin-bottom: 25px; 72 | } 73 | 74 | section.tvshow { 75 | width: 125px; 76 | height: 150px; 77 | display: inline-block; 78 | } 79 | 80 | .showdescription { 81 | } 82 | 83 | .thumbnail { 84 | display: inline-block; 85 | width: 100px; 86 | height: 100px; 87 | } 88 | 89 | /* Media Queries */ 90 | 91 | /* iPhone Retina */ 92 | @media only screen and (min-width: 320px) { 93 | aside { 94 | display: none; 95 | } 96 | 97 | section.showslisting { 98 | } 99 | 100 | .showdescription { 101 | display: none; 102 | } 103 | } 104 | 105 | /* Extra Small Devices and Phones */ 106 | @media only screen and (min-width: 480px) { 107 | } 108 | 109 | /* Small Devices and Tablets */ 110 | @media only screen and (min-width: 768px) { 111 | .showdescription { 112 | text-overflow: ellipsis; 113 | display: block; 114 | white-space: nowrap; 115 | width: 100px; 116 | overflow: hidden; 117 | } 118 | } 119 | 120 | /* Medium Devices and Desktops */ 121 | @media only screen and (min-width: 992px) { 122 | .container { 123 | grid-template-columns: [left] 66% [right] 33%; 124 | } 125 | 126 | aside { 127 | display: block; 128 | grid-column-start: right; 129 | grid-column-end: right; 130 | grid-row-start: header; 131 | grid-row-end: header; 132 | } 133 | 134 | section.showslisting { 135 | } 136 | 137 | .showdescription { 138 | white-space: normal; 139 | width: 125px; 140 | } 141 | } 142 | 143 | /* Large Devices, Wide Screens, TVs */ 144 | @media only screen and (min-width: 1200px) { 145 | } -------------------------------------------------------------------------------- /code/Chapter3/vanilla_final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | App Name 7 | 8 | 9 | 10 |
11 |
12 |

Site Name

13 |
14 | 21 |
22 |
23 |

Site Introduction

24 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Septem autem illi non suo, sed populorum 25 | suffragio 26 | omnium 27 | nominati sunt. Itaque sensibus rationem adiunxit et ratione effecta sensus non reliquit. Videmus igitur 28 | ut 29 | conquiescere ne infantes quidem possint. Quod iam a me expectare noli.

30 |
31 |

Show

32 | 33 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

34 |
35 |
36 |

Show

37 | 38 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

39 |
40 |
41 |

Show

42 | 43 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

44 |
45 |
46 |

Show

47 | 48 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

49 |
50 |
51 |

Show

52 | 53 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

54 |
55 |
56 | 57 | 64 |
65 | 68 |
69 | 70 | -------------------------------------------------------------------------------- /code/Chapter3/vanilla_final/layout.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: black; 3 | color: white; 4 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 5 | } 6 | 7 | .container { 8 | width: 95%; 9 | /*margin-left: auto;*/ 10 | /*margin-right: auto;*/ 11 | max-width: 1180px; 12 | } 13 | 14 | .row, 15 | .column { 16 | box-sizing: border-box; 17 | } 18 | .row:before, 19 | .row:after { 20 | content: " "; 21 | display: table; 22 | } 23 | .row:after { 24 | clear: both; 25 | } 26 | .column { 27 | position: relative; 28 | float: left; 29 | } 30 | .column + .column { 31 | margin-left: 1.6%; 32 | } 33 | 34 | .column-1 { 35 | width: 6.86666666667%; 36 | } 37 | 38 | .column-2 { 39 | width: 15.3333333333%; 40 | } 41 | 42 | .column-3 { 43 | width: 23.8%; 44 | } 45 | 46 | .column-4 { 47 | width: 32.2666666667%; 48 | } 49 | 50 | .column-5 { 51 | width: 40.7333333333%; 52 | } 53 | 54 | .column-6 { 55 | width: 49.2%; 56 | } 57 | 58 | .column-7 { 59 | width: 57.6666666667%; 60 | } 61 | 62 | .column-8 { 63 | width: 66.1333333333%; 64 | } 65 | 66 | .column-9 { 67 | width: 74.6%; 68 | } 69 | 70 | .column-10 { 71 | width: 83.0666666667%; 72 | } 73 | 74 | .column-11 { 75 | width: 91.5333333333%; 76 | } 77 | 78 | .column-12 { 79 | width: 100%; 80 | } 81 | 82 | .left { 83 | float: left; 84 | } 85 | 86 | header { 87 | } 88 | 89 | nav { 90 | } 91 | 92 | nav ul { 93 | list-style-type: none; 94 | margin: 0; 95 | padding: 0; 96 | } 97 | 98 | nav ul li { 99 | display: inline 100 | } 101 | 102 | nav ul li a { 103 | padding: 8px; 104 | color: #999; 105 | } 106 | 107 | section { 108 | } 109 | 110 | section.showslisting { 111 | margin-bottom: 25px; 112 | } 113 | 114 | section.tvshow { 115 | height: auto; 116 | } 117 | 118 | .showdescription { 119 | } 120 | 121 | .thumbnail { 122 | display: inline-block; 123 | width: 100px; 124 | height: 100px; 125 | } 126 | 127 | footer { 128 | clear: both; 129 | } 130 | 131 | /* Media Queries */ 132 | 133 | /* iPhone Retina */ 134 | @media only screen and (min-width: 320px) { 135 | aside { 136 | display: none; 137 | } 138 | 139 | section.showslisting.column-8 { 140 | width: 100%; 141 | } 142 | 143 | .showdescription { 144 | display: none; 145 | } 146 | } 147 | 148 | /* Extra Small Devices and Phones */ 149 | @media only screen and (min-width: 480px) { 150 | } 151 | 152 | /* Small Devices and Tablets */ 153 | @media only screen and (min-width: 768px) { 154 | .showdescription { 155 | text-overflow: ellipsis; 156 | display: block; 157 | white-space: nowrap; 158 | width: 100px; 159 | overflow: hidden; 160 | } 161 | } 162 | 163 | /* Medium Devices and Desktops */ 164 | @media only screen and (min-width: 992px) { 165 | aside { 166 | display: block; 167 | } 168 | 169 | section.showslisting.column-8 { 170 | width: 66%; 171 | } 172 | 173 | .showdescription { 174 | white-space: normal; 175 | width: 125px; 176 | } 177 | } 178 | 179 | /* Large Devices, Wide Screens, TVs */ 180 | @media only screen and (min-width: 1200px) { 181 | } -------------------------------------------------------------------------------- /code/Chapter4/chapter_start/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | App Name 7 | 8 | 9 | 10 |

Site Name

11 | 18 |
19 |
20 |

Site Introduction

21 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Septem autem illi non suo, sed populorum suffragio 22 | omnium 23 | nominati sunt. Itaque sensibus rationem adiunxit et ratione effecta sensus non reliquit. Videmus igitur ut 24 | conquiescere ne infantes quidem possint. Quod iam a me expectare noli.

25 |
26 |

Show

27 | 28 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

29 |
30 |
31 |

Show

32 | 33 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

34 |
35 |
36 |

Show

37 | 38 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

39 |
40 |
41 |

Show

42 | 43 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

44 |
45 |
46 |

Show

47 | 48 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

49 |
50 |
51 | 58 |
59 | 62 | 63 | -------------------------------------------------------------------------------- /code/Chapter4/chapter_start/layout.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: black; 3 | color: white; 4 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 5 | } 6 | 7 | .left { 8 | float: left; 9 | } 10 | 11 | header { 12 | } 13 | 14 | nav { 15 | } 16 | 17 | nav ul { 18 | list-style-type: none; 19 | margin: 0; 20 | padding: 0; 21 | } 22 | 23 | nav ul li { 24 | display: inline 25 | } 26 | 27 | nav ul li a { 28 | padding: 8px; 29 | color: #999; 30 | } 31 | 32 | section { 33 | } 34 | 35 | section.showslisting { 36 | margin-bottom: 25px; 37 | } 38 | 39 | section.tvshow { 40 | width: 125px; 41 | height: 150px; 42 | display: inline-block; 43 | } 44 | 45 | .showdescription { 46 | } 47 | 48 | .thumbnail { 49 | display: inline-block; 50 | width: 100px; 51 | height: 100px; 52 | } 53 | 54 | footer { 55 | clear: both; 56 | } 57 | 58 | /* Media Queries */ 59 | 60 | /* iPhone Retina */ 61 | @media only screen and (min-width: 320px) { 62 | aside { 63 | display: none; 64 | } 65 | 66 | section.showslisting { 67 | width: 100%; 68 | } 69 | 70 | .showdescription { 71 | display: none; 72 | } 73 | } 74 | 75 | /* Extra Small Devices and Phones */ 76 | @media only screen and (min-width: 480px) { 77 | } 78 | 79 | /* Small Devices and Tablets */ 80 | @media only screen and (min-width: 768px) { 81 | .showdescription { 82 | text-overflow: ellipsis; 83 | display: block; 84 | white-space: nowrap; 85 | width: 100px; 86 | overflow: hidden; 87 | } 88 | } 89 | 90 | /* Medium Devices and Desktops */ 91 | @media only screen and (min-width: 992px) { 92 | aside { 93 | width: 33%; 94 | display: block; 95 | } 96 | 97 | section.showslisting { 98 | width: 66%; 99 | } 100 | 101 | .showdescription { 102 | white-space: normal; 103 | width: 125px; 104 | } 105 | } 106 | 107 | /* Large Devices, Wide Screens, TVs */ 108 | @media only screen and (min-width: 1200px) { 109 | } -------------------------------------------------------------------------------- /code/Chapter4/demo_refactor_finish/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | App Name 7 | 8 | 9 | 10 |

Site Name

11 | 18 |
19 |
20 |

Site Introduction

21 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Septem autem illi non suo, sed populorum suffragio 22 | omnium 23 | nominati sunt. Itaque sensibus rationem adiunxit et ratione effecta sensus non reliquit. Videmus igitur ut 24 | conquiescere ne infantes quidem possint. Quod iam a me expectare noli.

25 |
26 |

Show

27 | 28 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

29 |
30 |
31 |

Show

32 | 33 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

34 |
35 |
36 |

Show

37 | 38 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

39 |
40 |
41 |

Show

42 | 43 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

44 |
45 |
46 |

Show

47 | 48 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

49 |
50 |
51 | 58 |
59 | 62 | 63 | -------------------------------------------------------------------------------- /code/Chapter4/demo_refactor_finish/layout.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: black; 3 | color: white; 4 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 5 | font-size: 1em; 6 | } 7 | 8 | .left { 9 | float: left; 10 | } 11 | 12 | header { 13 | } 14 | 15 | nav { 16 | } 17 | 18 | nav ul { 19 | list-style-type: none; 20 | margin: 0; 21 | padding: 0; 22 | } 23 | 24 | nav ul li { 25 | display: inline 26 | } 27 | 28 | nav ul li a { 29 | padding: 8px; 30 | color: #999; 31 | } 32 | 33 | section { 34 | } 35 | 36 | section.showslisting { 37 | margin-bottom: 25px; 38 | } 39 | 40 | section.showslisting p:not(.showdescription) { 41 | font-size: 0.8em; 42 | } 43 | 44 | section.tvshow { 45 | width: 125px; 46 | height: 150px; 47 | display: inline-block; 48 | } 49 | 50 | .showdescription { 51 | } 52 | 53 | .thumbnail { 54 | display: inline-block; 55 | width: 100px; 56 | height: 100px; 57 | } 58 | 59 | footer { 60 | clear: both; 61 | } 62 | 63 | /* Media Queries */ 64 | 65 | /* iPhone Retina */ 66 | @media only screen and (min-width: 320px) { 67 | aside { 68 | display: none; 69 | } 70 | 71 | section.showslisting { 72 | width: 100%; 73 | } 74 | 75 | .showdescription { 76 | display: none; 77 | } 78 | } 79 | 80 | /* Extra Small Devices and Phones */ 81 | @media only screen and (min-width: 480px) { 82 | } 83 | 84 | /* Small Devices and Tablets */ 85 | @media only screen and (min-width: 768px) { 86 | .showdescription { 87 | text-overflow: ellipsis; 88 | display: block; 89 | white-space: nowrap; 90 | width: 100px; 91 | overflow: hidden; 92 | font-size: 1.2em; 93 | } 94 | } 95 | 96 | /* Medium Devices and Desktops */ 97 | @media only screen and (min-width: 992px) { 98 | aside { 99 | width: 33%; 100 | display: block; 101 | } 102 | 103 | section.showslisting { 104 | width: 66%; 105 | } 106 | 107 | .showdescription { 108 | white-space: normal; 109 | width: 125px; 110 | font-size: 1.3em; 111 | line-height: 1.1em; 112 | } 113 | } 114 | 115 | /* Large Devices, Wide Screens, TVs */ 116 | @media only screen and (min-width: 1200px) { 117 | } -------------------------------------------------------------------------------- /code/Chapter4/em cascade/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | App Name 7 | 8 | 9 | 10 |

Site Name

11 | 18 |
19 |
20 |

Site Introduction

21 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Septem autem illi non suo, sed populorum suffragio 22 | omnium 23 | nominati sunt. Itaque sensibus rationem adiunxit et ratione effecta sensus non reliquit. Videmus igitur ut 24 | conquiescere ne infantes quidem possint. Quod iam a me expectare noli.

25 |
26 |

Show

27 | 28 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

29 |
30 |
31 |

Show

32 | 33 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

34 |
35 |
36 |

Show

37 | 38 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

39 |
40 |
41 |

Show

42 | 43 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

44 |
45 |
46 |

Show

47 | 48 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

49 |
50 |
51 | 73 |
74 | 77 | 78 | -------------------------------------------------------------------------------- /code/Chapter4/em cascade/layout.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: black; 3 | color: white; 4 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 5 | font-size: 0.75em; 6 | } 7 | 8 | .left { 9 | float: left; 10 | } 11 | 12 | header { 13 | } 14 | 15 | nav { 16 | } 17 | 18 | aside ul { 19 | font-size: 0.75em; 20 | } 21 | 22 | nav ul { 23 | list-style-type: none; 24 | margin: 0; 25 | padding: 0; 26 | } 27 | 28 | nav ul li { 29 | display: inline 30 | } 31 | 32 | nav ul li a { 33 | padding: 8px; 34 | color: #999; 35 | } 36 | 37 | section { 38 | } 39 | 40 | section.showslisting { 41 | margin-bottom: 25px; 42 | } 43 | 44 | section.tvshow { 45 | width: 125px; 46 | height: 150px; 47 | display: inline-block; 48 | } 49 | 50 | .showdescription { 51 | } 52 | 53 | .thumbnail { 54 | display: inline-block; 55 | width: 100px; 56 | height: 100px; 57 | } 58 | 59 | footer { 60 | clear: both; 61 | } 62 | 63 | /* Media Queries */ 64 | 65 | /* iPhone Retina */ 66 | @media only screen and (min-width: 320px) { 67 | aside { 68 | display: none; 69 | } 70 | 71 | section.showslisting { 72 | width: 100%; 73 | } 74 | 75 | .showdescription { 76 | display: none; 77 | } 78 | } 79 | 80 | /* Extra Small Devices and Phones */ 81 | @media only screen and (min-width: 480px) { 82 | } 83 | 84 | /* Small Devices and Tablets */ 85 | @media only screen and (min-width: 768px) { 86 | body { 87 | font-size: 1em; 88 | } 89 | 90 | .showdescription { 91 | text-overflow: ellipsis; 92 | display: block; 93 | white-space: nowrap; 94 | width: 100px; 95 | overflow: hidden; 96 | } 97 | } 98 | 99 | /* Medium Devices and Desktops */ 100 | @media only screen and (min-width: 992px) { 101 | body { 102 | font-size: 1.25em; 103 | } 104 | 105 | aside { 106 | width: 33%; 107 | display: block; 108 | } 109 | 110 | section.showslisting { 111 | width: 66%; 112 | } 113 | 114 | .showdescription { 115 | white-space: normal; 116 | width: 125px; 117 | } 118 | } 119 | 120 | /* Large Devices, Wide Screens, TVs */ 121 | @media only screen and (min-width: 1200px) { 122 | } -------------------------------------------------------------------------------- /code/Chapter4/em sizing/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | App Name 7 | 8 | 9 | 10 |

Site Name

11 | 18 |
19 |
20 |

Site Introduction

21 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Septem autem illi non suo, sed populorum suffragio 22 | omnium 23 | nominati sunt. Itaque sensibus rationem adiunxit et ratione effecta sensus non reliquit. Videmus igitur ut 24 | conquiescere ne infantes quidem possint. Quod iam a me expectare noli.

25 |
26 |

Show

27 | 28 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

29 |
30 |
31 |

Show

32 | 33 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

34 |
35 |
36 |

Show

37 | 38 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

39 |
40 |
41 |

Show

42 | 43 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

44 |
45 |
46 |

Show

47 | 48 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

49 |
50 |
51 | 58 |
59 | 62 | 63 | -------------------------------------------------------------------------------- /code/Chapter4/em sizing/layout.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: black; 3 | color: white; 4 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 5 | font-size: 0.75em; 6 | } 7 | 8 | .left { 9 | float: left; 10 | } 11 | 12 | header { 13 | } 14 | 15 | nav { 16 | } 17 | 18 | nav ul { 19 | list-style-type: none; 20 | margin: 0; 21 | padding: 0; 22 | } 23 | 24 | nav ul li { 25 | display: inline 26 | } 27 | 28 | nav ul li a { 29 | padding: 8px; 30 | color: #999; 31 | } 32 | 33 | section { 34 | } 35 | 36 | section.showslisting { 37 | margin-bottom: 25px; 38 | } 39 | 40 | section.tvshow { 41 | width: 125px; 42 | height: 150px; 43 | display: inline-block; 44 | } 45 | 46 | .showdescription { 47 | } 48 | 49 | .thumbnail { 50 | display: inline-block; 51 | width: 100px; 52 | height: 100px; 53 | } 54 | 55 | footer { 56 | clear: both; 57 | } 58 | 59 | /* Media Queries */ 60 | 61 | /* iPhone Retina */ 62 | @media only screen and (min-width: 320px) { 63 | aside { 64 | display: none; 65 | } 66 | 67 | section.showslisting { 68 | width: 100%; 69 | } 70 | 71 | .showdescription { 72 | display: none; 73 | } 74 | } 75 | 76 | /* Extra Small Devices and Phones */ 77 | @media only screen and (min-width: 480px) { 78 | } 79 | 80 | /* Small Devices and Tablets */ 81 | @media only screen and (min-width: 768px) { 82 | body { 83 | font-size: 1em; 84 | } 85 | 86 | .showdescription { 87 | text-overflow: ellipsis; 88 | display: block; 89 | white-space: nowrap; 90 | width: 100px; 91 | overflow: hidden; 92 | } 93 | } 94 | 95 | /* Medium Devices and Desktops */ 96 | @media only screen and (min-width: 992px) { 97 | body { 98 | font-size: 1.25em; 99 | } 100 | 101 | aside { 102 | width: 33%; 103 | display: block; 104 | } 105 | 106 | section.showslisting { 107 | width: 66%; 108 | } 109 | 110 | .showdescription { 111 | white-space: normal; 112 | width: 125px; 113 | } 114 | } 115 | 116 | /* Large Devices, Wide Screens, TVs */ 117 | @media only screen and (min-width: 1200px) { 118 | } -------------------------------------------------------------------------------- /code/Chapter4/percentage sizing/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | App Name 7 | 8 | 9 | 10 |

Site Name

11 | 18 |
19 |
20 |

Site Introduction

21 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Septem autem illi non suo, sed populorum suffragio 22 | omnium 23 | nominati sunt. Itaque sensibus rationem adiunxit et ratione effecta sensus non reliquit. Videmus igitur ut 24 | conquiescere ne infantes quidem possint. Quod iam a me expectare noli.

25 |
26 |

Show

27 | 28 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

29 |
30 |
31 |

Show

32 | 33 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

34 |
35 |
36 |

Show

37 | 38 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

39 |
40 |
41 |

Show

42 | 43 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

44 |
45 |
46 |

Show

47 | 48 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

49 |
50 |
51 | 58 |
59 | 62 | 63 | -------------------------------------------------------------------------------- /code/Chapter4/percentage sizing/layout.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: black; 3 | color: white; 4 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 5 | font-size: 75%; 6 | } 7 | 8 | .left { 9 | float: left; 10 | } 11 | 12 | header { 13 | } 14 | 15 | nav { 16 | } 17 | 18 | nav ul { 19 | list-style-type: none; 20 | margin: 0; 21 | padding: 0; 22 | } 23 | 24 | nav ul li { 25 | display: inline 26 | } 27 | 28 | nav ul li a { 29 | padding: 8px; 30 | color: #999; 31 | } 32 | 33 | section { 34 | } 35 | 36 | section.showslisting { 37 | margin-bottom: 25px; 38 | } 39 | 40 | section.tvshow { 41 | width: 125px; 42 | height: 150px; 43 | display: inline-block; 44 | } 45 | 46 | .showdescription { 47 | } 48 | 49 | .thumbnail { 50 | display: inline-block; 51 | width: 100px; 52 | height: 100px; 53 | } 54 | 55 | footer { 56 | clear: both; 57 | } 58 | 59 | /* Media Queries */ 60 | 61 | /* iPhone Retina */ 62 | @media only screen and (min-width: 320px) { 63 | aside { 64 | display: none; 65 | } 66 | 67 | section.showslisting { 68 | width: 100%; 69 | } 70 | 71 | .showdescription { 72 | display: none; 73 | } 74 | } 75 | 76 | /* Extra Small Devices and Phones */ 77 | @media only screen and (min-width: 480px) { 78 | } 79 | 80 | /* Small Devices and Tablets */ 81 | @media only screen and (min-width: 768px) { 82 | body { 83 | font-size: 100%; 84 | } 85 | 86 | .showdescription { 87 | text-overflow: ellipsis; 88 | display: block; 89 | white-space: nowrap; 90 | width: 100px; 91 | overflow: hidden; 92 | } 93 | } 94 | 95 | /* Medium Devices and Desktops */ 96 | @media only screen and (min-width: 992px) { 97 | body { 98 | font-size: 125%; 99 | } 100 | 101 | aside { 102 | width: 33%; 103 | display: block; 104 | } 105 | 106 | section.showslisting { 107 | width: 66%; 108 | } 109 | 110 | .showdescription { 111 | white-space: normal; 112 | width: 125px; 113 | } 114 | } 115 | 116 | /* Large Devices, Wide Screens, TVs */ 117 | @media only screen and (min-width: 1200px) { 118 | } -------------------------------------------------------------------------------- /code/Chapter4/rem sizing/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | App Name 7 | 8 | 9 | 10 |

Site Name

11 | 18 |
19 |
20 |

Site Introduction

21 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Septem autem illi non suo, sed populorum suffragio 22 | omnium 23 | nominati sunt. Itaque sensibus rationem adiunxit et ratione effecta sensus non reliquit. Videmus igitur ut 24 | conquiescere ne infantes quidem possint. Quod iam a me expectare noli.

25 |
26 |

Show

27 | 28 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

29 |
30 |
31 |

Show

32 | 33 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

34 |
35 |
36 |

Show

37 | 38 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

39 |
40 |
41 |

Show

42 | 43 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

44 |
45 |
46 |

Show

47 | 48 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

49 |
50 |
51 | 73 |
74 | 77 | 78 | -------------------------------------------------------------------------------- /code/Chapter4/rem sizing/layout.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 75%; 3 | } 4 | 5 | body { 6 | color: white; 7 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 8 | background: black; 9 | } 10 | 11 | .left { 12 | float: left; 13 | } 14 | 15 | aside ul { 16 | font-size: 0.75rem; 17 | } 18 | 19 | header { 20 | } 21 | 22 | nav { 23 | } 24 | 25 | nav ul { 26 | list-style-type: none; 27 | margin: 0; 28 | padding: 0; 29 | } 30 | 31 | nav ul li { 32 | display: inline 33 | } 34 | 35 | nav ul li a { 36 | padding: 8px; 37 | color: #999; 38 | } 39 | 40 | section { 41 | } 42 | 43 | section.showslisting { 44 | margin-bottom: 25px; 45 | } 46 | 47 | section.tvshow { 48 | width: 125px; 49 | height: 150px; 50 | display: inline-block; 51 | } 52 | 53 | .showdescription { 54 | } 55 | 56 | .thumbnail { 57 | display: inline-block; 58 | width: 100px; 59 | height: 100px; 60 | } 61 | 62 | footer { 63 | clear: both; 64 | } 65 | 66 | /* Media Queries */ 67 | 68 | /* iPhone Retina */ 69 | @media only screen and (min-width: 320px) { 70 | aside { 71 | display: none; 72 | } 73 | 74 | section.showslisting { 75 | width: 100%; 76 | } 77 | 78 | .showdescription { 79 | display: none; 80 | } 81 | } 82 | 83 | /* Extra Small Devices and Phones */ 84 | @media only screen and (min-width: 480px) { 85 | } 86 | 87 | /* Small Devices and Tablets */ 88 | @media only screen and (min-width: 768px) { 89 | html { 90 | font-size: 1rem; 91 | } 92 | 93 | .showdescription { 94 | text-overflow: ellipsis; 95 | display: block; 96 | white-space: nowrap; 97 | width: 100px; 98 | overflow: hidden; 99 | } 100 | } 101 | 102 | /* Medium Devices and Desktops */ 103 | @media only screen and (min-width: 992px) { 104 | html { 105 | font-size: 1.25rem; 106 | } 107 | 108 | aside { 109 | width: 33%; 110 | display: block; 111 | } 112 | 113 | section.showslisting { 114 | width: 66%; 115 | } 116 | 117 | .showdescription { 118 | white-space: normal; 119 | width: 125px; 120 | } 121 | } 122 | 123 | /* Large Devices, Wide Screens, TVs */ 124 | @media only screen and (min-width: 1200px) { 125 | } -------------------------------------------------------------------------------- /code/Chapter4/vw_vh sizing/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | App Name 7 | 8 | 9 | 10 |

Site Name

11 | 18 |
19 |
20 |

Site Introduction

21 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Septem autem illi non suo, sed populorum suffragio 22 | omnium 23 | nominati sunt. Itaque sensibus rationem adiunxit et ratione effecta sensus non reliquit. Videmus igitur ut 24 | conquiescere ne infantes quidem possint. Quod iam a me expectare noli.

25 |
26 |

Show

27 | 28 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

29 |
30 |
31 |

Show

32 | 33 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

34 |
35 |
36 |

Show

37 | 38 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

39 |
40 |
41 |

Show

42 | 43 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

44 |
45 |
46 |

Show

47 | 48 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

49 |
50 |
51 | 58 |
59 | 62 | 63 | -------------------------------------------------------------------------------- /code/Chapter4/vw_vh sizing/layout.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: black; 3 | color: white; 4 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 5 | /*font-size: calc(100% + 0.25vw);*/ 6 | font-size: 1.5vw; 7 | 8 | } 9 | 10 | .left { 11 | float: left; 12 | } 13 | 14 | header { 15 | } 16 | 17 | nav { 18 | } 19 | 20 | nav ul { 21 | list-style-type: none; 22 | margin: 0; 23 | padding: 0; 24 | } 25 | 26 | nav ul li { 27 | display: inline 28 | } 29 | 30 | nav ul li a { 31 | padding: 8px; 32 | color: #999; 33 | } 34 | 35 | section { 36 | } 37 | 38 | section.showslisting { 39 | margin-bottom: 25px; 40 | } 41 | 42 | section.tvshow { 43 | width: 125px; 44 | height: 150px; 45 | display: inline-block; 46 | } 47 | 48 | .showdescription { 49 | } 50 | 51 | .thumbnail { 52 | display: inline-block; 53 | width: 100px; 54 | height: 100px; 55 | } 56 | 57 | footer { 58 | clear: both; 59 | } 60 | 61 | /* Media Queries */ 62 | 63 | /* iPhone Retina */ 64 | @media only screen and (min-width: 320px) { 65 | aside { 66 | display: none; 67 | } 68 | 69 | section.showslisting { 70 | width: 100%; 71 | } 72 | 73 | .showdescription { 74 | display: none; 75 | } 76 | } 77 | 78 | /* Extra Small Devices and Phones */ 79 | @media only screen and (min-width: 480px) { 80 | } 81 | 82 | /* Small Devices and Tablets */ 83 | @media only screen and (min-width: 768px) { 84 | .showdescription { 85 | text-overflow: ellipsis; 86 | display: block; 87 | white-space: nowrap; 88 | width: 100px; 89 | overflow: hidden; 90 | } 91 | } 92 | 93 | /* Medium Devices and Desktops */ 94 | @media only screen and (min-width: 992px) { 95 | aside { 96 | width: 33%; 97 | display: block; 98 | } 99 | 100 | section.showslisting { 101 | width: 66%; 102 | } 103 | 104 | .showdescription { 105 | white-space: normal; 106 | width: 125px; 107 | } 108 | } 109 | 110 | /* Large Devices, Wide Screens, TVs */ 111 | @media only screen and (min-width: 1200px) { 112 | } -------------------------------------------------------------------------------- /code/chapter5/background_poster/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | App Name 7 | 8 | 9 | 10 |

Site Name

11 | 18 |
19 |
20 |

Site Introduction

21 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Septem autem illi non suo, sed populorum suffragio 22 | omnium 23 | nominati sunt. Itaque sensibus rationem adiunxit et ratione effecta sensus non reliquit. Videmus igitur ut 24 | conquiescere ne infantes quidem possint. Quod iam a me expectare noli.

25 |
26 |

Show 1

27 | 28 | 33 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

34 |
35 |
36 |

Show 2

37 | 42 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

43 |
44 |
45 |

Show 3

46 | 51 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

52 |
53 |
54 |

Show 4

55 | 60 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

61 |
62 |
63 |

Show 5

64 | 69 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

70 |
71 |
72 | 79 |
80 | 83 | 84 | -------------------------------------------------------------------------------- /code/chapter5/background_poster/layout.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: black; 3 | color: white; 4 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 5 | font-size: 1em; 6 | } 7 | 8 | .left { 9 | float: left; 10 | } 11 | 12 | header { 13 | } 14 | 15 | nav { 16 | } 17 | 18 | nav ul { 19 | list-style-type: none; 20 | margin: 0; 21 | padding: 0; 22 | } 23 | 24 | nav ul li { 25 | display: inline 26 | } 27 | 28 | nav ul li a { 29 | padding: 8px; 30 | color: #999; 31 | } 32 | 33 | section { 34 | } 35 | 36 | section.showslisting { 37 | width: 100%; 38 | margin-bottom: 25px; 39 | } 40 | 41 | section.showslisting p { 42 | line-height: 1.2em; 43 | word-spacing: 0.2em; 44 | } 45 | 46 | aside { 47 | display: none; 48 | } 49 | 50 | section.tvshow { 51 | width: 90%; 52 | max-width: 480px; 53 | margin: 0 auto; 54 | display: block; 55 | } 56 | 57 | .thumbnail { 58 | width: 100%; 59 | height: auto; 60 | } 61 | 62 | .showdescription { 63 | display: none; 64 | } 65 | 66 | footer { 67 | clear: both; 68 | } 69 | 70 | video { 71 | width: 100%; 72 | height: auto; 73 | } 74 | 75 | /* Media Queries */ 76 | 77 | .show1 { 78 | background: transparent url('../images/show1-medium.jpg') 0 0 / cover no-repeat ; 79 | } 80 | 81 | .show2 { 82 | background: transparent url('../images/show2-medium.jpg') 0 0 / cover no-repeat ; 83 | } 84 | 85 | .show3 { 86 | background: transparent url('../images/show3-medium.jpg') 0 0 / cover no-repeat ; 87 | } 88 | 89 | .show4 { 90 | background: transparent url('../images/show4-medium.jpg') 0 0 / cover no-repeat ; 91 | } 92 | 93 | .show5 { 94 | background: transparent url('../images/show5-medium.jpg') 0 0 / cover no-repeat ; 95 | } 96 | 97 | /* Extra Small Devices and Phones */ 98 | @media only screen and (min-width: 480px) { 99 | section.tvshow { 100 | max-width: 768px; 101 | } 102 | 103 | .show1 { 104 | background: transparent url('../images/show1-large.jpg') 0 0 / cover no-repeat ; 105 | } 106 | 107 | .show2 { 108 | background: transparent url('../images/show2-large.jpg') 0 0 / cover no-repeat ; 109 | } 110 | 111 | .show3 { 112 | background: transparent url('../images/show3-large.jpg') 0 0 / cover no-repeat ; 113 | } 114 | 115 | .show4 { 116 | background: transparent url('../images/show4-large.jpg') 0 0 / cover no-repeat ; 117 | } 118 | 119 | .show5 { 120 | background: transparent url('../images/show5-large.jpg') 0 0 / cover no-repeat ; 121 | } 122 | } 123 | 124 | /* Small Devices and Tablets */ 125 | @media only screen and (min-width: 768px) { 126 | .showdescription { 127 | text-overflow: ellipsis; 128 | display: block; 129 | white-space: nowrap; 130 | overflow: hidden; 131 | } 132 | 133 | section.tvshow { 134 | width: 46%; 135 | margin-right: 15px; 136 | display: inline-block; 137 | max-width: 496px; /* The next break point divided by 2*/ 138 | } 139 | 140 | section.showslisting p { 141 | line-height: 1.4em; 142 | word-spacing: 0em; 143 | } 144 | } 145 | 146 | /* Medium Devices and Desktops */ 147 | @media only screen and (min-width: 992px) { 148 | aside { 149 | width: 15%; 150 | display: block; 151 | } 152 | 153 | section.showslisting { 154 | width: 75%; 155 | } 156 | 157 | section.tvshow { 158 | width: 22%; 159 | margin-right: 15px; 160 | display: inline-block; 161 | max-width: 300px; /* The next break point divided by 4 */ 162 | } 163 | 164 | .showdescription { 165 | white-space: normal; 166 | } 167 | 168 | .show1 { 169 | background: transparent url('../images/show1-small.jpg') 0 0 / cover no-repeat ; 170 | } 171 | 172 | .show2 { 173 | background: transparent url('../images/show2-small.jpg') 0 0 / cover no-repeat ; 174 | } 175 | 176 | .show3 { 177 | background: transparent url('../images/show3-small.jpg') 0 0 / cover no-repeat ; 178 | } 179 | 180 | .show4 { 181 | background: transparent url('../images/show4-small.jpg') 0 0 / cover no-repeat ; 182 | } 183 | 184 | .show5 { 185 | background: transparent url('../images/show5-small.jpg') 0 0 / cover no-repeat ; 186 | } 187 | } 188 | 189 | /* Large Devices, Wide Screens, TVs */ 190 | @media only screen and (min-width: 1800px) { 191 | aside { 192 | display: none; 193 | } 194 | 195 | section.showslisting { 196 | width: 100%; 197 | margin-bottom: 25px; 198 | } 199 | 200 | section.tvshow { 201 | width: 46%; 202 | margin-right: 15px; 203 | display: inline-block; 204 | max-width: 900px; /* The next break point divided by 2 */ 205 | } 206 | 207 | .showdescription { 208 | display: none; 209 | } 210 | 211 | .show1 { 212 | background: transparent url('../images/show1-large.jpg') 0 0 / cover no-repeat ; 213 | } 214 | 215 | .show2 { 216 | background: transparent url('../images/show2-large.jpg') 0 0 / cover no-repeat ; 217 | } 218 | 219 | .show3 { 220 | background: transparent url('../images/show3-large.jpg') 0 0 / cover no-repeat ; 221 | } 222 | 223 | .show4 { 224 | background: transparent url('../images/show4-large.jpg') 0 0 / cover no-repeat ; 225 | } 226 | 227 | .show5 { 228 | background: transparent url('../images/show5-large.jpg') 0 0 / cover no-repeat ; 229 | } 230 | } -------------------------------------------------------------------------------- /code/chapter5/chapter_start/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | App Name 7 | 8 | 9 | 10 |

Site Name

11 | 18 |
19 |
20 |

Site Introduction

21 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Septem autem illi non suo, sed populorum suffragio 22 | omnium nominati sunt. Itaque sensibus rationem adiunxit et ratione effecta sensus non reliquit. Videmus igitur ut 23 | conquiescere ne infantes quidem possint. Quod iam a me expectare noli.

24 |
25 |

Show 1

26 | 27 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

28 |
29 |
30 |

Show 2

31 | 32 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

33 |
34 |
35 |

Show 3

36 | 37 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

38 |
39 |
40 |

Show 4

41 | 42 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

43 |
44 |
45 |

Show 5

46 | 47 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

48 |
49 |
50 | 57 |
58 | 61 | 62 | -------------------------------------------------------------------------------- /code/chapter5/chapter_start/layout.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: black; 3 | color: white; 4 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 5 | font-size: 1em; 6 | } 7 | 8 | .left { 9 | float: left; 10 | } 11 | 12 | header { 13 | } 14 | 15 | nav { 16 | } 17 | 18 | nav ul { 19 | list-style-type: none; 20 | margin: 0; 21 | padding: 0; 22 | } 23 | 24 | nav ul li { 25 | display: inline 26 | } 27 | 28 | nav ul li a { 29 | padding: 8px; 30 | color: #999; 31 | } 32 | 33 | section { 34 | } 35 | 36 | section.showslisting { 37 | margin-bottom: 25px; 38 | } 39 | 40 | section.showslisting p { 41 | line-height: 1.2em; 42 | word-spacing: 0.2em; 43 | } 44 | 45 | section.tvshow { 46 | width: 125px; 47 | height: 150px; 48 | display: inline-block; 49 | } 50 | 51 | .showdescription { 52 | } 53 | 54 | .thumbnail { 55 | display: inline-block; 56 | width: 100px; 57 | height: 100px; 58 | } 59 | 60 | footer { 61 | clear: both; 62 | } 63 | 64 | /* Media Queries */ 65 | 66 | /* iPhone Retina */ 67 | @media only screen and (min-width: 320px) { 68 | aside { 69 | display: none; 70 | } 71 | 72 | section.showslisting { 73 | width: 100%; 74 | } 75 | 76 | .showdescription { 77 | display: none; 78 | } 79 | } 80 | 81 | /* Extra Small Devices and Phones */ 82 | @media only screen and (min-width: 480px) { 83 | } 84 | 85 | /* Small Devices and Tablets */ 86 | @media only screen and (min-width: 768px) { 87 | .showdescription { 88 | text-overflow: ellipsis; 89 | display: block; 90 | white-space: nowrap; 91 | width: 100px; 92 | overflow: hidden; 93 | } 94 | section.showslisting p { 95 | line-height: 1.4em; 96 | word-spacing: 0em; 97 | } 98 | } 99 | 100 | /* Medium Devices and Desktops */ 101 | @media only screen and (min-width: 992px) { 102 | aside { 103 | width: 33%; 104 | display: block; 105 | } 106 | 107 | section.showslisting { 108 | width: 66%; 109 | } 110 | 111 | .showdescription { 112 | white-space: normal; 113 | width: 125px; 114 | } 115 | } 116 | 117 | /* Large Devices, Wide Screens, TVs */ 118 | @media only screen and (min-width: 1200px) { 119 | } -------------------------------------------------------------------------------- /code/chapter5/clickable_image/layout.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: black; 3 | color: white; 4 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 5 | font-size: 1em; 6 | } 7 | 8 | .left { 9 | float: left; 10 | } 11 | 12 | header { 13 | } 14 | 15 | nav { 16 | } 17 | 18 | nav ul { 19 | list-style-type: none; 20 | margin: 0; 21 | padding: 0; 22 | } 23 | 24 | nav ul li { 25 | display: inline 26 | } 27 | 28 | nav ul li a { 29 | padding: 8px; 30 | color: #999; 31 | } 32 | 33 | section { 34 | } 35 | 36 | section.showslisting { 37 | width: 100%; 38 | margin-bottom: 25px; 39 | } 40 | 41 | section.showslisting p { 42 | line-height: 1.2em; 43 | word-spacing: 0.2em; 44 | } 45 | 46 | aside { 47 | display: none; 48 | } 49 | 50 | section.tvshow { 51 | width: 90%; 52 | max-width: 480px; 53 | margin: 0 auto; 54 | display: block; 55 | } 56 | 57 | video { 58 | display: none; 59 | width: 100%; 60 | height: auto; 61 | } 62 | 63 | .thumbnail { 64 | width: 100%; 65 | height: auto; 66 | } 67 | 68 | .showdescription { 69 | display: none; 70 | } 71 | 72 | footer { 73 | clear: both; 74 | } 75 | 76 | /* Media Queries */ 77 | 78 | /* Extra Small Devices and Phones */ 79 | @media only screen and (min-width: 480px) { 80 | section.tvshow { 81 | max-width: 768px; 82 | } 83 | } 84 | 85 | /* Small Devices and Tablets */ 86 | @media only screen and (min-width: 768px) { 87 | .showdescription { 88 | text-overflow: ellipsis; 89 | display: block; 90 | white-space: nowrap; 91 | overflow: hidden; 92 | } 93 | 94 | section.tvshow { 95 | width: 46%; 96 | margin-right: 15px; 97 | display: inline-block; 98 | max-width: 496px; /* The next break point divided by 2 */ 99 | } 100 | 101 | section.showslisting p { 102 | line-height: 1.4em; 103 | word-spacing: 0em; 104 | } 105 | } 106 | 107 | /* Medium Devices and Desktops */ 108 | @media only screen and (min-width: 992px) { 109 | aside { 110 | width: 15%; 111 | display: block; 112 | } 113 | 114 | section.showslisting { 115 | width: 75%; 116 | } 117 | 118 | section.tvshow { 119 | width: 22%; 120 | margin-right: 15px; 121 | display: inline-block; 122 | max-width: 300px; /* The next break point divided by 4 */ 123 | } 124 | 125 | .showdescription { 126 | white-space: normal; 127 | } 128 | } 129 | 130 | /* Large Devices, Wide Screens, TVs */ 131 | @media only screen and (min-width: 1800px) { 132 | aside { 133 | display: none; 134 | } 135 | 136 | section.showslisting { 137 | width: 100%; 138 | margin-bottom: 25px; 139 | } 140 | 141 | section.tvshow { 142 | width: 46%; 143 | margin-right: 15px; 144 | display: inline-block; 145 | max-width: 900px; /* The next break point divided by 2 */ 146 | } 147 | 148 | .showdescription { 149 | display: none; 150 | } 151 | } -------------------------------------------------------------------------------- /code/chapter5/image_width/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | App Name 7 | 8 | 9 | 10 |

Site Name

11 | 18 |
19 |
20 |

Site Introduction

21 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Septem autem illi non suo, sed populorum suffragio 22 | omnium 23 | nominati sunt. Itaque sensibus rationem adiunxit et ratione effecta sensus non reliquit. Videmus igitur ut 24 | conquiescere ne infantes quidem possint. Quod iam a me expectare noli.

25 |
26 |

Show 1

27 | 28 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

29 |
30 |
31 |

Show 2

32 | 33 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

34 |
35 |
36 |

Show 3

37 | 38 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

39 |
40 |
41 |

Show 4

42 | 43 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

44 |
45 |
46 |

Show 5

47 | 48 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

49 |
50 |
51 | 58 |
59 | 62 | 63 | -------------------------------------------------------------------------------- /code/chapter5/image_width/layout.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: black; 3 | color: white; 4 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 5 | font-size: 1em; 6 | } 7 | 8 | .left { 9 | float: left; 10 | } 11 | 12 | header { 13 | } 14 | 15 | nav { 16 | } 17 | 18 | nav ul { 19 | list-style-type: none; 20 | margin: 0; 21 | padding: 0; 22 | } 23 | 24 | nav ul li { 25 | display: inline 26 | } 27 | 28 | nav ul li a { 29 | padding: 8px; 30 | color: #999; 31 | } 32 | 33 | section { 34 | } 35 | 36 | section.showslisting { 37 | margin-bottom: 25px; 38 | } 39 | 40 | section.showslisting p { 41 | line-height: 1.2em; 42 | word-spacing: 0.2em; 43 | } 44 | 45 | section.tvshow { 46 | width: 90%; 47 | max-width: 320px; 48 | margin: 0 auto; 49 | display: block; 50 | } 51 | 52 | .showdescription { 53 | } 54 | 55 | .thumbnail { 56 | display: inline-block; 57 | width: 100%; 58 | height: auto; 59 | } 60 | 61 | footer { 62 | clear: both; 63 | } 64 | 65 | /* Media Queries */ 66 | 67 | /* iPhone Retina */ 68 | @media only screen and (min-width: 320px) { 69 | aside { 70 | display: none; 71 | } 72 | 73 | section.showslisting { 74 | width: 100%; 75 | } 76 | 77 | section.tvshow { 78 | max-width: 480px; 79 | } 80 | 81 | .showdescription { 82 | display: none; 83 | } 84 | } 85 | 86 | /* Extra Small Devices and Phones */ 87 | @media only screen and (min-width: 480px) { 88 | section.tvshow { 89 | width: 90%; 90 | max-width: 768px; 91 | } 92 | } 93 | 94 | /* Small Devices and Tablets */ 95 | @media only screen and (min-width: 768px) { 96 | .showdescription { 97 | text-overflow: ellipsis; 98 | display: block; 99 | white-space: nowrap; 100 | overflow: hidden; 101 | } 102 | 103 | section.tvshow { 104 | width: 46%; 105 | margin-right: 15px; 106 | display: inline-block; 107 | } 108 | 109 | section.showslisting p { 110 | line-height: 1.4em; 111 | word-spacing: 0em; 112 | } 113 | } 114 | 115 | /* Medium Devices and Desktops */ 116 | @media only screen and (min-width: 992px) { 117 | aside { 118 | width: 33%; 119 | display: block; 120 | } 121 | 122 | section.showslisting { 123 | width: 66%; 124 | } 125 | 126 | section.tvshow { 127 | width: 22%; 128 | margin-right: 15px; 129 | display: inline-block; 130 | } 131 | 132 | .showdescription { 133 | white-space: normal; 134 | } 135 | } 136 | 137 | /* Large Devices, Wide Screens, TVs */ 138 | @media only screen and (min-width: 1200px) { 139 | } -------------------------------------------------------------------------------- /code/chapter5/images/show1-large.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/code/chapter5/images/show1-large.jpg -------------------------------------------------------------------------------- /code/chapter5/images/show1-medium.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/code/chapter5/images/show1-medium.jpg -------------------------------------------------------------------------------- /code/chapter5/images/show1-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/code/chapter5/images/show1-small.jpg -------------------------------------------------------------------------------- /code/chapter5/images/show1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/code/chapter5/images/show1.jpg -------------------------------------------------------------------------------- /code/chapter5/images/show2-large.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/code/chapter5/images/show2-large.jpg -------------------------------------------------------------------------------- /code/chapter5/images/show2-medium.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/code/chapter5/images/show2-medium.jpg -------------------------------------------------------------------------------- /code/chapter5/images/show2-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/code/chapter5/images/show2-small.jpg -------------------------------------------------------------------------------- /code/chapter5/images/show2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/code/chapter5/images/show2.jpg -------------------------------------------------------------------------------- /code/chapter5/images/show3-large.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/code/chapter5/images/show3-large.jpg -------------------------------------------------------------------------------- /code/chapter5/images/show3-medium.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/code/chapter5/images/show3-medium.jpg -------------------------------------------------------------------------------- /code/chapter5/images/show3-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/code/chapter5/images/show3-small.jpg -------------------------------------------------------------------------------- /code/chapter5/images/show3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/code/chapter5/images/show3.jpg -------------------------------------------------------------------------------- /code/chapter5/images/show4-large.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/code/chapter5/images/show4-large.jpg -------------------------------------------------------------------------------- /code/chapter5/images/show4-medium.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/code/chapter5/images/show4-medium.jpg -------------------------------------------------------------------------------- /code/chapter5/images/show4-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/code/chapter5/images/show4-small.jpg -------------------------------------------------------------------------------- /code/chapter5/images/show4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/code/chapter5/images/show4.jpg -------------------------------------------------------------------------------- /code/chapter5/images/show5-large.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/code/chapter5/images/show5-large.jpg -------------------------------------------------------------------------------- /code/chapter5/images/show5-medium.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/code/chapter5/images/show5-medium.jpg -------------------------------------------------------------------------------- /code/chapter5/images/show5-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/code/chapter5/images/show5-small.jpg -------------------------------------------------------------------------------- /code/chapter5/images/show5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/code/chapter5/images/show5.jpg -------------------------------------------------------------------------------- /code/chapter5/picture_tag/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | App Name 7 | 8 | 9 | 10 |

Site Name

11 | 18 |
19 |
20 |

Site Introduction

21 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Septem autem illi non suo, sed populorum suffragio 22 | omnium 23 | nominati sunt. Itaque sensibus rationem adiunxit et ratione effecta sensus non reliquit. Videmus igitur ut 24 | conquiescere ne infantes quidem possint. Quod iam a me expectare noli.

25 |
26 |

Show 1

27 | 28 | 29 | 31 | 32 | 33 | 34 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

35 |
36 |
37 |

Show 2

38 | 39 | 40 | 42 | 43 | 44 | 45 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

46 |
47 |
48 |

Show 3

49 | 50 | 51 | 53 | 54 | 55 | 56 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

57 |
58 |
59 |

Show 4

60 | 61 | 62 | 64 | 65 | 66 | 67 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

68 |
69 |
70 |

Show 5

71 | 72 | 73 | 75 | 76 | 77 | 78 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

79 |
80 |
81 | 88 |
89 | 92 | 93 | -------------------------------------------------------------------------------- /code/chapter5/picture_tag/layout.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: black; 3 | color: white; 4 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 5 | font-size: 1em; 6 | } 7 | 8 | .left { 9 | float: left; 10 | } 11 | 12 | header { 13 | } 14 | 15 | nav { 16 | } 17 | 18 | nav ul { 19 | list-style-type: none; 20 | margin: 0; 21 | padding: 0; 22 | } 23 | 24 | nav ul li { 25 | display: inline 26 | } 27 | 28 | nav ul li a { 29 | padding: 8px; 30 | color: #999; 31 | } 32 | 33 | section { 34 | } 35 | 36 | section.showslisting { 37 | width: 100%; 38 | margin-bottom: 25px; 39 | } 40 | 41 | section.showslisting p { 42 | line-height: 1.2em; 43 | word-spacing: 0.2em; 44 | } 45 | 46 | aside { 47 | display: none; 48 | } 49 | 50 | section.tvshow { 51 | width: 90%; 52 | max-width: 480px; 53 | margin: 0 auto; 54 | display: block; 55 | } 56 | 57 | .thumbnail { 58 | width: 100%; 59 | height: auto; 60 | } 61 | 62 | .showdescription { 63 | display: none; 64 | } 65 | 66 | footer { 67 | clear: both; 68 | } 69 | 70 | /* Media Queries */ 71 | 72 | /* Extra Small Devices and Phones */ 73 | @media only screen and (min-width: 480px) { 74 | section.tvshow { 75 | width: 90%; 76 | max-width: 768px; 77 | margin: 0 auto; 78 | display: block; 79 | } 80 | } 81 | 82 | /* Small Devices and Tablets */ 83 | @media only screen and (min-width: 768px) { 84 | .showdescription { 85 | text-overflow: ellipsis; 86 | display: block; 87 | white-space: nowrap; 88 | overflow: hidden; 89 | } 90 | 91 | section.tvshow { 92 | width: 46%; 93 | margin-right: 15px; 94 | display: inline-block; 95 | max-width: 496px; /* The next break point divided by 2 */ 96 | } 97 | 98 | section.showslisting p { 99 | line-height: 1.4em; 100 | word-spacing: 0em; 101 | } 102 | } 103 | 104 | /* Medium Devices and Desktops */ 105 | @media only screen and (min-width: 992px) { 106 | aside { 107 | width: 15%; 108 | display: block; 109 | } 110 | 111 | section.showslisting { 112 | width: 75%; 113 | } 114 | 115 | section.tvshow { 116 | width: 22%; 117 | margin-right: 15px; 118 | display: inline-block; 119 | max-width: 300px; /* The next break point divided by 4 */ 120 | } 121 | 122 | .showdescription { 123 | white-space: normal; 124 | } 125 | } 126 | 127 | /* Large Devices, Wide Screens, TVs */ 128 | @media only screen and (min-width: 1800px) { 129 | aside { 130 | display: none; 131 | } 132 | 133 | section.showslisting { 134 | width: 100%; 135 | margin-bottom: 25px; 136 | } 137 | 138 | section.tvshow { 139 | width: 46%; 140 | margin-right: 15px; 141 | display: inline-block; 142 | max-width: 900px; /* The next break point divided by 2 */ 143 | } 144 | 145 | .showdescription { 146 | display: none; 147 | } 148 | } -------------------------------------------------------------------------------- /code/chapter5/restructure/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | App Name 7 | 8 | 9 | 10 |

Site Name

11 | 18 |
19 |
20 |

Site Introduction

21 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Septem autem illi non suo, sed populorum suffragio 22 | omnium 23 | nominati sunt. Itaque sensibus rationem adiunxit et ratione effecta sensus non reliquit. Videmus igitur ut 24 | conquiescere ne infantes quidem possint. Quod iam a me expectare noli.

25 |
26 |

Show 1

27 | 28 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

29 |
30 |
31 |

Show 2

32 | 33 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

34 |
35 |
36 |

Show 3

37 | 38 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

39 |
40 |
41 |

Show 4

42 | 43 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

44 |
45 |
46 |

Show 5

47 | 48 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

49 |
50 |
51 | 58 |
59 | 62 | 63 | -------------------------------------------------------------------------------- /code/chapter5/restructure/layout.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: black; 3 | color: white; 4 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 5 | font-size: 1em; 6 | } 7 | 8 | .left { 9 | float: left; 10 | } 11 | 12 | header { 13 | } 14 | 15 | nav { 16 | } 17 | 18 | nav ul { 19 | list-style-type: none; 20 | margin: 0; 21 | padding: 0; 22 | } 23 | 24 | nav ul li { 25 | display: inline 26 | } 27 | 28 | nav ul li a { 29 | padding: 8px; 30 | color: #999; 31 | } 32 | 33 | section { 34 | } 35 | 36 | section.showslisting { 37 | width: 100%; 38 | margin-bottom: 25px; 39 | } 40 | 41 | section.showslisting p { 42 | line-height: 1.2em; 43 | word-spacing: 0.2em; 44 | } 45 | 46 | aside { 47 | display: none; 48 | } 49 | 50 | section.tvshow { 51 | width: 90%; 52 | max-width: 480px; 53 | margin: 0 auto; 54 | display: block; 55 | } 56 | 57 | .thumbnail { 58 | width: 100%; 59 | height: auto; 60 | } 61 | 62 | .showdescription { 63 | display: none; 64 | } 65 | 66 | footer { 67 | clear: both; 68 | } 69 | 70 | /* Media Queries */ 71 | 72 | /* Extra Small Devices and Phones */ 73 | @media only screen and (min-width: 480px) { 74 | section.tvshow { 75 | width: 90%; 76 | max-width: 768px; 77 | margin: 0 auto; 78 | display: block; 79 | } 80 | } 81 | 82 | /* Small Devices and Tablets */ 83 | @media only screen and (min-width: 768px) { 84 | .showdescription { 85 | text-overflow: ellipsis; 86 | display: block; 87 | white-space: nowrap; 88 | overflow: hidden; 89 | } 90 | 91 | section.tvshow { 92 | width: 46%; 93 | margin-right: 15px; 94 | display: inline-block; 95 | max-width: 496px; /* The next break point divided by 2 */ 96 | } 97 | 98 | section.showslisting p { 99 | line-height: 1.4em; 100 | word-spacing: 0em; 101 | } 102 | } 103 | 104 | /* Medium Devices and Desktops */ 105 | @media only screen and (min-width: 992px) { 106 | aside { 107 | width: 33%; 108 | display: block; 109 | } 110 | 111 | section.showslisting { 112 | width: 66%; 113 | } 114 | 115 | section.tvshow { 116 | width: 22%; 117 | margin-right: 15px; 118 | display: inline-block; 119 | } 120 | 121 | .showdescription { 122 | white-space: normal; 123 | } 124 | } 125 | 126 | /* Large Devices, Wide Screens, TVs */ 127 | @media only screen and (min-width: 1800px) { 128 | aside { 129 | display: none; 130 | } 131 | 132 | section.showslisting { 133 | width: 100%; 134 | margin-bottom: 25px; 135 | } 136 | 137 | section.tvshow { 138 | width: 46%; 139 | margin-right: 15px; 140 | display: inline-block; 141 | max-width: 900px; /* The next break point divided by 2 */ 142 | } 143 | 144 | .showdescription { 145 | display: none; 146 | } 147 | } -------------------------------------------------------------------------------- /code/chapter5/srcset/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | App Name 7 | 8 | 9 | 10 |

Site Name

11 | 18 |
19 |
20 |

Site Introduction

21 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Septem autem illi non suo, sed populorum suffragio 22 | omnium 23 | nominati sunt. Itaque sensibus rationem adiunxit et ratione effecta sensus non reliquit. Videmus igitur ut 24 | conquiescere ne infantes quidem possint. Quod iam a me expectare noli.

25 |
26 |

Show 1

27 | 31 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

32 |
33 |
34 |

Show 2

35 | 39 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

40 |
41 |
42 |

Show 3

43 | 47 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

48 |
49 |
50 |

Show 4

51 | 55 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

56 |
57 |
58 |

Show 5

59 | 63 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

64 |
65 |
66 | 73 |
74 | 77 | 78 | -------------------------------------------------------------------------------- /code/chapter5/srcset/layout.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: black; 3 | color: white; 4 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 5 | font-size: 1em; 6 | } 7 | 8 | .left { 9 | float: left; 10 | } 11 | 12 | header { 13 | } 14 | 15 | nav { 16 | } 17 | 18 | nav ul { 19 | list-style-type: none; 20 | margin: 0; 21 | padding: 0; 22 | } 23 | 24 | nav ul li { 25 | display: inline 26 | } 27 | 28 | nav ul li a { 29 | padding: 8px; 30 | color: #999; 31 | } 32 | 33 | section { 34 | } 35 | 36 | section.showslisting { 37 | width: 100%; 38 | margin-bottom: 25px; 39 | } 40 | 41 | section.showslisting p { 42 | line-height: 1.2em; 43 | word-spacing: 0.2em; 44 | } 45 | 46 | aside { 47 | display: none; 48 | } 49 | 50 | section.tvshow { 51 | width: 90%; 52 | max-width: 480px; 53 | margin: 0 auto; 54 | display: block; 55 | } 56 | 57 | .thumbnail { 58 | width: 100%; 59 | height: auto; 60 | } 61 | 62 | .showdescription { 63 | display: none; 64 | } 65 | 66 | footer { 67 | clear: both; 68 | } 69 | 70 | /* Media Queries */ 71 | 72 | /* Extra Small Devices and Phones */ 73 | @media only screen and (min-width: 480px) { 74 | section.tvshow { 75 | width: 90%; 76 | max-width: 768px; 77 | margin: 0 auto; 78 | display: block; 79 | } 80 | } 81 | 82 | /* Small Devices and Tablets */ 83 | @media only screen and (min-width: 768px) { 84 | .showdescription { 85 | text-overflow: ellipsis; 86 | display: block; 87 | white-space: nowrap; 88 | overflow: hidden; 89 | } 90 | 91 | section.tvshow { 92 | width: 46%; 93 | margin-right: 15px; 94 | display: inline-block; 95 | max-width: 496px; /* The next break point divided by 2 */ 96 | } 97 | 98 | section.showslisting p { 99 | line-height: 1.4em; 100 | word-spacing: 0em; 101 | } 102 | } 103 | 104 | /* Medium Devices and Desktops */ 105 | @media only screen and (min-width: 992px) { 106 | aside { 107 | width: 15%; 108 | display: block; 109 | } 110 | 111 | section.showslisting { 112 | width: 75%; 113 | } 114 | 115 | section.tvshow { 116 | width: 22%; 117 | margin-right: 15px; 118 | display: inline-block; 119 | max-width: 300px; /* The next break point divided by 4 */ 120 | } 121 | 122 | .showdescription { 123 | white-space: normal; 124 | } 125 | } 126 | 127 | /* Large Devices, Wide Screens, TVs */ 128 | @media only screen and (min-width: 1800px) { 129 | aside { 130 | display: none; 131 | } 132 | 133 | section.showslisting { 134 | width: 100%; 135 | margin-bottom: 25px; 136 | } 137 | 138 | section.tvshow { 139 | width: 46%; 140 | margin-right: 15px; 141 | display: inline-block; 142 | max-width: 900px; /* The next break point divided by 2 */ 143 | } 144 | 145 | .showdescription { 146 | display: none; 147 | } 148 | } -------------------------------------------------------------------------------- /code/chapter5/video_tag/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | App Name 7 | 8 | 9 | 10 |

Site Name

11 | 18 |
19 |
20 |

Site Introduction

21 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Septem autem illi non suo, sed populorum suffragio 22 | omnium 23 | nominati sunt. Itaque sensibus rationem adiunxit et ratione effecta sensus non reliquit. Videmus igitur ut 24 | conquiescere ne infantes quidem possint. Quod iam a me expectare noli.

25 |
26 |

Show 1

27 | 28 | 33 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

34 |
35 |
36 |

Show 2

37 | 42 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

43 |
44 |
45 |

Show 3

46 | 51 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

52 |
53 |
54 |

Show 4

55 | 60 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

61 |
62 |
63 |

Show 5

64 | 69 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

70 |
71 |
72 | 79 |
80 | 83 | 84 | -------------------------------------------------------------------------------- /code/chapter5/video_tag/layout.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: black; 3 | color: white; 4 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 5 | font-size: 1em; 6 | } 7 | 8 | .left { 9 | float: left; 10 | } 11 | 12 | header { 13 | } 14 | 15 | nav { 16 | } 17 | 18 | nav ul { 19 | list-style-type: none; 20 | margin: 0; 21 | padding: 0; 22 | } 23 | 24 | nav ul li { 25 | display: inline 26 | } 27 | 28 | nav ul li a { 29 | padding: 8px; 30 | color: #999; 31 | } 32 | 33 | section { 34 | } 35 | 36 | section.showslisting { 37 | width: 100%; 38 | margin-bottom: 25px; 39 | } 40 | 41 | section.showslisting p { 42 | line-height: 1.2em; 43 | word-spacing: 0.2em; 44 | } 45 | 46 | aside { 47 | display: none; 48 | } 49 | 50 | section.tvshow { 51 | width: 90%; 52 | max-width: 480px; 53 | margin: 0 auto; 54 | display: block; 55 | } 56 | 57 | .thumbnail { 58 | width: 100%; 59 | height: auto; 60 | } 61 | 62 | .showdescription { 63 | display: none; 64 | } 65 | 66 | footer { 67 | clear: both; 68 | } 69 | 70 | video { 71 | width: 100%; 72 | height: auto; 73 | } 74 | 75 | /* Media Queries */ 76 | 77 | /* Extra Small Devices and Phones */ 78 | @media only screen and (min-width: 480px) { 79 | section.tvshow { 80 | width: 90%; 81 | max-width: 768px; 82 | margin: 0 auto; 83 | display: block; 84 | } 85 | } 86 | 87 | /* Small Devices and Tablets */ 88 | @media only screen and (min-width: 768px) { 89 | .showdescription { 90 | text-overflow: ellipsis; 91 | display: block; 92 | white-space: nowrap; 93 | overflow: hidden; 94 | } 95 | 96 | section.tvshow { 97 | width: 46%; 98 | margin-right: 15px; 99 | display: inline-block; 100 | max-width: 496px; /* The next break point divided by 2 */ 101 | } 102 | 103 | section.showslisting p { 104 | line-height: 1.4em; 105 | word-spacing: 0em; 106 | } 107 | } 108 | 109 | /* Medium Devices and Desktops */ 110 | @media only screen and (min-width: 992px) { 111 | aside { 112 | width: 15%; 113 | display: block; 114 | } 115 | 116 | section.showslisting { 117 | width: 75%; 118 | } 119 | 120 | section.tvshow { 121 | width: 22%; 122 | margin-right: 15px; 123 | display: inline-block; 124 | max-width: 300px; /* The next break point divided by 4 */ 125 | } 126 | 127 | .showdescription { 128 | white-space: normal; 129 | } 130 | } 131 | 132 | /* Large Devices, Wide Screens, TVs */ 133 | @media only screen and (min-width: 1800px) { 134 | aside { 135 | display: none; 136 | } 137 | 138 | section.showslisting { 139 | width: 100%; 140 | margin-bottom: 25px; 141 | } 142 | 143 | section.tvshow { 144 | width: 46%; 145 | margin-right: 15px; 146 | display: inline-block; 147 | max-width: 900px; /* The next break point divided by 2 */ 148 | } 149 | 150 | .showdescription { 151 | display: none; 152 | } 153 | } -------------------------------------------------------------------------------- /code/chapter6/battery/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | RWDFLix 7 | 8 | 9 | 10 | 11 |

RWDFlix

12 | 19 |
20 |
21 |

Welcome

22 |

RWDFlix brings you the best videos where and when you want them.

23 |
24 |

Show 1

25 | 26 | 27 | 29 | 30 | 31 | 32 | 37 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

38 |
39 |
40 |

Show 2

41 | 42 | 43 | 45 | 46 | 47 | 48 | 53 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

54 |
55 |
56 |

Show 3

57 | 58 | 59 | 61 | 62 | 63 | 64 | 69 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

70 |
71 |
72 |

Show 4

73 | 74 | 75 | 77 | 78 | 79 | 80 | 85 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

86 |
87 |
88 |

Show 5

89 | 90 | 91 | 93 | 94 | 95 | 96 | 101 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

102 |
103 |
104 | 111 |
112 | 115 | 116 | -------------------------------------------------------------------------------- /code/chapter6/battery/index.js: -------------------------------------------------------------------------------- 1 | window.addEventListener("load",function(event) { 2 | var thumbnails = document.querySelectorAll("picture img"); 3 | 4 | for (var i = 0; i < thumbnails.length; i++) { 5 | thumbnails[i].addEventListener('click', toggle_visibility, false); 6 | } 7 | 8 | navigator.getBattery().then(function (battery) { 9 | var level = battery.level; 10 | if (level < 0.2) { 11 | document.getElementsByTagName('body')[0].classList.add('battery-save'); 12 | var images = document.getElementsByTagName('picture'); 13 | console.log(images.length); 14 | var i; 15 | for (i = 0; i < images.length; i++) { 16 | images[i].remove(); 17 | } 18 | } 19 | }); 20 | },false); 21 | 22 | function toggle_visibility(id) { 23 | var e = this; 24 | var v = e.parentNode.nextSibling.nextSibling; 25 | v.style.display = 'block'; 26 | v.play(); 27 | e.style.display = 'none'; 28 | } -------------------------------------------------------------------------------- /code/chapter6/battery/layout.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: black; 3 | color: white; 4 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 5 | font-size: 1em; 6 | } 7 | 8 | .battery-save { 9 | color: gray; 10 | } 11 | 12 | .left { 13 | float: left; 14 | } 15 | 16 | header { 17 | } 18 | 19 | nav { 20 | } 21 | 22 | nav ul { 23 | list-style-type: none; 24 | margin: 0; 25 | padding: 0; 26 | } 27 | 28 | nav ul li { 29 | display: inline 30 | } 31 | 32 | nav ul li a { 33 | padding: 8px; 34 | color: #999; 35 | } 36 | 37 | section { 38 | } 39 | 40 | section.showslisting { 41 | width: 100%; 42 | margin-bottom: 25px; 43 | } 44 | 45 | section.showslisting p { 46 | line-height: 1.2em; 47 | word-spacing: 0.2em; 48 | } 49 | 50 | aside { 51 | display: none; 52 | } 53 | 54 | section.tvshow { 55 | width: 90%; 56 | max-width: 480px; 57 | margin: 0 auto; 58 | display: block; 59 | } 60 | 61 | video { 62 | display: none; 63 | width: 100%; 64 | height: auto; 65 | } 66 | 67 | .thumbnail { 68 | width: 100%; 69 | height: auto; 70 | } 71 | 72 | .showdescription { 73 | display: none; 74 | } 75 | 76 | footer { 77 | clear: both; 78 | } 79 | 80 | /* Media Queries */ 81 | 82 | /* Extra Small Devices and Phones */ 83 | @media only screen and (min-width: 480px) { 84 | section.tvshow { 85 | width: 90%; 86 | max-width: 768px; 87 | margin: 0 auto; 88 | display: block; 89 | } 90 | } 91 | 92 | /* Small Devices and Tablets */ 93 | @media only screen and (min-width: 768px) { 94 | .showdescription { 95 | text-overflow: ellipsis; 96 | display: block; 97 | white-space: nowrap; 98 | overflow: hidden; 99 | } 100 | 101 | section.tvshow { 102 | width: 46%; 103 | margin-right: 15px; 104 | display: inline-block; 105 | max-width: calc(992px / 2); 106 | } 107 | 108 | section.showslisting p { 109 | line-height: 1.4em; 110 | word-spacing: 0em; 111 | } 112 | } 113 | 114 | /* Medium Devices and Desktops */ 115 | @media only screen and (min-width: 992px) { 116 | aside { 117 | width: 15%; 118 | display: block; 119 | } 120 | 121 | section.showslisting { 122 | width: 75%; 123 | } 124 | 125 | section.tvshow { 126 | width: 22%; 127 | margin-right: 15px; 128 | display: inline-block; 129 | max-width: calc(1200px / 4); 130 | } 131 | 132 | .showdescription { 133 | white-space: normal; 134 | } 135 | } 136 | 137 | /* Large Devices, Wide Screens, TVs */ 138 | @media only screen and (min-width: 1800px) { 139 | aside { 140 | display: none; 141 | } 142 | 143 | section.showslisting { 144 | width: 100%; 145 | margin-bottom: 25px; 146 | } 147 | 148 | section.tvshow { 149 | width: 46%; 150 | margin-right: 15px; 151 | display: inline-block; 152 | max-width: calc(1800px / 2); 153 | } 154 | 155 | .showdescription { 156 | display: none; 157 | } 158 | } -------------------------------------------------------------------------------- /code/chapter6/battery_mobile_first/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | RWDFLix 7 | 8 | 9 | 10 | 11 |

RWDFlix

12 | 19 |
20 |
21 |

Welcome

22 |

RWDFlix brings you the best videos, where and when you want them.

23 |
24 |

Show 1

25 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

26 |
27 |
28 |

Show 2

29 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

30 |
31 |
32 |

Show 3

33 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

34 |
35 |
36 |

Show 4

37 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

38 |
39 |
40 |

Show 5

41 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

42 |
43 |
44 | 51 |
52 | 55 | 56 | -------------------------------------------------------------------------------- /code/chapter6/battery_mobile_first/index.js: -------------------------------------------------------------------------------- 1 | window.addEventListener("load",function(event) { 2 | navigator.getBattery().then(function (battery) { 3 | // Get the battery level, and if it's greater than 50%, load the images 4 | var level = battery.level; 5 | if (level > 0.2) { 6 | // Find all 'tvshow' divs and loop through them all 7 | tvShows = document.getElementsByClassName('tvshow'); 8 | var i; 9 | for (i = 0; i < tvShows.length; i++) { 10 | tvShow = tvShows[i]; 11 | // Get the show name 12 | showName = tvShow.classList[1]; 13 | // Create a picture element 14 | var newPictureNode = document.createElement("picture"); 15 | // Set the source and classes for the picture, the code is identical to earlier examples, but the show name is passed to generate for each show 16 | var pictureInnerHTML = ''; 17 | newPictureNode.innerHTML = pictureInnerHTML; 18 | // Add an event listener to the picture 19 | newPictureNode.addEventListener('click', toggle_visibility, false); 20 | 21 | // Also generate the video html in the same way 22 | var newVideoNode = document.createElement("video"); 23 | var videoInnerHTML = 'Your browser doesn\'t support HTML5 video tag.'; 24 | newVideoNode.setAttribute("controls", "controls"); 25 | newVideoNode.setAttribute("poster", '../images/' + showName + '-medium.jpg'); 26 | newVideoNode.setAttribute("preload", "none"); 27 | newVideoNode.innerHTML = videoInnerHTML; 28 | 29 | // Insert the new image and video in the correct place in the DOM 30 | var nextNode = tvShow.getElementsByClassName('showdescription'); 31 | tvShow.insertBefore(newVideoNode, nextNode[0]); 32 | tvShow.insertBefore(newPictureNode, newVideoNode); 33 | } 34 | } 35 | }); 36 | },false); 37 | 38 | function toggle_visibility(id) { 39 | var e = this; 40 | var v = e.nextSibling; 41 | v.style.display = 'block'; 42 | v.play(); 43 | e.style.display = 'none'; 44 | } -------------------------------------------------------------------------------- /code/chapter6/battery_mobile_first/layout.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: black; 3 | color: white; 4 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 5 | font-size: 1em; 6 | } 7 | 8 | .battery-save { 9 | color: gray; 10 | } 11 | 12 | .left { 13 | float: left; 14 | } 15 | 16 | header { 17 | } 18 | 19 | nav { 20 | } 21 | 22 | nav ul { 23 | list-style-type: none; 24 | margin: 0; 25 | padding: 0; 26 | } 27 | 28 | nav ul li { 29 | display: inline 30 | } 31 | 32 | nav ul li a { 33 | padding: 8px; 34 | color: #999; 35 | } 36 | 37 | section { 38 | } 39 | 40 | section.showslisting { 41 | width: 100%; 42 | margin-bottom: 25px; 43 | } 44 | 45 | section.showslisting p { 46 | line-height: 1.2em; 47 | word-spacing: 0.2em; 48 | } 49 | 50 | aside { 51 | display: none; 52 | } 53 | 54 | section.tvshow { 55 | width: 90%; 56 | max-width: 480px; 57 | margin: 0 auto; 58 | display: block; 59 | } 60 | 61 | video { 62 | display: none; 63 | width: 100%; 64 | height: auto; 65 | } 66 | 67 | .thumbnail { 68 | width: 100%; 69 | height: auto; 70 | } 71 | 72 | .showdescription { 73 | display: none; 74 | } 75 | 76 | footer { 77 | clear: both; 78 | } 79 | 80 | /* Media Queries */ 81 | 82 | /* Extra Small Devices and Phones */ 83 | @media only screen and (min-width: 480px) { 84 | section.tvshow { 85 | width: 90%; 86 | max-width: 768px; 87 | margin: 0 auto; 88 | display: block; 89 | } 90 | } 91 | 92 | /* Small Devices and Tablets */ 93 | @media only screen and (min-width: 768px) { 94 | .showdescription { 95 | text-overflow: ellipsis; 96 | display: block; 97 | white-space: nowrap; 98 | overflow: hidden; 99 | } 100 | 101 | section.tvshow { 102 | width: 46%; 103 | margin-right: 15px; 104 | display: inline-block; 105 | max-width: calc(992px / 2); 106 | } 107 | 108 | section.showslisting p { 109 | line-height: 1.4em; 110 | word-spacing: 0em; 111 | } 112 | } 113 | 114 | /* Medium Devices and Desktops */ 115 | @media only screen and (min-width: 992px) { 116 | aside { 117 | width: 15%; 118 | display: block; 119 | } 120 | 121 | section.showslisting { 122 | width: 75%; 123 | } 124 | 125 | section.tvshow { 126 | width: 22%; 127 | margin-right: 15px; 128 | display: inline-block; 129 | max-width: calc(1200px / 4); 130 | } 131 | 132 | .showdescription { 133 | white-space: normal; 134 | } 135 | } 136 | 137 | /* Large Devices, Wide Screens, TVs */ 138 | @media only screen and (min-width: 1800px) { 139 | aside { 140 | display: none; 141 | } 142 | 143 | section.showslisting { 144 | width: 100%; 145 | margin-bottom: 25px; 146 | } 147 | 148 | section.tvshow { 149 | width: 46%; 150 | margin-right: 15px; 151 | display: inline-block; 152 | max-width: calc(1800px / 2); 153 | } 154 | 155 | .showdescription { 156 | display: none; 157 | } 158 | } -------------------------------------------------------------------------------- /code/chapter6/cookies/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | RWDFLix 7 | 8 | 9 | 10 | 11 |

RWDFlix

12 | 19 |
20 |
21 |

Welcome

22 |

RWDFlix brings you the best videos where and when you want them.

23 |
24 |

Show 1

25 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

26 |
27 |
28 |

Show 2

29 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

30 |
31 |
32 |

Show 3

33 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

34 |
35 |
36 |

Show 4

37 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

38 |
39 |
40 |

Show 5

41 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

42 |
43 |
44 | 51 |
52 | 55 | 56 | -------------------------------------------------------------------------------- /code/chapter6/cookies/index.js: -------------------------------------------------------------------------------- 1 | window.addEventListener("load",function(event) { 2 | document.cookie = "mature=no"; 3 | tvShows = document.getElementsByClassName('tvshow'); 4 | var i; 5 | for (i = 0; i < tvShows.length; i++) { 6 | tvShow = tvShows[i]; 7 | var mature = getCookie('mature'); 8 | console.log(mature + tvShow.classList[2]); 9 | if (mature == 'no' && tvShow.classList[2] != 'mature') { 10 | showName = tvShow.classList[1]; 11 | var newPictureNode = document.createElement("picture"); 12 | var pictureInnerHTML = ''; 13 | newPictureNode.innerHTML = pictureInnerHTML; 14 | newPictureNode.addEventListener('click', toggle_visibility, false); 15 | 16 | var newVideoNode = document.createElement("video"); 17 | var videoInnerHTML = 'Your browser doesn\'t support HTML5 video tag.'; 18 | newVideoNode.setAttribute("controls", "controls"); 19 | newVideoNode.setAttribute("poster", '../images/' + showName + '-medium.jpg'); 20 | newVideoNode.setAttribute("preload", "none"); 21 | newVideoNode.innerHTML = videoInnerHTML; 22 | 23 | var nextNode = tvShow.getElementsByClassName('showdescription'); 24 | tvShow.insertBefore(newVideoNode, nextNode[0]); 25 | tvShow.insertBefore(newPictureNode, newVideoNode); 26 | } 27 | } 28 | },false); 29 | 30 | function getCookie(name) { 31 | var regexp = new RegExp("(?:^" + name + "|;\s*" + name + ")=(.*?)(?:;|$)", "g"); 32 | var result = regexp.exec(document.cookie); 33 | return (result === null) ? null : result[1]; 34 | } 35 | 36 | function toggle_visibility(id) { 37 | var e = this; 38 | var v = e.nextSibling; 39 | v.style.display = 'block'; 40 | v.play(); 41 | e.style.display = 'none'; 42 | } -------------------------------------------------------------------------------- /code/chapter6/cookies/layout.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: black; 3 | color: white; 4 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 5 | font-size: 1em; 6 | } 7 | 8 | .battery-save { 9 | color: gray; 10 | } 11 | 12 | .left { 13 | float: left; 14 | } 15 | 16 | header { 17 | } 18 | 19 | nav { 20 | } 21 | 22 | nav ul { 23 | list-style-type: none; 24 | margin: 0; 25 | padding: 0; 26 | } 27 | 28 | nav ul li { 29 | display: inline 30 | } 31 | 32 | nav ul li a { 33 | padding: 8px; 34 | color: #999; 35 | } 36 | 37 | section { 38 | } 39 | 40 | section.showslisting { 41 | width: 100%; 42 | margin-bottom: 25px; 43 | } 44 | 45 | section.showslisting p { 46 | line-height: 1.2em; 47 | word-spacing: 0.2em; 48 | } 49 | 50 | aside { 51 | display: none; 52 | } 53 | 54 | section.tvshow { 55 | width: 90%; 56 | max-width: 480px; 57 | margin: 0 auto; 58 | display: block; 59 | } 60 | 61 | video { 62 | display: none; 63 | width: 100%; 64 | height: auto; 65 | } 66 | 67 | .thumbnail { 68 | width: 100%; 69 | height: auto; 70 | } 71 | 72 | .showdescription { 73 | display: none; 74 | } 75 | 76 | footer { 77 | clear: both; 78 | } 79 | 80 | /* Media Queries */ 81 | 82 | /* Extra Small Devices and Phones */ 83 | @media only screen and (min-width: 480px) { 84 | section.tvshow { 85 | width: 90%; 86 | max-width: 768px; 87 | margin: 0 auto; 88 | display: block; 89 | } 90 | } 91 | 92 | /* Small Devices and Tablets */ 93 | @media only screen and (min-width: 768px) { 94 | .showdescription { 95 | text-overflow: ellipsis; 96 | display: block; 97 | white-space: nowrap; 98 | overflow: hidden; 99 | } 100 | 101 | section.tvshow { 102 | width: 46%; 103 | margin-right: 15px; 104 | display: inline-block; 105 | max-width: calc(992px / 2); 106 | } 107 | 108 | section.showslisting p { 109 | line-height: 1.4em; 110 | word-spacing: 0em; 111 | } 112 | } 113 | 114 | /* Medium Devices and Desktops */ 115 | @media only screen and (min-width: 992px) { 116 | aside { 117 | width: 15%; 118 | display: block; 119 | } 120 | 121 | section.showslisting { 122 | width: 75%; 123 | } 124 | 125 | section.tvshow { 126 | width: 22%; 127 | margin-right: 15px; 128 | display: inline-block; 129 | max-width: calc(1200px / 4); 130 | } 131 | 132 | .showdescription { 133 | white-space: normal; 134 | } 135 | } 136 | 137 | /* Large Devices, Wide Screens, TVs */ 138 | @media only screen and (min-width: 1800px) { 139 | aside { 140 | display: none; 141 | } 142 | 143 | section.showslisting { 144 | width: 100%; 145 | margin-bottom: 25px; 146 | } 147 | 148 | section.tvshow { 149 | width: 46%; 150 | margin-right: 15px; 151 | display: inline-block; 152 | max-width: calc(1800px / 2); 153 | } 154 | 155 | .showdescription { 156 | display: none; 157 | } 158 | } -------------------------------------------------------------------------------- /code/chapter6/geolocation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | RWDFLix 7 | 8 | 9 | 10 | 11 |

RWDFlix

12 | 19 |
20 |
21 |

Welcome

22 |

RWDFlix brings you the best videos where and when you want them. Highlighted shows might contain content about your current location, we thought you'd be interested!

23 |
24 |

Show 1

25 | 26 | 27 | 29 | 30 | 31 | 32 | 37 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

38 |
39 |
40 |

Show 2

41 | 42 | 43 | 45 | 46 | 47 | 48 | 53 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

54 |
55 |
56 |

Show 3

57 | 58 | 59 | 61 | 62 | 63 | 64 | 69 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

70 |
71 |
72 |

Show 4

73 | 74 | 75 | 77 | 78 | 79 | 80 | 85 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

86 |
87 |
88 |

Show 5

89 | 90 | 91 | 93 | 94 | 95 | 96 | 101 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

102 |
103 |
104 | 111 |
112 | 115 | 116 | -------------------------------------------------------------------------------- /code/chapter6/geolocation/index.js: -------------------------------------------------------------------------------- 1 | window.addEventListener("load", function (event) { 2 | if ("geolocation" in navigator) { 3 | navigator.geolocation.getCurrentPosition(getPosition); 4 | } else { 5 | alert("RWDFlix uses geolocation to recommend shows that may be relevant to you.") 6 | } 7 | 8 | function getPosition(position) { 9 | var url = "http://maps.googleapis.com/maps/api/geocode/json?latlng=" + position.coords.latitude + "," + position.coords.longitude + "&sensor=false"; 10 | var xmlhttp = new XMLHttpRequest(); 11 | xmlhttp.open("GET", url, true); 12 | xmlhttp.send(); 13 | xmlhttp.addEventListener("readystatechange", processRequest, false); 14 | } 15 | 16 | function processRequest() { 17 | if (this.readyState == 4 && this.status == 200) { 18 | var myArr = JSON.parse(this.responseText); 19 | var i; 20 | for (i = 0; i < myArr.results.length; i++) { 21 | if (myArr.results[i].types[0] == "country") { 22 | country = myArr.results[i].formatted_address; 23 | tvShows = document.getElementsByClassName('tvshow'); 24 | var j; 25 | for (j = 0; j < tvShows.length; j++) { 26 | tvShow = tvShows[j]; 27 | if (tvShow.classList[1] == country || tvShow.classList[2] == country) { 28 | tvShows[j].classList.add('highlight') 29 | } 30 | } 31 | } 32 | } 33 | } 34 | } 35 | }, false); 36 | 37 | -------------------------------------------------------------------------------- /code/chapter6/geolocation/layout.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: black; 3 | color: white; 4 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 5 | font-size: 1em; 6 | } 7 | 8 | .left { 9 | float: left; 10 | } 11 | 12 | header { 13 | } 14 | 15 | nav { 16 | } 17 | 18 | nav ul { 19 | list-style-type: none; 20 | margin: 0; 21 | padding: 0; 22 | } 23 | 24 | nav ul li { 25 | display: inline 26 | } 27 | 28 | nav ul li a { 29 | padding: 8px; 30 | color: #999; 31 | } 32 | 33 | section { 34 | } 35 | 36 | section.showslisting { 37 | width: 100%; 38 | margin-bottom: 25px; 39 | } 40 | 41 | section.showslisting p { 42 | line-height: 1.2em; 43 | word-spacing: 0.2em; 44 | } 45 | 46 | aside { 47 | display: none; 48 | } 49 | 50 | section.tvshow { 51 | width: 90%; 52 | max-width: 480px; 53 | margin: 0 auto; 54 | display: block; 55 | } 56 | 57 | section.tvshow.highlight { 58 | background: rgba(50, 50, 200, 0.2); 59 | } 60 | 61 | video { 62 | display: none; 63 | width: 100%; 64 | height: auto; 65 | } 66 | 67 | .thumbnail { 68 | width: 100%; 69 | height: auto; 70 | } 71 | 72 | .showdescription { 73 | display: none; 74 | } 75 | 76 | footer { 77 | clear: both; 78 | } 79 | 80 | /* Media Queries */ 81 | 82 | /* Extra Small Devices and Phones */ 83 | @media only screen and (min-width: 480px) { 84 | section.tvshow { 85 | width: 90%; 86 | max-width: 768px; 87 | margin: 0 auto; 88 | display: block; 89 | } 90 | } 91 | 92 | /* Small Devices and Tablets */ 93 | @media only screen and (min-width: 768px) { 94 | .showdescription { 95 | text-overflow: ellipsis; 96 | display: block; 97 | white-space: nowrap; 98 | overflow: hidden; 99 | } 100 | 101 | section.tvshow { 102 | width: 46%; 103 | margin-right: 15px; 104 | display: inline-block; 105 | max-width: calc(992px / 2); 106 | } 107 | 108 | section.showslisting p { 109 | line-height: 1.4em; 110 | word-spacing: 0em; 111 | } 112 | } 113 | 114 | /* Medium Devices and Desktops */ 115 | @media only screen and (min-width: 992px) { 116 | aside { 117 | width: 15%; 118 | display: block; 119 | } 120 | 121 | section.showslisting { 122 | width: 75%; 123 | } 124 | 125 | section.tvshow { 126 | width: 22%; 127 | margin-right: 15px; 128 | display: inline-block; 129 | max-width: calc(1200px / 4); 130 | } 131 | 132 | .showdescription { 133 | white-space: normal; 134 | } 135 | } 136 | 137 | /* Large Devices, Wide Screens, TVs */ 138 | @media only screen and (min-width: 1800px) { 139 | aside { 140 | display: none; 141 | } 142 | 143 | section.showslisting { 144 | width: 100%; 145 | margin-bottom: 25px; 146 | } 147 | 148 | section.tvshow { 149 | width: 46%; 150 | margin-right: 15px; 151 | display: inline-block; 152 | max-width: calc(1800px / 2); 153 | } 154 | 155 | .showdescription { 156 | display: none; 157 | } 158 | } -------------------------------------------------------------------------------- /code/chapter6/images/show1-large.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/code/chapter6/images/show1-large.jpg -------------------------------------------------------------------------------- /code/chapter6/images/show1-medium.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/code/chapter6/images/show1-medium.jpg -------------------------------------------------------------------------------- /code/chapter6/images/show1-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/code/chapter6/images/show1-small.jpg -------------------------------------------------------------------------------- /code/chapter6/images/show1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/code/chapter6/images/show1.jpg -------------------------------------------------------------------------------- /code/chapter6/images/show2-large.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/code/chapter6/images/show2-large.jpg -------------------------------------------------------------------------------- /code/chapter6/images/show2-medium.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/code/chapter6/images/show2-medium.jpg -------------------------------------------------------------------------------- /code/chapter6/images/show2-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/code/chapter6/images/show2-small.jpg -------------------------------------------------------------------------------- /code/chapter6/images/show2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/code/chapter6/images/show2.jpg -------------------------------------------------------------------------------- /code/chapter6/images/show3-large.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/code/chapter6/images/show3-large.jpg -------------------------------------------------------------------------------- /code/chapter6/images/show3-medium.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/code/chapter6/images/show3-medium.jpg -------------------------------------------------------------------------------- /code/chapter6/images/show3-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/code/chapter6/images/show3-small.jpg -------------------------------------------------------------------------------- /code/chapter6/images/show3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/code/chapter6/images/show3.jpg -------------------------------------------------------------------------------- /code/chapter6/images/show4-large.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/code/chapter6/images/show4-large.jpg -------------------------------------------------------------------------------- /code/chapter6/images/show4-medium.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/code/chapter6/images/show4-medium.jpg -------------------------------------------------------------------------------- /code/chapter6/images/show4-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/code/chapter6/images/show4-small.jpg -------------------------------------------------------------------------------- /code/chapter6/images/show4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/code/chapter6/images/show4.jpg -------------------------------------------------------------------------------- /code/chapter6/images/show5-large.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/code/chapter6/images/show5-large.jpg -------------------------------------------------------------------------------- /code/chapter6/images/show5-medium.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/code/chapter6/images/show5-medium.jpg -------------------------------------------------------------------------------- /code/chapter6/images/show5-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/code/chapter6/images/show5-small.jpg -------------------------------------------------------------------------------- /code/chapter6/images/show5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/code/chapter6/images/show5.jpg -------------------------------------------------------------------------------- /code/chapter6/luminosity/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | RWDFLix 7 | 8 | 9 | 10 | 11 |

RWDFlix

12 | 19 |
20 |
21 |

Welcome

22 |

RWDFlix brings you the best videos where and when you want them.

23 |
24 |

Show 1

25 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

26 |
27 |
28 |

Show 2

29 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

30 |
31 |
32 |

Show 3

33 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

34 |
35 |
36 |

Show 4

37 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

38 |
39 |
40 |

Show 5

41 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

42 |
43 |
44 | 51 |
52 | 55 | 56 | -------------------------------------------------------------------------------- /code/chapter6/luminosity/index.js: -------------------------------------------------------------------------------- 1 | window.addEventListener("devicelight", function (event) { 2 | var luminosity = event.value; 3 | 4 | if (luminosity <= 5) { 5 | document.body.className = "darkness"; 6 | } else if (luminosity <= 50) { 7 | document.body.className = "dim"; 8 | } else if (luminosity <= 1000) { 9 | document.body.className = "bright"; 10 | } 11 | }); -------------------------------------------------------------------------------- /code/chapter6/luminosity/layout.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: black; 3 | color: white; 4 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 5 | font-size: 1em; 6 | -webkit-transition: all 0.5s ease-in-out; 7 | -moz-transition: all 0.5s ease-in-out; 8 | -o-transition: all 0.5s ease-in-out; 9 | transition: all 0.5s ease-in-out; 10 | } 11 | 12 | .bright { 13 | background-color: #fff; 14 | color: #000; 15 | } 16 | 17 | .dim { 18 | background-color: #6600b4; 19 | color: #b5aaff; 20 | } 21 | 22 | .darkness { 23 | background-color: #2d004f; 24 | color: #b5aaff; 25 | } 26 | 27 | .left { 28 | float: left; 29 | } 30 | 31 | header { 32 | } 33 | 34 | nav { 35 | } 36 | 37 | nav ul { 38 | list-style-type: none; 39 | margin: 0; 40 | padding: 0; 41 | } 42 | 43 | nav ul li { 44 | display: inline 45 | } 46 | 47 | nav ul li a { 48 | padding: 8px; 49 | color: #999; 50 | } 51 | 52 | section { 53 | } 54 | 55 | section.showslisting { 56 | width: 100%; 57 | margin-bottom: 25px; 58 | } 59 | 60 | section.showslisting p { 61 | line-height: 1.2em; 62 | word-spacing: 0.2em; 63 | } 64 | 65 | aside { 66 | display: none; 67 | } 68 | 69 | section.tvshow { 70 | width: 90%; 71 | max-width: 480px; 72 | margin: 0 auto; 73 | display: block; 74 | } 75 | 76 | video { 77 | display: none; 78 | width: 100%; 79 | height: auto; 80 | } 81 | 82 | .thumbnail { 83 | width: 100%; 84 | height: auto; 85 | } 86 | 87 | .showdescription { 88 | display: none; 89 | } 90 | 91 | footer { 92 | clear: both; 93 | } 94 | 95 | /* Media Queries */ 96 | 97 | /* Extra Small Devices and Phones */ 98 | @media only screen and (min-width: 480px) { 99 | section.tvshow { 100 | width: 90%; 101 | max-width: 768px; 102 | margin: 0 auto; 103 | display: block; 104 | } 105 | } 106 | 107 | /* Small Devices and Tablets */ 108 | @media only screen and (min-width: 768px) { 109 | .showdescription { 110 | text-overflow: ellipsis; 111 | display: block; 112 | white-space: nowrap; 113 | overflow: hidden; 114 | } 115 | 116 | section.tvshow { 117 | width: 46%; 118 | margin-right: 15px; 119 | display: inline-block; 120 | max-width: calc(992px / 2); 121 | } 122 | 123 | section.showslisting p { 124 | line-height: 1.4em; 125 | word-spacing: 0em; 126 | } 127 | } 128 | 129 | /* Medium Devices and Desktops */ 130 | @media only screen and (min-width: 992px) { 131 | aside { 132 | width: 15%; 133 | display: block; 134 | } 135 | 136 | section.showslisting { 137 | width: 75%; 138 | } 139 | 140 | section.tvshow { 141 | width: 22%; 142 | margin-right: 15px; 143 | display: inline-block; 144 | max-width: calc(1200px / 4); 145 | } 146 | 147 | .showdescription { 148 | white-space: normal; 149 | } 150 | } 151 | 152 | /* Large Devices, Wide Screens, TVs */ 153 | @media only screen and (min-width: 1800px) { 154 | aside { 155 | display: none; 156 | } 157 | 158 | section.showslisting { 159 | width: 100%; 160 | margin-bottom: 25px; 161 | } 162 | 163 | section.tvshow { 164 | width: 46%; 165 | margin-right: 15px; 166 | display: inline-block; 167 | max-width: calc(1800px / 2); 168 | } 169 | 170 | .showdescription { 171 | display: none; 172 | } 173 | } -------------------------------------------------------------------------------- /code/chapter6/orientation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | RWDFLix 7 | 8 | 9 | 10 |

RWDFlix

11 |
12 |
13 | 14 |
15 |

Show 1

16 | 21 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

22 |
23 | 24 |
25 | 26 |
27 | 30 | 54 | 55 | -------------------------------------------------------------------------------- /code/chapter6/orientation/layout.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: black; 3 | color: white; 4 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 5 | font-size: 1em; 6 | } 7 | 8 | section.showslisting { 9 | width: 100%; 10 | margin-bottom: 25px; 11 | } 12 | 13 | section.showslisting p { 14 | line-height: 1.2em; 15 | word-spacing: 0.2em; 16 | } 17 | 18 | section.tvshow { 19 | width: 100%; 20 | margin: 0 auto; 21 | display: block; 22 | } 23 | 24 | video { 25 | width: 100%; 26 | height: auto; 27 | } 28 | 29 | .thumbnail { 30 | width: 100%; 31 | height: auto; 32 | } 33 | 34 | footer { 35 | clear: both; 36 | } 37 | 38 | /* Media Queries */ 39 | 40 | /* Extra Small Devices and Phones */ 41 | @media only screen and (min-width: 480px) { 42 | section.tvshow { 43 | margin: 0 auto; 44 | display: block; 45 | } 46 | } 47 | 48 | /* Small Devices and Tablets */ 49 | @media only screen and (min-width: 768px) { 50 | 51 | section.tvshow { 52 | margin-right: 15px; 53 | display: inline-block; 54 | } 55 | 56 | section.showslisting p { 57 | line-height: 1.4em; 58 | word-spacing: 0em; 59 | } 60 | } 61 | 62 | /* Medium Devices and Desktops */ 63 | @media only screen and (min-width: 992px) { 64 | 65 | section.tvshow { 66 | margin-right: 15px; 67 | display: inline-block; 68 | } 69 | 70 | .showdescription { 71 | white-space: normal; 72 | } 73 | } 74 | 75 | /* Large Devices, Wide Screens, TVs */ 76 | @media only screen and (min-width: 1800px) { 77 | 78 | section.showslisting { 79 | width: 100%; 80 | margin-bottom: 25px; 81 | } 82 | 83 | section.tvshow { 84 | margin-right: 15px; 85 | display: inline-block; 86 | } 87 | } -------------------------------------------------------------------------------- /code/chapter6/time/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | RWDFLix 7 | 8 | 9 | 10 | 11 |

RWDFlix

12 | 19 |
20 |
21 |

Welcome

22 |

RWDFlix brings you the best videos where and when you want them. You are advised that shows highlighted contain more mature content.

23 |
24 |

Show 1

25 | 26 | 27 | 29 | 30 | 31 | 32 | 37 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

38 |
39 |
40 |

Show 2

41 | 42 | 43 | 45 | 46 | 47 | 48 | 53 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

54 |
55 |
56 |

Show 3

57 | 58 | 59 | 61 | 62 | 63 | 64 | 69 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

70 |
71 |
72 |

Show 4

73 | 74 | 75 | 77 | 78 | 79 | 80 | 85 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

86 |
87 |
88 |

Show 5

89 | 90 | 91 | 93 | 94 | 95 | 96 | 101 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

102 |
103 |
104 | 111 |
112 | 115 | 116 | -------------------------------------------------------------------------------- /code/chapter6/time/index.js: -------------------------------------------------------------------------------- 1 | window.addEventListener("load",function(event) { 2 | var thumbnails = document.querySelectorAll("picture img"); 3 | 4 | for (var i = 0; i < thumbnails.length; i++) { 5 | thumbnails[i].addEventListener('click', toggle_visibility, false); 6 | } 7 | 8 | var localNow = new Date(); 9 | var localTime = localNow.getHours(); 10 | 11 | tvShows = document.getElementsByClassName('tvshow'); 12 | var j; 13 | for (j = 0; j < tvShows.length; j++) { 14 | if ((localTime <= 19) && (tvShows[j].classList.contains('evening'))) { 15 | tvShows[j].classList.add('highlight') 16 | } 17 | } 18 | },false); 19 | 20 | function toggle_visibility(id) { 21 | var e = this; 22 | var v = e.parentNode.nextSibling.nextSibling; 23 | v.style.display = 'block'; 24 | v.play(); 25 | e.style.display = 'none'; 26 | } -------------------------------------------------------------------------------- /code/chapter6/time/layout.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: black; 3 | color: white; 4 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 5 | font-size: 1em; 6 | } 7 | 8 | .left { 9 | float: left; 10 | } 11 | 12 | header { 13 | } 14 | 15 | nav { 16 | } 17 | 18 | nav ul { 19 | list-style-type: none; 20 | margin: 0; 21 | padding: 0; 22 | } 23 | 24 | nav ul li { 25 | display: inline 26 | } 27 | 28 | nav ul li a { 29 | padding: 8px; 30 | color: #999; 31 | } 32 | 33 | section { 34 | } 35 | 36 | section.showslisting { 37 | width: 100%; 38 | margin-bottom: 25px; 39 | } 40 | 41 | section.showslisting p { 42 | line-height: 1.2em; 43 | word-spacing: 0.2em; 44 | } 45 | 46 | aside { 47 | display: none; 48 | } 49 | 50 | section.tvshow { 51 | width: 90%; 52 | max-width: 480px; 53 | margin: 0 auto; 54 | display: block; 55 | } 56 | 57 | section.tvshow.evening.highlight { 58 | background: rgba(255, 0, 0, 0.2); 59 | } 60 | 61 | video { 62 | display: none; 63 | width: 100%; 64 | height: auto; 65 | } 66 | 67 | .thumbnail { 68 | width: 100%; 69 | height: auto; 70 | } 71 | 72 | .showdescription { 73 | display: none; 74 | } 75 | 76 | footer { 77 | clear: both; 78 | } 79 | 80 | /* Media Queries */ 81 | 82 | /* Extra Small Devices and Phones */ 83 | @media only screen and (min-width: 480px) { 84 | section.tvshow { 85 | width: 90%; 86 | max-width: 768px; 87 | margin: 0 auto; 88 | display: block; 89 | } 90 | } 91 | 92 | /* Small Devices and Tablets */ 93 | @media only screen and (min-width: 768px) { 94 | .showdescription { 95 | text-overflow: ellipsis; 96 | display: block; 97 | white-space: nowrap; 98 | overflow: hidden; 99 | } 100 | 101 | section.tvshow { 102 | width: 46%; 103 | margin-right: 15px; 104 | display: inline-block; 105 | max-width: calc(992px / 2); 106 | } 107 | 108 | section.showslisting p { 109 | line-height: 1.4em; 110 | word-spacing: 0em; 111 | } 112 | } 113 | 114 | /* Medium Devices and Desktops */ 115 | @media only screen and (min-width: 992px) { 116 | aside { 117 | width: 15%; 118 | display: block; 119 | } 120 | 121 | section.showslisting { 122 | width: 75%; 123 | } 124 | 125 | section.tvshow { 126 | width: 22%; 127 | margin-right: 15px; 128 | display: inline-block; 129 | max-width: calc(1200px / 4); 130 | } 131 | 132 | .showdescription { 133 | white-space: normal; 134 | } 135 | } 136 | 137 | /* Large Devices, Wide Screens, TVs */ 138 | @media only screen and (min-width: 1800px) { 139 | aside { 140 | display: none; 141 | } 142 | 143 | section.showslisting { 144 | width: 100%; 145 | margin-bottom: 25px; 146 | } 147 | 148 | section.tvshow { 149 | width: 46%; 150 | margin-right: 15px; 151 | display: inline-block; 152 | max-width: calc(1800px / 2); 153 | } 154 | 155 | .showdescription { 156 | display: none; 157 | } 158 | } -------------------------------------------------------------------------------- /code/chapter6/vibration/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | RWDFLix 7 | 8 | 9 | 10 | 11 |

RWDFlix

12 | 19 |
20 |
21 |

Welcome

22 |

RWDFlix brings you the best videos where and when you want them.

23 |
24 |

Show 1

25 | 26 | 27 | 29 | 30 | 31 | 32 | 37 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

38 |
39 |
40 |

Show 2

41 | 42 | 43 | 45 | 46 | 47 | 48 | 53 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

54 |
55 |
56 |

Show 3

57 | 58 | 59 | 61 | 62 | 63 | 64 | 69 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

70 |
71 |
72 |

Show 4

73 | 74 | 75 | 77 | 78 | 79 | 80 | 85 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

86 |
87 |
88 |

Show 5

89 | 90 | 91 | 93 | 94 | 95 | 96 | 101 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

102 |
103 |
104 | 111 |
112 | 115 | 116 | -------------------------------------------------------------------------------- /code/chapter6/vibration/index.js: -------------------------------------------------------------------------------- 1 | if ("vibrate" in navigator) { 2 | links = document.getElementsByTagName('a'); 3 | var i; 4 | for (i = 0; i < links.length; i++) { 5 | links[i].addEventListener("click", function (event) { 6 | navigator.vibrate(1000); 7 | }, false); 8 | } 9 | } -------------------------------------------------------------------------------- /code/chapter6/vibration/layout.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: black; 3 | color: white; 4 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 5 | font-size: 1em; 6 | } 7 | 8 | .battery-save { 9 | color: gray; 10 | } 11 | 12 | .left { 13 | float: left; 14 | } 15 | 16 | header { 17 | } 18 | 19 | nav { 20 | } 21 | 22 | nav ul { 23 | list-style-type: none; 24 | margin: 0; 25 | padding: 0; 26 | } 27 | 28 | nav ul li { 29 | display: inline 30 | } 31 | 32 | nav ul li a { 33 | padding: 8px; 34 | color: #999; 35 | } 36 | 37 | section { 38 | } 39 | 40 | section.showslisting { 41 | width: 100%; 42 | margin-bottom: 25px; 43 | } 44 | 45 | section.showslisting p { 46 | line-height: 1.2em; 47 | word-spacing: 0.2em; 48 | } 49 | 50 | aside { 51 | display: none; 52 | } 53 | 54 | section.tvshow { 55 | width: 90%; 56 | max-width: 480px; 57 | margin: 0 auto; 58 | display: block; 59 | } 60 | 61 | video { 62 | display: none; 63 | width: 100%; 64 | height: auto; 65 | } 66 | 67 | .thumbnail { 68 | width: 100%; 69 | height: auto; 70 | } 71 | 72 | .showdescription { 73 | display: none; 74 | } 75 | 76 | footer { 77 | clear: both; 78 | } 79 | 80 | /* Media Queries */ 81 | 82 | /* Extra Small Devices and Phones */ 83 | @media only screen and (min-width: 480px) { 84 | section.tvshow { 85 | width: 90%; 86 | max-width: 768px; 87 | margin: 0 auto; 88 | display: block; 89 | } 90 | } 91 | 92 | /* Small Devices and Tablets */ 93 | @media only screen and (min-width: 768px) { 94 | .showdescription { 95 | text-overflow: ellipsis; 96 | display: block; 97 | white-space: nowrap; 98 | overflow: hidden; 99 | } 100 | 101 | section.tvshow { 102 | width: 46%; 103 | margin-right: 15px; 104 | display: inline-block; 105 | max-width: calc(992px / 2); 106 | } 107 | 108 | section.showslisting p { 109 | line-height: 1.4em; 110 | word-spacing: 0em; 111 | } 112 | } 113 | 114 | /* Medium Devices and Desktops */ 115 | @media only screen and (min-width: 992px) { 116 | aside { 117 | width: 15%; 118 | display: block; 119 | } 120 | 121 | section.showslisting { 122 | width: 75%; 123 | } 124 | 125 | section.tvshow { 126 | width: 22%; 127 | margin-right: 15px; 128 | display: inline-block; 129 | max-width: calc(1200px / 4); 130 | } 131 | 132 | .showdescription { 133 | white-space: normal; 134 | } 135 | } 136 | 137 | /* Large Devices, Wide Screens, TVs */ 138 | @media only screen and (min-width: 1800px) { 139 | aside { 140 | display: none; 141 | } 142 | 143 | section.showslisting { 144 | width: 100%; 145 | margin-bottom: 25px; 146 | } 147 | 148 | section.tvshow { 149 | width: 46%; 150 | margin-right: 15px; 151 | display: inline-block; 152 | max-width: calc(1800px / 2); 153 | } 154 | 155 | .showdescription { 156 | display: none; 157 | } 158 | } -------------------------------------------------------------------------------- /code/readme.txt: -------------------------------------------------------------------------------- 1 | A folder for the book's code archive. Please subdivide into chapter folders. -------------------------------------------------------------------------------- /videos/show1.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/videos/show1.mp4 -------------------------------------------------------------------------------- /videos/show1.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/videos/show1.ogg -------------------------------------------------------------------------------- /videos/show2.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/videos/show2.mp4 -------------------------------------------------------------------------------- /videos/show2.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/videos/show2.ogg -------------------------------------------------------------------------------- /videos/show3.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/videos/show3.mp4 -------------------------------------------------------------------------------- /videos/show3.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/videos/show3.ogg -------------------------------------------------------------------------------- /videos/show4.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/videos/show4.mp4 -------------------------------------------------------------------------------- /videos/show4.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/videos/show4.ogg -------------------------------------------------------------------------------- /videos/show5.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/videos/show5.mp4 -------------------------------------------------------------------------------- /videos/show5.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/responsive2/601b59cbb7036c37d7af1494d2b701e1c3cd562e/videos/show5.ogg --------------------------------------------------------------------------------