Rails pixelarity template (skel)

Question

I want to use in my Rails 4.2.6 app template from pixelarity (like this example http://pixelarity.com/elemental).

So, I've got interesting construction in main.js (snippet)

    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 } }
    },

my layout.html.slim contains

= stylesheet_link_tag "application", :media => "all"
= javascript_include_tag "application"

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

But I do not understand how to attach it to my app.

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

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

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?

Thank you!

Answer 1

You can achieve this functionality by using css3 media queries. You can read more about CSS3 media queries at following links.

• https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

• https://www.w3.org/TR/css3-mediaqueries/

• https://css-tricks.com/css-media-queries/

Let me explain what you can do to solve this problem so you can move ahead quickly and read about media queries when you have time. You can add all this code in application.scss because it loads in the layout.html.slim. You can copy the styles of style-mobile.css and paste between the following block of code in the application.scss.

@media (max-width: 736px) {
  // STYLES OF "style-mobile.css" GOES HERE
}

You can copy the styles of style-narrower.css and paste between the following block of code application.scss.

@media (max-width: 840px) {
  // STYLES OF "style-narrower.css" GOES HERE
}

You can copy the styles of style-narrow.css and paste between the following block of code application.scss.

@media (max-width: 960px) {
  // STYLES OF "style-narrow.css" GOES HERE
}

You can copy the styles of style-normal.css and paste between the following block of code application.scss.

@media (max-width: 1280px) {
  // STYLES OF "style-normal.css" GOES HERE
}

You can copy the styles of style-wide.css and paste between the following block of code application.scss.

@media (max-width: 1680px) {
  // STYLES OF "style-wide.css" GOES HERE
}

Please check and let me know if you need any help.

Answer 2

From my experience using Pixelarity on Drupal, I would suggest to include http://pixelarity.com/elemental template in your own index.html (or whatever you name it...), being sure links to required files are correct (all you need is into the pixelarity directory named 'assets'). Now, loading you app, you should see elementar in action. From there, you can start feeding you app with data produced by your Rail App.