Rails Precompiling Assets is best practice for responsive css
These are the styles that my page includes (the top ones return production errors)
<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 site is responsive, so I want the styles to be included as they are needed based on the screen size. Is there a way to provide 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 and also the whole thing would break my css. My site looked good in development :)
now for ive set config.assets.enabled = false in config / application.rb, would it be better to compress the css and enable it manually yourself?
This is somewhat similar to this question, except that I don't like any of the answers. This is of course a simple solution. Using the Rails 3.1 resource pipeline to conditionally use certain css
source to share
I think you are taking the wrong direction for using the asset pipeline in general. If you are going to use a pipeline, you just need to save application.css
- this is the manifest file you use to include your files css
. My advice is to move yours link href=
out of the view and use the manifest file (application.css) like this:
*= require_self
*= require foundation
*= require mobile_size
....
*= require_tree
Now you include the precompiled css files (note the hash prefixes) and every time you change your assets the hash prefix will change.
The same happens with files .js
- you must include them in your manifest file application.js
.
EDIT: The idea of ββusing SASS (3.2) and media queries (as described in this CSS trick article , referring to @penner) would be fine in this case.
source to share