refills 0.0.1 → 0.0.2

checksums.yaml

@@ -1,15 +1,7 @@
 ---
-!binary "U0hBMQ==":
-  metadata.gz: !binary |-
-    ZDAzN2Y2ZjUyZTYxNTU3NmI0MDY4OTQ1MzQwMDhjNGUyNjE5ODFmOA==
-  data.tar.gz: !binary |-
-    NjA4ODg4NDAwMTk0MjZmNWZiZDhhNGVmNmYxM2U5MzEzZDA5N2M4MA==
-!binary "U0hBNTEy":
-  metadata.gz: !binary |-
-    YzZhYmMzMjI1MjU2ZGExMGY1MzhhOWJkNTI1ZGU1MGIxZTU2YzQ3OWZmMzY2
-    NjVjNGE4YWYzNGU5MGExZjNiOTNlY2I3NmQ5MDg4MGMxOTA5NTk1NDk5ODRi
-    YTQ5ZTE5MDE5M2ViYWQ4ZDg0NTkwYTRhNzJkYzZiM2VhNWMwYWU=
-  data.tar.gz: !binary |-
-    ZThmMThiY2M5NmJkMDI1YmQxZmJlODVkMWYzYjVhYTIzMTNlN2VlYmNiZDg0
-    MzZjNTRlMDkxZWU2MDAyM2VmYzEwMGVlNjIwMDAyNGUzZGE3ODcxN2FiYTg0
-    MGY3M2IwMGNkOWYyYzVlZDNhOGI4NjRiZWU2MDQwNWU1NjBlNjU=
+SHA1:
+  metadata.gz: e8f585461e3904428122b7557bcf892e441ee2a2
+  data.tar.gz: da61d3234fc77682851be8510b525fdd8ae0dc6c
+SHA512:
+  metadata.gz: d5cd76b20751322f29bebb84daa095873c22c339d78cb54a0c7c8a784c2c729e82078b365b5144243c720bc0c9034bd60c4b30a17d77e7ebaa3faa2dcc74a26a
+  data.tar.gz: 609b48e8ab4feda91dbd524e6addaeeccbede4f0beb2b171c28b1f595be9aefbaeb8de7692782c211c82cb2b159277bb5c90ca43c2d0d8b4f51463569ef4561c

data/NEWS.md

@@ -0,0 +1,12 @@
+## HEAD
+
+## 0.0.2
+
+- Fix errors caused by missing generator dependency in list generator
+- Navigation refill: Keep search and sign up visible on mobile screens
+- Navigation refill: Add dropdown menu
+- Navigation refill: Add indication on currently selected nav item
+
+## 0.0.1
+
+- Initial release

data/README.md

