refills 0.0.1

data/source/_badges.html.erb

@@ -0,0 +1,5 @@
+<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>

data/source/_breadcrumbs.html.erb

@@ -0,0 +1,8 @@
+<div class="breadcrumb">
+  <a href="#">One</a>
+  <a href="#">Two</a>
+  <a href="#">Three</a>
+  <a href="#">Four</a>
+  <a href="#">Five</a>
+  <a href="#">Six</a>
+</div>

data/source/_button-group.html.erb

@@ -0,0 +1,7 @@
+<div class="button-group">
+  <button class="active">Item</button>
+  <button>Item</button>
+  <button>Item</button>
+  <button>Item</button>
+  <button>Item</button>
+</div>

data/source/_cards.html.erb

@@ -0,0 +1,26 @@
+<div class="cards">
+  <div class="card">
+    <div class="card-header">
+      Header
+    </div>
+    <div class="card-content">
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, officiis sunt neque facilis culpa molestiae necessitatibus delectus veniam provident. Similique, quibusdam inventore necessitatibus perspiciatis voluptatum error dolor eaque exercitationem fugit.</p>
+    </div>
+  </div>
+  <div class="card">
+    <div class="card-header">
+      Header
+    </div>
+    <div class="card-content">
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, officiis sunt neque facilis culpa molestiae necessitatibus delectus veniam provident. Similique, quibusdam inventore necessitatibus perspiciatis voluptatum error dolor eaque exercitationem fugit.</p>
+    </div>
+  </div>
+  <div class="card">
+    <div class="card-header">
+      Header
+    </div>
+    <div class="card-content">
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, officiis sunt neque facilis culpa molestiae necessitatibus delectus veniam provident. Similique, quibusdam inventore necessitatibus perspiciatis voluptatum error dolor eaque exercitationem fugit.</p>
+    </div>
+  </div>
+</div>

data/source/_dashboard.html.erb

@@ -0,0 +1,18 @@
+<div class="dashboard">
+	<div class="dashboard-item">
+		<h1>97<span>%</span></h1>
+		<p>Lorem sit amet</p>
+	</div>
+	<div class="dashboard-item">
+		<h1><span>$</span>3,234</h1>
+		<p>Lorem dolor sit amet</p>
+	</div>
+	<div class="dashboard-item">
+		<h1>97<span>%</span></h1>
+		<p>Lorem ipsum dolor sit amet</p>
+	</div>
+	<div class="dashboard-item">
+		<h1>97<span>%</span></h1>
+		<p>Lorem ipsum dolor sit</p>
+	</div>
+</div>

data/source/_dropdown-menu.html.erb

@@ -0,0 +1,45 @@
+<section class="dropdown">
+  <div class="js-dropdown-link dropdown-link">Dropdown</div>
+  <div class="js-dropdown-menu dropdown-menu">
+    <ul>
+      <li>
+      <a href="#">Lettuce</a>
+      </li>
+      <li>
+      <a href="#">Tomato</a>
+      </li>
+      <li>
+      <a href="#">Onion</a>
+      </li>
+    </ul>
+  </div>
+</section>
+
+<script>
+  (function($) {
+    $.fn.clickToggle = function(func1, func2) {
+      var funcs = [func1, func2];
+      this.data('toggleclicked', 0);
+      this.click(function() {
+        var data = $(this).data();
+        var tc = data.toggleclicked;
+        $.proxy(funcs[tc], this)();
+        data.toggleclicked = (tc + 1) % 2;
+      });
+      return this;
+    };
+  }(jQuery));
+
+  $(document).ready(function () {
+    $('.js-dropdown-link').clickToggle(function() {
+      var menu = $(this).siblings('.js-dropdown-menu');
+      menu.css('top', $(this).outerHeight() + 15);
+      menu.fadeIn(150);
+      $(this).addClass("is-active");
+    }, function() {
+      var menu = $(this).siblings('.dropdown-menu');
+      menu.fadeOut(150);
+      $(this).removeClass("is-active");
+    });
+  });
+</script>

data/source/_footer.html.erb

@@ -0,0 +1,29 @@
+<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>
+
+		<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>

data/source/_hero.html.erb

@@ -0,0 +1,11 @@
+<div class="hero">
+	<div class="hero-inner">
+		<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">
+		</div>
+	</div>
+</div>

data/source/_html_snippet.html.erb

@@ -0,0 +1,5 @@
+<pre>
+  <code class="language-markup">
+    <%== partial snippet %>
+  </code>
+</pre>

data/source/_image-cards.html.erb

