I have worked with Rails 4 earlier and getting bootstrap and sass to work with a Rails 4 application was very easy by doing:
Adding gem 'bootstrap-sass' and gem 'sass-rails', '~> 4.0.0' to the Gemfile and running bundle install
Add //= require bootstrap line to application.js
Adding config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif) line to application.rb
Adding #import "bootstrap"; line to the top of the *.css.scss file
But the same when done with a Rails 2 application doesnt seem to get the Bootstrap and SCSS to work. Can anybody explain the steps involved in gettin bootstrap and scss to work with a Rails 2 application?
P.S : My application's exact Rails version is 2.3.18 and am using Ruby 1.8.7
Related
Working on a project that started out with Bootstrap 2.3, using the bootstrap-sass gem, specifying version 2.3.1.0 in my gemfile. I'm wanting to update it to Bootstrap 3.
Here's what the app looks like with bootstrap-sass gem version 2.3.1.0:
I checked out a branch to experiment updating the styles to Bootstrap 3, so I updated my gemfile to use the latest version of the bootstrap-sass gem, ran bundle update and install.
I have bootstrap 3 version classes on each of the "Amazing Point" div elements you saw above, so the styles in the hero unit should vanish, the buttons should go flat, and the amazing points should span 4 columns with the "col-lg-4" class I've specified.
But when I launch the rails server, I get a mix of Bootstrap 2.3 and 3:
The "col-lg-4" classes applied to the Amazing Points, BUT the sign in and sign up buttons still look like Bootstrap 2.3 buttons! And there's a subtle, but visible change in the "Sign In" and "Sign Up" text - it's a tad bolder. It's like I've got some weird hybrid of Bootstrap 2.3 and 3 going on.
But now I run rake assets:precompile, and here's what I get:
Now things are displaying correctly.
But why do I always have to run rake assets:precompile to get it working correctly? And how could I make it where it would just update automatically when I switch between the gem files?
Here are the other relevant files:
application.css:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
*= require bootstrap
*= require_tree .
*/
Gemfile:
source 'https://rubygems.org'
gem 'rails', '3.2.13'
gem 'jquery-rails'
gem 'devise'
group :production do
gem 'pg'
end
group :development do
gem 'sqlite3'
end
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'uglifier', '>= 1.0.3'
gem 'bootstrap-sass', '3.0.2.0'
end
Gemfile.lock (I'll just show the bootstrap-sass version):
bootstrap-sass (3.0.2.0)
sass (~> 3.2)
application.rb:
require File.expand_path('../boot', __FILE__)
require 'rails/all'
if defined?(Bundler)
# If you precompile assets before deploying to production, use this line
Bundler.require(*Rails.groups(:assets => %w(development test)))
# If you want your assets lazily compiled in production, use this line
# Bundler.require(:default, :assets, Rails.env)
end
module Bloccit
class Application < Rails::Application
config.encoding = "utf-8"
# Configure sensitive parameters which will be filtered from the log file.
config.filter_parameters += [:password]
# Enable escaping HTML in JSON.
config.active_support.escape_html_entities_in_json = true
config.active_record.whitelist_attributes = true
# Enable the asset pipeline
config.assets.enabled = true
# Version of your assets, change this if you want to expire all your assets
config.assets.version = '1.0'
config.assets.initialize_on_precompile = false
end
end
relevant lines in config/development.rb:
# Do not compress assets
config.assets.compress = false
# Expands the lines which load the assets
config.assets.debug = true
config.assets.compile = true
config.serve_static_assets = false
Ok, so I believe I've figured some of this out, after checking out this blog post.
For some reason, if you're updating from the Bootstrap 2.3 bootstrap-sass gem version to the latest one, YOU MUST clean out your old bootstrap-sass gem.
So I ran gem list bootstrap-sass which gave me:
*** LOCAL GEMS ***
bootstrap-sass (3.0.2.0)
bootstrap-sass (2.3.1.0)
Run gem cleanup bootstrap-sass -d and you'll be given a preview of what will happen. Then run gem cleanup bootstrap-sass -v and it will uninstall all previous versions. Restart your rails server and it works.
Then if you were wanting to go back to the old bootstrap-sass version, you would need to update your gemfile, run bundle, and then run gem uninstall bootsrap-sass 3.0.2.0 or whichever later bootstrap-sass gem that you have.
This is kind of a pain, so if someone knows a better way of going about this, please share. I might see if the bootstrap-sass-rails gem offers a better experience.
I have converted am existing rails 3.2 application to a mountable engine, but the asset pipeline is broken with the following error:
'twitter/bootstrap/bootstrap.less' wasn't found
(in /Users/developer/Projects/messaging_app/app/assets/stylesheets/messaging_phase1/bootstrap_and_overrides.css.less)
And it fails while executing the following line in bootstrap_and_overrides.css.less
#import "twitter/bootstrap/bootstrap.less";
I have verified that the twitter-bootstrap gem is installed and is loaded.
It seems that the bootstrap.less file from the gem is not loaded by the application after the application is converted to an engine.
After adding the following lines to engine.rb, it worked.
require 'less-rails'
require 'less/rails/bootstrap'
myengine.gemspec has the following lines:
s.add_dependency 'less-rails-bootstrap'
s.add_development_dependency "therubyracer"
My app & engine specs:
Rails 4.2,
Ruby 2
less & less-rails 2.6.0
You need this in application.css (see here):
*= require bootstrap_and_overrides
but you may also try, if it is enough to just use:
*= require_tree .
And if you are using Rails 4 (which apparently you do not) you should not include the bootstrap gems in an :assets group in your gemfile (see here). This was answered here before.
I'm using bootstrap-sass gem in my Rails project with version 2.3.1.0. However, when pushed up to Heroku, I'm getting the Bootstrap 3 styles. I inspect the CSS style and it indeed does say Bootstrap version 3.
On local, the assignment seems to be correct. But equally perplexing, when I inspect the CSS file, it says Bootstrap version 3 despite displaying what looks like the Bootstrap 2.3 styles.
I think at one point, my bootstrap-sass gem was using the Bootstrap 3, but when I put it back to gem 'bootstrap-sass', '2.3.1.0', I'm getting this strange conflict. I really just want my Heroku app to display the styles correctly. Even though I'm pushing up my current local version to Heroku, it is still using Bootstrap 3 stylings.
Here's what I've got:
Gemfile:
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'uglifier', '>= 1.0.3'
gem 'bootstrap-sass', '2.3.1.0'
end
I've created a styles.css.scss file, where I have the line #import "bootstrap";Here's what it looks like on localhost:
Here's what it looks like on Heroku:
It sounds like your Gemfile.lock might be incorrect. Have you verified that the correct version of the bootstrap gem is defined in Gemfile.lock?
Also might be worth just checking nothing is set in the Heroku env variable BUNDLE_WITHOUT. See the Heroku gem docs.
Not sure why this worked, but I found the second answer here to work for me.
I added *= require bootstrap" right above " *= require_tree . in application.css.
Then ran "bundle install --without production", followed by "rake assets:precompile". Committed the changes to git and then pushed to heroku.
I've never had to specifically require bootstrap in the asset pipeline before, but it works!
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 in the process of upgrading an old app to the asset pipline but after following the ryan bates tutorial on upgrading to 3.1 I am still not able to take advantage of the pipline. In order to rule out my upgrade process I created a fresh rails app and attempted some coffee scripting and adding other files to the /assets/javascripts folder, however any additional files besides the application.js do not seem to be rendered.
This is my application.js file:
// This is a manifest file that'll be compiled into including all the files listed below.
// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
// be included in the compiled file accessible from http://example.com/assets/application.js
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
//= require jquery
//= require jquery_ujs
//= require_tree .
alert("this displays fine");
And the additional dogs.js.coffee file:
# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/
alert "cant see this!"
It seems to be a sprockets issue but I really cant find anyone with the same problem, or info on when additional javascript files within the assets folder are not included in the application.js via the require_tree .
Here is my gem file:
gem 'rails', '3.1.1'
gem 'sqlite3'
group :assets do
gem 'sass-rails', '~> 3.1.4'
gem 'coffee-rails', '~> 3.1.1'
gem 'uglifier', '>= 1.0.3'
end
gem 'jquery-rails'
group :test do
# Pretty printed test output
gem 'turn', :require => false
end
my ruby version is 2.0.0p195
thanks for any help!
G
It seems the ruby version was my problem, I downgraded to ruby 1.9.3, then reinstalled gems and it works now!