Bem grid

assets/timber.scss.liquid

@@ -267,9 +267,9 @@ input[type="search"]::-webkit-search-decoration {
 
 /*============================================================================
  #Grid Setup
- - Based on csswizardry grid, but with floated columns and a fixed gutter size
+ - Based on csswizardry grid, but with floated columns, a fixed gutter size, and BEM classes
  - Breakpoints defined above, under #Breakpoint and Grid Variables
- - Note the inclusion of .grid-uniform to take care of clearfixes on evenly sized grid-items
+ - Note the inclusion of .grid-uniform to take care of clearfixes on evenly sized grid items
 ==============================================================================*/
 $responsive: true;
 $mobile-first: true;
@@ -283,8 +283,8 @@ $pull: false;
  @include clearfix;
 }
 
-/* Manual grid-item clearfix */
-.grid-item.clear {
+/* Manual grid__item clearfix */
+.grid__item.clear {
  clear: both;
 }
 
@@ -340,7 +340,7 @@ $class-type: unquote(".");
  margin-left: -$gridGutter;
 }
 
-#{$class-type}grid-item {
+#{$class-type}grid__item {
  float: left;
  min-height: 1px;
  padding-left: $gridGutter;
@@ -360,7 +360,7 @@ $class-type: unquote(".");
  direction: rtl;
  text-align: left;
 
- > #{$class-type}grid-item {
+ > #{$class-type}grid__item {
  direction: ltr;
  text-align: left;
  float: right;
@@ -372,7 +372,7 @@ $class-type: unquote(".");
  @extend #{$class-type}grid;
  margin-left: 0;
 
- > #{$class-type}grid-item {
+ > #{$class-type}grid__item {
  padding-left: 0;
  }
 }
@@ -979,7 +979,7 @@ hr {
  }
  }
 
