Contribution Guidelines

General

Indentation, two spaces.

Schema labels, default titles, section names should be sentence case.

Keep class names as verbose as possible and avoid abbreviations or acronyms.

col = column
cta = announcement

HTML

Always comment the file directory at the top of included files followed by an empty line.

<!-- sections/contact-form.liquid -->
 
<span>Your code goes here<span>

ids and classes that are assign for styling with multiple words should be separated by hyphens, whereas if they are a javascript selector they should use camelCase

 <div class="a-class-with-styles aClassWithScripts"></div>
 <div id="an-id-with-styles"></div><div id="anIdWithScripts"></div>

Liquid

Liquid variables with multiple words should be separated by an underscore

{% assign submit_text = true %}

Sections that include presets, i.e are intended for the index page only should be prefixed by index

sections/index-product-slider.liquid

Sections that are intended to be statically included on a specific page should be prefixed with the parent's name and specific template

sections/article-sidebar.liquid <!-- Included on templates/article.liquid --> 
sections/blog-news-sidebar.liquid <!-- Included on templates/blog.news.liquid -->
sections/page-about-staff.liquid <!-- Included on templates/page.about.liquid -->

CSS / SCSS

ids and classes that are assigned for styling with multiple words should be separated by hyphens

 <div class="a-class-with-styles"></div>
 <div id="an-id-with-styles"></div>
 
 .a-class-with-styles {
    color:#ffffff;
  }

Javascript

ids and classes that are assigned for Javascript with multiple words should use camelCase

 <div class="aClassWithScripts"></div>
 <div id="anIdWithScripts"></div>

Javascript / Jquery does not need semi-colons.

  $(selector).addClass('class')