refills 0.0.2 → 0.1.0

data/source/{_accordion-tabs-minimal.html.erb → _accordion_tabs_minimal.html.erb}

@@ -1,48 +1,26 @@
 <ul class="accordion-tabs-minimal">
   <li class="tab-header-and-content">
     <a href="#" class="tab-link is-active">Tab Item</a>
-    <section>
+    <div class="tab-content">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt pellentesque lorem, id suscipit dolor rutrum id. Morbi facilisis porta volutpat. Fusce adipiscing, mauris quis congue tincidunt, sapien purus suscipit odio, quis dictum odio tortor in sem. Ut sit amet libero nec orci mattis fringilla. Praesent eu ipsum in sapien tincidunt molestie sed ut magna. Nam accumsan dui at orci rhoncus pharetra tincidunt elit ullamcorper. Sed ac mauris ipsum. Nullam imperdiet sapien id purus pretium id aliquam mi ullamcorper.</p>
-    </section>
+    </div>
   </li>
   <li class="tab-header-and-content">
     <a href="#" class="tab-link">Another Tab</a>
-    <section>
+    <div class="tab-content">
       <p>Ut laoreet augue et neque pretium non sagittis nibh pulvinar. Etiam ornare tincidunt orci quis ultrices. Pellentesque ac sapien ac purus gravida ullamcorper. Duis rhoncus sodales lacus, vitae adipiscing tellus pharetra sed. Praesent bibendum lacus quis metus condimentum ac accumsan orci vulputate. Aenean fringilla massa vitae metus facilisis congue. Morbi placerat eros ac sapien semper pulvinar. Vestibulum facilisis, ligula a molestie venenatis, metus justo ullamcorper ipsum, congue aliquet dolor tortor eu neque. Sed imperdiet, nibh ut vestibulum tempor, nibh dui volutpat lacus, vel gravida magna justo sit amet quam. Quisque tincidunt ligula at nisl imperdiet sagittis. Morbi rutrum tempor arcu, non ultrices sem semper a. Aliquam quis sem mi.</p>
-    </section>
+    </div>
   </li>
   <li class="tab-header-and-content">
     <a href="#" class="tab-link">Third</a>
-    <section>
+    <div class="tab-content">
       <p>Donec mattis mauris gravida metus laoreet non rutrum sem viverra. Aenean nibh libero, viverra vel vestibulum in, porttitor ut sapien. Phasellus tempor lorem id justo ornare tincidunt. Nulla faucibus, purus eu placerat fermentum, velit mi iaculis nunc, bibendum tincidunt ipsum justo eu mauris. Nulla facilisi. Vestibulum vel lectus ac purus tempus suscipit nec sit amet eros. Nullam fringilla, enim eu lobortis dapibus, quam magna tincidunt nibh, sit amet imperdiet dolor justo congue turpis.</p>    
-    </section>
+    </div>
   </li>
   <li class="tab-header-and-content">
     <a href="#" class="tab-link">Last Item</a>
-    <section>
-      <p>Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus dui urna, mollis vel suscipit in, pharetra at ligula. Pellentesque a est vel est fermentum pellentesque sed sit amet dolor. Nunc in dapibus nibh. Aliquam erat volutpat. Phasellus vel dui sed nibh iaculis convallis id sit amet urna. Proin nec tellus quis justo consequat accumsan. Vivamus turpis enim, auctor eget placerat eget, aliquam ut sapien.</p
-    </section>
+    <div class="tab-content">
+      <p>Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus dui urna.</p>
+    </div>
   </li>
 </ul>
-
-<script>
-  $(document).ready(function () {
-    $('.accordion-tabs-minimal').each(function(index) {
-      $(this).children('li').first().children('a').addClass('is-active').next().addClass('is-open').show();
-    });
-
-    $('.accordion-tabs-minimal').on('click', 'li > a', function(event) {
-      if (!$(this).hasClass('is-active')) {
-        event.preventDefault();
-        var accordionTabs = $(this).closest('.accordion-tabs-minimal')
-        accordionTabs.find('.is-open').removeClass('is-open').hide();
-
-        $(this).next().toggleClass('is-open').toggle();
-        accordionTabs.find('.is-active').removeClass('is-active');
-        $(this).addClass('is-active');
-      } else {
-        event.preventDefault();
-      }
-    });
-  });
-</script>

data/source/_animate.html.erb

