RubyGems - refills - Versions diffs - 0.0.2 → 0.1.0 - Mend

refills 0.0.2 → 0.1.0

Files changed (810) hide show

data/source/_tables.html.erb CHANGED Viewed

@@ -1,4 +1,4 @@
-<table class="table-borders">
+<table class="tables">
   <thead>
     <tr>
       <th>Header Cell 1</th>
@@ -28,4 +28,4 @@
       <td><button>Confirm</button><button>Reject</button></td>
     </tr>
   </tbody>
-</table>
+</table>

data/source/{_tables-minimal.html.erb → _tables_minimal.html.erb} RENAMED Viewed

File without changes

data/source/_texture-legend.html.erb ADDED Viewed

@@ -0,0 +1,24 @@
+<div class="texture-examples">
+  <div class="texture-examples-container">
+    <h3>Legend</h3>
+    <script>
+      for (i = 1; i < 89; i++) {
+        document.write('<div class="texture-' + i + '">')
+          document.write('<h4>' + i + '</h4>')
+          document.write('<div class="examples">')
+            document.write('<div class="example-normal"></div>')
+            document.write('<div class="example-inverted"></div>')
+          document.write('</div>')
+        document.write('</div>')
+      }
+    </script>
+    <div class="instructions">
+      <b>Instructions</b>
+      <p>Each texture has two versions, shown in each box in the pattern; a normal version and an inverted one. Some versions work better on dark backgrounds, some on light. Switch between the two by changing between 0 and 1 for the final argument passed in the @include.</p>
+      <p>The mixin can change background color – or gradient colors – for the texture, along with gradient angle.</p>
+      <p>The two squares below is what will be rendered if you copy-paste the code. Use the numbers in the legend above to switch textures in the code. This is done by changing the texture number in the @include for .texture-normal or .texture-inverted. The default selection is texture number 67. Most of these textures are from <a href="http://subtlepatterns.com/">subtlepatterns.com</a></p>
+    </div>
+  </div>
+</div>

data/source/_textures.html.erb ADDED Viewed

@@ -0,0 +1,4 @@
+<div class="texture">
+  <div class="texture-inverted"></div>
+  <div class="texture-normal"></div>
+</div>

data/source/_tooltip.html.erb CHANGED Viewed

@@ -1,6 +1,6 @@
 <div class="tooltip-item">
   Hover for Tooltip
   <div class="tooltip">
-    <p>Tooltip text</p>
+    <p>Lorem ipsum doldae oluptate aperiam unde voluptates quas.</p>
   </div>
-</div>
+</div>

data/source/_type_system_geometric.html.erb ADDED Viewed

@@ -0,0 +1,18 @@
+<head>
+  <link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
+  <link href='http://fonts.googleapis.com/css?family=Sanchez:400italic,400' rel='stylesheet' type='text/css'>
+</head>
+<article class="type-system-geometric">
+  <p class="type">Article Type</p>
+  <h1>Article Heading</h1>
+  <h2>These override some of the styles specified in the <code>_variables.scss</code> and <code>_typography.scss</code> partials in <a href="//bitters.bourbon.io">Bitters</a>. You can replace the typography variables and the header font specifications in Bitters with these styles. Then you won&rsquo;t need the wrapping class <code>.type-system-name</code>.</h2>
+  <p class="date">30 Mar 2014</p>
+  <p><span>Lorem ipsum dolor sit amet</span>, consectetur adipisicing elit. Consequatur a, ullam, voluptatum incidunt neque doloremque vel inventore distinctio laudantium harum</a> illo quam nulla dolor alias iure impedit! Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit.
+    <a href="javascript:void(0)" class="read-more">Read More <span>&rsaquo;</span></a>
+  </p>
+  <h3>Subheading lorem</h3>
+  <p><span>Consequatur ullam, voluptatum</span> incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit. Accusamus. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit! Accusamus.</p>
+  <hr>
+  <p class="author">Author Name</p>
+</article>

data/source/_type_system_rounded.html.erb ADDED Viewed

