Rails像素化模板(skel)

Question

我想在我的Rails 4.2.6应用程序模板中使用来自pixelarity的模板(就像这个示例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目录，所有这些东西都在这里工作，但它并不是正确的，我感觉到了(而且我在那里没有缩小)。

我如何在rails中使用它？我怎样才能保留css文件的缩写，并让它们分别保留它们的初始名称呢？

谢谢!

Answer 1

您可以通过使用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
}

您可以在下面的application.scss代码块之间复制和粘贴style-narrower.css的样式。

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

您可以在下面的application.scss代码块之间复制和粘贴style-narrow.css的样式。

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

您可以在下面的application.scss代码块之间复制和粘贴style-normal.css的样式。

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

您可以在下面的application.scss代码块之间复制和粘贴style-wide.css的样式。

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

如果您需要任何帮助，请查看并告诉我。

Answer 2

根据我在Drupal上使用Pixelarity的经验，我建议在您自己的index.html中包含http://pixelarity.com/elemental模板(或者无论您如何命名它...)，确保指向所需文件的链接是正确的(您所需要的就是进入名为‘assets’的pixelarity目录)。现在，加载你的应用程序，你应该会看到elementar在运行。从那里，您可以开始向您的应用程序提供Rail应用程序生成的数据。