@@ -0,0 +1,4 @@
+<div>
+  <div class="animate-target"></div>
+  <button class="animate-trigger">Press to Animate.css</button>
+</div>

data/source/_animate_info.html.erb

@@ -0,0 +1,4 @@
+<div class="animate-info">
+  This component is based on Dan Eden’s Animate.css. It sets up the JavaScript for triggering an animation for another element. 
+  Check out the <a href="http://daneden.github.io/animate.css/">Animate.css website</a> to view the animations in action and the <a href="https://github.com/daneden/animate.css/blob/master/animate.css">GitHub page</a> for the CSS.
+</div>

data/source/_badges.html.erb

@@ -1,7 +1,7 @@
-<div class="badges">
-	<span class="badge">4</span>
-	<span class="badge dark">4</span>
-	<span class="badge error">4</span>
-	<span class="badge notice">4</span>
-	<span class="badge success">4</span>
-</div>
+<div>
+  <span class="badge">4</span>
+  <span class="badge-alert">4</span>
+  <span class="badge-error">4</span>
+  <span class="badge-notice">4</span>
+  <span class="badge-success">4</span>
+</div>

data/source/_button_group.html.erb

@@ -0,0 +1,18 @@
+<div class="button-group">
+  <label>
+    <input type="radio" name="button-group" value="item" checked>
+    <span class="button-group-item">Item</span>
+  </label>
+  <label>
+    <input type="radio" name="button-group" value="other-item">
+    <span class="button-group-item">Other But Longer Item</span>
+  </label>
+  <label>
+    <input type="radio" name="button-group" value="other-item">
+    <span class="button-group-item">Third</span>
+  </label>
+  <label>
+    <input type="radio" name="button-group" value="third">
+    <span class="button-group-item">Last Item</span>
+  </label>
+</div>

data/source/_cards.html.erb

@@ -1,7 +1,7 @@
 <div class="cards">
   <div class="card">
     <div class="card-image">
-      <img src="https://raw.github.com/Magnus-G/Random/master/mountains.png" alt="">
+      <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png" alt="">
     </div>
     <div class="card-header">
       First Card
@@ -9,19 +9,11 @@
     <div class="card-copy">
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, officiis sunt neque facilis culpa molestiae necessitatibus delectus veniam provident.</p>
     </div>
-    <div class="card-stats">
-      <ul>
-        <li>98<span>Items</span></li>
-        <li>298<span>Things</span></li>
-        <li>923<span>Objects</span></li>
-      </ul>
-    </div>
   </div>
 
   <div class="card">
-    <div class="ribbon-wrapper"><div class="ribbon">RIBBON</div></div>
     <div class="card-image">
-      <img src="https://raw.github.com/Magnus-G/Random/master/mountains-4.png" alt="">
+      <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains-4.png" alt="">
     </div>
     <div class="card-header">
       Another Card
@@ -29,31 +21,17 @@
     <div class="card-copy">
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, officiis sunt neque facilis culpa molestiae necessitatibus delectus veniam provident.</p>
     </div>
-    <div class="card-stats">
-      <ul>
-        <li>98<span>Items</span></li>
-        <li>298<span>Things</span></li>
-        <li>923<span>Objects</span></li>
-      </ul>
-    </div>
   </div>
 
   <div class="card">
     <div class="card-image">
-      <img src="https://raw.github.com/Magnus-G/Random/master/mountains-3.png" alt="">
+      <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains-3.png" alt="">
     </div>
     <div class="card-header">
       The Last Card
     </div>
     <div class="card-copy">
-      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, officiis sunt neque facilis culpa molestiae necessitatibus delectus veniam provident.</p>
-    </div>
-    <div class="card-stats">
-      <ul>
-        <li>98<span>Items</span></li>
-        <li>298<span>Things</span></li>
-        <li>923<span>Objects</span></li>
-      </ul>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
     </div>
   </div>
-</div>
+</div>

data/source/_centered_navigation.html.erb

