[英]Rails pixelarity template (skel)
我想在pixelarity的Rails 4.2.6 app模板中使用(比如這個例子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
目錄,所有這些東西都有效,但它不對,我覺得它(我在那里沒有minifing)。
我如何以rails方式使用它? 我怎么能留下這個css文件的minifing,並將它們與他們的初始名稱分開?
謝謝!
您可以使用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
}
如果您需要任何幫助,請檢查並告訴我們。
根據我在Drupal上使用Pixelarity的經驗,我建議將http://pixelarity.com/elemental模板包含在您自己的index.html(或任何您的名字......)中,確保所需文件的鏈接正確(所有你需要進入名為'assets'的pixelarity目錄。 現在,加載你的應用程序,你應該看到elementar在行動。 從那里,您可以開始使用您的鐵路應用程序生成的數據為您提供應用程序。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.