Page-Specific CSS with Rails App

Adding page-specific CSS to Rails Asset Pipeline

I found this blog post to be very helpful: http://blog.seancarpenter.net/2012/11/05/page-specific-javascript-with-the-asset-pipeline/. My answer paraphrases what this blogger already wrote and fills in a few missing details.


First, it's important that you've read and understood the Rails Guide to the Asset Pipeline. Unfortunately, this guide doesn't clearly explain how to add action-specific assets, but it does cover some concepts you need to know. Made sure you understand these ideas:

  • That the asset pipeline compiles Javascript, CSS, and other assets so that Rails servers can cache assets for better performance.
  • That manifest files use commands like require, require_tree, and require_self to indicate which files are compiled together.
  • That in order for the asset pipeline to work properly in production, you need to manually run rake assets:precompile to produce the compiled, minified assets in the public directory.

These ideas are the minimum "need-to-know" pieces of information about the asset pipeline. If you don't already understand these ideas, you don't have an "expert or enthusiast" level of knowledge about the pipeline, and unfortunately, SO isn't the right place to learn this stuff. Fortunately, the the Rails Guide to the Asset Pipeline is a short 15-minute read and can get you up to speed quickly if you need it.


Second, these are the changes you need to make in order to ensure that the asset pipeline correctly sees and handles your new print.css file.

Follow these steps:

  1. Add your print.css file to app/assets/css.
  2. You'll need to create a manifest file that will show Rails where to find print.css. You need to do this, even though you only have a single CSS file you're adding. This is an easy step:

    • Add a file called print.js to app/assets/javascript.
    • Add this line to print.js:

//= require print

This will be the only line in the entire print.js file. If I understand correctly, Rails expects manifest files to have the file extension .js, which is why we aren't using print.css as the manifest file.


  1. We now need to instruct Rails to find and use the print.js manifest. Add the following line in your config/application.rb file:

config.assets.precompile += %w( print.js )

  1. We're almost finished! However, the already-present application.js manifest includes the line //= require_tree . which means that it will include your print.css file. This will cause your print.css styling to affect your entire site, not just the single view. There are two ways of dealing with this:

    • If application.js and print.js do not share any assets, you can use the stub command in your application.js to exclude the assets used in print.js. What this does is instruct application.js to remove any of the assets that print.js references from its own list of referenced files. Our modified application.js looks like:

(snip...)
require_tree .
stub print

See this answer for more information.

  • If your print.js and application.js files share some assets, you'll need to move all of the assets used by application.js into subdirectories. I didn't do this myself, so I'm not the most help in this area. Look at this answer for instructions.

Now we have included print.css in the asset pipeline. We now need to direct Rails to use print.css in your specific view.

Let's say your action is in the reports controller, and that the action is named print_reports. This means we have a reports_controller.rb file and a print_reports.html.erb (or .haml) file. We need to make several changes to these files.

  1. To start, add a new layout in app/views/layouts. Perhaps call it print.html.erb. We'll use this new layout for your print_reports.html.erb file. Set it up as you desire. For a page intended to be printed, this will likely be very simple, such as

<html>
<head>
<title="Print">
</head>
<body>
<%= yield %>
</body>
</html>

Using a separate layout the disadvantage that it's difficult to keep this layout and the layout used by the rest of the application in sync, but if you are using separate CSS files for the action, it's unlikely that you want the layout to be the same anyway.


  1. Add a stylesheet_link_tag in the layout's header pointing to your print.css:

<html>
<head>
<title="Print"/>
<%= stylesheet_link_tag "print" %>
</head>
<body>
<%= yield %>
</body>
</html>

  1. In the controller, we'll tell Rails to use our new layout for the action. Add the line layout 'print', only: [:print_reports] to your controller:

class reports_controller < ApplicationController
layout 'print', only: [:print_reports]

#snip

See this question for more information and a few different approaches.

At this point, when you run the app, your print_reports action should be using print.css correctly!


Remember to run rake assets:precompile before deploying on the server.

Adding a specific stylesheet to a single Rails page

One way would be to target your controller and action using CSS classes.

In your app/views/layouts/application.html.erb, add controller_name and action_name method calls to generate the CSS classes.

<body class="<%= controller_name %> <%= action_name %>">

CSS

html { height: 100% }

body.home {
height: 100%;
background: url('assets/image.jpg') no-repeat center center;
background-size: cover;
font-family: Arial;
}

.home h1 {
color: black;
font-style: bold;
text-align: center;
}

How do I implement page specific CSS in Ruby on Rails (5.2)

One of the popular solutions is adding a class in application.html.erb to a body like that:

<body class="<%= controller_name.underscore %>"> 

After you can use in different css files quite simple logic

body.posts_controller {
#posts {
max-height: 200px;
}
}

What is the best way of organizing and implementing page specific CSS and JavaScript in a Ruby on Rails application?

As far as I understand, you want to add your custom folders under the assets directory, put some files with specific CSS and JS and use them whenever you need it.

To achieve this you should include those files somewhere. By default, you have an appplication layout which includes application.js and application.css files which includes the rest of the related files. Those files known as manifest files and they are using sprockets gem to handle dependencies, preprocessing, compressing and other stuff (you can read more about it here). You can change the assets folder using config.assets.prefix or add new paths to look up for sprockets using config.assets.paths (This might be what you are looking for. Further reading here)

Rails: page-specific CSS class in a common layout

I think content_for will be good for this.

In your layout application.html.erb:

<DOCTYPE! html>
<html>
<head>
·
·
</head>
<body class="<%= content_for :body_class %>">
<header class="<%= content_for :header_class %>">
·
·
</header>
·
<%= yield %>
·
</body>
</html>

In view home.html.erb:

<% content_for :body_class, 'class1' %>
<% content_for :header_class, 'class2' %>

<div>
Content unique for this page
</div>

Its much more flexible and easier than use conditionals and check current controller with action.

http://guides.rubyonrails.org/layouts_and_rendering.html#using-the-content-for-method



Related Topics



Leave a reply



Submit