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.
Related
Rails 4.2.4
Ruby 2.1.2
I am trying to use twitter-bootstrap-rails.
I would like to use it by the same way I am using jquery-rails
assets/applications.js
//= require jquery
In this case I don't need to copy any jquery.js or jquery.css files to my project because Rails fetches it for me form gem.
The different situation is with twitter-bootstrap-rails.
In the guide
The Twitter Bootstrap Rails gem can provide the Bootstrap stylesheets
in two ways.
The plain CSS way is how Bootstrap is provided on the official
website.
The Less way provides more customization options, like changing theme
colors, and provides useful Less mixins for your code, but requires
the Less gem and the Ruby Racer Javascript runtime (not available on
Microsoft Windows).
Seems the first way is more suitable for me. But in this case I should use the generator rails generate bootstrap:install static before to use any twitter-bootstrap .js or .css files. The generator fetches the files into assets folder of my project.
So I am looking for a way how to use twitter-bootstrap-rails .js and .css files in my project without copying them into my project folder. I just would like to add twitter-bootstrap-rails files just putting for instance line //= require bootstrap into application.js.
Thanks a lot.
Instead of using twitter-bootstap-rails, use bootstrap-sass.
In your application.js, add the following:
//= require bootstrap-sprockets
change application.css to application.scss and add:
#import "bootstrap-sprockets";
#import "bootstrap";
and you're good to go. Oh. Just please don't forget to restart your server.
I am relatively new to Rails and I have a question about serving assets from a gem vs just loading the files into the asset pipeline.
As far as I can tell, they do virtually the same thing in that they both make the files available in the asset pipeline to be called in the manifest.
What are the advantages to serving something like gem 'jquery-rails' as a gem instead of just putting /vendor/assets/javascripts/jQuery.js in the vendor assets and loading it that way?
The advantage is you don't have to add the file(s) to your repo and manage updates, you update the gem and you've updated the dependency. They can also add helpers to use the assets more easily.
Not all JS/CSS projects are out-of-the-box compatible with the asset pipeline too, so sometimes the gems will do that work for you as well.
Just because the files get served to clients doesn't make it much different than any other dependency in your application.
The gem includes the unobtrusive javascript for Rails as well as jQuery itself. It also allows you to user assert_select_jquery in tests.
jquery-rails is gem contains js file for both jquery.js, jquery_ujs.js. If you does not include jquery-rails, then you have include both jquery.js and jquery_ujs.js.If you are not using gem for jquery-rails, you have manually keep track what version jquery.js is used for jquery_ujs.js. Currently these dependency management is taken care by gem 'jquery-rails'.
Benefits:
You don't need to manually copy them when you get a new version of
jquery released, gem will make sure to add the latest codes only.
Check this link:
https://github.com/rails/jquery-rails/blob/master/lib/jquery/assert_select.rb#LC48
It provides couple of methods which helps while testing your code.
Just adding the CDN link seems so much easier, I have a good feeling that I'm missing the benefits that the bootstrap rails (sass) gems provides
The CDN only serves CSS. With the gem you get SASS source of Bootstrap, and you can tweak the variables and do other customizations from your sass files.
I'm guessing this is a silly question, but i'm a bit of a newb...
I've added the chosen gem to my rails app by adding it to my Gemfile and requiring chosen-jquery in my application.js file.
My question is: where can i find the actual javascript file for chosen? Is it downloading it automatically?
Simply include the JS and CSS files like described in the documentation on the main page of the Github project and it will be included when precompiling your assets. The files are not within your project directory but rather within the gem and will be resolved by the pipeline when the gem is included.
If you need to get to the file directly (for modifications), you need to put the JS in there manually. You can then still include it in the main application.js for the pipeline and have better control of the version in use. To me, this is the preferred method.
However, may I suggest switching to Select2 which is originally based on Chosen but under much more active development and better documentation:
http://ivaynberg.github.io/select2/
https://github.com/ivaynberg/select2
There's also a gem for it if you like:
https://github.com/argerim/select2-rails
It's in a gem itself. If you look at vendor/assets/javascripts in gem root, you'll see all javascripts that come with chosen gem. They are added by assets pipeline, with
//= require chosen-jquery
line in your application.js.
Look up your assets load path. Like this:
in terminal cd to your app root
then open rails console
then run Rails.application.config.assets.paths
Your chosen-jquery is in one of those folders.
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.