Rails pixelarity template（skel）

Question

私はRails 4.2.6アプリケーションテンプレート（この例のようにhttp://pixelarity.com/elemental）から使いたいです。解像度がJSをします変更されます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" 

含まれ、別のCSSを接続します。完璧！

しかし、私はそれを私のアプリにつける方法を理解していません。

ファイルをapplication.scssに置くと、すべてのページで読み込まれますが、これは間違っており、ファイル名は変更されます。

この時点で私はpublicディレクトリを使用していますが、このすべてのものは動作しますが、正しくはありません。私はそれを感じています。

どのように私はレールの方法でそれを使用できますか？どのように私はこのcssファイルのminifingを残すことができ、それらを最初の名前で別々に残しますか？

ありがとうございました！

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 
} 

あなたは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 
} 

ご不明な点がある場合は、私にご連絡ください。

Answer 2

DrupalでPixelarityを使用した経験から、http://pixelarity.com/elementalテンプレートを独自のindex.html（または名前を付けて...）に含めることをお勧めします。必要なファイルへのリンクが正しいことを確認してください「assets」という名前のピクセル性ディレクトリ）。 アプリをロードすると、実際にelementarが表示されます。 そこから、あなたのレールアプリによって作成されたデータを使ってあなたにアプリを送り始めることができます。