Search our shop

Coding Style Guide

Liquid file naming

Templates

When naming Blend Pages templates for clients, they should be prepended with blend-pages. The initial template used for static back pages (e.g. about us, contact) should be called static, while extra templates should be numbered accordingly:

blend-pages-static.liquid
blend-pages-1.liquid
blend-pages-2.liquid

Sections

Section naming should be lowercase hyphenated:

section-name.liquid

Snippets

Snippets should be prepended with include :

include-snippet-name.liquid

Schema naming

ID

These should be lowercase underscored:

display_mode

Which would then be referenced via section.settings.display_mode for example.

Assigns

These should be underscored to match the ID format:

{% assign master_class = section.settings.master_class %} 

SCSS Styling

Classes & ID's -TBC

based off BEM (http://getbem.com/naming)

A single hyphen - should be used for spaces in class names

.featured-products

A double underscore __ should be used to connect a class name to a main page/section:

.featured-products__background

A double hyphen -- should be used for adding a modifier:

.featured-products__background--red

Comments

Theme info

Each time work is done to a theme, the theme version should be updated and the information reflected at the top of the stylesheet

/*  ========================================================
    Base Theme:   Turbo 3.0.4 (https://outofthesandbox.com)
    Theme Name:   BlendPagesPremium 3.1
    Theme Author: Blend Commerce
    Updates:
    ========================================================  */

Table of contents

/*  ----------------------------------------------------
    [blend styles]
    ----------------------------------------------------

  Table of contents:

	0.1 Mixins
	0.2 Variables

	1.0	General
      1.1 Style guide
	    1.2 Turbo overrides
	    1.3 Utility classes
	    1.4 Details Index common

	2.0 Sections
      2.1 FAQ
      2.2 Banner Image
      2.3 Marquee Text Slider
      2.4 Newsletter
      2.5 Table
      2.6 Video
      2.7 Highlight
	    2.8 Trust icons
 	    2.9 Slick - (Carousel)
	
	3.0 Navigation
      3.1 Header
	    3.2 Footer

   4.0 Products
       4.1 Collection
       4.2 Product
       4.3 Detailed Product template
       4.4 Cart

   5.0 Blog & Articles
       5.1 Blog template
       5.2 Article template

    ----------------------------------------------------  */

Headings

Top level headings have 2 clear lines above and below them. Second level headings have a single clear line above and below them.

/*  ----------------------------------------------------
    [1.0 Top level heading]
    ----------------------------------------------------  */


/*  1.1 Second level heading  --------------------------  */

General Comments


/*  Single line comment  */

/*  Multi line comment 
    Multi line comment  */

Versioning

  • All version updates will remove any decimal points below it’s level.
    E.g “V1.2.5 -> V2” and “V2.4.1 -> V2.5”
  • For store redesigns, there should be a full version upgrade.
    E.g. V1.2.5 -> V2
  • For medium sized changes such as adding/restyling a new page/section, there should be a single decimal version upgrade.
    E.g. V1.2.5 -> V1.3
  • For small changes such as small styling changes, updating small text info and bug fixes do the following:
    E.g. V1.2.5 -> V1.2.6
  • Versioning should only be added between each publish, for a store setup it should be published V1 as it should be successfully published before any updating is needed. Once the theme is published and live, if there are any changes that need doing, make a copy of the theme, and use the versioning above for the new file name ensuring you are not editing the live theme file.
Phil Penny

Phil Penny