template files for contributors

rachelandrew · rachelandrew · commit d6ee3a7d59ca · 2018-09-23T14:01:47.000+01:00
diff --git a/css-cookbook/center.html b/css-cookbook/center.html
@@ -1,12 +1,9 @@
 <!doctype html>
-
 <html lang="en">
 
 <head>
     <meta charset="utf-8">
-
     <title>CSS Cookbook: center an element</title>
-
     <link rel="stylesheet" href="styles.css">
     <style>
         .container {
@@ -21,19 +18,18 @@
         }
     </style>
 
-<style class="editable">
-  .container {
-      height: 200px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-  }
-
-  .item {
-      width: 10em;
-  }
-</style>
+    <style class="editable">
+        .container {
+            height: 200px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
 
+        .item {
+            width: 10em;
+        }
+    </style>
 </head>
 
 <body>
@@ -43,7 +39,7 @@
         </div>
     </section>
 
-<textarea class="playable playable-css" style="height: 170px;">
+    <textarea class="playable playable-css" style="height: 170px;">
 .container {
     height: 200px;
     display: flex;
@@ -54,20 +50,18 @@
 .item {
     width: 10em;
 }
-</textarea>
-
-<textarea class="playable playable-html" style="height: 70px;">
-  <div class="container">
-      <div class="item">I am centered!</div>
-  </div>
-</textarea>
+    </textarea>
 
+    <textarea class="playable playable-html" style="height: 70px;">
+    <div class="container">
+        <div class="item">I am centered!</div>
+    </div>
+    </textarea>
 
     <div class="playable-buttons">
         <input id="reset" type="button" value="Reset">
     </div>
 </body>
 <script src="playable.js"></script>
 
-
-</html>
+</html>
diff --git a/css-cookbook/cookbook-template--download.html b/css-cookbook/cookbook-template--download.html
@@ -0,0 +1,34 @@
+<!doctype html>
+
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <!-- this is an example from the MDN Layout Cookbook -->
+    <title>CSS Cookbook: download template</title>
+
+
+    <style>
+        /* body rules included when showing the example as a live example */
+        body {
+            background-color: #fff;
+            color: #333;
+            font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
+            padding: 0;
+            margin: 0;
+        }
+
+        /* add all of your example CSS rules here */
+    </style>
+
+
+
+</head>
+
+<body>
+
+    <!-- Add your example HTML here -->>
+
+</body>
+
+</html>
diff --git a/css-cookbook/cookbook-template.html b/css-cookbook/cookbook-template.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>CSS Cookbook: template</title>
+    <link rel="stylesheet" href="styles.css">
+    <style>
+        /* CSS the visitor will not change */
+    </style>
+
+    <style class="editable">
+        /* CSS the visitor can play with */
+    </style>
+</head>
+
+<body>
+    <section class="preview">
+        <!-- HTML for your component here. -->
+    </section>
+
+    <textarea class="playable playable-css" style="height: 170px;">
+<!-- repeat the second block of CSS here. You can tweak the height to make more room for the content. -->
+    </textarea>
+
+    <textarea class="playable playable-html" style="height: 70px;">
+<!-- repeat the HTML for your component here.  You can tweak the height to make more room for the content.  -->
+    </textarea>
+
+    <!-- leave everything below here alone -->
+    <div class="playable-buttons">
+        <input id="reset" type="button" value="Reset">
+    </div>
+</body>
+<script src="playable.js"></script>
+
+</html>
