Rails pixelarity模板（skel）

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

所以，我有有趣的建设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 dir，所有这些东西的作品，但它是不正确的，我觉得它（我没有minifing那里）。

我如何在轨道上使用它？我怎样才能保留这个css文件的minifing，并将它们分开并保留它们的名字？

谢谢！

来源

2016-04-27 Mike Belyakov

pixelarity给你什么指示？你的'app/views/layouts/application.html.erb'看起来像什么？ –

为该问题添加了信息。 –

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

请检查并让我知道你是否需要任何帮助。

来源

2016-05-06 02:36:44 Murtza

谢谢！我只是不明白，为什么'skel'站在js切换台上？因为ie8的支持？我没有更多的想法 –

从上Drupal的使用Pixelarity我的经验，我建议在你自己的index.html http://pixelarity.com/elemental模板（或任何你的名字......），应确保链接到所需的文件是正确的（你需要的是成名为'资产'的像素性目录）。现在，加载你的应用程序，你应该看到elementar的行动。从那里，您可以开始为您的应用程序提供由您的Rail应用程序生成的数据。

来源

2016-05-22 04:08:35 augusto

Rails pixelarity模板（skel）

回答

相关问题