StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I've discovered a way to make it less rigid and future proof by still using the asset pipeline but having the stylesheets grouped. It's not much simpler than your solution, but this solution allows you to automatically add new stylesheets without having to re-edit the whole structure again.</p> <p>What you want to do is use separate manifest files to break things up. First you have to re-organize your <code>app/assets/stylesheets</code> folder:</p> <pre><code>app/assets/stylesheets +-- all +-- your_base_stylesheet.css +-- print +-- blueprint +-- print.css +-- your_print_stylesheet.css +-- ie +-- blueprint + ie.css +-- your_ie_hacks.css +-- application-all.css +-- application-print.css +-- application-ie.css </code></pre> <p>Then you edit the three manifest files:</p> <pre><code>/** * application-all.css * *= require_self *= require_tree ./all */ /** * application-print.css * *= require_self *= require_tree ./print */ /** * application-ie.css * *= require_self *= require_tree ./ie */ </code></pre> <p>Next you update your application layout file:</p> <pre><code><%= stylesheet_link_tag "application-all", :media => "all" %> <%= stylesheet_link_tag "application-print", :media => "print" %>  </code></pre> <p>Lastly, don't forget to include these new manifest files in your config/environments/production.rb:</p> <pre><code>config.assets.precompile += %w( application-all.css application-print.css application-ie.css ) </code></pre> <p>Update:</p> <p>As Max pointed out, if you follow this structure you have to be mindful of image references. You have a few choices:</p> <ol> <li><strong>Move the images to follow the same pattern</strong> <ul> <li>Note that this only works if the images are not all shared</li> <li>I expect this will be a non-starter for most since it complicates things too much</li> </ul></li> <li><strong>Qualify the image path:</strong> <ul> <li><code>background: url('/assets/image.png');</code></li> </ul></li> <li><strong>Use the SASS helper:</strong> <ul> <li><code>background: image-url('image.png');</code></li> </ul></li> </ol>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload