From 9825f6d8ea49e55b05865b830b8f1c7364af9f0f Mon Sep 17 00:00:00 2001 From: Carson Shold Date: Tue, 13 May 2014 09:34:25 -0400 Subject: [PATCH 1/6] Ability to change product-grid-item snippet width with variable --- snippets/product-grid-item.liquid | 18 +++++++++++++++--- templates/index.liquid | 7 +++++++ 2 files changed, 22 insertions(+), 3 deletions(-) diff --git a/snippets/product-grid-item.liquid b/snippets/product-grid-item.liquid index be7a3861f..5d7545450 100755 --- a/snippets/product-grid-item.liquid +++ b/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 %} -
+
{% comment %} Link to your product with the 'within: collection' filter for the link to be aware of the collection. diff --git a/templates/index.liquid b/templates/index.liquid index a479a1f67..518db1c4f 100755 --- a/templates/index.liquid +++ b/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 %} From a346b32ffb941f831da9d3c0b34f64697288327a Mon Sep 17 00:00:00 2001 From: Carson Shold Date: Tue, 13 May 2014 10:06:35 -0400 Subject: [PATCH 2/6] Added sup tag styles --- assets/timber.scss.liquid | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/assets/timber.scss.liquid b/assets/timber.scss.liquid index 47273428f..91b018574 100755 --- a/assets/timber.scss.liquid +++ b/assets/timber.scss.liquid @@ -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 { From ff360a3dce7f112db4e21cd6f09da6a2777dff87 Mon Sep 17 00:00:00 2001 From: Carson Shold Date: Tue, 13 May 2014 10:37:46 -0400 Subject: [PATCH 3/6] Minor update to product-grid-image position --- assets/timber.scss.liquid | 2 ++ 1 file changed, 2 insertions(+) diff --git a/assets/timber.scss.liquid b/assets/timber.scss.liquid index 91b018574..b855b171c 100755 --- a/assets/timber.scss.liquid +++ b/assets/timber.scss.liquid @@ -1459,8 +1459,10 @@ a.btn-secondary { .product-grid-image { display: block; + margin: 0 auto; img { + display: block; margin: 0 auto; } } From 66b64611e179b2b664ea9a2acd2814e773ddff1a Mon Sep 17 00:00:00 2001 From: Carson Shold Date: Tue, 13 May 2014 10:45:07 -0400 Subject: [PATCH 4/6] Webkit appearance on text inputs --- assets/timber.scss.liquid | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/assets/timber.scss.liquid b/assets/timber.scss.liquid index b855b171c..0e5bfdbb5 100755 --- a/assets/timber.scss.liquid +++ b/assets/timber.scss.liquid @@ -899,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; } From 287e397dd4a3239312b7b2ac0f39964095f07f72 Mon Sep 17 00:00:00 2001 From: Carson Shold Date: Tue, 13 May 2014 15:52:43 -0400 Subject: [PATCH 5/6] Horizontal form label layout. Link fix --- assets/timber.scss.liquid | 3 ++- snippets/footer.liquid | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/assets/timber.scss.liquid b/assets/timber.scss.liquid index 0e5bfdbb5..706920ad8 100755 --- a/assets/timber.scss.liquid +++ b/assets/timber.scss.liquid @@ -1013,7 +1013,8 @@ form.form-horizontal, input[type="number"], input[type="tel"], textarea, - select { + select, + label { display: inline-block; margin-bottom: 0; width: auto; diff --git a/snippets/footer.liquid b/snippets/footer.liquid index 2d55407af..c7fbc379a 100755 --- a/snippets/footer.liquid +++ b/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 theme settings. + Add some text to show here in your theme settings. {% endif %}

From a3516e227670131320f54f7b8d42ac88ab8df71f Mon Sep 17 00:00:00 2001 From: Carson Shold Date: Tue, 13 May 2014 15:53:33 -0400 Subject: [PATCH 6/6] Updated version number --- assets/timber.scss.liquid | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/timber.scss.liquid b/assets/timber.scss.liquid index 706920ad8..5bea06e63 100755 --- a/assets/timber.scss.liquid +++ b/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/