Skip to content

Javascript

Getting Started

Refer to framework/scaffolding/scaffolding.coffee to get started.

Naming Conventions

  • Class names should always be capitalized: ThisIsAClass
  • Method/function names should be camel-case: thisIsAMethod
  • Variable names should be lowercase and underscore seperated: this_is_a_variable

Integrating Coffeescript with Liquid

When sections are added/loaded, or a setting is changed all the html elements with data-js-class attributes will be re-initiated. Eg.

  • example.liquid:
<div
class="blog--root" 
data-js-class="Example" > 
  {% comment %} content {% endcomment %} 
</div>
  • example.coffee (built from scaffolding.coffee):
class theme.classes.Example

  constructor: (@root) ->
    _this = this
    _this.load()

  load: =>
    _this = this 
    _this.someMethod()

If you need to reload external partials use the following:

_this.root.on('theme:section:load', ->
  # ...
)

Media Queries

If you wish to execute a chunk of code that's conditional based on the user's resolution, you can use media queries defined in _framework--media-queries.coffee, as an example:

is_mobile = theme.utils.mqs.current_window == 'small'

if !is_mobile
  _this.initMasonry()