ruby-on-rails - Rails 像素化模板 (skel)

Question

我想在我的 Rails 4.2.6 应用程序模板中使用 pixelarity（如这个例子http://pixelarity.com/elemental）。

所以，我在 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 } }
    },

我的 layout.html.slim 包含

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

所以，当分辨率改变时，js会插入另一个css。完美的！

但我不明白如何将它附加到我的应用程序中。

如果我将文件放入application.scss其中，它将为每个页面加载，这是错误的，并且文件名将被更改。

此时我使用publicdir，所有这些东西都在其中工作，但这是不对的，我感觉到它（而且我在那里没有缩小）。

我如何以 Rails 方式使用它？我怎样才能留下这个 css 文件的缩小，并用它们的初始名称分开它们？

谢谢！

score 0 · Accepted Answer

根据我在 Drupal 上使用 Pixelarity 的经验，我建议将http://pixelarity.com/elemental模板包含在您自己的 index.html（或任何您命名的...）中，确保所需文件的链接正确（所有您需要进入名为“assets”的像素级目录）。现在，加载您的应用程序，您应该会看到 elementar 在运行。从那里，您可以开始为您的应用程序提供 Rail 应用程序生成的数据。

score 0 · Accepted Answer

您可以通过使用 css3 媒体查询来实现此功能。您可以在以下链接中阅读有关 CSS3 媒体查询的更多信息。

让我解释一下你可以做些什么来解决这个问题，这样你就可以快速前进并在有时间的时候阅读媒体查询。您可以添加所有这些代码，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
}

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

ruby-on-rails - Rails 像素化模板 (skel)

2 回答 2

Related

Reference