refills 0.0.2 → 0.1.0

data/source/_hero.html.erb

@@ -1,10 +1,11 @@
 <div class="hero">
 	<div class="hero-inner">
-    <a href="" class="hero-logo"><img src="https://raw.github.com/Magnus-G/Random/master/placeholder_logo_1.png" alt=""></a>
+    <a href="" class="hero-logo"><img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1.png
+" alt="Logo Image"></a>
 		<div class="hero-copy">
 			<h1>Short description of Product</h1>
-			<p>A few reasons why this product is worth using, who is it for and why do they need it.</p>	
+			<p>A few reasons why this product is worth using, who it's for and why they need it.</p>	
 		</div>
     <button>Learn More</button>
 	</div>
-</div>
+</div>

data/source/_hover_tile_animation.html.erb

@@ -0,0 +1,9 @@
+<div class="hover-tile-outer">
+  <div class="hover-tile-container">
+    <div class="hover-tile hover-tile-visible"></div>
+    <div class="hover-tile hover-tile-hidden">
+      <h4>Hidden Copy</h4>
+      <p>Lorem ipsum dolor provident eligendi fugiat ad exercitationem sit amet, consectetur adipisicing elit. Unde, provident eligendi.</p>
+    </div>
+  </div>
+</div>

data/source/{_icon-bullet-points.html.erb → _icon_bullet_points.html.erb}

@@ -1,29 +1,30 @@
-<div class="bullets">
-  <div class="bullet three-col-bullet">
+<ul class="bullets">
+  <li class="bullet three-col-bullet">
     <div class="bullet-icon bullet-icon-1">
-      <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="">
     </div>
     <div class="bullet-content">
       <h2>This Bullet Title</h2>
       <p>Lorem dolor sit amet consectetur adipisicing elit. Doloremque, minus, blanditiis, voluptatibus nulla quia ipsam sequi quos iusto aliquam iste magnam accusamus molestias quo illum impedit. Odit officia autem.</p>
       </div>
-  </div>  
-  <div class="bullet three-col-bullet">
+  </li>  
+  <li class="bullet three-col-bullet">
     <div class="bullet-icon bullet-icon-2">
-      <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="">
     </div>
     <div class="bullet-content">
       <h2>Another Bullet Title</h2>
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, minus, blanditiis, voluptatibus nulla quia ipsam sequi quos iusto aliquam iste magnam accusamus molestias quo illum.</p>
     </div>
-  </div>
-  <div class="bullet three-col-bullet">
+  </li>
+  <li class="bullet three-col-bullet">
     <div class="bullet-icon bullet-icon-3">
-      <img src="https://raw.github.com/Magnus-G/Random/master/placeholder_logo_4.png" alt="">
+      <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_4.png" alt="">
     </div>
     <div class="bullet-content">
       <h2>Last Bullet Title</h2>
       <p>Lorem ipsum sit amet consectetur adipisicing elit. Doloremque, minus, blanditiis, voluptatibus nulla quia ipsam sequi quos iusto aliquam iste magnam accusamus molestias quo illum impedit. Odit officia autem.</p>
     </div>
-  </div> 
-</div>
+  </li> 
+</ul>

data/source/{_image-gradient-dynamic.html.erb → _image_gradient_dynamic.html.erb}

@@ -1,7 +1,7 @@
 <div class="image-gradient-dynamic">
-  <img src="http://organicclimber.com/wp-content/uploads/2012/06/EmeraldLake.jpg" alt="">
+  <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png" alt="">
+  <div class="overlay"></div>
   <div class="copy">
     <p>Dynamic height container</p>
   </div>
-  <div class="overlay"></div>
 </div>

data/source/_maps.html.erb

