refills 0.0.1 → 0.0.2

data/source/_comment.html.erb

@@ -0,0 +1,21 @@
+<div class="comment">
+  <div class="comment-image">
+    <img src="https://raw.github.com/Magnus-G/Random/master/placeholder_logo_1.png" alt="">
+  </div>
+  <div class="comment-content">
+    <h1>First Comment Title or Author</h1>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, aspernatur, quia modi minima debitis tempora ducimus quam vero impedit alias earum nemo error tenetur sed.</p>
+    <p class="comment-detail">Date or details about this post</p>
+  </div>
+</div>
+
+<div class="comment">
+  <div class="comment-image">
+    <img src="https://raw.github.com/Magnus-G/Random/master/placeholder_logo_2.png" alt="">
+  </div>
+  <div class="comment-content">
+    <h1>Another One</h1>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, aspernatur, quia modi minima debitis tempora ducimus quam vero impedit alias earum nemo error tenetur sed.</p>
+    <p class="comment-detail">Date or details about this post</p>
+  </div>
+</div>

data/source/_footer-2.html.erb

@@ -0,0 +1,29 @@
+<footer class="footer-2">
+  <div class="footer-logo">
+    <img src="https://raw.github.com/Magnus-G/Random/master/placeholder_logo_1.png" alt="">
+  </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/Magnus-G/Random/master/facebook-logo-circle.png" alt="">
+          </a></li>
+        <li><a href="javascript:void(0)">
+          <img src="https://raw.githubusercontent.com/Magnus-G/Random/master/twitter-logo-circle.png" alt="">
+        </a></li>
+        <li><a href="javascript:void(0)">
+          <img src="https://raw.githubusercontent.com/Magnus-G/Random/master/youtube-logo-circle.png" alt="">
+        </a></li>
+      </ul>
+    </div>
+</footer>

data/source/_footer.html.erb

@@ -1,29 +1,28 @@
-<div class="footer">
-	<div class="footer-inner">
-		<div class="footer-links">
-			<ul>
-				<li><a href="">About</a></li>
-				<li><a href="">Contact</a></li>
-				<li><a href="">Products</a></li>
-				<li><a href="">Login</a></li>
-			</ul>
-			<ul>
-				<li><a href="">Facebook</a></li>
-				<li><a href="">Twitter</a></li>
-				<li><a href="">YouTube</a></li>
-				<li><a href="">Vimeo</a></li>
-			</ul>
-			<ul>
-				<li><a href="">Terms and Conditions</a></li>
-				<li><a href="">Privacy Policy</a></li>
-				<li>
-					<a href="">&#10081;</a>
-				</li>
-			</ul>
-		</div>
+<footer class="footer">
+  <div class="footer-logo">
+    <img src="https://raw.github.com/Magnus-G/Random/master/placeholder_logo_1.png" alt="">
+  </div>
+  <div class="footer-links">
+    <ul>
+      <li><h3>Content</h3></li>
+      <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>
+    <ul>
+      <li><h3>Follow Us</h3></li>
+      <li><a href="javascript:void(0)">Facebook</a></li>
+      <li><a href="javascript:void(0)">Twitter</a></li>
+      <li><a href="javascript:void(0)">YouTube</a></li>
+    </ul>
+    <ul>
+      <li><h3>Legal</h3></li>
+      <li><a href="javascript:void(0)">Terms and Conditions</a></li>
+      <li><a href="javascript:void(0)">Privacy Policy</a></li>
+    </ul>
+  </div>
 
-		<hr>
+  <hr>
 
-		<p>Refills is Copyright © 2013 thoughtbot. It is free software, and may be redistributed under the terms specified in the LICENSE file.</p>
-	</div>
-</div>
+  <p>Disclaimer area lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, nostrum repudiandae saepe.</p>
+</footer>

data/source/_grid-items-lines.html.erb

