assets.html

---
title: Asset Pipeline
highlights: 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.
slug: themes/assets
sectionType: themes
template: article.html
robots : noindex, nofollow
---

<div class="row-fluid">
    <div class="span4 well" style="min-height: 150px"><b>Step 1</b><br> Place static asset files like CSS and images into the <code>/assets/</code> folder</div>
    <div class="span4 well" style="min-height: 150px"><b>Step 2</b><br> Use the <code>{{assets "file.ext"}}</code> <a href="/themes/helpers/">helper</a> to reference those files in your <a href="/themes/templates/">templates</a></div>
    <div class="span4 well" style="min-height: 150px"><b>Step 3</b><br> Your assets will be automatically versioned, compiled and loaded into a CDN</div>
</div>


<h3>Supported File Types</h3>

<table class="table">
    <tr>
        <td>LESS Files</td>
        <td><code>.less</code></td>
        <td><a href="http://lesscss.org/">Less</a> files will be <b>compiled and minified with the less compiler</b></td>
    </tr>
    <tr>
        <td>Stylesheets</td>
        <td><code>.less</code></td>
        <td>Css files will be served with appropriate content-type headers but without any minifcations or modifications.</td>
    </tr>
    <tr>
        <td>Javascript</td>
        <td><code>.js</code></td>
        <td>Js files will be served raw with appropriate content-type headers. Error checking and linting should be done prior to upload.</td>
    </tr>
    <tr>
        <td>Images</td>
        <td><code>.png</code> <code>.jpg</code> <code>.gif</code></td>
        <td>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.</td>
    </tr>
</table>

<h3>Example</h3>
<div class="row-fluid">
    <div class="span8 well">
        
<b>Source: widget.hbs</b>
<pre><code class="lang-hbs">&lt;head&gt;
    &lt;link rel="stylesheet" href="{{assets 'css/plaincss.css'}}"&gt;
    &lt;link rel="stylesheet" href="{{assets 'css/lesscss.css'}}"&gt;
    &lt;script src="{{assets 'js/myscript.js'}}"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;img src="{{assets 'images/logo.png'}}"&gt;
&lt;/body&gt;</code></pre>

    </div>
    <div class="span4 well">
<b>File Layout</b>
<pre>├── /assets
|   ├── /css
|       ├── plaincss.css
|       └── lesscss.less
|   ├── /js
|       └── myscript.js
|   └── /images
|       └── logo.png
├── /templates
|   └── widget.hbs
├── variables.json
└── Readme.md
</pre>
    </div>
</div>

<div class="well">
<b>Output: widget.hbs (html)</b>
<pre><code class="lang-html">&lt;head&gt;
    &lt;link rel="stylesheet" href="http://eg.cloudfront.net/assets/c3256hbac/css/plaincss.css"&gt;
    &lt;link rel="stylesheet" href="http://eg.cloudfront.net/assets/c3256hbac/css/lesscss.css"&gt;
    &lt;script src="http://eg.cloudfront.net/assets/c3256hbac/js/myscript.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;img src="http://eg.cloudfront.net/assets/c3256hbac/images/logo.png"&gt;
&lt;/body&gt;</code></pre>
</div>