@@ -0,0 +1,74 @@
+<!--
+Add the code below to the bottom of your page, just before the closing </body> tag.
+Edit myLatlng and the other variables.
+
+Find syntax for Features that can be styled here:
+
+https://developers.google.com/maps/documentation/javascript/reference#MapTypeStyleFeatureType
+
+Or use a service such as:
+
+http://software.stadtwerk.org/google_maps_colorizr/#
+http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
+https://developers.google.com/maps/documentation/javascript/tutorial
+-->
+
+<!--
+<script src="https://maps.googleapis.com/maps/api/js"></script>
+<script>
+  var bittersMap = (function () {
+    var myLatlng = new google.maps.LatLng(59.342457, 18.057340),
+        mapCenter = new google.maps.LatLng(59.340458, 18.057340),
+        mapCanvas = document.getElementById('map_canvas'),
+        mapOptions = {
+          center: mapCenter,
+          zoom: 13,
+          scrollwheel: false,
+          draggable: true,
+          disableDefaultUI: true,
+          mapTypeId: google.maps.MapTypeId.ROADMAP
+        },
+        map = new google.maps.Map(mapCanvas, mapOptions),
+        contentString =
+          '<div id="content">'+
+          '<div id="siteNotice">'+
+          '</div>'+
+          '<h1 id="firstHeading" class="firstHeading">thoughtbot</h1>'+
+          '<div id="bodyContent"'+
+          '<p>Sveavägen 98</p>'+
+          '</div>'+
+          '</div>',
+        infowindow = new google.maps.InfoWindow({
+          content: contentString,
+          maxWidth: 300
+        }),
+        marker = new google.maps.Marker({
+          position: myLatlng,
+          map: map,
+          title: 'thoughtbot (Sweden)'
+        });
+
+    return {
+      init: function () {
+        map.set('styles', [{
+          featureType: 'landscape',
+          elementType: 'geometry',
+          stylers: [
+            { hue: '#ffff00' },
+            { saturation: 30 },
+            { lightness: 10}
+          ]}
+        ]);
+
+        google.maps.event.addListener(marker, 'click', function () {
+          infowindow.open(map,marker);
+        });
+      }
+    };
+  }());
+
+  bittersMap.init();
+</script>
+-->
+
+<div id="map_canvas"></div>

data/source/_modal.html.erb

@@ -1,14 +1,14 @@
 <div class="modal">
   <label for="modal-1">
-    <div class="btn js-btn">Click for Modal</div>
+    <div class="modal-trigger">Click for Modal</div>
   </label>
   <input class="modal-state" id="modal-1" type="checkbox" />
   <div class="modal-window">
     <div class="modal-inner">
       <label class="modal-close" for="modal-1"></label>
       <h1>Modal Title</h1>
-      <p class="intro">Intro text lorem ipsum dolor sit ametm, quas, eaque facilis aliquid cupiditate tempora cumque ipsum accusantium illo modi commodi  minima.</p>
-      <p class="body">Body text lorem ipsum dolor ipsum dolor sit sit possimus amet, consectetur adipisicing elit. Itaque, placeat, explicabo, veniam quos aperiam molestias eriam molestias molestiae suscipit ipsum enim quasi sit possimus quod atque nobis voluptas earum odit accusamus quibusdam.</p>
+      <p class="modal-intro">Intro text lorem ipsum dolor sit ametm, quas, eaque facilis aliquid cupiditate tempora cumque ipsum accusantium illo modi commodi  minima.</p>
+      <p class="modal-content">Body text lorem ipsum dolor ipsum dolor sit sit possimus amet, consectetur adipisicing elit. Itaque, placeat, explicabo, veniam quos aperiam molestias eriam molestias molestiae suscipit ipsum enim quasi sit possimus quod atque nobis voluptas earum odit accusamus quibusdam. Body text lorem ipsum dolor ipsum dolor sit sit possimus amet.</p>
     </div>
   </div>
 </div>

data/source/_navigation.html.erb

@@ -1,11 +1,11 @@
-<header class="navigation">
-  <div class="menu-wrapper">
+<header class="navigation" role="banner">
+  <div class="navigation-wrapper">
     <a href="javascript:void(0)" class="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">
     </a>
-    <p class="navigation-menu-button" id="js-mobile-menu">MENU</p>
-    <div class="nav">
-      <ul id="navigation-menu">
+    <a href="javascript:void(0)" class="navigation-menu-button" id="js-mobile-menu">MENU</a>
+    <nav role="navigation">
+      <ul id="js-navigation-menu" class="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>
@@ -13,47 +13,32 @@
           <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>
-        
       </ul>
-    </div>
+    </nav>
     <div class="navigation-tools">
       <div class="search-bar">
-        <div class="search-and-submit">
+        <form role="search">
           <input type="search" placeholder="Enter Search" />
           <button type="submit">
-            <img src="https://raw.githubusercontent.com/Magnus-G/Random/master/search-icon.png" alt="">
+            <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/search-icon.png" alt="Search Icon">
           </button>
-        </div>
+        </form>
       </div>
       <a href="javascript:void(0)" class="sign-up">Sign Up</a>
     </div>
   </div>
 </header>