@@ -0,0 +1,18 @@
+<head>
+  <link href='http://fonts.googleapis.com/css?family=Nunito:400,700,300' rel='stylesheet' type='text/css'>
+  <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
+</head>
+<article class="type-system-rounded">
+  <p class="type">Article Type</p>
+  <h1>Article Heading</h1>
+  <h2>These override some of the styles specified in the <code>_variables.scss</code> and <code>_typography.scss</code> partials in <a href="//bitters.bourbon.io">Bitters</a>. You can replace the typography variables and the header font specifications in Bitters with these styles. Then you won&rsquo;t need the wrapping class <code>.type-system-name</code>.</h2>
+  <p class="date">30 Mar 2014</p>
+  <p><span>Lorem ipsum dolor sit amet</span>, consectetur adipisicing elit. Consequatur a, ullam, voluptatum incidunt neque doloremque vel inventore distinctio laudantium harum</a> illo quam nulla dolor alias iure impedit! Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit.
+    <a href="javascript:void(0)" class="read-more">Read More <span>&rsaquo;</span></a>
+  </p>
+  <h3>Subheading lorem</h3>
+  <p><span>Consequatur ullam, voluptatum</span> incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit. Accusamus. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit! Accusamus.</p>
+  <hr>
+  <p class="author">Author Name</p>
+</article>

data/source/_type_system_sans.html.erb ADDED Viewed

@@ -0,0 +1,18 @@
+<head>
+  <link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
+  <link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,400italic,600italic,600,700,700italic,900,300italic,300,200italic,200' rel='stylesheet' type='text/css'>
+</head>
+<article class="type-system-sans">
+  <p class="type">Article Type</p>
+  <h1>Article Heading</h1>
+  <h2>These override some of the styles specified in the <code>_variables.scss</code> and <code>_typography.scss</code> partials in <a href="//bitters.bourbon.io">Bitters</a>. You can replace the typography variables and the header font specifications in Bitters with these styles. Then you won&rsquo;t need the wrapping class <code>.type-system-name</code>.</h2>
+  <p class="date">30 Mar 2014</p>
+  <p><span>Lorem ipsum dolor sit amet</span>, consectetur adipisicing elit. Consequatur a, ullam, voluptatum incidunt neque doloremque vel inventore distinctio laudantium harum</a> illo quam nulla dolor alias iure impedit! Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit.
+    <a href="javascript:void(0)" class="read-more">Read More <span>&rsaquo;</span></a>
+  </p>
+  <h3>Subheading lorem</h3>
+  <p><span>Consequatur ullam, voluptatum</span> incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit. Accusamus. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit! Accusamus.</p>
+  <hr>
+  <p class="author">Author Name</p>
+</article>

data/source/_type_system_serif.html.erb ADDED Viewed

@@ -0,0 +1,19 @@
+<head>
+  <link href='http://fonts.googleapis.com/css?family=Lusitana:400,700' rel='stylesheet' type='text/css'>
+  <link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
+  <link href='http://fonts.googleapis.com/css?family=Merriweather+Sans:400,300,300italic,400italic,700italic,700,800,800italic' rel='stylesheet' type='text/css'>
+</head>
+<article class="type-system-serif">
+  <p class="type">Article Type</p>
+  <h1>Article Heading</h1>
+  <h2>These override some of the styles specified in the <code>_variables.scss</code> and <code>_typography.scss</code> partials in <a href="//bitters.bourbon.io">Bitters</a>. You can replace the typography variables and the header font specifications in Bitters with these styles. Then you won&rsquo;t need the wrapping class <code>.type-system-name</code>.</h2>
+  <p class="date">30 Mar 2014</p>
+  <p><span>Lorem ipsum dolor sit amet</span>, consectetur adipisicing elit. Consequatur a, ullam, voluptatum incidunt neque doloremque vel inventore distinctio laudantium harum</a> illo quam nulla dolor alias iure impedit! Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit.
+    <a href="javascript:void(0)" class="read-more">Read More <span>&rsaquo;</span></a>
+  </p>
+  <h3>Subheading lorem</h3>
+  <p><span>Consequatur ullam, voluptatum</span> incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit. Accusamus. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit! Accusamus.</p>
+  <hr>
+  <p class="author">Author Name</p>
+</article>

data/source/_type_system_slab.html.erb ADDED Viewed