@@ -0,0 +1,28 @@
+<div class="image-cards">
+	<div class="image-card top">
+		<div class="image-wrapper">
+		</div>
+		<div class="image-card-content">
+		<h5>Header</h5>
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, officiis sunt neque facilis culpa molestiae necessitatibus delectus veniam provident. Similique, quibusdam inventore necessitatibus perspiciatis voluptatum error dolor eaque exercitationem fugit.</p>
+		</div>
+	</div>
+	<div class="image-card bottom">
+		<div class="image-card-content">
+		<div class="image-wrapper">
+		</div>
+		<h5>Header</h5>
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, officiis sunt neque facilis culpa molestiae necessitatibus delectus veniam provident. Similique, quibusdam inventore necessitatibus perspiciatis voluptatum error dolor eaque exercitationem fugit.</p>
+		</div>
+
+	</div>
+	<div class="image-card left">
+		<div class="image-wrapper">
+		</div>
+		<div class="image-card-content">
+		<h5>Header</h5>
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, officiis sunt neque facilis culpa molestiae necessitatibus delectus veniam provident. Similique, quibusdam inventore necessitatibus perspiciatis voluptatum error dolor eaque exercitationem fugit.</p>
+		</div>
+	</div>
+
+</div>

data/source/_info-section.html.erb

@@ -0,0 +1,25 @@
+<div class="info-section">
+	<ul>
+		<li>
+			<div class="img-wrapper">
+				<img src="" alt="">
+			</div>
+			<h3>Lorem</h3>
+			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, cum, placeat obcaecati itaque nobis esse numquam eos tenetur rerum ipsa nam commodi blanditiis ab voluptas a assumenda eveniet modi mollitia.</p>
+		</li>
+		<li>
+			<div class="img-wrapper">
+				<img src="" alt="">
+			</div>
+			<h3>Lorem</h3>
+			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam, aliquam, quaerat facilis nisi culpa quia fugit hic doloribus tenetur perspiciatis tempora labore ullam at. Sapiente porro enim est fuga repudiandae?</p>
+		</li>
+		<li>
+			<div class="img-wrapper">
+				<img src="" alt="">
+			</div>
+			<h3>Lorem</h3>
+			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, nihil nisi sequi eaque voluptate quaerat maiores quibusdam inventore ea magni praesentium asperiores odio assumenda totam corporis cupiditate odit labore unde.</p>
+		</li>
+	</ul>
+</div>

data/source/_item-list.html.erb

@@ -0,0 +1,25 @@
+<ul class="item-list">  		
+	<li>
+		<div class="item-list-image"></div>
+			<h5><a href="">Title</a></h5>
+			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem explicabo possimus qui nesciunt. Ipsa, tempora, et mollitia quam dolores magnam temporibus necessitatibus quisquam ad repellendus natus facere voluptates quasi commodi.</p>
+	</li>
+
+	<li>
+		<div class="item-list-image"></div>
+			<h5><a href="">Title</a></h5>
+			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, nisi, necessitatibus ipsam et quis blanditiis quos mollitia suscipit reiciendis totam aspernatur molestias officiis natus aperiam minus molestiae quod quibusdam ab?</p>
+	</li>
+
+	<li>
+		<div class="item-list-image"></div>
+			<h5><a href="">Title</a></h5>
+			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, consequatur, ipsam, quidem dolorum sint placeat deserunt natus nesciunt officiis hic architecto omnis obcaecati minus optio ut. Necessitatibus ullam qui hic!</p>
+	</li>
+
+	<li>
+		<div class="item-list-image"></div>
+			<h5><a href="">Title</a></h5>
+			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam, sit, vel, sequi dolorum tempora quo velit saepe provident accusamus veniam maxime at cumque excepturi debitis natus eius consequuntur cum inventore!</p>
+	</li>	  		
+</ul>

data/source/_master-detail.html.erb

@@ -0,0 +1,35 @@
+<div class="master-detail">
+	<div class="master">
+		<ul>
+			<li>
+				<h5>Master item 1</h5>
+				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, officiis, tempora hic quasi excepturi architecto voluptatibus repellendus dolore cumque ipsum fugit minima eaque doloremque facere corrupti beatae deserunt velit est!</p>
+			</li>
+			<li>
+				<h5>Master item 2</h5>
+				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas nemo ea officia dignissimos quo vero iure! Quasi, mollitia, esse placeat distinctio asperiores aspernatur quibusdam quas tempore illo debitis quis perferendis!</p>
+			</li>
+			<li>
+				<h5>Master item 3</h5>
+				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat porro quis numquam quod. Animi, quam, ducimus, nostrum, consectetur soluta a nulla in earum modi tempora iure temporibus perferendis dignissimos rem.</p>
+			</li>
+			<li>
+				<h5>Master item 4</h5>
+				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, laboriosam, minus, accusantium excepturi vero quisquam possimus assumenda corrupti aliquid dignissimos est dolor dicta nihil quia dolorum sed reprehenderit rerum quo.</p>
+			</li>
+			<li>
+				<h5>Master item 5</h5>
+				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, natus, consequatur odit suscipit tempore repellat voluptas labore fugit ipsam dolores iusto praesentium dignissimos sunt doloribus incidunt deleniti adipisci pariatur eos.</p>
+			</li>
+			<li>
+				<h5>Master item 6</h5>
+				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, aperiam recusandae magnam sunt vitae eligendi magni unde repudiandae ab voluptate labore tempore iure pariatur numquam soluta rem temporibus explicabo vel.</p>
+			</li>
+		</ul>	
+	</div>
+	<div class="detail">
+		<h3>Master item 10</h3>
+		<br>
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, laudantium corporis dolorum natus architecto nisi praesentium accusantium dignissimos dolor totam voluptatum molestias nostrum autem soluta delectus alias quisquam ullam recusandae.</p>
+	</div>
+</div>