@@ -1,11 +1,50 @@
-Refills
--------
+# Refills
+
+## Prepackaged patterns and components, built on top of Bourbon, Bitters, and Neat
+
+
+[Bourbon](http://bourbon.io/) provides Sass mixins and eliminates vendor prefixes, for faster CSS coding.
+
+[Neat](http://neat.bourbon.io/) provides a lightweight grid framework.
+
+[Bitters](http://bitters.bourbon.io/) provides basic variables and structure to a Bourbon/Neat project.
+
+[Refills](http://thoughtbot.github.io/refills/) provides "copy-paste" components and patterns based on Bourbon, Neat and Bitters.
 
-Copy-paste style components for any Bourbon/Neat/Bitters project.
 
 See examples and get the code snippets [here](http://thoughtbot.github.io/refills/)
 
-## Using with a Rails project
+# Installing Dependencies
+
+[Install Bourbon](http://bourbon.io/)
+
+[Install Neat](http://neat.bourbon.io/)
+
+[Install Bitters](http://bitters.bourbon.io/)
+
+
+Make sure the following lines in "_bitters.scss" are uncommented:
+
+```scss
+@import "neat-helpers"; // or "neat/neat-helpers" when not in Rails
+@import "grid-settings";
+```
+
+
+[Install jQuery](http://www.w3schools.com/jquery/jquery_install.asp) (if you are using any of the components/patterns that require Javascript. Javascript, when used, can be found at the bottom of the HTML file.)
+
+Click "Show Code" under the component/pattern you want in [Refills](http://thoughtbot.github.io/refills/) and paste it into your project. 
+If a component/pattern has javascript it is placed in the HTML.erb file. Feel free to place it somewhere else in your project.
+
+# Using Refills
+
+* Click the "Show Code" link under the component/pattern you want to copy to your project and use the "copy" buttons to get the code to your clipboard. 
+* If a component uses Javascript, that code will be included at the bottom of the HTML file.
+* Each component/pattern has a set of variables at the very top of its Scss file. These pull out the most important properties of the component/pattern to enable quick changes of color, size and general appearance. 
+
+
+#### Using Refills with a Rails project
+Refills can be used by simply copy-pasting components/patterns from the site but if you prefer adding them via rake tasks, follow these steps:
 
 Add gem to your Gemfile
 
@@ -20,7 +59,46 @@ Lists all the available snippets
 Copies partials to `app/views/refills` and stylesheets to
 `app/assets/stylesheets/refills`
 
+# Submitting components or patterns
+
+You are more than welcome to submit any component or pattern you can't find in the library, or feel free to send requests for content you'd like to see. When submitting a pull request, please think of these style guides:
+
+#### HTML.erb
+
+* Make sure that each component/pattern is independent of other components/patterns in the Refills library. There should be no dependencies between different components/patterns.
+
+#### Scss
+
+All components/pattern should be fully responsive and follow the [Neat examples](http://neat.bourbon.io/examples/).
+
+Avoid more than 2 levels of nesting for clarity and legibility of code.
+
+Try to use as little styling as possible. Use the styles that come with Bitters to keep everything consistent.
+
+Put media queries inline, don't separate them since that will create a lot of repetitions of class names. If needed, for the sake of clarity, create a specific variable for a media query if a certain breakpoint changes the component/pattern drastically:
+
+      $tab-mode: $medium-screen;
+      
+      @include media($tab-mode) { // $tab-mode is the same as $medium-screen here
+        border-radius: 0;
+      }
+
+Create variables for any color or size that might appear in a refill, Especially if it appears more than once in the component/pattern.
+
+Declare the variables inside of the component/pattern's class like below. Note that variables should be interdependent to enable quick restyling.
+
+    .card {
+      $card-border-color: $base-border-color;
+      $card-border: 1px solid $card-border-color;
+      $card-background: lighten($card-border-color, 10);
+      ...
+
+# Credits
+
+![thoughtbot](http://thoughtbot.com/images/tm/logo.png)
+
+Refills is maintained and funded by [thoughtbot, inc](http://thoughtbot.com/community). Whenever a code snippet is borrowed or inspired by existing code, we try to credit the original developer/designer in our source code. Let us know if you think we have missed to do this.
 
-## Other projects
+# License
 
-You will need to copy-paste from the [website](http://thoughtbot.github.io/refills/)
+Refills is Copyright © 2014 thoughtbot. It is free software, and may be redistributed under the terms specified in the LICENSE file.

data/config.rb

@@ -57,19 +57,23 @@ set :js_dir, 'javascripts'
 set :images_dir, 'images'
 
 helpers do
-  def snippet(snippet_name)
-    partial 'snippet', locals: { snippet: snippet_name }
+  def snippets(snippet_name)
+    partial 'snippets', locals: { snippet_name: snippet_name }
   end
 
   def html_snippet(partial_name)
-    partial 'html_snippet', locals: { snippet: partial_name }
+    snippet = partial(partial_name)
+
+    partial 'snippet', locals: { snippet: snippet, language: 'markup' }
   end
 
-  def stylesheet_snippet(snippet)
+  def stylesheet_snippet(snippet_name)
     source_dir = File.expand_path('../source', __FILE__)
-    snippet_filename = "_#{snippet}.scss"
+    snippet_filename = "_#{snippet_name}.scss"
     snippet_path = File.join(source_dir, 'stylesheets', 'refills', snippet_filename)
-    partial 'stylesheet_snippet', locals: { file_path: snippet_path }
+    snippet = File.read(snippet_path)
+
+    partial 'snippet', locals: { snippet: snippet, language: 'scss' }
   end
 end
 

data/lib/refills/import_generator.rb

@@ -1,3 +1,5 @@
+require 'rails/generators'
+
 module Refills
   class ImportGenerator < Rails::Generators::Base
     desc 'Copy refills'

data/lib/refills/list_generator.rb

@@ -1,3 +1,5 @@
+require 'rails/generators'
+
 module Refills
   class ListGenerator < Rails::Generators::Base
     desc 'List refills'

data/lib/refills/version.rb

@@ -1,3 +1,3 @@
 module Refills
-  VERSION = '0.0.1'
+  VERSION = '0.0.2'
 end

data/refills.gemspec

@@ -10,7 +10,7 @@ Gem::Specification.new do |spec|
   spec.email         = ["magnus@thoughtbot.com"]
   spec.description   = %q{Refills}
   spec.summary       = %q{Refills}
-  spec.homepage      = ""
+  spec.homepage      = "http://thoughtbot.github.io/refills/"
   spec.license       = "MIT"
 
   spec.files         = `git ls-files`.split($/)

data/source/CNAME

@@ -0,0 +1 @@
+refills.bourbon.io

data/source/_accordion-tabs-minimal.html.erb

@@ -0,0 +1,48 @@
+<ul class="accordion-tabs-minimal">
+  <li class="tab-header-and-content">
+    <a href="#" class="tab-link is-active">Tab Item</a>
+    <section>
+      <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>
+  </li>
+  <li class="tab-header-and-content">
+    <a href="#" class="tab-link">Another Tab</a>
+    <section>
+      <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>
+  </li>
+  <li class="tab-header-and-content">
+    <a href="#" class="tab-link">Third</a>
+    <section>
+      <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>
+  </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>
+  </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/_accordion-tabs.html.erb

@@ -1,20 +1,24 @@
 <ul class="accordion-tabs">
-  <li><a href="#" class="active">Item 1</a>
+  <li class="tab-header-and-content">
+    <a href="#" class="is-active tab-link">Tab Item</a>
     <section>
       <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>
   </li>
-  <li><a href="#">Item 2</a>
+  <li class="tab-header-and-content">
+    <a href="#" class="tab-link">Another Tab</a>
     <section>
       <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>
   </li>
-  <li><a href="#">Item 3</a>
+  <li class="tab-header-and-content">
+    <a href="#" class="tab-link">Third</a>
     <section>
       <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>
   </li>
-  <li><a href="#">Item 4</a>
+  <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>
@@ -22,27 +26,23 @@
 </ul>
 
 <script>
-$(document).ready(function () {
-
-  $('.accordion-tabs').children('li').first().children('a').addClass('active')
-    .next().addClass('is-open').show();
-
-  $('.accordion-tabs').on('click', 'li > a', function() {
-
-    if (!$(this).hasClass('active')) {
-
-      event.preventDefault()
-
-      $('.accordion-tabs .is-open').removeClass('is-open').hide();
-      $(this).next().toggleClass('is-open').toggle();
-
-      $('.accordion-tabs').find('.active').removeClass('active');
-        $(this).addClass('active');
-    }
-
-    else {
-      event.preventDefault()
-    }
+  $(document).ready(function () {
+    $('.accordion-tabs').each(function(index) {
+      $(this).children('li').first().children('a').addClass('is-active').next().addClass('is-open').show();
+    });
+
+    $('.accordion-tabs').on('click', 'li > a', function(event) {
+      if (!$(this).hasClass('is-active')) {
+        event.preventDefault();
+        var accordionTabs = $(this).closest('.accordion-tabs')
+        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/_accordion.html.erb

@@ -1,23 +1,23 @@
-<ul class="accordion-menus">
+<ul class="accordion">
   <li>
-    <a href="#" class="js-accordion-trigger">Item 1</a>
+    <a href="javascript:void(0)" class="js-accordion-trigger">Accordion Item</a>
     <ul class="submenu">
       <li>
-        <a href="">Sub Item 1</a>
+        <a href="javascript:void(0)">Sub Item 1</a>
       </li>
       <li>
-        <a href="">Sub Item 2</a>
+        <a href="javascript:void(0)">Sub Item 2</a>
       </li>
     </ul>
   </li>
   <li>
-    <a href="#" class="js-accordion-trigger">Item 2</a>
+    <a href="javascript:void(0)" class="js-accordion-trigger">Another Item</a>
     <ul class="submenu">
       <li>
-        <a href="">Sub Item 1</a>
+        <a href="javascript:void(0)">Sub Item 1</a>
       </li>
       <li>
-        <a href="">Sub Item 2</a>
+        <a href="javascript:void(0)">Sub Item 2</a>
       </li>
     </ul>
   </li>
@@ -25,8 +25,8 @@
 
 <script>
   jQuery('.js-accordion-trigger') // find the trigger
-    .bind('click focus', function(){
-      jQuery(this).parent().find('ul').slideToggle('fast');  // apply the toggle to the ul
+    .bind('click', function(){
+      jQuery(this).parent().find('.submenu').slideToggle('fast');  // apply the toggle to the ul
       jQuery(this).parent().toggleClass('is-expanded');
       event.preventDefault();
   });

data/source/_badges.html.erb

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

data/source/_breadcrumbs.html.erb

@@ -1,8 +1,7 @@
 <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>
+  <a href="javascript:void(0)">One</a>
+  <a href="javascript:void(0)">Two</a>
+  <a href="javascript:void(0)">Three</a>
+  <a href="javascript:void(0)">Four</a>
+  <a href="javascript:void(0)">Five</a>
+</div>

data/source/_button-group.html.erb

@@ -1,7 +1,6 @@
 <div class="button-group">
   <button class="active">Item</button>
-  <button>Item</button>
-  <button>Item</button>
-  <button>Item</button>
-  <button>Item</button>
+  <button>Button Group Item</button>
+  <button>Another Item</button>
+  <button>Last Item</button>
 </div>

data/source/_cards.html.erb

@@ -1,26 +1,59 @@
 <div class="cards">
   <div class="card">
+    <div class="card-image">
+      <img src="https://raw.github.com/Magnus-G/Random/master/mountains.png" alt="">
+    </div>
     <div class="card-header">
-      Header
+      First 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-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 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="">
+    </div>
     <div class="card-header">
-      Header
+      Another Card
     </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 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="">
+    </div>
     <div class="card-header">
-      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-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 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>