@@ -0,0 +1,18 @@
+<head>
+  <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,800,700,600,300' rel='stylesheet' type='text/css'>
+  <link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,300,100,700' rel='stylesheet' type='text/css'>
+</head>
+<article class="type-system-slab">
+  <p class="type">Article Type</p>
+  <h1>Article Heading</h1>
+  <h2>These override some of the styles specified in the <code>_variables.scss</code> and <code>_typography.scss</code> partials in <a href="//bitters.bourbon.io">Bitters</a>. You can replace the typography variables and the header font specifications in Bitters with these styles. Then you won&rsquo;t need the wrapping class <code>.type-system-name</code>.</h2>
+  <p class="date">30 Mar 2014</p>
+  <p><span>Lorem ipsum dolor sit amet</span>, consectetur adipisicing elit. Consequatur a, ullam, voluptatum incidunt neque doloremque vel inventore distinctio laudantium harum</a> illo quam nulla dolor alias iure impedit! Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit.
+    <a href="javascript:void(0)" class="read-more">Read More <span>&rsaquo;</span></a>
+  </p>
+  <h3>Subheading lorem</h3>
+  <p><span>Consequatur ullam, voluptatum</span> incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit. Accusamus. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit! Accusamus.</p>
+  <hr>
+  <p class="author">Author Name</p>
+</article>

data/source/_type_system_traditional.html.erb ADDED Viewed

@@ -0,0 +1,18 @@
+<head>
+  <link href='http://fonts.googleapis.com/css?family=Radley:400,400italic' rel='stylesheet' type='text/css'>
+  <link href='http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
+</head>
+<article class="type-system-traditional">
+  <p class="type">Article Type</p>
+  <h1>Article Heading</h1>
+  <h2>These override some of the styles specified in the <code>_variables.scss</code> and <code>_typography.scss</code> partials in <a href="//bitters.bourbon.io">Bitters</a>. You can replace the typography variables and the header font specifications in Bitters with these styles. Then you won&rsquo;t need the wrapping class <code>.type-system-name</code>.</h2>
+  <p class="date">30 Mar 2014</p>
+  <p><span>Lorem ipsum dolor sit amet</span>, consectetur adipisicing elit. Consequatur a, ullam, voluptatum incidunt neque doloremque vel inventore distinctio laudantium harum</a> illo quam nulla dolor alias iure impedit! Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit.
+    <a href="javascript:void(0)" class="read-more">Read More <span>&rsaquo;</span></a>
+  </p>
+  <h3>Subheading lorem</h3>
+  <p><span>Consequatur ullam, voluptatum</span> incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit. Accusamus. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit! Accusamus.</p>
+  <hr>
+  <p class="author">Author Name</p>
+</article>

data/source/{_vertical-tabs.html.erb → _vertical_tabs.html.erb} RENAMED Viewed

@@ -1,9 +1,9 @@
 <div class="vertical-tabs-container">
   <div class="vertical-tabs">
-    <a href="#" class="js-vertical-tab vertical-tab is-active" rel="tab1">Item 1</a>
-    <a href="#" class="js-vertical-tab vertical-tab" rel="tab2">Item 2</a>
-    <a href="#" class="js-vertical-tab vertical-tab" rel="tab3">Item 3</a>
-    <a href="#" class="js-vertical-tab vertical-tab" rel="tab4">Item 4</a>
+    <a href="javascript:void(0)" class="js-vertical-tab vertical-tab is-active" rel="tab1">Item 1</a>
+    <a href="javascript:void(0)" class="js-vertical-tab vertical-tab" rel="tab2">Item 2</a>
+    <a href="javascript:void(0)" class="js-vertical-tab vertical-tab" rel="tab3">Item 3</a>
+    <a href="javascript:void(0)" class="js-vertical-tab vertical-tab" rel="tab4">Item 4</a>
   </div>
   <div class="vertical-tab-content-container">
@@ -28,38 +28,3 @@
     </div>
   </div>
 </div>
-<script>
-  $(".js-vertical-tab-content").hide();
-  $(".js-vertical-tab-content:first").show();
-  /* if in tab mode */
-  $(".js-vertical-tab").click(function(event) {
-    event.preventDefault();
-    $(".js-vertical-tab-content").hide();
-    var activeTab = $(this).attr("rel");
-    $("#"+activeTab).show();
-    $(".js-vertical-tab").removeClass("is-active");
-    $(this).addClass("is-active");
-    $(".js-vertical-tab-accordion-heading").removeClass("is-active");
-    $(".js-vertical-tab-accordion-heading[rel^='"+activeTab+"']").addClass("is-active");
-  });
-  /* if in accordion mode */
-  $(".js-vertical-tab-accordion-heading").click(function(event) {
-    event.preventDefault()
-    $(".js-vertical-tab-content").hide();
-    var accordion_activeTab = $(this).attr("rel");
-    $("#"+accordion_activeTab).show();
-    $(".js-vertical-tab-accordion-heading").removeClass("is-active");
-    $(this).addClass("is-active");
-    $(".js-vertical-tab").removeClass("is-active");
-    $(".js-vertical-tab[rel^='"+accordion_activeTab+"']").addClass("is-active");
-  });
-</script>

