adds images and normalize

aekaplan · Mar 9, 2014 · ae728a9 · ae728a9
1 parent f2ea0e0
commit ae728a9
Show file tree

Hide file tree

Showing 16 changed files with 436 additions and 13 deletions.
diff --git a/grid.css b/grid.css
@@ -286,7 +286,7 @@ img {
 .example img { margin: 0; }
 
 .fragmentation {
-  background-image: url("/images/grid/fragmentation.png");
+  background-image: url("/images/fragmentation.png");
   background-size: cover;
   min-height: 250px;
 }

diff --git a/images/border.png b/images/border.png
diff --git a/images/box-model.png b/images/box-model.png
diff --git a/images/container.png b/images/container.png
diff --git a/images/content.png b/images/content.png
diff --git a/images/desktop-first.png b/images/desktop-first.png
diff --git a/images/fragmentation.png b/images/fragmentation.png
diff --git a/images/margin.png b/images/margin.png
diff --git a/images/mobile-first.png b/images/mobile-first.png
diff --git a/images/mobile.png b/images/mobile.png
diff --git a/images/padding.png b/images/padding.png
diff --git a/images/small-large.png b/images/small-large.png
diff --git a/images/with-box-model.png b/images/with-box-model.png
diff --git a/images/without-box-model.png b/images/without-box-model.png
diff --git a/index.html b/index.html
@@ -28,13 +28,13 @@
           <a href="/grid"><h1>grid</h1></a>
           <p>A simple guide to responsive design.<br>Made by <a href="/" target="_blank">Adam Kaplan</a>.</p>
         </div>
-        <img src="/images/grid/mobile.png" alt="Intro" class="mobile animated fadeInUp">
+        <img src="/images/mobile.png" alt="Intro" class="mobile animated fadeInUp">
       </div>
     </header>
 
     <section>
       <div class='container'>
-        <img src="/images/grid/mobile-first.png" alt="Mobile First" class="rwd">
+        <img src="/images/mobile-first.png" alt="Mobile First" class="rwd">
         <h1>Why bother with responsive?</h1>
         <p>We want our websites to be useable on all devices by responding to
         the user’s behavior, screen size and screen orientation.</p>
@@ -63,7 +63,7 @@ <h1>Mobile First</h1>
         <hr>
         <blockquote>
           <p>By assuming a flexible but simple layout by default, you can better guard against browsers—with viewports wide
-          and small—that aren’t quite capable of the full responsive layout. So when we’re talking about layout, “mobile first” 
+          and small—that aren’t quite capable of the full responsive layout. So when we’re talking about layout, “mobile first”
           really means “progressive enhancement.”</p>
           <cite>—Ethan Marcotte</cite>
         </blockquote>
@@ -72,7 +72,7 @@ <h1>Mobile First</h1>
 
     <section class="example quote remove-padding">
       <div class="container">
-        <img src="/images/grid/small-large.png" alt="Mobile First">
+        <img src="/images/small-large.png" alt="Mobile First">
       </div>
     </section>
 
@@ -111,7 +111,7 @@ <h1>Add the Viewport Meta Tag</h1>
 
     <section class="example">
       <div class="container">
-        <img src="/images/grid/box-model.png" alt="Box Model">
+        <img src="/images/box-model.png" alt="Box Model">
       </div>
     </section>
 
@@ -124,25 +124,25 @@ <h1>CSS Box Model</h1>
 
         <div class="row clearfix">
           <div class="column fourth">
-            <img src="/images/grid/content.png" alt="content">
+            <img src="/images/content.png" alt="content">
             <h3 class="content">Content</h3>
             <p>The content of the box, where text and images appear.</p>
           </div>
 
           <div class="column fourth">
-            <img src="/images/grid/padding.png" alt="padding">
+            <img src="/images/padding.png" alt="padding">
             <h3 class="padding">Padding</h3>
             <p>Clears an area around the content.</p>
           </div>
 
           <div class="column fourth">
-            <img src="/images/grid/border.png" alt="border">
+            <img src="/images/border.png" alt="border">
             <h3 class="border">Border</h3>
             <p>A border that goes around the padding.</p>
           </div>
 
           <div class="column fourth">
-            <img src="/images/grid/margin.png" alt="margin">
+            <img src="/images/margin.png" alt="margin">
             <h3 class="margin">Margin</h3>
             <p>Clears an area around the border.</p>
           </div>
@@ -170,13 +170,13 @@ <h1>Your Choice</h1>
 
         <div class="row clearfix">
           <div class="column half">
-            <img src="/images/grid/without-box-model.png" alt="Without Box Model">
+            <img src="/images/without-box-model.png" alt="Without Box Model">
             <h3>Without box-sizing: border-box</h3>
             <p>Margin, borders and padding are drawn outside the set width of your content.</p>
           </div>
 
           <div class="column half">
-            <img src="/images/grid/with-box-model.png" alt="With Box Model">
+            <img src="/images/with-box-model.png" alt="With Box Model">
             <h3>With box-sizing: border-box</h3>
             <p>Borders and padding are drawn inside the set width of your content. The margin is drawn outside.</p>
           </div>
@@ -198,7 +198,7 @@ <h1>Create a Container</h1>
 
     <section class="example">
       <div class="container">
-        <img src="/images/grid/container.png" alt="Container">
+        <img src="/images/container.png" alt="Container">
       </div>
     </section>