data/source/_modal.html.erb

@@ -0,0 +1,34 @@
+<div class="modal">
+  <label for="modal-matt">
+    <div class="btn js-btn">Click for Modal</div>
+  </label>
+  <input class="modal-state" id="modal-matt" 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>
+      <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>
+    </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

@@ -0,0 +1,36 @@
+<header class="navigation">
+  <div class="menu-wrapper">
+    <div class="logo">Logo</div>
+    <p 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>
+    </div>
+    <ul class="nav-button">
+      <li><a href="">Nav Button</a></li>
+    </ul>
+  </div>
+</header>
+
+
+
+<script>
+  $(function() {
+    var menu = $('#navigation');
+    var menuToggle = $('#js-mobile-menu');
+
+    $(menuToggle).on('click', function(e) {
+      e.preventDefault();
+      menu.slideToggle(function(){
+        if(menu.is(':hidden')) {
+          menu.removeAttr('style');
+        }
+      });
+    });
+  });
+</script>

data/source/_overlap.html.erb

@@ -0,0 +1,9 @@
+<div class="overlap">
+  <div class="overlap-content">
+    <div class="overlap-content-centered">  
+    </div>
+  </div>
+</div>
+
+<div class="overlapped">
+</div>

data/source/_progress-bar.html.erb

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

data/source/_search-bar.html.erb

@@ -0,0 +1,8 @@
+<div class="search-bar">
+  <div class="search-item">
+    <div class="search-and-submit">
+      <input type="search" placeholder="Enter Search" />
+      <input type="submit" value="Search">
+    </div>
+  </div>
+</div>

data/source/_sidebar-layout.html.erb

@@ -0,0 +1,28 @@
+<div class="sidebar-layout">
+	<aside>
+		<ul>
+			<li>Sidebar Item 1</li>
+			<li>Sidebar Item 2</li>
+			<li>Sidebar Item 3</li>
+			<li>Sidebar Item 4</li>
+			<li>Sidebar Item 5</li>
+			<li>Sidebar Item 1</li>
+			<li>Sidebar Item 2</li>
+			<li>Sidebar Item 2</li>
+		</ul>
+	</aside>
+	<div class="content">
+		<section>
+			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, autem, ipsam, suscipit, eligendi exercitationem nulla tenetur voluptates quos earum itaque tempore a mollitia optio nemo error quisquam reiciendis distinctio amet.
+		</section>
+		<section>
+			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, autem, ipsam, suscipit, eligendi exercitationem nulla tenetur voluptates quos earum itaque tempore a mollitia optio nemo error quisquam reiciendis distinctio amet.
+		</section>
+		<section>
+			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, autem, ipsam, suscipit, eligendi exercitationem nulla tenetur voluptates quos earum itaque tempore a mollitia optio nemo error quisquam reiciendis distinctio amet.
+		</section>
+		<section>
+			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, autem, ipsam, suscipit, eligendi exercitationem nulla tenetur voluptates quos earum itaque tempore a mollitia optio nemo error quisquam reiciendis distinctio amet.
+		</section>
+	</div>
+</div>

data/source/_sliding-menu.html.erb

@@ -0,0 +1,20 @@
+<div class="sliding-menu-moving-content">
+  <a class="sliding-menu-trigger menu-anchor">Click for Sliding Menu</a>
+</div>
+
+<menu class="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>
+  </ul>
+</menu>
+
+<script>
+  $(document).ready(function(){
+    $('.menu-anchor').on('click touchstart', function(e){
+      $('html').toggleClass('menu-active');
+        e.preventDefault();
+    });
+  })
+</script>

data/source/_snippet.html.erb

@@ -0,0 +1,5 @@
+<a href="#" class="js-show-code">Show code</a>
+<a href="#" class="js-hide-code">Hide code</a>
+
+<%= html_snippet snippet %>
+<%= stylesheet_snippet snippet %>

data/source/_stylesheet_snippet.html.erb

@@ -0,0 +1,7 @@
+<pre>
+  <code class='language-scss'>
+    <% File.readlines(file_path).each do |line| %>
+      <%= line.chomp %>
+    <% end %>
+  </code>
+</pre>