Referral SaaSquatch Help Center

The asset pipeline lets you include static assets like images, javascript and CSS into your themes. This should feel familiar for anyone involved in Rails, Django or Node.js application development.

Step 1
Place static asset files like CSS and images into the /assets/ folder
Step 2
Use the {{assets "file.ext"}} helper to reference those files in your templates
Step 3
Your assets will be automatically versioned, compiled and loaded into a CDN

Supported File Types

LESS Files .less Less files will be compiled and minified with the less compiler
Stylesheets .less Css files will be served with appropriate content-type headers but without any minifcations or modifications.
Javascript .js Js files will be served raw with appropriate content-type headers. Error checking and linting should be done prior to upload.
Images .png .jpg .gif Image files will be served with appropriate content-type headers but without any minifications. Uploaded images should be optimized for web prior to including them as assets.

Example

Source: widget.hbs
<head>
    <link rel="stylesheet" href="{{assets 'css/plaincss.css'}}">
    <link rel="stylesheet" href="{{assets 'css/lesscss.css'}}">
    <script src="{{assets 'js/myscript.js'}}"></script>
</head>
<body>
    <img src="{{assets 'images/logo.png'}}">
</body>
File Layout
├── /assets
|   ├── /css
|       ├── plaincss.css
|       └── lesscss.less
|   ├── /js
|       └── myscript.js
|   └── /images
|       └── logo.png
├── /templates
|   └── widget.hbs
├── variables.json
└── Readme.md
Output: widget.hbs (html)
<head>
    <link rel="stylesheet" href="http://eg.cloudfront.net/assets/c3256hbac/css/plaincss.css">
    <link rel="stylesheet" href="http://eg.cloudfront.net/assets/c3256hbac/css/lesscss.css">
    <script src="http://eg.cloudfront.net/assets/c3256hbac/js/myscript.js"></script>
</head>
<body>
    <img src="http://eg.cloudfront.net/assets/c3256hbac/images/logo.png">
</body>

Looking for something special?

Still couldn't find it?