data/source/_video.html.erb ADDED Viewed

@@ -0,0 +1,5 @@
+<div class="video">
+  <div class="video-wrapper">
+      <iframe src="http://www.youtube.com/embed/8ItNE_DX6Cc?showinfo=0&iv_load_policy=3&controls=0" frameborder="0" allowfullscreen></iframe>
+  </div>
+</div>

data/source/components.html.erb ADDED Viewed

@@ -0,0 +1,222 @@
+<div class="refills-components">
+  <a class="js-menu-trigger-refills refills-menu-anchor fixedsticky">
+    <img src="/images/menu.png" alt="Menu icon">
+  </a>
+  <div class="js-menu-screen-refills refills-menu-screen"></div>
+  <%= partial "refills-hero" %>
+  <%= partial "refills-menu" %>
+  <div id="example">
+    <section id="accordion" class="refill">
+      <div class="refills-wrapper">
+        <div class="line-behind-text"><h6>Accordion</h6></div>
+        <div class="refill-centering"><%= partial "accordion" %></div>
+      </div>
+      <div class="refill-snippet"><%= code_for("accordion") %></div>
+    </section>
+    <section id="animate" class="refill">
+      <div class="refills-wrapper">
+        <div class="line-behind-text"><h6>Animate</h6></div>
+        <div class="refill-centering">
+          <%= partial "animate" %>
+          <%= partial "animate_info" %>
+        </div>
+      </div>
+      <div class="refill-snippet"><%= code_for("animate") %></div>
+    </section>
+    <section id="badges" class="refill">
+      <div class="refills-wrapper">
+        <div class="line-behind-text"><h6>Badges</h6></div>
+        <div class="refill-centering"><%= partial "badges" %></div>
+      </div>
+      <div class="refill-snippet"><%= code_for("badges") %></div>
+    </section>
+    <section id="breadcrumbs" class="refill">
+      <div class="refills-wrapper">
+        <div class="line-behind-text"><h6>Breadcrumbs</h6></div>
+        <div class="refill-centering"><%= partial "breadcrumbs" %></div>
+      </div>
+      <div class="refill-snippet"><%= code_for("breadcrumbs") %></div>
+    </section>
+    <section id="button-group" class="refill">
+      <div class="refills-wrapper">
+        <div class="line-behind-text"><h6>Button Group</h6></div>
+        <div class="refill-centering"><%= partial "button_group" %></div>
+      </div>
+      <div class="refill-snippet"><%= code_for("button_group") %></div>
+    </section>
+    <section id="dropdown" class="refill">
+      <div class="refills-wrapper">
+        <div class="line-behind-text"><h6>Dropdown</h6></div>
+        <div class="refill-centering">
+          <%= partial "dropdown" %>
+        </div>
+      </div>
+      <div class="refill-snippet"><%= code_for("dropdown") %></div>
+    </section>
+    <section id="expander" class="refill">
+      <div class="refills-wrapper">
+        <div class="line-behind-text"><h6>Expander</h6></div>
+        <div class="refill-centering">
+          <%= partial "expander" %>
+        </div>
+      </div>
+      <div class="refill-snippet"><%= code_for("expander") %></div>
+    </section>
+    <section id="fade-in" class="refill">
+      <div class="refills-wrapper">
+        <div class="line-behind-text"><h6>Fade In</h6></div>
+        <div class="refill-centering">
+          <div class="refill-smaller"><%= partial "fade_in" %></div>
+        </div>
+      </div>
+      <div class="refill-snippet"><%= code_for("fade_in") %></div>
+    </section>
+    <section id="flashes" class="refill">
+      <div class="refills-wrapper">
+        <div class="line-behind-text"><h6>Flashes</h6></div>
+        <div class="refill-centering"><%= partial "flashes" %></div>
+      </div>
+      <div class="refill-snippet"><%= code_for("flashes") %></div>
+    </section>
+    <section id="hover-tile-animation" class="refill">
+      <div class="refills-wrapper">
+        <div class="line-behind-text"><h6>Hover Tile Animation</h6></div>
+        <div class="refill-centering"><%= partial "hover_tile_animation" %></div>
+      </div>
+      <div class="refill-snippet"><%= code_for("hover_tile_animation") %></div>
+    </section>
+    <section id="image-gradient" class="refill">
+      <div class="refills-wrapper">
+        <div class="line-behind-text"><h6>Image with gradient overlays</h6></div>
+        <div class="refill-centering"><%= partial "image_gradient_dynamic" %></div>
+      </div>
+      <div class="refill-snippet"><%= code_for("image_gradient_dynamic") %></div>
+    </section>
+    <section id="modal" class="refill">
+      <div class="refills-wrapper">
+        <div class="line-behind-text"><h6>Modal</h6></div>
+        <div class="refill-centering"><%= partial "modal" %></div>
+      </div>
+      <div class="refill-snippet"><%= code_for("modal") %></div>
+    </section>
+    <section id="pagination" class="refill">
+      <div class="refills-wrapper">
+        <div class="line-behind-text"><h6>Pagination</h6></div>
+        <%= partial "pagination" %>
+      </div>
+      <div class="refill-snippet"><%= code_for("pagination") %></div>
+    </section>
+    <section id="parallax" class="refill">
+      <div class="refills-wrapper">
+        <div class="line-behind-text"><h6>Parallax</h6></div>
+        <%= partial "parallax" %>
+      </div>
+      <div class="refill-snippet"><%= code_for("parallax") %></div>
+    </section>
+    <section id="progress-bar" class="refill">
+      <div class="refills-wrapper">
+        <div class="line-behind-text"><h6>Progress Bars</h6></div>
+        <div class="refill-centering">
+          <div class="refill-smaller"><%= partial "progress_bar" %></div>
+        </div>
+      </div>
+      <div class="refill-snippet"><%= code_for("progress_bar") %></div>
+      <div class="refills-wrapper">
+        <div class="refill-centering">
+          <div class="refill-smaller"><%= partial "progress_bar_indication" %></div>
+        </div>
+      </div>
+      <div class="refill-snippet"><%= code_for("progress_bar_indication") %></div>
+    </section>
+    <section id="ribbon" class="refill">
+      <div class="refills-wrapper">
+        <div class="line-behind-text"><h6>Ribbon</h6></div>
+        <div class="refill-centering">
+          <%= partial "ribbon" %>
+        </div>
+      </div>
+      <div class="refill-snippet"><%= code_for("ribbon") %></div>
+    </section>
+    <section id="video" class="refill">
+      <div class="refills-wrapper">
+        <div class="line-behind-text"><h6>Responsive Video Embed</h6></div>
+        <%= partial "video" %>
+      </div>
+      <div class="refill-snippet"><%= code_for("video") %></div>
+    </section>
+    <section id="search-bar" class="refill">
+      <div class="refills-wrapper">
+        <div class="line-behind-text"><h6>Search bar</h6></div>
+        <div class="refill-centering">
+          <div class="refill-smaller"><%= partial "search_bar" %></div>
+        </div>
+      </div>
+      <div class="refill-snippet"><%= code_for("search_bar") %></div>
+    </section>
+    <section id="sliding-menu" class="refill">
+      <div class="refills-wrapper">
+        <div class="line-behind-text"><h6>Sliding Menu</h6></div>
+        <div class="refill-centering"><%= partial "sliding_menu" %></div>
+      </div>
+      <div class="refill-snippet"><%= code_for("sliding_menu") %></div>
+    </section>
+    <section id="switch" class="refill">
+      <div class="refills-wrapper">
+        <div class="line-behind-text"><h6>Switch</h6></div>
+        <div class="refill-centering"><%= partial "switch" %></div>
+      </div>
+      <div class="refill-snippet"><%= code_for("switch") %></div>
+    </section>
+    <section id="stats" class="refill">
+      <div class="refills-wrapper">
+        <div class="line-behind-text"><h6>Stats</h6></div>
+        <div class="refill-centering"><%= partial "stats" %></div>
+      </div>
+      <div class="refill-snippet"><%= code_for("stats") %></div>
+    </section>
+    <section id="textures" class="refill">
+      <div class="refills-wrapper">
+        <div class="line-behind-text"><h6>Textures</h6></div>
+        <%= partial "texture-legend" %>
+        <%= partial "textures" %>
+      </div>
+      <div class="refill-snippet"><%= code_for("textures") %></div>
+    </section>
+    <section id="tooltip" class="refill">
+      <div class="refills-wrapper">
+        <div class="line-behind-text"><h6>Tooltip</h6></div>
+        <div class="refill-centering"><%= partial "tooltip" %></div>
+      </div>
+      <div class="refill-snippet"><%= code_for("tooltip") %></div>
+    </section>
+  </div>
+</div>
+<%= partial "refills-page-scripts" %>