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>

</div>
<div class="span4 well">

File Layout

├── /assets
|   ├── /css
|       ├── plaincss.css
|       └── lesscss.less
|   ├── /js
|       └── myscript.js
|   └── /images
|       └── logo.png
├── /templates
|   └── widget.hbs
├── variables.json
└── Readme.md

</div>

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>

Asset Pipeline

Supported File Types

Example