I am creating a gem that will contain the foundation-rails gem along w/ some common variables that are used across my applications. I have created a stylesheet at vendor/assets/stylesheets/foundation.scss. I load this from within my application as such
Gemfile
gem 'foobar-foundation-rails', path: '...'
app/assets/stylesheets/application.css
//= require foundation
This is a good starting point but how do I include the foundation-rails gem's stylesheet from within this file? I am unsure how to reference another gem's assets
I think the best approach is to put the responsibility for the require statements in your rails app's javascripts file. This is most likely not functionality you want to bury in a gem, as it hides what is happening.
Then make sure you require your gem's css file before the foundation-rails require. However you should put a dependency requirement in your gem's gemspec file to ensure that the foundation-rails gem will be installed by bundler when your gem is installed.
Also you may have to "namespace" your gems style sheet in order to avoid namespace collisions.
vendor/assets/stylesheets/foobar_foundation_rails/foundation.css
Which would change the require in your stylesheet file to
require 'foobar_foundation_rails/foundation.scss'
Lastly, the naming of a gem establishes how the gem gets required. When you use dashes Rails expects things to be required, and hence your gem's directory structure to follow
lib/foobar/foundation/rails
As opposed to an underscore naming foobar_foundation_rails
lib/foobar_foundation_rails
Unless you're going to build an "extension" to the foundation-rails gem, which would need to be called foundation-rails-foobar, you may want to go with the underscore syntax to save yourself some require headaches. The devise gem is a good example of extension gems.
I'm trying to install Bootstrap 3.0 on my Rails app. I recently finished Michael Hartl's tutorial and am now trying to build my own system using this new version of Bootstrap, but I have a few questions that I'm not sure about.
My system specs:
OS X Mountain Lion on MBP
Rails 4.0
Ruby 2.0
Questions I have:
What is the best gem to use in my Gemfile? I have found a few of them.
What do I import on my custom.css.scss? I read somewhere that it's different from 2.3.2.
Is there anything else I have to do to get Bootstrap to work, or are the remaining steps identical to the ones I followed for Bootstrap 2.3.2?
Edit
Here is what the bootstrap-rails project on GitHub first says to do:
gem 'anjlab-bootstrap-rails', :require => 'bootstrap-rails',
:github => 'anjlab/bootstrap-rails'
Then it says to do:
gem 'anjlab-bootstrap-rails', '>= 3.0.0.0', :require => 'bootstrap-rails'
Do they do the same thing, or do you have to do them both?
Actually you don't need gem for this, here is the step to install Bootstrap 3 in RoR
Download Bootstrap
Copy:
bootstrap-dist/css/bootstrap.css and bootstrap-dist/css/bootstrap.min.css
To: vendor/assets/stylesheets
Copy:
bootstrap-dist/js/bootstrap.js and bootstrap-dist/js/bootstrap.min.js
To: vendor/assets/javascripts
Update: app/assets/stylesheets/application.css by adding:
*= require bootstrap.min
Update: app/assets/javascripts/application.jsby adding:
//= require bootstrap.min
With this you can update bootstrap any time you want, don't need to wait gem to be updated. Also with this approach assets pipeline will use minified versions in production.
As many know, there is no need for a gem.
Steps to take:
Download Bootstrap
Direct download link Bootstrap 3.1.1
Or got to http://getbootstrap.com/
Copy
bootstrap/dist/css/bootstrap.css
bootstrap/dist/css/bootstrap.min.css
to: app/assets/stylesheets
Copy
bootstrap/dist/js/bootstrap.js
bootstrap/dist/js/bootstrap.min.js
to: app/assets/javascripts
Append to: app/assets/stylesheets/application.css
*= require bootstrap
Append to: app/assets/javascripts/application.js
//= require bootstrap
That is all. You are ready to add a new cool Bootstrap template.
Why app/ instead of vendor/?
It is important to add the files to app/assets, so in the future you'll be able to overwrite Bootstrap styles.
If later you want to add a custom.css.scss file with custom styles. You'll have something similar to this in application.css:
*= require bootstrap
*= require custom
If you placed the bootstrap files in app/assets, everything works as expected. But, if you placed them in vendor/assets, the Bootstrap files will be loaded last. Like this:
<link href="/assets/custom.css?body=1" media="screen" rel="stylesheet">
<link href="/assets/bootstrap.css?body=1" media="screen" rel="stylesheet">
So, some of your customizations won't be used as the Bootstrap styles will override them.
Reason behind this
Rails will search for assets in many locations; to get a list of this locations you can do this:
$ rails console
> Rails.application.config.assets.paths
In the output you'll see that app/assets takes precedence, thus loading it first.
This answer is for those of you looking to Install Bootstrap 3 in your Rails app without using a gem. There are two simple ways to do this that take less than 10 minutes. Pick the one that suites your needs best. Glyphicons and Javascript work and I've tested them with the latest beta of Rails 4.1.0 as well.
Using Bootstrap 3 with Rails 4 - The Bootstrap 3 files are copied into the vendor directory of your application.
Adding Bootstrap from a CDN to your Rails application - The Bootstrap 3 files are served from the Bootstrap CDN.
Number 2 above is the most flexible. All you need to do is change the version number that is stored in a layout helper. So you can run the Bootstrap version of your choice, whether that is 3.0.0, 3.0.3 or even older Bootstrap 2 releases.
Twitter now has a sass-ready version of bootstrap with gem included, so it is easier than ever to add it to Rails.
Simply add to your gemfile the following:
gem 'sass-rails', '>= 3.2' # sass-rails needs to be higher than 3.2
gem 'bootstrap-sass', '~> 3.1.1'
bundle install and restart your server to make the files available through the pipeline.
There is also support for compass and sass-only: https://github.com/twbs/bootstrap-sass
I use https://github.com/yabawock/bootstrap-sass-rails
Which is pretty much straight forward install, fast gem updates and followups and quick fixes in case is needed.
gem bootstrap-sass
bootstrap-sass is easy to drop into Rails with the asset pipeline.
In your Gemfile you need to add the bootstrap-sass gem, and ensure that the sass-rails gem is present - it is added to new Rails applications by default.
gem 'sass-rails', '>= 3.2' # sass-rails needs to be higher than 3.2
gem 'bootstrap-sass', '~> 3.0.3.0'
bundle install and restart your server to make the files available through the pipeline.
Source: http://rubydoc.info/gems/bootstrap-sass/3.0.3.0/frames
For me, the simplest way to do this is
1) Download and unzip bootstrap into vendor
2) Add the bootstrap path to your config
config.assets.paths << Rails.root.join("vendor/bootstrap-3.3.6-dist")
3) Require them
in css *= require css/bootstrap
in js //= require js/bootstrap
Done!
This methods makes the fonts load without any other special configuration and doesn't require moving the bootstrap files out of their self-contained directory.
Using this branch will hopefully solve the problem:
gem 'twitter-bootstrap-rails',
git: 'git://github.com/seyhunak/twitter-bootstrap-rails.git',
branch: 'bootstrap3'
I think the most up to date gem for the new bootstrap version is form anjlab.
But I don't know if it currently works good with other gems like simple_form when you do rails generate simple_form:install --bootstrap, etc. you may have to edit some initializers or configurations to fit the new bootstrap version.
I actually had an easy workaround on this one in which I nearly scratch my head on how to make it work. hahah!
Well, first I downloaded Bootstrap (the compiled css and js version).
Then I pasted all the bootstrap css files to the app/assets/stylesheets/.
And then I pasted all the bootstrap js files to the app/assets/javascripts/.
I reloaded the page and wallah! I just added bootstrap in my RoR!
I am using Ruby On Rails and have ActiveAdmin on top of that on a windows machine. I don´t think ActiveAdmin has anything to do with it, but I am just saying.
The Javascript file that is included via HTML is /assets/active_admin.js and the manifest file itself looks like this:
//= require active_admin/base
//= require just_datetime_picker/nested_form_workaround
When I run my Rails application and open http://localhost:3000/assets/active_admin.js, the log tells me, that active_admin.js was compiled, but the file still looks just like the manifest just with an added semicolon at the end:
//= require active_admin/base
//= require just_datetime_picker/nested_form_workaround
;
Why is no Javascript code included?
When I try to run the precompile pipeline manually via bundle exec rake assets:precompile RAILS_ENV=development, it actually creates all the CSS files, but the JS files still look like the one described above.
Since I am operating on a windows machine, I do not have the gem 'therubyracer' installed, but NodeJS. Also the bundle install works fine and I also do not get any errors.
Are you using Ruby v2.0? Try downgrading to 1.9.
Symptom: The JavaScript manifest file does not compile, no errors are shown; however, a mysterious semi-colon ; appears at the end of the file after "preprocessing" the assets.
Solution: Downgrade to Ruby v1.9.3!
See two other posts on the same topic.
My Rails Javascript manifest file neither compiles nor include any required files
Javascript manifest file "application.js" is not processed
What a sorry mess it is to be programming in 2013!
I tried to use the foot-rails gem to install flot but was unsuccessful.
I added gem "flot-rails" to my gemfile and executed bundle install
I then added
//= require jquery.flot
//= require jquery.flot.resize
to my /app/assets/javascripts/application.js file
I verified that the gem installed properly (gem show flot-rails) and found that the javascripts were all in the vendor directory of the gem but my app reports
couldn't find file 'jquery.flot'
(in ...path/app/assets/javascripts/application.js:12)
I chose to just install the files manually into my assets directory but I'd like to know what's wrong with my sprockets.
Why ca't Sprockets resolve the references?
Well, don't I feel stupid.
I needed to restart the web server after bundle install
I am trying to contribute to the opensource project jquery-datatables-rails. But it puzzles me as how it works. I have basic understanding of how to create gem. It seems like the project just simplifies the path references but nothing more. The four steps listed to install are
Add to the assets group in your Gemfile:
gem 'jquery-datatables-rails'
Install the gem:
bundle install
Add the JavaScript to application.js:
//= require dataTables/jquery.dataTables
Add the stylesheets to application.css:
*= require dataTables/jquery.dataTables
But I don't understand how Rails knows where to find dataTables folder and why we use jquery.dataTables to reference the file/class. The code is easy to understand, but the file organization confuses me so much. Is there any writing on topics related to my confusion?
Thanks.
Update:
Just found this great documentation on Rails Engine: http://edgeguides.rubyonrails.org/engines.html
By default Rails asset pipeline searches for the files in app/assets/, lib/assets, and vendor/assets of the Rails application. But this gem is a Rails engine, and it adds path of its own assets to default assets paths. It has its own vendor/assets.