@@ -0,0 +1,44 @@
+<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="">
+    <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="">
+    <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="">
+    <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="">
+    <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="">
+    <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="">
+    <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="">
+    <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="">
+    <h1>Last Grid Item</h1>
+    <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
+  </a>
+  <div class="right-cover"></div>
+  <div class="bottom-cover"></div>
+</div>

data/source/_grid-items.html.erb

@@ -0,0 +1,37 @@
+<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="">
+    <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="">
+    <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="">
+    <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="">
+    <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="">
+    <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="">
+    <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="">
+    <h1>Item</h1>
+    <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
+  </a>
+</div>

data/source/_hero.html.erb

@@ -1,11 +1,10 @@
 <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>
 		<div class="hero-copy">
-			<h1>Lorem ipsum dolor sit amet</h1>
-			<h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, et, eos deleniti molestias officiis sequi praesentium placeat omnis </h6>	
-			<button>Call to Action</button>
-		</div>
-		<div class="hero-image">
+			<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>	
 		</div>
+    <button>Learn More</button>
 	</div>
 </div>

data/source/_hover-tile-animation.html.erb

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

data/source/_icon-bullet-points.html.erb

@@ -0,0 +1,29 @@
+<div class="bullets">
+  <div 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="">
+    </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">
+    <div class="bullet-icon bullet-icon-2">
+      <img src="https://raw.github.com/Magnus-G/Random/master/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">
+    <div class="bullet-icon bullet-icon-3">
+      <img src="https://raw.github.com/Magnus-G/Random/master/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>

data/source/_image-gradient-dynamic.html.erb

@@ -0,0 +1,7 @@
+<div class="image-gradient-dynamic">
+  <img src="http://organicclimber.com/wp-content/uploads/2012/06/EmeraldLake.jpg" alt="">
+  <div class="copy">
+    <p>Dynamic height container</p>
+  </div>
+  <div class="overlay"></div>
+</div>

data/source/_image-gradient.html.erb

@@ -0,0 +1,6 @@
+  <div class="image-gradient">
+    <div class="copy">
+    <p>Fixed height container</p>
+    </div>
+    <div class="overlay"></div>
+  </div>

data/source/_modal.html.erb

@@ -1,34 +1,14 @@
 <div class="modal">
-  <label for="modal-matt">
+  <label for="modal-1">
     <div class="btn js-btn">Click for Modal</div>
   </label>
-  <input class="modal-state" id="modal-matt" type="checkbox" />
+  <input class="modal-state" id="modal-1" type="checkbox" />
   <div class="modal-window">
-    <label class="modal-bg" for="modal-matt"></label>
     <div class="modal-inner">
-      <label class="modal-close" for="modal-matt"></label>
-      <div class="img-wrapper-modal">
-        <img src="" alt="">
-      </div>
+      <label class="modal-close" for="modal-1"></label>
       <h1>Modal Title</h1>
-      <p class="intro">Intro text lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, nam, quas, eaque facilis aliquid cupiditate tempora cumque ipsum accusantium illo modi commodi ullam. Officia, qui corporis nobis dolor temporibus minima.</p>
-      <p class="body">Body text lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, placeat, explicabo, veniam quos aperiam molestias molestiae suscipit ipsum enim quasi sit possimus quod atque nobis voluptas earum odit accusamus quibusdam. lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, placeat, explicabo, veniam quos aperiam molestias molestiae suscipit ipsum enim quasi sit possimus quod atque nobis voluptas earum odit accusamus quibusdam.</p>
+      <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>
     </div>
   </div>
 </div>
-
-<script>
-  $(document).ready(function () {
-    $('.modal').find('.js-btn').on('click', function() {
-      $(document.body).addClass('modal-open');
-    });
-
-    $('.modal-close').on('click', function() {
-      $(document.body).removeClass('modal-open');
-    })
-
-    $('.modal-bg').on('click', function() {
-      $(document.body).removeClass('modal-open');
-    })
-  })
-</script>

data/source/_navigation.html.erb

