Rails pixelarity template (skel)
<p>I want to use in my Rails 4.2.6 app template from pixelarity (like this example <a href="http://pixelarity.com/elemental">http://pixelarity.com/elemental</a>).</p>

<p>So, I've got interesting construction in main.js (snippet)</p>

<pre><code>    skel.init({
    reset: 'full',
    breakpoints: {
        'global':   { range: '*', href: 'style.css', containers: 1400, grid: { gutters: 48 } },
        'wide':     { range: '-1680', href: 'style-wide.css', containers: 1200 },
        'normal':   { range: '-1280', href: 'style-normal.css', containers: '100%', grid: { gutters: 36 } },
        'narrow':   { range: '-960', href: 'style-narrow.css', grid: { gutters: 32 } },
        'narrower': { range: '-840', href: 'style-narrower.css', containers: '100%!', grid: { collapse: true } },
        'mobile':   { range: '-736', href: 'style-mobile.css', grid: { gutters: 20 }, viewport: { scalable: false } }
    },
</code></pre>

<p>my layout.html.slim contains</p>

<pre><code>= stylesheet_link_tag "application", :media =&gt; "all"
= javascript_include_tag "application"
</code></pre>

<p>so, when the resolution will be changed js will plug in another css. Perfect! </p>

<p>But I do not understand how to attach it to my app. </p>

<p>If I put files in <code>application.scss</code> it will be loaded for every page, which is wrong, and filename will be changed.</p>

<p>At this moment I use <code>public</code> dir, where all this stuff works, but it is not right, i feel it (and i have no minifing there). </p>

<p>How I can use it in rails way? How I can leave minifing of this css files, and leave them separately with their initial names?</p>

<p>Thank you!</p>