initial files

benfrain · Jul 26, 2015 · 0d8659d · 0d8659d
1 parent b121b6b
commit 0d8659d
Show file tree

Hide file tree

Showing 494 changed files with 133,036 additions and 0 deletions.
diff --git a/ch1/css/styles.css b/ch1/css/styles.css
@@ -0,0 +1,108 @@
+* {
+	box-sizing: border-box;
+}
+
+body {
+	padding: 1rem .5rem;
+	font-size: 1.3rem;
+	line-height: 1.2;
+	max-width: 60rem;
+	margin: 0 auto;
+	color: #333;
+}
+
+img {
+	max-width: 100%;
+}
+
+.Header {
+	text-align: center;
+	border-bottom: 8px double #f9f9f9;
+	margin-bottom: 2rem;
+	padding-bottom: 1rem;
+}
+
+.Strap {
+	font-size: 1rem;
+}
+
+
+.MoneyShot {
+	position: relative;
+}
+
+.MoneyShotImg {
+	border: 6px solid #e8cfa9;
+	border-radius: 4px;
+}
+
+.LogoWrapper {
+	display: block;
+}
+
+.ImageCaption {
+	font-size: .75rem;
+	position: absolute;
+	bottom: .5rem;
+	right: 1rem;
+}
+
+.IntroText {
+	font-size: 1.8rem;
+	font-style: italic;
+}
+
+.MethodWrapper li {
+	padding: .4rem 0;
+}
+
+.MethodWrapper li:after {
+	content: "✼";
+	display: block;
+	text-align: center;
+	margin: 1rem 0 .5rem 0;
+	color: #eee;
+}
+
+@media screen and (min-width: 50rem) {
+	body {
+		border-left: 4px solid #f9f9f9;
+		border-right: 4px solid #f9f9f9;
+		padding: 1rem 2rem;
+	}
+
+	.IntroWrapper {
+		display: table;
+		table-layout: fixed;
+		width: 100%;
+	}
+
+	.MoneyShot,
+	.IntroText {
+		display: table-cell;
+		width: 50%;
+		vertical-align: middle;
+		text-align: center;
+	}
+
+	.IntroText {
+		padding: .5rem;
+		font-size: 2.5rem;
+		text-align: left;
+		position: relative;
+	}
+
+	.Ingredients {
+		font-size: .9rem;
+		float: right;
+		padding: 1rem;
+		margin: 0 0 .5rem 1rem;
+		border-radius: 3px;
+		background-color: #ffffdf;
+		border: 2px solid #e8cfa9;
+	}
+
+	.Ingredients h3 {
+		margin: 0;
+	}
+}
diff --git a/ch1/img/SOC-Logo.png b/ch1/img/SOC-Logo.png
diff --git a/ch1/img/scones.jpg b/ch1/img/scones.jpg
diff --git a/ch1/index.html b/ch1/index.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html class="no-js" lang="en">
+	<head>
+		<meta charset="utf-8">
+		<title>Our first responsive web page with HTML5 and CSS3</title>
+		<meta name="description" content="A basic responsive web page – an example from Chapter 1">
+		<meta name="viewport" content="width=device-width">
+		<link rel="stylesheet" href="css/styles.css">
+	</head>
+	<body>
+		<div class="Header">
+			<a href="/" class="LogoWrapper"><img src="img/SOC-Logo.png" alt="Scone O'Clock logo" /></a>
+			<p class="Strap">Scones: the most resplendent of snacks</p>
+		</div>
+		<div class="IntroWrapper">
+			<p class="IntroText">Occasionally maligned and misunderstood; the scone is a quintessentially British classic.</p>
+			<div class="MoneyShot">
+				<img class="MoneyShotImg" src="img/scones.jpg" alt="Incredible scones" />
+				<p class="ImageCaption">Incredible scones, picture from Wikipedia</p>
+			</div>
+		</div>
+		<p>Recipe and serving suggestions follow.</p>
+		<div class="Ingredients">
+			<h3 class="SubHeader">Ingredients</h3>
+			<ul>
+				<li>350g self-raising flour, and a little spare for dusting</li>
+				<li>¼ tsp salt</li>
+				<li>1 tsp baking powder</li>
+				<li>85g butter, cut into cubes</li>
+				<li>3 tbsp caster sugar</li>
+				<li>175ml milk</li>
+				<li>1 tsp vanilla extract</li>
+				<li>squeeze lemon juice (see Know-how below)</li>
+				<li>beaten egg, to glaze</li>
+				<li>jam and clotted cream, to serve</li>
+			</ul>
+		</div>
+		<div class="HowToMake">
+			<h3 class="SubHeader">Method</h3>
+			<ol class="MethodWrapper">
+				<li>Heat the oven to 220&deg;C (or gas mark 7). Tip the flour into a large bowl along with the salt and baking powder, then mix it all up. Add the butter in, then rub the butter in with your fingers until the mix looks like fine crumbs. When that is done, stir in the sugar.</li>
+				<li>Put the milk into a jug and heat in the microwave for about 20-30 seconds. It should be warm but not hot. Add the vanilla and lemon juice to the milk and then put that to one side and but a baking tray in the oven to warm.</li>
+				<li>Make a well in the dry mix, then add the liquid and combine it quickly with a cutlery knife – it will seem pretty wet at first. Spread some flour onto the work surface and tip the dough out. Dredge the dough and your hands with a little more flour, then fold the dough over 2-3 times until it's smoother. Now pat it into a round shape about 4cm deep.</li>
+				<li>Take a 5cm cutter (Pro-tip – smooth-edged cutters tend to cut more cleanly, giving a better rise) and dip it into some flour. Plunge into the dough, then repeat until you have four scones. By this point you’ll probably need to press what's left of the dough back into a round to cut out another four.</li>
+				<li>Brush the tops with beaten egg, then place onto the hot baking tray.</li>
+				<li>Bake for 10 minutes until risen and golden on the top. Eat just warm or cold on the day of baking, generously (and I do mean generously) topped with jam and clotted cream. </li>
+				<li>If freezing, freeze once cool. Defrost, then put in a low oven (about 160&deg;C) for a few minutes to refresh.</li>
+			</ol>
+		</div>
+	</body>
+</html>
diff --git a/ch10/example_10-01/index.html b/ch10/example_10-01/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html class="no-js" lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>An example from http://rwd.education</title>
+	<meta name="description" content="An example from the book, 'Responsive Web Design with HTML5 and CSS3' by Ben Frain">
+	<meta name="viewport" content="width=device-width">
+	<meta name="theme-color" content="#ff9900">
+	<link rel="stylesheet" href="styles.css">
+</head>
+<body>
+	<script src="main.js"></script>
+</body>
+</html>
diff --git a/ch10/example_10-01/main.js b/ch10/example_10-01/main.js
@@ -0,0 +1,13 @@
+var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
+
+;(function alertSize() {
+	if (size.indexOf("Splus") !=-1) {
+		alert('I will run functions for small screens');
+	}
+	if (size.indexOf("Mplus") !=-1) {
+		alert('At medium sizes, a different function could run');
+	}
+	if (size.indexOf("Lplus") !=-1) {
+		alert('Large screen here, different functions if needed');
+	}
+})();
diff --git a/ch10/example_10-01/styles.css b/ch10/example_10-01/styles.css
@@ -0,0 +1,18 @@
+@media (min-width: 20rem) {
+    body::after {
+        content: "Splus";
+        font-size: 0;
+    }
+}
+@media (min-width: 47.5rem) {
+    body::after {
+        content: "Mplus";
+        font-size: 0;
+    }
+}
+@media (min-width: 62.5rem) {
+    body::after {
+        content: "Lplus";
+        font-size: 0;
+    }
+}
diff --git a/ch10/example_10-02/index.html b/ch10/example_10-02/index.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html class="no-js" lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>An example from http://rwd.education</title>
+	<meta name="description" content="An example from the book, 'Responsive Web Design with HTML5 and CSS3' by Ben Frain">
+	<meta name="viewport" content="width=device-width">
+	<meta name="theme-color" content="#ff9900">
+	<link rel="stylesheet" href="styles.css">
+</head>
+<body>
+	<button class="menu-toggle js-activate-off-canvas-menu">
+		<span aria-label="site navigation">&#9776;</span> menu
+	</button>
+	<a class="menu-toggle js-activate-off-canvas-menu" role="button">
+		<span aria-label="site navigation">&#9776;</span> menu
+	</a>
+</body>
+</html>
diff --git a/ch10/example_10-02/styles.css b/ch10/example_10-02/styles.css
@@ -0,0 +1,18 @@
+.menu-toggle {
+	appearance: none;
+	display: inline-flex;
+	padding: 0 10px;
+	font-size: 17px;
+	align-items: center;
+	justify-content: center;
+	border-radius: 8px;
+	border: 1px solid #ebebeb;
+	min-height: 44px;
+	text-decoration: none;
+	color: #777;
+}
+
+[aria-label="site navigation"] {
+	margin-right: 1ch;
+	font-size: 24px;
+}
diff --git a/ch2/example_02-01/index.html b/ch2/example_02-01/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html class="no-js" lang="en">
+	<head>
+		<meta charset="utf-8">
+		<title>Media Query Test</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no">
+		<link rel="stylesheet" href="main.css" type="text/css" media="all" />
+	</head>
+	<body>
+	</body>
+</html>
diff --git a/ch2/example_02-01/main.css b/ch2/example_02-01/main.css
@@ -0,0 +1,23 @@
+body {
+  background-color: grey;
+}
+@media screen and (min-width: 320px) {
+  body {
+    background-color: green;
+  }
+}
+@media screen and (min-width: 550px) {
+  body {
+    background-color: yellow;
+  }
+}
+@media screen and (min-width: 768px) {
+  body {
+    background-color: orange;
+  }
+}
+@media screen and (min-width: 960px) {
+  body {
+    background-color: red;
+  }
+}
diff --git a/ch2/example_02-02/index.html b/ch2/example_02-02/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html class="no-js" lang="en">
+	<head>
+		<meta charset="utf-8">
+		<title>Media Query example</title>
+		<meta name="viewport" content="width=device-width">
+		<link rel="stylesheet" href="main.css"/>
+	</head>
+	<body>
+		<a href="#" class="CardLink CardLink_Hearts">Hearts</a>
+		<a href="#" class="CardLink CardLink_Clubs">Clubs</a>
+		<a href="#" class="CardLink CardLink_Spades">Spades</a>
+		<a href="#" class="CardLink CardLink_Diamonds">Diamonds</a>
+	</body>
+</html>
diff --git a/ch2/example_02-02/main.css b/ch2/example_02-02/main.css
@@ -0,0 +1,47 @@
+.CardLink {
+	display: block;
+	color: #666;
+	text-shadow: 0 2px 0 #efefef;
+	text-decoration: none;
+	height: 2.75rem;
+	line-height: 2.75rem;
+	border-bottom: 1px solid #bbb;
+	position: relative;
+}
+
+@media (min-width: 300px) {
+	.CardLink {
+		padding-left: 1.8rem;
+		font-size: 1.6rem;
+	}
+}
+
+.CardLink:before {
+	display: none;
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	left: 0;
+}
+
+.CardLink_Hearts:before {
+	content: "❤";
+}
+
+.CardLink_Clubs:before {
+	content: "♣";
+}
+
+.CardLink_Spades:before {
+	content: "♠";
+}
+
+.CardLink_Diamonds:before {
+	content: "♦";
+}
+
+@media (min-width: 300px) {
+	.CardLink:before {
+		display: block;
+	}
+}
diff --git a/ch2/example_02-03/index.html b/ch2/example_02-03/index.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Media Query test - which browser downloads which asset?</title>
+  <meta name="description" content="Quick test to determine which browsers download all media queries">
+  <meta name="viewport" content="width=device-width">
+  <style type="text/css">
+    div {
+      display: none;
+      background-color: green;
+      height: 3rem;
+      line-height: 3rem;
+      font-size: 1rem;
+      text-align: center;
+    }
+  </style>
+  <link rel="stylesheet" media="(min-width: 300px)" href="w300.css" />
+  <link rel="stylesheet" media="(min-width: 600px)" href="w600.css" />
+  <link rel="stylesheet" media="(min-width: 900px)" href="w900.css" />
+  <link rel="stylesheet" media="(min-width: 1200px)" href="w1200.css" />
+</head>
+<body>
+  <div class="w300">width 300px file downloaded</div>
+  <div class="w600">width 600px file downloaded</div>
+  <div class="w900">width 900px file downloaded</div>
+  <div class="w1200">width 1200px file downloaded</div>
+</body>
+</html>
diff --git a/ch2/example_02-03/w1200.css b/ch2/example_02-03/w1200.css
@@ -0,0 +1,3 @@
+.w1200 {
+	display: block;
+}
diff --git a/ch2/example_02-03/w300.css b/ch2/example_02-03/w300.css
@@ -0,0 +1,3 @@
+.w300 {
+	display: block;
+}
diff --git a/ch2/example_02-03/w600.css b/ch2/example_02-03/w600.css
@@ -0,0 +1,3 @@
+.w600 {
+	display: block;
+}