Rails layouts are a nice way to organize boiler-plate HTML content in a DRY (“Don’t Repeat Yourself” in case you’ve been asleep for a while) fashion. But your standard layout may not be sufficient to meet the needs of all web pages, particularly when it comes to including CSS style sheets or JavaScript files.<\/p>\n\n\n\n
In a Rails 3.x application, how can you provide an easy method for web pages to include page-specific CSS style sheets and JavaScript files within the <head> section of the HTML?<\/p>\n\n\n\n
Here’s a straight-forward solution to the problem:<\/p>\n\n\n\n
<!DOCTYPE html>\n <html>\n <head>\n <title>Sample<\/title>\n <%= stylesheet_link_tag :all %>\n <%= javascript_include_tag :defaults %>\n %lt;%= csrf_meta_tag %>\n <%= yield :head %>\n <\/head>\n <body>\n\n <%= yield %>\n\n <\/body>\n <\/html>\n<\/pre>\n\n\n\nNote the “yield :head” statement in the <head> section of the document. With this construct in place, any web page can add custom content to the <head> element of the page.<\/p>\n\n\n\n
<% content_for :head do %>\n <%= javascript_include_tag 'custom.css' %>\n <% end %>\n<\/pre>\n\n\n\nIn the example above, a custom CSS file is added for one specific web page.<\/p>\n\n\n\n
With this method, no other page has to bear the burden of including a CSS file that will not be used on that page. For any page that does not provide content for the <head> element, well, no content will be inserted. This is a simple way to support per-page customization capabilities while only affecting the pages that need their own custom support files.<\/p>\n\n\n\n
\n\n\n\nTo the extent possible, it’s beneficial to limit the number of CSS stylesheets your website has. So I’m not advocating tons of little CSS stylesheets for your website. But when one page has a bunch of special-purpose CSS, it’s good to segregate that code in a separate stylesheet and include it in only where it’s needed.<\/p>\n\n\n\n
The recipe described in this article serves to meet those occasional CSS needs.<\/p>\n","protected":false},"excerpt":{"rendered":"
Rails layouts are a nice way to organize boiler-plate HTML content in a DRY (“Don’t Repeat Yourself” in<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[160],"class_list":["post-779","post","type-post","status-publish","format-standard","hentry","category-technology","tag-rails"],"_links":{"self":[{"href":"https:\/\/staging.keenertech.com\/index.php?rest_route=\/wp\/v2\/posts\/779","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.keenertech.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/staging.keenertech.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/staging.keenertech.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.keenertech.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=779"}],"version-history":[{"count":0,"href":"https:\/\/staging.keenertech.com\/index.php?rest_route=\/wp\/v2\/posts\/779\/revisions"}],"wp:attachment":[{"href":"https:\/\/staging.keenertech.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=779"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staging.keenertech.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=779"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging.keenertech.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=779"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}