Шаблон пикселизма рельсов (скел)

Question

Я хочу использовать в своем приложении Rails 4.2.6 шаблон из пикселности (как в этом примере http://pixelarity.com/elemental).

Итак, у меня есть интересная конструкция в main.js (фрагмент)

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

мой layout.html.slim содержит

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

поэтому, когда разрешение будет изменено, js подключится к другому css. Отлично!

Но я не понимаю, как прикрепить его к моему приложению.

Если я положу файлы в application.scss он будет загружен для каждой страницы, что неверно, и имя файла будет изменено.

На данный момент я использую public Дир, где все это работает, но это не правильно, я это чувствую (и у меня нет там ни одной мелочи).

Как я могу использовать его в пути? Как я могу оставить мини-файлы этих CSS-файлов и оставить их отдельно с их первоначальными именами?

Спасибо!

Answer 1

Исходя из моего опыта использования Pixelarity на Drupal, я бы предложил включить http://pixelarity.com/elemental template в ваш собственный index.html (или как вы его называете...), убедившись, что ссылки на необходимые файлы верны (все вам нужно в каталог пикселей с именем 'assets'). Теперь, загружая ваше приложение, вы должны увидеть elementar в действии. Оттуда вы можете начать заполнять ваше приложение данными, созданными вашим Rail App.

Answer 2

Вы можете достичь этой функциональности с помощью медиа-запросов css3. Вы можете прочитать больше о медиазапросах CSS3 по следующим ссылкам.

• 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/

Позвольте мне объяснить, что вы можете сделать, чтобы решить эту проблему, чтобы вы могли быстро двигаться вперед и читать о медийных запросах, когда у вас есть время. Вы можете добавить весь этот код в application.scss потому что он загружается в layout.html.slim. Вы можете скопировать стили style-mobile.css и вставьте между следующим блоком кода в application.scss,

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

Вы можете скопировать стили style-narrower.css и вставьте между следующим блоком кода application.scss,

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

Вы можете скопировать стили style-narrow.css и вставьте между следующим блоком кода application.scss,

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

Вы можете скопировать стили style-normal.css и вставьте между следующим блоком кода application.scss,

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

Вы можете скопировать стили style-wide.css и вставьте между следующим блоком кода application.scss,

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

Пожалуйста, проверьте и дайте мне знать, если вам нужна помощь.