5

I would like to test out two different interfaces for my Rails application. Ideally, I'd like to have two separate css files, one associated with each interface (e.g., new_interface.css and old_interface.css). I currently have two different partials for the interfaces, one called _new_interface.html.erb and one called _old_interface.html.erb. If I'd like to invoke the correct css file when a particular view is loaded, how would I do this? For example, if I load _new_interface.html.erb, I want it to load the new_interface.css file and ignore the old_interface.css file.

My application.css:

/*
*= require_tree
*/
scientiffic
  • 9,045
  • 18
  • 76
  • 149
  • 1
    Please check this previous question, it's about JavaScript but the solution is the same for CSS. http://stackoverflow.com/questions/6167805/using-rails-3-1-where-do-you-put-your-page-specific-javascript-code – Marcelo De Polli Mar 29 '13 at 18:07
  • I ended up using this solution. thanks for your response! – scientiffic Mar 30 '13 at 14:57
  • I answered this question here if you need. http://stackoverflow.com/questions/26243434/separate-css-folders-for-separate-rails-controllers/26246392#26246392 – user3591126 Oct 07 '14 at 22:39

2 Answers2

6

This question seems to be aimed at what you need to do: Using Rails 3.1 assets pipeline to conditionally use certain css

In a nutshell, you need to reorganize your app/assets/stylesheet folder into some subdirectories and change your manifest files so that not everything gets bundled together at run time.

Then you can put some conditional logic in your view so that it loads the right css for the job. The content_for tag is probably going to be useful here. You could edit app/views/layouts/application.html.erb and include a line just after the other javascript <%= yield :view_specific_css %>. Then in your view file you can use 

<% content_for :view_specific_css do %>
    <%= stylesheet_link_tag "whatever %>
<% end %>
Community
  • 1
  • 1
Kevin Thompson
  • 2,466
  • 4
  • 29
  • 40
3

You should keep them both as part of application.css and do the following

application.html.haml/erb

body{:class => @old_layout ? "old_layout" : "new_layout"}

Then when ever you are in an action that is off the old layout in your controller put

@old_layout = true

Then in your css files either prepend everything with body.old_layout or body.new_layout or use scss, a subset of sass, and rap your current css files like so

body.old_layout{
  #all your old layout css goes here, all but body statements of course
}

body.new_layout{
  #all your new layout css goes here, all but body statements of course
}

This way you keep things simple with one css file. And with a solution that easily allows you to switch over each controller action one at a time.

rovermicrover
  • 1,453
  • 1
  • 15
  • 21
  • thanks for your response. can you explain what this line means? body{:class => @old_layout ? "old_layout" : "new_layout"} Does it mean that it checks the value of old_layout and makes the body class old_layout if it's true and new_layout if it's false? – scientiffic Mar 30 '13 at 15:00
  • 1
    Yes thats about right. But remember it will also do new_layout if (at)old_layout is nil also, so you don't have to set (at)old_layout in your controller action when your dealing with a method thats using the new layout. Its also a nice way of marking out which methods still need to be upgraded because each one of them will contain (at)old_layout = true. – rovermicrover Mar 30 '13 at 15:48