- & > div {
+ > div {
  margin-bottom: $gutter / 2;
  }
 
@@ -1197,8 +1197,8 @@ svg:not(:root) {
 }
 
 img.auto,
-.grid-item img,
-.grid-item iframe {
+.grid__item img,
+.grid__item iframe {
  max-width: 100%;
 }
 
@@ -1340,7 +1340,7 @@ select {
  appearance: none;
  background-position: right center;
  background: {
- image: url({{ "ico-select.svg" | asset_url }});
+ image: url('{{ "ico-select.svg" | asset_url }}');
  repeat: no-repeat;
  position: right 10px center;
  color: transparent;
@@ -1734,7 +1734,7 @@ label.error {
  table-layout: fixed;
  width: 100%;
 
- & > .grid-item {
+ > .grid__item {
  float: none;
  display: table-cell;
  vertical-align: middle;
@@ -1804,7 +1804,7 @@ label.error {
  display: block;
  }
 
- & > li {
+ > li {
  position: relative;
  display: inline-block;
 
@@ -2088,7 +2088,7 @@ label.error {
  table-layout: fixed;
  width: 100%;
 
- .grid-item {
+ .grid__item {
  display: table-cell;
  vertical-align: middle;
  float: none;

layout/theme.liquid

@@ -49,7 +49,6 @@
  {% endcomment %}
  {% if template contains 'customers' %}
  {{ 'shopify_common.js' | shopify_asset_url | script_tag }}
- {{ 'customer_area.js' | shopify_asset_url | script_tag }}
  {% endif %}
 
  {% comment %}
@@ -70,7 +69,7 @@
  <div class="wrapper">
 
  <div class="grid--full">
- <div class="grid-item large--one-half">
+ <div class="grid__item large--one-half">
  {% comment %}
  Use the uploaded logo from theme settings if enabled.
  Site name gets precedence with H1 tag on homepage, div on other pages.
@@ -93,7 +92,7 @@
  </div>
  {% endif %}
  </div>
- <div class="grid-item large--one-half text-center large--text-right">
+ <div class="grid__item large--one-half text-center large--text-right">
  {% comment %}
  Show number of items in the cart and total cost in the /cart link
 
@@ -140,10 +139,10 @@
  <nav class="nav-bar" role="navigation">
  <div class="wrapper">
  <div class="grid">
- <div class="grid-item large--two-thirds">
+ <div class="grid__item large--two-thirds">
  {% include 'site-nav' %}
  </div>
- <div class="grid-item large--one-third">
+ <div class="grid__item large--one-third">
  <div class="nav-search">
  {% include 'search-bar' %}
  </div>

snippets/ajax-cart-template.liquid

@@ -13,30 +13,30 @@
  <div class="ajaxcart__product">
  <div class="ajaxcart__row" data-id="{{id}}">
  <div class="grid">
- <div class="grid-item large--two-thirds">
+ <div class="grid__item large--two-thirds">
  <div class="grid">
- <div class="grid-item one-quarter">
+ <div class="grid__item one-quarter">
  <a href="{{url}}" class="ajaxcart__product-image"><img src="{{img}}" alt=""></a>
  </div>
- <div class="grid-item three-quarters">
+ <div class="grid__item three-quarters">
  <a href="{{url}}" class="h4">{{name}}</a>
  <p>{{variation}}</p>
  </div>
  </div>
  </div>
- <div class="grid-item large--one-third">
+ <div class="grid__item large--one-third">
  <div class="grid">
- <div class="grid-item one-third">
+ <div class="grid__item one-third">
  <div class="ajaxcart__qty">
  <button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--minus" data-id="{{id}}" data-qty="{{itemMinus}}">&minus;</button>
  <input type="text" class="ajaxcart__qty-num" value="{{itemQty}}" min="0" data-id="{{id}}" aria-label="quantity" pattern="[0-9]*">
  <button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--plus" data-id="{{id}}" data-qty="{{itemAdd}}">+</button>
  </div>
  </div>
- <div class="grid-item one-third text-center">
+ <div class="grid__item one-third text-center">
  <p>{{price}}</p>
  </div>
- <div class="grid-item one-third text-right">
+ <div class="grid__item one-third text-right">
  <p>
  <small><a href="/cart/change?id={{id}}&amp;quantity=0" class="ajaxcart__remove" data-id="{{id}}">Remove</a></small>
  </p>

snippets/collection-grid-item.liquid

@@ -12,7 +12,7 @@
  {% assign collection_item_width = 'medium--one-half large--one-third' %}
 {% endunless %}
 
-<div class="grid-item {{collection_item_width}} text-center">
+<div class="grid__item {{collection_item_width}} text-center">
 
  {% comment %}
  Use capture to put the collection title in a variable that is used in liquid filters

snippets/footer.liquid

@@ -5,7 +5,7 @@
  <div class="grid">
 
  {% if settings.footer_quicklinks_enable %}
- <div class="grid-item medium--one-half large--three-twelfths">
+ <div class="grid__item medium--one-half large--three-twelfths">
  <h3>{{ 'layout.footer.linklist_title' | t }}</h3>
  <ul>
  {% for link in linklists[settings.footer_quicklinks_linklist].links %}
@@ -16,7 +16,7 @@
  {% endif %}
 
  {% if settings.footer_social_enable %}
- <div class="grid-item medium--one-half large--five-twelfths">
+ <div class="grid__item medium--one-half large--five-twelfths">
  <h3>{{ 'layout.footer.social_title' | t }}</h3>
  {% comment %}
  Loop through the social network links
@@ -43,7 +43,7 @@
  {% endif %}
 
  {% if settings.footer_newsletter_enable %}
- <div class="grid-item large--one-third">
+ <div class="grid__item large--one-third">
  <h3>{{ 'layout.footer.newsletter_title' | t }}</h3>
  {% include 'newsletter-form' %}
  </div>

snippets/product-grid-item.liquid

@@ -46,7 +46,7 @@
 {% comment %}
  Set a class for sold-out and on-sale items
 {% endcomment %}
-<div class="grid-item {{grid_item_width}}{% 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.

snippets/product-list-item.liquid

@@ -30,7 +30,7 @@
 {% comment %}
  Set a class for sold-out and on-sale items
 {% endcomment %}
-<div class="grid-item{% if sold_out %} sold-out{% endif %}{% if on_sale %} on-sale{% endif %}">
+<div class="grid__item{% 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.
@@ -45,12 +45,12 @@
 
  {% endcomment %}
  <div class="grid large--display-table">
- <div class="grid-item large--one-fifth large--display-table-cell medium--one-third">
+ <div class="grid__item large--one-fifth large--display-table-cell medium--one-third">
  <a href="{{ product.url | within: current_collection }}">
  <img src="{{ product.featured_image.src | img_url: 'medium' }}" alt="{{ product.featured_image.alt | escape }}" class="grid__image">
  </a>
  </div>
- <div class="grid-item large--three-fifths large--display-table-cell medium--two-thirds">
+ <div class="grid__item large--three-fifths large--display-table-cell medium--two-thirds">
  <p class="h6">{{ product.title }}</p>
  <div class="rte">
  {% if product.excerpt.size > 0 %}
@@ -60,7 +60,7 @@
  {% endif %}
  </div>
  </div>
- <div class="grid-item large--one-fifth large--display-table-cell medium--two-thirds">
+ <div class="grid__item large--one-fifth large--display-table-cell medium--two-thirds">
  {% comment %}
  You can show a leading 'from' or 'up to' by checking 'product.price_varies'
  if your variants have different prices.

snippets/search-result-grid.liquid

@@ -17,7 +17,7 @@
  {% assign grid_item_width = 'large--one-third medium--one-half' %}
 {% endunless %}
 
-<div class="grid-item search-result {{ grid_item_width }}">
+<div class="grid__item search-result {{ grid_item_width }}">
 
  {% if item.featured_image %}
 

snippets/search-result.liquid

@@ -19,7 +19,7 @@
  {% comment %}
  We have a featured_image, so it's likely a product
  {% endcomment %}
- <div class="grid-item one-third">
+ <div class="grid__item one-third">
  <a href="{{ item.url }}" title="{{ item.title | escape }}">
  {{ item.featured_image.src | img_url: 'medium' | img_tag: item.featured_image.alt }}
  </a>
@@ -29,7 +29,7 @@
  {% comment %}
  If we don't have a featured_image, add a push-- class to keep the alignment the same
  {% endcomment %}
- <div class="grid-item two-thirds {% unless item.featured_image %}push--one-third{% endunless %}">
+ <div class="grid__item two-thirds {% unless item.featured_image %}push--one-third{% endunless %}">
  <h3>{{ item.title | link_to: item.url }}</h3>
 
  {% comment %}

templates/article.liquid

@@ -26,7 +26,7 @@
 
 <div class="grid">
 
- <article class="grid-item large--three-quarters" itemscope itemtype="http://schema.org/Article">
+ <article class="grid__item large--three-quarters" itemscope itemtype="http://schema.org/Article">
 
  <header class="section-header">
  <div class="section-header--left">
@@ -138,17 +138,17 @@
 
  <div class="grid">
 
- <div class="grid-item large--one-half">
- <label for="comment-author" class="label--hidden">{{ 'blogs.comments.name' | t }}</label>
- <input {% if form.errors contains "author" %} class="error"{% endif %} type="text" name="comment[author]" placeholder="{{ 'blogs.comments.name' | t }}" id="comment-author" value="{{ form.author }}" autocapitalize="words">
+ <div class="grid__item large--one-half">
+ <label for="CommentAuthor" class="label--hidden">{{ 'blogs.comments.name' | t }}</label>
+ <input {% if form.errors contains "author" %} class="error"{% endif %} type="text" name="comment[author]" placeholder="{{ 'blogs.comments.name' | t }}" id="CommentAuthor" value="{{ form.author }}" autocapitalize="words">
 
- <label for="comment-email" class="label--hidden">{{ 'blogs.comments.email' | t }}</label>
- <input {% if form.errors contains "email" %} class="error"{% endif %} type="email" name="comment[email]" placeholder="{{ 'blogs.comments.email' | t }}" id="comment-email" value="{{ form.email }}" autocorrect="off" autocapitalize="off">
+ <label for="CommentEmail" class="label--hidden">{{ 'blogs.comments.email' | t }}</label>
+ <input {% if form.errors contains "email" %} class="error"{% endif %} type="email" name="comment[email]" placeholder="{{ 'blogs.comments.email' | t }}" id="CommentEmail" value="{{ form.email }}" autocorrect="off" autocapitalize="off">
  </div>
 
- <div class="grid-item">
- <label for="comment-body" class="label--hidden">{{ 'blogs.comments.message' | t }}</label>
- <textarea {% if form.errors contains "body" %} class="error"{% endif %} name="comment[body]" id="comment-body" placeholder="{{ 'blogs.comments.message' | t }}">{{ form.body }}</textarea>
+ <div class="grid__item">
+ <label for="CommentBody" class="label--hidden">{{ 'blogs.comments.message' | t }}</label>
+ <textarea {% if form.errors contains "body" %} class="error"{% endif %} name="comment[body]" id="CommentBody" placeholder="{{ 'blogs.comments.message' | t }}">{{ form.body }}</textarea>
  </div>
 
  </div>
@@ -179,7 +179,7 @@
 
  </article>
 
- <aside class="grid-item large--one-quarter" role="complementary">
+ <aside class="grid__item large--one-quarter" role="complementary">
  {% include 'blog-sidebar' %}
  </aside>
 </div>

templates/blog.liquid

@@ -16,11 +16,11 @@
 
 <div class="grid">
 
- <div class="grid-item large--one-quarter">
+ <div class="grid__item large--one-quarter">
  {% include 'blog-sidebar' %}
  </div>
 
- <div class="grid-item large--three-quarters">
+ <div class="grid__item large--three-quarters">
 
  {% if current_tags %}
  <h1>{{ blog.title | link_to: blog.url }} &mdash; {{ current_tags.first }}</h1>