I am creating a custom CSS stylesheet for a Rails 3 application.
Is there a list anywhere of the CSS styles that Rails relies upon? So far I have found:
#notice
#error_explanation
.field_with_errors
Many thanks.
The css for the flash-messages you can choose yourself, as they are normally defined in application.html.erb (there is no default definition for flash-messages in rails 3).
For form-styling i would recommend using a gem like formtastic, which not only greatly simplifies making forms, but also provides a standard css file. So all needed tags are then known (and can be overwritten if needed).
If on the other hand you are looking at ways to get your complete layout started quickly, you might want to checkout web-app-theme or activo (which is even more complete).
A fresh Rails 3 app will not require any specific CSS class/id styles beyond the three you just mentioned, which is why no default stylesheet is generated until you start scaffolding.
If you run script/rails generate scaffold MyModel it will create a stylesheet called scaffold.css which the generated views will rely upon.
Related
I am using twitter bootstrap installed by copying bootstrap.min.css, etc. into the vendor/assets folder.
When using rails forms validations, error messages appear using default styling, not the bootstrap styling I would expect (e.g. the h2 tag is much smaller and in a different text, the unordered list uses different bullets, etc.) How do I get bootstrap to override the default styling that rails uses when generating error messages for forms? I'm guessing this has something to do with the asset pipeline, but didn't see anything about overriding rails-generated content in the rails guide.
Thanks!
Sounds like you used some scaffolding which generated a CSS sheet. Go into app/assets/stylesheets and delete the stylesheet named "scaffolds.scss" (or just delete the parts you don't want).
To track down where that styling is coming from, you should use your browsers development tools. Inspect the element and it should tell you where the styling is coming from.
I installed a new gem to my Rails project - 'phrasing' - which has gem dependencies on multiple Haml gems. I need the gem (it is adding some phenomenal functionality to my project), and need the dependencies to be installed, but now when I run rails generate scaffold, all of the view templates are generated in Haml rather than ERB. I need views to continue to be generated in ERB.
I reviewed several previous StackOverflow articles, but most focus on converting TO Haml, and the answers around making sure that ERB is the default generator refer to removing lines from the config files, which are not there in my case (it appears that the gems are controlling the default layout format somehow).
(Note: While I appreciate that there may be several advantages to using Haml, and I might consider using it in a new project, I'd like to keep this one consistent, and it's already 80% finished in ERB.)
Turns out this was as simple as adding the following into class Application in the config/application.rb file:
config.generators do |g|
g.template_engine :erb
end
Still not sure why the manual override was necessary, but it is. This fixes it.
I just had a general doubt which I wanted to clear wrt Rails. I am currently working on Rails 2.0.2 for project specific purposes and I had a doubt especially related to this version of Rails.
I did a basic scaffold in my rails app on "posts".. something like ruby script/generate scaffold posts . This created a posts.html.erb file for me in my app/views/layouts .. I have seen in many blogs/screen casts they say when we add Javascript(JS) files like for e.g. those implementing jquery etc. we need to make include the necessary files in our "application.html.erb"files.. Now since I don't have anything exactly coined as such in my app.. does Rails by default take my posts.html.erb in my layouts as the equivalent application.html.erb..?
Or is that I need to explicitly create application.html.erb in my rails app?
My main concern behind this question is that would JS files be included in case if I have something like posts.html.erb or is that.. it should be done only in the application.html.erb..
Thank you..
For a PostsController, Rails will first look for an app/views/layouts/posts.html.erb file. Only if it doesn't find this controller-specific layout will it then fall back to app/views/layouts/application.html.erb.
does Rails by default take my posts.html.erb in my layouts as the equivalent application.html.erb..?
Yes. For the PostsController it will (by convention) take layouts/posts.html.erb as the overall layout template.
If you remove this file it will fall back to the layouts/application.html.erb layout.
My main concern behind this question is that would JS files be included in case if I have something like posts.html.erb or is that.. it should be done only in the application.html.erb..
You would have to include all necessary JS/CSS in each layout, as there is no layout inheritance.
If you want multiple layouts you can refactor out sections into partials (eg: for the <head> bit).
an app/views/layouts/application.html.erb file should have been generated for you when you did "rails new ProjectName"
make sure you have one... it controls the general layout of your web-site.
I'm just learning the new asset pipeline in Rails 3.1. One particular problem I'm having is with the way Sprockets just mashes all the found CSS stylesheets into one massive stylesheet. I understand why this is advantageous over manually merging stylesheets and minifying for production. But I want to be able to selectively cascade stylesheets instead of having all rules all mashed together. For instance, I want:
master.css
to be loaded by all pages in the Rails app, but I want
admin.css only to be loaded by pages/views within the admin section/namespace.
How can I take advantage of the great way that Rails 3.1 combines stylesheets and minifies them for production, but also have the former flexibility of being able to load only certain stylesheet combinations per layout?
Or should this be done by adding a class to body tags in layouts-
body class="admin"
And then target style rules as appropriate. Using SASS scoped selectors this might be a reasonable solution.
This is how i solved the styling issue: (excuse the Haml)
%div{:id => "#{params[:controller].parameterize} #{params[:view]}"}
= yield
This way i start all the page specific .css.sass files with:
#post
/* Controller specific code here */
&#index
/* View specific code here */
&#new
&#edit
&#show
This way you can easily avoid any clashes.
Hope this helped some.
I have a post about this on my website:
Leveraging Rails 3.1, SCSS, and the assets pipeline to differentiate your stylesheets
And check out this answer to another question: Using Rails 3.1 assets pipeline to conditionally use certain css
Hope this helps.
Best regards,
Lasse
#nathanvda: sure...
We make use of multiple layout files. So in our app/views/layouts, instead of having just application.html.haml (we use HAML), we actually ignore the application layout and use 3 custom layouts:
admin.html.haml (admin section views only)
registered.html.haml (registered/signed in users views only)
unregistered.html.haml (unregistered/unsigned in users views only)
So at the top of my admin.html.haml file I will have my stylesheet link tags to a separate admin.scss (we use SCSS) manifest. That manifest will load any necessary sub-stylesheets just for the admin section. This allows us to specify rules just for the admin section while also making use of common styles. For instance, we use jquery-ui throughout the site, so the styles associated with jquery-ui sit in their own stylesheet and we include them in the manifests for all 3 css manifest files.
This solution doesn't give you a single CSS file that can be cached, but it ends up giving you 3 CSS files, each of which can be cached. This allows a tradeoff between performance and some flexibility in organizing CSS rules so we don't have to worry about CSS rule collisions.
The way I've been doing it so far is to have two seperate folders a/ and u/ where a/ is for the admin view and u/ is for the user view. Then in the layout I point to the appropriate application.css with assets/u/application.css(js). Bit of a pain having to move the auto generated files each time but a lot less than having to require each file individually in the manifest.
I use something like
application.html.erb
">
show.html.erb
content_for :body_id do
page_specific_body_id
end
What changes do you need to make to a Rails project to configure blueprintcss as the default stylesheet to be used when you generate scaffolding instead of scaffold.css?
I'd recommend writing your own generator, but if you want to alter the default you can:
1 - For a single app: Freeze rails and change the stylesheet the scaffold generator uses.
railsapp/vendor/rails/railties/lib/rails_generators/generators/components/scaffold/templates/style.css
2 - For all apps: Change the same style.css file in your systems rails installation.
Substitute your own scaffolding generation code. Instructions are here (with the caveat that they may be out of date).
An easier alternative may be to write a Rake action to do textual substitution in the (normally) generated source.
Look into Rails Templates.
You can write one to do much more than replace the css in a rails app. YOu can make it install gems, freeze rails, all kinds of things. Take a look at http://youvegotrails.com for an idea of what you can do.