If I try and include any .js and .css files downloaded from the jQuery Mobile website anywhere in the asset pipeline I get all kinds of view render problems, from not finding images to CSS not being applied, to errors in executing the jQuery js file. However, when I use the example code:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
in the header of my Rails 3.2.11 app it just works.
Why is this?
I tried inclusion into application.js and application.css in a number of ways.
Add jquery-rails and jquery-mobile to your Gemfile through their corresponding asset gems.
Require their assets from your application.js and application.css or the manifests you've got configured.
Do not include the script tag like that in your layout, otherwise you'd be bypassing the Rails Asset Pipeline.
Your Gemfile:
group :assets, :development do
gem 'jquery-rails'
gem 'jquery_mobile_rails'
end
Your asset manifests (application.js and application.css by default) should like like explained at: https://github.com/tscolari/jquery-mobile-rails#installation
Ok, so Mr. Vicente's solution is definitely the simplest, BUT it does not allow you to include custom CSS themes using the JQuery Mobile themeroller. What I have done is basically copy the raw CSS and put that into a 'Custom' css file, which in turn styles the provided themes as I want. Not ideal as you want to build custom themes yourself but OK.
Related
I was wondering if there was a good solution for getting vendor html templates into the rails asset pipeline. Right now I'm making it work by putting the two templates I need in /public
I used Bower to install angular-ui-bootstrap and I can require the javascript fine from application.js after adding the config.assets.path in application.rb.
How do you do the same for the html templates that the angular module needs? The JS is in /src, the template is in /template.
Not sure I understand the question. You can add them as template strings js in assets/javascripts but it could get a little messy.
Learning rails... so I use the bootstrap-sass gem... Where are the actual bootstrap CSS files? Seems like there is some sort of magic going on to include them. What if I want to tweak a property of the CSS....
You're using the bootstrap-sass gem which is preferred by many Rails developers. So the Twitter Bootstrap CSS files are in the gem (in vendor/assets/stylesheets/).
Developers use a gem to include Bootstrap files because it makes things easier to update when new Bootstrap versions are released by simply updating the gem (plus gems are the Rails way, eh?). The bootstrap-sass gem is popular because Sass is the default format for stylesheets in Rails. An alternative is the twitter-bootstrap-rails gem which uses the native Bootstrap LESS format for stylesheets.
Using the gem, you need to modify the file app/assets/javascripts/application.js:
#app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
Best practice is to add a file named app/assets/stylesheets/bootstrap_and_overrides.css.scss:
# app/assets/stylesheets/bootstrap_and_overrides.css.scss
#import "bootstrap";
body { padding-top: 60px; }
#import "bootstrap-responsive";
This shows an example of overriding the Bootstrap body style to add padding to accommodate the Bootstrap navigation bar. Then just add application-specific CSS (or Sass) in additional files in app/assets/stylesheets/.
I've written an in-depth article:
Twitter Bootstrap and Rails
that goes into greater details and shows how to set up the application layout, navigation links, Rails flash messages, and form builders for Twitter Bootstrap. The article could be helpful if you want to know more.
Unfortunately, if you use the gem, the css files are hidden from you. If you do a bundle show bootstrap-sass you'll see where the files for the gem are, and you can see the stylesheets being used in there.
If you view the gem's files, you'll see the stylesheets being used in vendor/assets/stylesheets/.
I'd recommend just not using the gem, and getting your own Bootstrap stylesheets and putting them in your application's vendor/assets/stylesheets/.
The CSS files are inside the gem. To include them in your application,
in app/assets/stylesheets/ you can create a file of your choice. (i'll call it bootstrap_overrides.css.scss)
and include the bootstrap source, and override.
#include "bootstrap";
/* here are the overrides if you want to override the styles */
#include "bootstrap-responsive";
and make sure that bootstrap_overrides.css.scss is included in your global application.css file.
I know that Twitter Bootstrap may be customized while downloading it from Bootstrap website. How about bootstrap-sass gem - does it always include all the features?
If you take a look at the documentation, you'll see that you have the option of including all of the js, or only the scripts you want using #= require in your js/coffee files.
https://github.com/thomas-mcdonald/bootstrap-sass#javascripts
Same applies to stylesheets, you can use #import to only include the files you want. You can look at the files architecture here:
https://github.com/thomas-mcdonald/bootstrap-sass/tree/master/vendor/assets/stylesheets
The gem is actually an engine, it basically just adds assets, the same way the jquery-rails gem adds jquery and you can use it as if you had a jquery.js file in your vendor/assets/javascripts folder.
I'm somewhat new to the Rails asset pipeline so I might be doing something wrong. I'm trying to use Active Admin for my backend and twitter bootstrap css for my front end application.
I added the bootstrap.css to /app/assets/stylesheets then also added:
//= require bootstrap
to application.css - then I did a precompile of the assets locally
It seems to work fine but some of the styling isn't coming through exactly and I think it's because active admin's css is overriding it.
My understanding is that the application compiles the css assets into the application css public asset and the application uses that file when running.
I need to somehow separate the two and make it use twitter bootstrap css as the main css on the front end and maybe tell it not to use active admin's css files on the front end.
What's the best way to do this?
I had the same problem, and was able to fix it by moving
app/assets/stylesheets/active_admin.css.scss
to
vendor/assets/stylesheets/active_admin.css.scss
The active admin assets should be in vendor/ as mentioned in the rails guide:
"Vendor/assets is for assets that are owned by outside entities, such as code for JavaScript plugins and CSS frameworks."
Have you watched the RailsCasts video on using ActiveAdmin? In the video, Ryan shows you how to prevent the ActiveAdmin CSS from stepping on your main app CSS.
http://railscasts.com/episodes/284-active-admin
Moving info from Video into answer
In the application.css you remove:
*= require_tree .
For rails 4, Jiten K suggests adding this to production.rb:
config.assets.precompile += ['active_admin.css']
However one of the comments on that SO answer says this is not needed. I have not needed it so far.
For me changing application.css to following solves the problem:
*= require bootstrap
*= require_tree .
*= stub "active_admin"
In my rails 3 application I have added the stylesheets in
/app/assets/stylesheets/ instead of /public/stylesheets
but the stylesheets files are not loaded when I specified the path as
<link href="/app/assets/stylesheets/home.css" rel="stylesheet" type="text/css">
Do I need to configure something to load this stylesheets
Please help.
Don't put the link like this to reference your stylesheets, rather use the stylesheet_link_tag (doc) ActionView method to get these in. The asset pipeline will actually end up having the URL be somewhat different from what you do.
At the top of your application.css should be following:
/* ...
*= require_self
*= require_tree .
*/
This will include all css files from /app/assets/stylesheets/.
In Rails 3.1, Rails uses the so-called asset pipeline to load assets for you, including CSS. So the idea isn't to just move stylesheets, etc. to another folder, but to put them there and have them assembled/compiled by the framework.
Specifically, to get your setup working, you'll need to use several gems required by the assets pipeline (Sprockets in particular).
If you're upgrading to Rails 3.1 from an earlier version, I found these 2 articles helpful: http://ridingrails.net/updating-rails-31/ http://railscasts.com/episodes/282-upgrading-to-rails-3-1?view=asciicast
If you've created a Rails 3.1 application from scratch, you shouldn't need to do anything: application.css already requires all the files in the app/assets/stylesheets directory with the = require_tree . command, and the application stylesheet should already be included in the layout.