Merge pull request #67 from Shopify/grid-item-widths

Ability to change product-grid-item snippet width with variable

assets/timber.scss.liquid

@@ -1,5 +1,5 @@
 /*
-* Shopify Timber v1.2.0
+* Shopify Timber v1.2.1
 * Copyright 2014 Shopify Inc.
 * Author Carson Shold @cshold
 * Built with Sass - http://sass-lang.com/
@@ -741,6 +741,11 @@ p img { margin: 0; }
 em { font-style: italic; }
 strong { font-weight: bold; }
 small { font-size: 80%; }
+sup {
+  position: relative;
+  top: -0.5em;
+  font-size: 60%;
+}
 
 // Blockquotes
 blockquote {
@@ -894,6 +899,12 @@ form {
 
 .btn,
 button,
+input[type="text"],
+input[type="password"],
+input[type="email"],
+input[type="file"],
+input[type="number"],
+input[type="tel"],
 input[type="submit"] {
   -webkit-appearance: none;
 }
@@ -1002,7 +1013,8 @@ form.form-horizontal,
   input[type="number"],
   input[type="tel"],
   textarea,
-  select {
+  select,
+  label {
     display: inline-block;
     margin-bottom: 0;
     width: auto;
@@ -1454,8 +1466,10 @@ a.btn-secondary {
 
 .product-grid-image {
   display: block;
+  margin: 0 auto;
 
   img {
+    display: block;
     margin: 0 auto;
   }
 }

snippets/footer.liquid

@@ -11,7 +11,7 @@
           {% if settings.footer_contact_text != blank %}
             {{ settings.footer_contact_text }}
           {% else %}
-            Add some text to show here in your <a href="admin/themes" title="Edit theme settings"> theme settings</a>.
+            Add some text to show here in your <a href="/admin/themes" title="Edit theme settings"> theme settings</a>.
           {% endif %}
         </p>
       </div>

snippets/product-grid-item.liquid

@@ -3,10 +3,22 @@
   This snippet is used to showcase each product during the loop,
   'for product in collection.products' in collection.liquid.
 
-  This example has three products per column on desktop, two on
-  our medium breakpoint, and a single row on small screens.
+  A liquid variable (grid_item_width) is set just before the this
+  snippet is included to change the size of the container.
+  Once the variable is set on a page, all future instances of this
+  snippet will use that width. Overwrite the variable to adjust this.
 
+  Example
+    - assign grid_item_width = 'large--one-quarter medium--one-half'
+
+{% endcomment %}
+
+{% comment %}
+  Set the default grid_item_width if no variable is set
 {% endcomment %}
+{% unless grid_item_width %}
+  {% assign grid_item_width = 'large--one-third medium--one-half' %}
+{% endunless %}
 
 {% comment %}
   Check if the product is on sale and set a variable to be used below.
@@ -27,7 +39,7 @@
 {% comment %}
   Set a class for sold-out and on-sale items
 {% endcomment %}
-<div class="grid-item large--one-third medium--one-half{% if sold_out %} sold-out{% endif %}{% if on_sale %} on-sale{% endif %}">
+<div class="grid-item {{grid_item_width}}{% if sold_out %} sold-out{% endif %}{% if on_sale %} on-sale{% endif %}">
 
   {% comment %}
     Link to your product with the 'within: collection' filter for the link to be aware of the collection.

templates/index.liquid

@@ -20,6 +20,13 @@
   {% endcomment %}
   {% for product in collections.frontpage.products limit:6 %}
 
+    {% comment %}
+      Change the grid item width by using classes from the grid in
+      the grid_item_width variable.
+
+      Example (and default):
+        - {% assign grid_item_width = 'large--one-third medium--one-half' %}
+    {% endcomment %}
     {% include 'product-grid-item' %}
 
   {% else %}