@@ -0,0 +1,40 @@
+<header class="centered-navigation" role="banner">
+  <div class="centered-navigation-wrapper">
+    <a href="javascript:void(0)" class="mobile-logo">
+      <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_3_dark.png" alt="Logo image">
+    </a>
+    <a href="javascript:void(0)" id="js-centered-navigation-mobile-menu" class="centered-navigation-mobile-menu">MENU</a>
+    <nav role="navigation">
+      <ul id="js-centered-navigation-menu" class="centered-navigation-menu show">
+        <li class="nav-link"><a href="javascript:void(0)">Products</a></li>
+        <li class="nav-link"><a href="javascript:void(0)">About Us</a></li>
+        <li class="nav-link"><a href="javascript:void(0)">Contact</a></li>
+        <li class="nav-link logo">
+          <a href="javascript:void(0)" class="logo">
+            <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_3_dark.png" alt="Logo image">
+          </a>
+        </li>
+        <li class="nav-link"><a href="javascript:void(0)">Testimonials</a></li>
+        <li class="nav-link more"><a href="javascript:void(0)">More</a>
+          <ul class="submenu">
+            <li><a href="javascript:void(0)">Submenu Item</a></li>
+            <li><a href="javascript:void(0)">Another Item</a></li>
+            <li class="more"><a href="javascript:void(0)">Item with submenu</a>
+              <ul class="submenu">
+                <li><a href="javascript:void(0)">Sub-submenu Item</a></li>
+                <li><a href="javascript:void(0)">Another Item</a></li>
+              </ul>
+            </li>
+            <li class="more"><a href="javascript:void(0)">Another submenu</a>
+              <ul class="submenu">
+                <li><a href="javascript:void(0)">Sub-submenu</a></li>
+                <li><a href="javascript:void(0)">An Item</a></li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+        <li class="nav-link"><a href="javascript:void(0)">Sign up</a></li>
+      </ul>
+    </nav>
+  </div>
+</header>

data/source/{_snippets.html.erb → _code.html.erb}

@@ -3,5 +3,8 @@
   <a href="#" class="js-hide-code">Hide Code</a>
 </div>
 
-<%= html_snippet snippet_name %>
-<%= stylesheet_snippet snippet_name %>
+<table class="snippets-table">
+  <tr>
+    <%= snippets %>
+  </tr>
+</table>

data/source/_comment.html.erb

@@ -1,6 +1,6 @@
 <div class="comment">
   <div class="comment-image">
-    <img src="https://raw.github.com/Magnus-G/Random/master/placeholder_logo_1.png" alt="">
+    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1.png" alt="Logo image">
   </div>
   <div class="comment-content">
     <h1>First Comment Title or Author</h1>
@@ -11,7 +11,7 @@
 
 <div class="comment">
   <div class="comment-image">
-    <img src="https://raw.github.com/Magnus-G/Random/master/placeholder_logo_2.png" alt="">
+    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_2.png" alt="Logo image">
   </div>
   <div class="comment-content">
     <h1>Another One</h1>

data/source/_device.html.erb

@@ -0,0 +1,10 @@
+<div class="device-background">
+  <div class="device-text">
+    <h4>Text about App or Device</h4>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, recusandae? Deserunt repellendus.</p>
+    <button>Learn More</button>
+  </div>
+  <div class="device">
+    <div class="screen"></div>
+  </div>
+</div>

data/source/_dropdown.html.erb

@@ -0,0 +1,12 @@
+<div class="dropdown">
+  <div class="dropdown-container">
+    <p class="dropdown-description">Description</p>
+    <p class="dropdown-button">Click to Select</p>
+    <ul class="dropdown-menu dropdown-select">
+      <li>Dropdown Menu Item</li>
+      <li>Another Item</li>
+      <li>Item Three</li>
+      <li>The Last One</li>
+    </ul>
+  </div>
+</div>

data/source/_expander.html.erb

@@ -0,0 +1,6 @@
+<div class="expander">
+  <a href="javascript:void(0)" id="js-expander-trigger" class="expander-trigger expander-hidden">Expandable section</a>
+  <div id="js-expander-content" class="expander-content">
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio mollitia fugiat facilis enim accusamus quisquam aut, repellendus incidunt quod optio facere labore illo numquam ipsum beatae vero debitis, fugit excepturi.</p>
+  </div>
+</div>

data/source/_fade_in.html.erb

@@ -0,0 +1,7 @@
+<div id="js-fadeInElement" class="fade-in-element">
+  This box will fade in when it's <b>300px above the bottom</b> of the window.
+  <br>
+  And disappear as it goes <b>below the bottom</b> of the window.
+  <br>
+  If JavaScript is disabled, it will still show up.
+</div>

data/source/_flashes.html.erb

