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
Related
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.
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
I'm trying to use these icons for my site. I already downloaded bootstrap, and have a bootstrap.css file. If I download all of bootstrap, it messes my site up, so I downloaded a customized version. I forgot to download the icons, so what I did was download a customized bootstrap with only the icons, and then copy and pasted that into my old bootstrap.css file. However, the icon I was trying to use didn't work.
So then what I did was I tried moving my old bootstrap.css file out of vendor/assets/stylesheets and into vendor/assets, and I put the new bootstrap.css file (with only the icons styling) into vendor/assets/stylesheets. When I did that, the icon still didn't show. So I removed the new bootstrap.css file, and I put the old one back into vender/assets/stylesheets. However... now none of the bootstrap styling works!!! I have no clue why that is!
I tried restarting my web server, clearing my cache, I checked to see if there is an assets folder in my public folder (because when there is I can't see css changes using localhost. something to do with compiling). None of it worked, and I still can't see any of the bootstrap styling in my localhost. When I use inspect element, I don't see the bootstrap styles being applied. I'm afraid to update the actual site, because I might loose the bootstrap styling. If you want me to update it so you can see it and help me and are confident that I won't lose the bootstrap styling, I'll trust you and do it. Let me know.
Error:
Sass::SyntaxError in Static_pages#home
Showing /Users/adamzerner/collegeanswerz/app/views/static_pages/home.html.erb where line #1 raised:
Invalid CSS after "...ground-position": expected ";", was ": center;"
(in /Users/adamzerner/collegeanswerz/app/assets/stylesheets/home.css.scss)
Extracted source (around line #1):
1: <%= stylesheet_link_tag "home", :media => "all" %>
2: <%= javascript_include_tag :application %>
3: <% provide(:title, 'Questions About College? CollegeANSWERZ') %>
4:
Rails.root: /Users/adamzerner/collegeanswerz
Application Trace | Framework Trace | Full Trace
app/assets/stylesheets/bootstrap.css:1939
app/assets/stylesheets/home.css.scss:1
app/views/static_pages/home.html.erb:1:in `_app_views_static_pages_home_html_erb__737002310770935096_70160250580000'
Request
Parameters:
None
Show session dump
Show env dump
Response
Headers:
None
If you are using ruby on rails, then you can use the bootstrap-sass gem.
gem 'bootstrap-sass'
and then start using it by adding
#import bootstrap;
to the css file under app/assets/stylesheets. You can have all the functions provided by bootstrap.
But if you still want the customized version, you can place the bootstrap css files under app/assets/stylesheets and javascript files under app/assets/javascripts and images under app/assets/images. You can download the missing images from bootstrap and then go to /img for the images.
EDIT:
Looking at your error logs and the css you have provided in the comment. You have forgotten the semicolon after the background-image: url("glyphicons-halflings.png");
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.