0

I have a rails app that was built with the Bootstrap rails gem for development, but now I am going to start doing design and styling stuff and I would rather just move to referencing bootstrap normally/locally. The app is based on the rails3-bootstrap-devise-cancan template.

I tried just removing the bootstrap-sass gem and then deleting all of the stylesheets and .js files in /assets, and replacing the application.css and application.js with bootstrap.css and bootstrap.js. But when I launch the application, I can see it is grabbing certain things from bootstrap, but the formatting is wrong and a lot of interface things don't work.

What is the easiest cleanest way to make the switch?

source 'https://rubygems.org'
gem 'rails', '3.2.13'
gem 'sqlite3'
gem 'mysql2'
group :assets do
  gem 'sass-rails',   '~> 3.2.3'
  gem 'coffee-rails', '~> 3.2.1'
  gem 'uglifier', '>= 1.0.3'
end
gem "rspec-rails", ">= 2.12.2", :group => [:development, :test]
gem "database_cleaner", ">= 1.0.0.RC1", :group => :test
gem "email_spec", ">= 1.4.0", :group => :test
gem "cucumber-rails", ">= 1.3.1", :group => :test, :require => false
gem "launchy", ">= 2.2.0", :group => :test
gem "capybara", ">= 2.0.3", :group => :test
gem "factory_girl_rails", ">= 4.2.0", :group => [:development, :test]
gem "bootstrap-sass", ">= 2.3.0.0"
gem "devise", ">= 2.2.3"
gem "cancan", ">= 1.6.9"
gem "rolify", ">= 3.2.0"
gem "simple_form", ">= 2.1.0"
gem "quiet_assets", ">= 1.0.2", :group => :development
gem "figaro", ">= 0.6.3"
gem "better_errors", ">= 0.7.2", :group => :development
gem "binding_of_caller", ">= 0.7.1", :group => :development, :platforms => [:mri_19, :rbx]
gem 'execjs'
gem 'jquery-rails'
gem 'jquery-ui-rails'
lime
  • 6,901
  • 4
  • 39
  • 50
  • posting your gem file would be useful to answer. – Charizard_ Aug 16 '13 at 07:23
  • Did you actually _replace_ `application.css` with `bootstrap.css`? What other CSS/JS did you delete, are you sure they weren't needed for you to get the expected results? – lime Aug 16 '13 at 07:25
  • Posted gem file. I deleted all the css and js files. dropped bootstrap.css into the css folder and renamed it application.css. Did the same for the javascript file. –  Aug 16 '13 at 07:27

1 Answers1

1

The bootstrap-less gem should not affect the files in your own app/assets folder, instead they are fetched from each gem's corresponding folders. My guess is that the CSS/JS assets you deleted were not put there by the gem, but by you or someone else working on the project.

Instead of replacing application.css and application.js with the Bootstrap files, you should add them to your assets folder and import them into the application files. Thus, if you have any other assets, they can too be imported into the same files.

Usually, all files in the same folder are automatically imported. My application.css by default includes this comment which instructs it to include all CSS files in the same directory tree:

 *= require_tree .

You should probably read up on how the Asset Pipeline works, that makes it easier to find out where the problem lies.

lime
  • 6,901
  • 4
  • 39
  • 50
  • So where are the bootstrap assets currently being pulled from? Also all of the other css files were mostly empty and I think were automatically generated. My application is built off of the https://github.com/RailsApps/rails3-bootstrap-devise-cancan –  Aug 16 '13 at 07:35
  • They were included into the structure Rails sees from the gem's files. You can navigate around the [bootstrap-sass GitHub repo](https://github.com/thomas-mcdonald/bootstrap-sass) to see how it is structured. The files are in the `vendor/assets` folder, which is included into the same level as your `app/assets`. – lime Aug 16 '13 at 07:42
  • +1 that you should read up on how the asset pipeline works, *replacing* `application.css` with `bootstrap.css` is not the way to go. – GMA Aug 16 '13 at 07:44
  • Similarly, you can put your downloaded Bootstrap files in your own `vendor` folder. If you are interested in the rationale behind using `lib` and `vendor` in addition to the `app` folder there is [a good topic on Programmers SE available](http://programmers.stackexchange.com/questions/123305/what-is-the-difference-between-the-lib-and-vendor-folders). – lime Aug 16 '13 at 07:45
  • I guess I just was hoping there would be some easy straightforward way to remove the gem, drop in bootstrap, then reference it in my html.erb. –  Aug 16 '13 at 07:46
  • I think you will find that as your project grows, following Rails conventions will feel more straightforward and make your life easier. :) (e.g. having your `application.css` include all other stylesheets rather than adding them manually to your HTML) – lime Aug 16 '13 at 07:57