@@ -0,0 +1,15 @@
+<div class="flash-success">
+  <span>This is a success message <a href="#">with a link</a></span>
+</div>
+
+<div class="flash-error">
+  <span>This is an error message <a href="#">with a link</a></span>
+</div>
+
+<div class="flash-notice">
+  <span>This is an notice message <a href="#">with a link</a></span>
+</div>
+
+<div class="flash-alert">
+  <span>This is an alert message <a href="#">with a link</a></span>
+</div>

data/source/_flex_boxes.html.erb

@@ -0,0 +1,32 @@
+<div class="flex-boxes">
+  <a href="javascript:void(0)" class="flex-box flex-box-big">
+    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_2_dark.png" alt="">
+    <h1 class="flex-title">A Wide Flex Box Item</h1>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad nostrum, libero! Laborum distinctio necessitatibus voluptates eaque officiis, unde illo, earum voluptatum rerum, reiciendis ipsa ex dolorem a dicta, maxime aliquam.</p>
+  </a>
+  <a href="javascript:void(0)" class="flex-box">
+    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1_dark.png" alt="">
+    <h1 class="flex-title">Flex Box Item</h1>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum molestiae fugiat tenetur fugit atque dignissimos, fugiat natus vitae.</p>
+  </a>
+  <a href="javascript:void(0)" class="flex-box">
+    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_3_dark.png" alt="">
+    <h1 class="flex-title">A Flex Box Item</h1>
+    <p>Lorem adipisicing elit. Voluptas consectetur tempora quis nam, officia tenetur blanditiis in illo dolor?</p>
+  </a>
+  <a href="javascript:void(0)" class="flex-box flex-box-big">
+    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_2_dark.png" alt="">
+    <h1 class="flex-title">Another Wide Item</h1>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae quis ipsum, officia, aperiam tenetur dolor molestiae voluptate perferendis dolorem vel ex, unde fugit blanditiis sapiente.</p>
+  </a>
+  <a href="javascript:void(0)" class="flex-box">
+    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_2_dark.png" alt="">
+    <h1 class="flex-title">Flex Box Item</h1>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo obcaecati in provident illo.</p>
+  </a>
+  <a href="javascript:void(0)" class="flex-box">
+    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_3_dark.png" alt="">
+    <h1 class="flex-title">Last Flex Box Item</h1>
+    <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
+  </a>
+</div>

data/source/_footer.html.erb

@@ -1,6 +1,6 @@
-<footer class="footer">
+<footer class="footer" role="contentinfo">
   <div class="footer-logo">
-    <img src="https://raw.github.com/Magnus-G/Random/master/placeholder_logo_1.png" alt="">
+    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1.png" alt="Logo image">
   </div>
   <div class="footer-links">
     <ul>

data/source/_footer_2.html.erb

@@ -0,0 +1,33 @@
+<!--<div class="wrapper-for-content-outside-of-footer">
+   Uncomment this whole section for a sticky footer. The content of the page should be inside of this .wrapper-for-content-outside-of-footer
+</div>-->
+
+<footer class="footer-2" role="contentinfo">
+  <div class="footer-logo">
+    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1.png" alt="Logo image">
+  </div>
+    <ul>
+      <li><a href="javascript:void(0)">About</a></li>
+      <li><a href="javascript:void(0)">Contact</a></li>
+      <li><a href="javascript:void(0)">Products</a></li>
+    </ul>
+
+    <div class="footer-secondary-links">
+      <ul>
+        <li><a href="javascript:void(0)">Terms and Conditions</a></li>
+        <li><a href="javascript:void(0)">Privacy Policy</a></li>
+      </ul>
+
+      <ul class="footer-social">
+        <li><a href="javascript:void(0)">
+          <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/facebook-logo-circle.png" alt="Facebook">
+          </a></li>
+        <li><a href="javascript:void(0)">
+          <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/twitter-logo-circle.png" alt="Twitter">
+        </a></li>
+        <li><a href="javascript:void(0)">
+          <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/youtube-logo-circle.png" alt="YouTube">
+        </a></li>
+      </ul>
+    </div>
+</footer>

data/source/{_grid-items.html.erb → _grid_items.html.erb}

@@ -1,36 +1,36 @@
 <div class="grid-items">
   <a href="javascript:void(0)" class="grid-item">
-    <img src="https://raw.github.com/Magnus-G/Random/master/placeholder_logo_1.png" alt="">
+    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1.png" alt="">
     <h1>Grid Item</h1>
     <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
   </a>
   <a href="javascript:void(0)" class="grid-item grid-item-big grid-item-image">
