I am working on different HTML.erb files for different pages of an app, but it seems like the SCSS files for css affect all of my HTML.erb files, even when I call the scss file in only one of the html.erb. Is this how it is supposed to be, or any advice over putting ids for everything?
Like for my frontpage.html.erb, I have a SCSS file called frontpage.scss.
When I put
<%= stylesheet_link_tag 'frontpage', media: 'all', 'data-turbolinks-track': 'reload' %>
in my scss, it also changes that case for all my other html.erb files.
This might be a simple question, but I would really appreciate some advice, thank you so much!
A similar question was asked here: Problem with scss files affecting more than one view
Unfortunately, this is simply how rails works. The link to the question/answer I provided should adequately explain how it works and how to approach the issue.
Related
So unless I can not Google properly I can't find a definitive 'best practice' way to use Vendor styling in Rails 7.
It's the same with everything but say I am including Froala Editor and I include the JS through ImportMap and everything is great.
The way that I have found to include the styling for it though is to download the CSS and put it in a /vendor folder in my stylesheets directory and then include it.
Surely I am missing something simple...
Here is how I am adding css files
Create a vendor/stylesheets folder
Modify config/initializers/assets.rb and add
Rails.application.config.assets.paths << Rails.root.join("vendor", "stylesheets")
Then
Download css files into vendor/stylesheets folder (you may need to create the stylesheets folder)
Add to app/views/layouts/application.html.erb
<%= stylesheet_link_tag "application", "cssfile.min", "data-turbo-track": "reload" %>
I'm currently working on landing and login/signup pages, and am trying to apply different stylesheets to each layout. I've tried making a separate layout page for my home controller and calling it in my home controller with layout "home". My app/views/layouts/home.html.erb file is pretty much the same as application.html.erb, except that I changed the stylesheet_link_tag from <%= stylesheet_link_tag "application" %> to <%= stylesheet_link_tag "home" %>. Though the styling from my login/signup pages is no longer applying to my landing page, my landing page now no longer has any of the styling given to it in my app/assets/stylsheets/home.scss file. Is there more I'm supposed to change in my layouts file than just the stylesheet_link_tag, or am I setting up separate stylesheets for each view improperly? If so, what's the proper way to do it?
i wouldn't recommend changing this<%= stylesheet_link_tag "application" %>, instead, in my opinion, best way is to create a folder in assets/stylesheets for each controller you have. for example: i have home_page_controller.rb i would create a folder in assets/stylesheets as home_page then i would make a scss file e.g show. this allows me to navigate to my files easily. of course you can have your different approach but thats my take on it.
I figured it out and got it to work by putting <body class="controller-<%= controller_name %>"> in my application.html.erb file, and placing whatever styling I wanted for my "home" views under .controller-home
Since rails generate scaffold generates CSS and JS files with the same names as the controller you generate it might be intuitive to think that these files will only be loaded by that controller. That's not the case. They're loaded globally by default, and that's sort of the point.
Like Marv-C said, I wouldn't recommend changing <%= stylesheet_link_tag "application" %>. In production mode, Rails optimizes your CSS by loading all of it into a single file.
This also means you can structure your CSS documents any way you want. You can eliminate overlap between CSS documents by using sensible class and id-selectors (which you should).
If you take advantage of SASS nesting, it should be no problem at all.
http://sass-lang.com/guide
This question already has answers here:
Using Rails 3.1, where do you put your "page specific" JavaScript code?
(29 answers)
Closed 9 years ago.
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
*/
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 %>
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.
I am building a Rails 3.2 app which has some functionality where a user can apply different themes (i.e. CSS files) to their websites. I have a Theme model with a theme name and a file name - pretty straightforward.
My question is, where should these css files sit? Should they be in the /assets folder, or in the /public folder? They can't be added to the pipeline as far as I know as I don't know which css file the user will choose so can't precompile.
If I use something like:
stylesheet_link_tag "plain.css"
It of course generates a path to /assets/plain.css which is not a valid path.
I can put it in /public and generate the path using something like
"public/themes/" + theme.file
But something about that feels wrong. Any architecture suggestions?
If all themes are simple pre–existing stylesheets of which the user picks one, I’d go with
/app/assets/stylesheets/themes/plain.css
Then use this in the view:
stylesheet_link_tag "themes/plain"
# or e.g. using the model
stylesheet_link_tag "themes/#{current_user.theme.file_name}“
You could also consider creating a theme_stylesheet_tag helper which does this for you in a more cleanly way.
This is just a question to put out there to see what everyone else is doing, I'm sure I could be doing things a little better when it comes to structuring my files within Rails 3.1 app.
At present all my CSS goes into application.css file under stylesheets, and in my application.html.erb files under layouts I have
<%= stylesheet_link_tag "application", media: "all" %>
Is there a more efficient or Rails way of doing this or am I OK to carry on like this.? Just trying to get into the habit of using Rails best practices
All advice appreciated
there is a good way to structure your css. have a look here (have to scroll a little bit):
3.1.3 Linking to CSS Files with the stylesheet_link_tag
so i assume it's an efficient rails way