3

These are the styles my page include (the top ones return get errors on production) 

<link href="/assets/foundation.css" rel="stylesheet" type="text/css" />
<link href="/assets/app.css" rel="stylesheet" type="text/css" />
<link href="/assets/full_size.css" media="screen and (min-width: 761px)" rel="stylesheet" type="text/css" />
<link href="/assets/mobile_size.css" media="screen and (max-width: 760px)"   rel="stylesheet" type="text/css" />

<link href="/assets/application-b0a44b2bbc0d3c94d855fbb830c2098d.css" media="screen" rel="stylesheet" type="text/css" />
<script src="/assets/application-cd6a361c13ee838fceb09ecb2c58c467.js" type="text/javascript"></script>

My website is responsive so I want the styles to be included as they are needed based on the screen's size. Is there a way to precomplie my css separately so that it looks like this:

<link href="/assets/foundation-b0a44b2bbc0d3c94d855fbb830c2098d.css" rel="stylesheet" type="text/css" />
<link href="/assets/app-b0a44b2bbc0d3c94d855fbb830c2098d.css" rel="stylesheet" type="text/css" />
<link href="/assets/full_size-b0a44b2bbc0d3c94d855fbb830c2098d.css" media="screen and (min-width: 761px)" rel="stylesheet" type="text/css" />
<link href="/assets/mobile_size-b0a44b2bbc0d3c94d855fbb830c2098d.css" media="screen and (max-width: 760px)"   rel="stylesheet" type="text/css" />

Then there would be no need for application.css, also combining it all breaks my css. My website looked good in development :)

for now ive set config.assets.enabled = false in the config/application.rb, would it be a better idea to compress the css and it include it manually on my own?

This is somewhat similar to this question except I don't like any of the answers. Surely there is a simple solution to this. Using Rails 3.1 assets pipeline to conditionally use certain css

Community
  • 1
  • 1
penner
  • 2,707
  • 1
  • 37
  • 48

1 Answers1

1

I think you are taking a wrong direction for using the asset-pipeline in general . If you are about to use the pipeline , you just have to keep the application.css - this is a manifest file , that you use to include your css files . My advice is to move your link href= from view and use the manifest file (application.css) like this :

*= require_self
*= require foundation
*= require mobile_size

....
*= require_tree

What you are including now are precompiled css files (notice the hash prefixes) and every time you modify your assets , the hash prefix will change .

The same is the situation with .js files - you have to include them in application.js manifest file .

EDIT : The idea of using SASS (3.2) and media-queries (as described in this CSS-tricks article, regards to @penner) would fit nicely in this case.

R Milushev
  • 4,295
  • 3
  • 27
  • 35
  • This doesn't preserve the logic attached to my css stylesheets though media="screen and (max-width: 760px)" – penner Jan 25 '13 at 18:11
  • What do you mean ? If you have a definition in one of the styles , included in the manifest , the asset-pipeline should follow your logic . – R Milushev Jan 25 '13 at 19:58
  • Combining all my css stylesheets into one breaks my css. Your browser conditionally includes my css depending on what size the screen is. Since your screen is bigger than 760px, that stylesheet is never included. The styles mobile_size.css override the styles in full_size.css – penner Jan 25 '13 at 20:48
  • You might consider to use SASS in you project .[The reference](http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#id10) to some basic directives can give you ideas how to avoid this override problem . – R Milushev Jan 25 '13 at 21:27
  • 1
    http://css-tricks.com/media-queries-sass-3-2-and-codekit/ I think this is the answer, you should throw this in an answer since it was your idea. – penner Jan 26 '13 at 19:04