-    <img src="https://raw.github.com/Magnus-G/Random/master/placeholder_logo_2.png" alt="">
+    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_2.png" alt="">
     <h1>Grid Item With an Image</h1>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, illum.</p>
   </a>
   <a href="javascript:void(0)" class="grid-item grid-item-big">
-    <img src="https://raw.github.com/Magnus-G/Random/master/placeholder_logo_3.png" alt="">
+    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_3.png" alt="">
     <h1>Another Wide Item</h1>
     <p>Lorem ipsum consectetur dolor sit amet, consectetur adipisicing elit. Rem, illum.</p>
   </a>
   <a href="javascript:void(0)" class="grid-item">
-    <img src="https://raw.github.com/Magnus-G/Random/master/placeholder_logo_2.png" alt="">
+    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_2.png" alt="">
     <h1>Last Grid Item</h1>
     <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
   </a>
   <a href="javascript:void(0)" class="grid-item">
-    <img src="https://raw.github.com/Magnus-G/Random/master/placeholder_logo_2.png" alt="">
+    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_2.png" alt="">
     <h1>Last Grid Item</h1>
     <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
   </a>
   <a href="javascript:void(0)" class="grid-item">
-    <img src="https://raw.github.com/Magnus-G/Random/master/placeholder_logo_3.png" alt="">
+    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_3.png" alt="">
     <h1>A Grid Item</h1>
     <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
   </a>
   <a href="javascript:void(0)" class="grid-item">
-    <img src="https://raw.github.com/Magnus-G/Random/master/placeholder_logo_1.png" alt="">
+    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1.png" alt="">
     <h1>Item</h1>
     <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
   </a>

data/source/{_grid-items-lines.html.erb → _grid_items_lines.html.erb}

@@ -1,41 +1,41 @@
 <div class="grid-items-lines">
   <a href="javascript:void(0)" class="grid-item">
-    <img src="https://raw.github.com/Magnus-G/Random/master/placeholder_logo_1_dark.png" alt="">
+    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1_dark.png" alt="">
     <h1>Grid Item</h1>
     <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
   </a>
-  <a href="javascript:void(0)" class="grid-item grid-item">
-    <img src="https://raw.github.com/Magnus-G/Random/master/placeholder_logo_3_dark.png" alt="">
+  <a href="javascript:void(0)" class="grid-item">
+    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_3_dark.png" alt="">
     <h1>Another Item</h1>
     <p>Lorem ipsum consectetur dolor sit amet, consectetur adipisicing elit.</p>
   </a>
   <a href="javascript:void(0)" class="grid-item">
-    <img src="https://raw.github.com/Magnus-G/Random/master/placeholder_logo_2_dark.png" alt="">
+    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_2_dark.png" alt="">
     <h1>Another Grid Item</h1>
     <p>Lorem ipsum dolor sit amet, elit.</p>
   </a>
   <a href="javascript:void(0)" class="grid-item">
-    <img src="https://raw.github.com/Magnus-G/Random/master/placeholder_logo_2_dark.png" alt="">
+    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_2_dark.png" alt="">
     <h1>Grid Item</h1>
     <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
   </a>
   <a href="javascript:void(0)" class="grid-item grid-item-big">
-    <img src="https://raw.github.com/Magnus-G/Random/master/placeholder_logo_2_dark.png" alt="">
+    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_2_dark.png" alt="">
     <h1>Wider Grid Item</h1>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, illum.</p>
   </a>
   <a href="javascript:void(0)" class="grid-item">
-    <img src="https://raw.github.com/Magnus-G/Random/master/placeholder_logo_3_dark.png" alt="">
+    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_3_dark.png" alt="">
     <h1>A Grid Item</h1>
     <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
   </a>
   <a href="javascript:void(0)" class="grid-item">
-    <img src="https://raw.github.com/Magnus-G/Random/master/placeholder_logo_1_dark.png" alt="">
+    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1_dark.png" alt="">
     <h1>Item</h1>
     <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
   </a>
   <a href="javascript:void(0)" class="grid-item">
-    <img src="https://raw.github.com/Magnus-G/Random/master/placeholder_logo_2_dark.png" alt="">
+    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_2_dark.png" alt="">
     <h1>Last Grid Item</h1>
     <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
   </a>