-
-<script>
-  $(function() {
-    var menu = $('#navigation-menu');
-    var menuToggle = $('#js-mobile-menu');
-    var signUp = $('.sign-up');
-
-    $(menuToggle).on('click', function(e) {
-      e.preventDefault();
-      menu.slideToggle(function(){
-        if(menu.is(':hidden')) {
-          menu.removeAttr('style');
-        }
-      });
-    });
-
-    // underline under the active nav item
-    $(".nav .nav-link").click(function() {
-      $(".nav .nav-link").each(function() {
-        $(this).removeClass("active-nav-item");
-      });
-      $(this).addClass("active-nav-item"); 
-      $(".nav .more").removeClass("active-nav-item");
-    });
-  });
-</script>

data/source/_pagination.html.erb

@@ -0,0 +1,17 @@
+<div class="pagination">
+  <ul>
+    <li class="page-prev"><a href="javascript:void(0)">Prev</a></li>
+    <li>
+      <ul>
+        <li><a href="javascript:void(0)">1</a></li>
+        <li><a href="javascript:void(0)">2</a></li>
+        <li><a href="javascript:void(0)">3</a></li>
+        <li><a href="javascript:void(0)">4</a></li>
+        <li><a href="javascript:void(0)">5</a></li>
+        <li><a href="javascript:void(0)">6</a></li>
+        <li><a href="javascript:void(0)">7</a></li>
+      </ul>
+    </li>
+    <li class="page-next"><a href="javascript:void(0)">Next</a></li>
+  </ul>
+</div>

data/source/_parallax.html.erb

@@ -0,0 +1,6 @@
+<div id="js-parallax-window" class="parallax-window">
+  <div class="parallax-static-content">
+    <b>Parallax Window</b>
+  </div>
+  <div id="js-parallax-background" class="parallax-background"></div>
+</div>

data/source/_ribbon.html.erb

@@ -0,0 +1,5 @@
+<div class="ribbon-box">
+  <div class="ribbon-wrapper">
+    <div class="ribbon">Ribbon</div>
+  </div>
+</div>

data/source/_scroll_on_page.html.erb

@@ -0,0 +1,24 @@
+<div class="scroll-on-page">
+  <aside id="scroll-on-page-top">
+    <a class="scroll-on-page-link" href="#scroll-link-1">First Scroll Link</a>
+    <a class="scroll-on-page-link" href="#scroll-link-2">Second Link</a>
+    <a class="scroll-on-page-link" href="#scroll-link-3">Last Link</a>
+  </aside>
+
+  <article>
+    <section>
+      <h4 id="scroll-link-1">First Target</h4>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum aliquid necessitatibus, repudiandae veniam labore, consequatur maiores dolore unde non deleniti, aliquam minima ex nulla error eveniet vel tempore, in incidunt?</p>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum aliquid necessitatibus, repudiandae veniam labore, consequatur maiores dolore unde non deleniti, aliquam minima ex nulla error eveniet vel tempore, in incidunt? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum aliquid necessitatibus, repudiandae veniam labore, consequatur maiores dolore unde non deleniti, aliquam minima ex nulla error eveniet vel tempore, in incidunt?</p>
+    </section>
+    <section>
+      <h4 id="scroll-link-2">Second Target</h4>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum aliquid necessitatibus, repudiandae veniam labore, consequatur maiores dolore unde non deleniti, aliquam minima ex nulla error eveniet vel tempore, in incidunt?</p>
+    </section>
+    <section>
+      <h4 id="scroll-link-3">Last Target</h4>
+      <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum aliquid necessitatibus, repudiandae veniam labore, consequatur maiores dolore unde non deleniti, aliquam minima ex nulla error eveniet vel tempore, in incidunt? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum aliquid necessitatibus, repudiandae veniam labore, consequatur maiores dolore unde non deleniti, aliquam minima ex nulla error eveniet vel tempore, in incidunt? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum aliquid necessitatibus, repudiandae veniam labore, consequatur maiores dolore unde non deleniti, aliquam minima ex nulla error eveniet vel tempore, in incidunt?</p>
+      <a class="scroll-on-page-link" href="#scroll-on-page-top">Back to top</a>
+    </section>
+  </article>
+</div>

data/source/_search_bar.html.erb

@@ -0,0 +1,6 @@
+<form class="search-bar" role="search">
+  <input type="search" placeholder="Enter Search" />
+  <button type="submit">
+    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/search-icon.png" alt="Search Icon">
+  </button>
+</form>