@@ -1,28 +1,42 @@
 <header class="navigation">
   <div class="menu-wrapper">
-    <div class="logo">Logo</div>
-    <p id="js-mobile-menu">MENU</p>
+    <a href="javascript:void(0)" class="logo">
+      <img src="https://raw.github.com/Magnus-G/Random/master/placeholder_logo_1.png" alt="">
+    </a>
+    <p class="navigation-menu-button" id="js-mobile-menu">MENU</p>
     <div class="nav">
-      <ul id="navigation">
-        <li><a href="">Item 1</a></li>
-        <li><a href="">Item 2</a></li>
-        <li><a href="">Item 3</a></li>
-        <li><a href="">Item 4</a></li>
-        <li><a href="">Item 5</a></li>
+      <ul id="navigation-menu">
+        <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 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>
+          </ul>
+        </li>
+        
       </ul>
     </div>
-    <ul class="nav-button">
-      <li><a href="">Nav Button</a></li>
-    </ul>
+    <div class="navigation-tools">
+      <div class="search-bar">
+        <div class="search-and-submit">
+          <input type="search" placeholder="Enter Search" />
+          <button type="submit">
+            <img src="https://raw.githubusercontent.com/Magnus-G/Random/master/search-icon.png" alt="">
+          </button>
+        </div>
+      </div>
+      <a href="javascript:void(0)" class="sign-up">Sign Up</a>
+    </div>
   </div>
 </header>
 
-
-
 <script>
   $(function() {
-    var menu = $('#navigation');
+    var menu = $('#navigation-menu');
     var menuToggle = $('#js-mobile-menu');
+    var signUp = $('.sign-up');
 
     $(menuToggle).on('click', function(e) {
       e.preventDefault();
@@ -32,5 +46,14 @@
         }
       });
     });
+
+    // 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>
+</script>

data/source/_progress-bar-indication.html.erb

@@ -0,0 +1,5 @@
+<div class="progress-bar-indication">
+  <span class="meter" style="width: 60%">
+    <p>60%</p>
+  </span>
+</div>

data/source/_search-bar.html.erb

@@ -1,8 +1,8 @@
-<div class="search-bar">
-  <div class="search-item">
+  <div class="search-bar">
     <div class="search-and-submit">
       <input type="search" placeholder="Enter Search" />
-      <input type="submit" value="Search">
+      <button type="submit">
+        <img src="https://raw.githubusercontent.com/Magnus-G/Random/master/search-icon-black.png" alt="">
+      </button>
     </div>
   </div>
-</div>

data/source/_sliding-menu.html.erb

@@ -1,20 +1,30 @@
-<div class="sliding-menu-moving-content">
-  <a class="sliding-menu-trigger menu-anchor">Click for Sliding Menu</a>
-</div>
+<button type="button" class="js-menu-trigger sliding-menu-button">
+  <img src="images/menu.png" alt="">
+</button>
 
-<menu class="sliding-menu-content">
+<nav class="js-menu sliding-menu-content">
   <ul>
-    <li><a href="#">Item 1</a></li>
-    <li><a href="#">Item 2</a></li>
-    <li><a href="#">Item 3</a></li>
+    <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>
-</menu>
+</nav>
+
+<div class="js-menu-screen menu-screen"></div>
 
 <script>
   $(document).ready(function(){
-    $('.menu-anchor').on('click touchstart', function(e){
-      $('html').toggleClass('menu-active');
-        e.preventDefault();
+
+    $('.js-menu-trigger').on('click touchstart', function(e){
+      $('.js-menu').toggleClass('is-visible');
+      $('.js-menu-screen').toggleClass('is-visible');
+      e.preventDefault();
+    });
+
+    $('.js-menu-screen').on('click touchstart', function(e){
+      $('.js-menu').toggleClass('is-visible');
+      $('.js-menu-screen').toggleClass('is-visible');
+      e.preventDefault();
     });
-  })
-</script>
+  });
+</script>