data/source/_search_tools.html.erb

@@ -0,0 +1,58 @@
+<div class="search-tools">
+  <div class="filter">
+    <label>Colors</label>
+    <div>
+      <ol>
+        <li>
+          <input id="red" type="checkbox">
+          <label for="red">Red</label>
+        </li>
+        <li>
+          <input id="green" type="checkbox">
+          <label for="green">Green</label>
+        </li>
+        <li>
+          <input id="blue" type="checkbox">
+          <label for="blue">Blue</label>
+        </li>
+      </ol>
+    </div>
+  </div>
+  <div class="filter">
+    <label>Sizes</label>
+    <div>
+      <ol>
+        <li>
+          <input id="small" type="checkbox">
+          <label for="small">Small</label>
+        </li>
+        <li>
+          <input id="medium" type="checkbox">
+          <label for="medium">Medium</label>
+        </li>
+        <li>
+          <input id="large" type="checkbox">
+          <label for="large">Large</label>
+        </li>
+      </ol>
+    </div>
+  </div>
+  <div class="filter">
+    <label>Lengths</label>
+    <div>
+      <ol>
+        <li>
+          <input id="short" type="checkbox">
+          <label for="short">Short</label>
+        </li>
+        <li>
+          <input id="long" type="checkbox">
+          <label for="long">Long</label>
+        </li>
+      </ol>
+    </div>
+  </div>
+  <div class="trigger">
+    <button>Update</button>
+  </div>
+</div>

data/source/_side_image.html.erb

@@ -0,0 +1,10 @@
+<div class="side-image">
+  <div class="images-wrapper"></div>
+    <div class="side-image-content">
+      <h4>Topic Name</h4>
+      <h1>Message with a gradient image</h1>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam assumenda nihil suscipit obcaecati sit, cum quod corporis adipisci ipsam, fugiat, quae error. Eaque commodi, dicta quidem explicabo mollitia inventore quibusdam.
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam assumenda nihil suscipit obcaecati sit, cum quod corporis adipisci ipsam, fugiat, quae error. Eaque commodi, dicta quidem explicabo mollitia inventore quibusdam.</p>
+      <button>Read more</button>
+  </div>
+</div>

data/source/_sliding_menu.html.erb

@@ -0,0 +1,13 @@
+<button type="button" class="js-menu-trigger sliding-menu-button">
+  <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/menu-white.png" alt="Menu Icon">
+</button>
+
+<nav class="js-menu sliding-menu-content">
+  <ul>
+    <li><a href="javascript:void(0)">Item 1</a></li>
+    <li><a href="javascript:void(0)">Item 2</a></li>
+    <li><a href="javascript:void(0)">Item 3</a></li>
+  </ul>
+</nav>
+
+<div class="js-menu-screen sliding-menu-fade-screen"></div>

data/source/_snippet.html.erb

@@ -1,4 +1,13 @@
-<div class="snippet">
-  <a href="#" class="copy-source">Copy</a>
+<td class="snippet">
+  <div class="copy-source-container">
+    <% if language == :javascript -%>
+      <a href="javascript:void(0)" class="copy-source">Copy JavaScript</a>
+      <a href="javascript:void(0)" class="copy-source copy-coffee">Copy CoffeeScript</a>
+    <% elsif language == :markup -%>
+      <a href="javascript:void(0)" class="copy-source">Copy HTML</a>
+    <% else -%>
+      <a href="javascript:void(0)" class="copy-source">Copy Scss</a>
+    <% end -%>
+  </div>
   <pre><code class="language-<%= language %>"><%== snippet %></code></pre>
-</div>
+</td>

data/source/_stats.html.erb

@@ -0,0 +1,8 @@
+<div class="stats">
+  <ul>
+    <li>98<span>Items</span></li>
+    <li>298<span>Things</span></li>
+    <li>923<span>Objects</span></li>
+    <li>98<span>More</span></li>
+  </ul>
+</div>

data/source/_switch.html.erb

@@ -1,7 +1,4 @@
-<div class="switch-container">
-  <input type="checkbox" id="switch-toggle-1" name="switch-toggle" class="switch-checkbox" checked/>
-  <label class="switch-label" for="switch-toggle-1">
-    <div class="switch-inner"></div>
-    <div class="switch-toggle-switch"></div>
-  </label>
-</div>
+<label class="label-switch">
+  <input type="checkbox" />
+  <div class="checkbox"></div>
+</label>