Setting Up Bootstrap on Rails for the First Time - ruby-on-rails

I'm trying to implement Bootstrap (for the first time) to my very simple rails application.
After following common setup instructions the app's look has not changed
The app is located here:
https://github.com/johnwaltonvi/omrails2
My initial setup went as followed...
1. Add bootstrap gem to "Gemfile"
2. Run "bundle install"
3. Create new file under app>assets>stylesheets.
This file is called "styles.css.scss"
4. Add "#import 'bootstrap';" to "styles.css.scss"
5. Restart Server
After starting up the app again, it still looks the exact same as before installing bootstrap.
I expected bootstrap to overwrite the font, text & links.
In this picture is what the app currently looks like (left) and what it should look like (right).
Why has the app not updated style?
Notes:
I'm following instructions from One Month Rails video course.

Rails 4 doesn't support the :assets group so change this:
group :assets do
gem 'sass-rails', '~> 4.0.3'
gem 'coffee-rails', '~> 4.0.0'
gem 'bootstrap-sass', '~> 3.3.3'
gem 'uglifier', '>= 1.3.0'
end
to this:
gem 'sass-rails', '~> 4.0.3'
gem 'coffee-rails', '~> 4.0.0'
gem 'bootstrap-sass', '~> 3.3.3'
gem 'uglifier', '>= 1.3.0'
Rerun bundle install to make sure everything is installed.
Rename your application.css file to application.css.scss and delete everything in the file. Now add this to it:
#import "bootstrap-sprockets";
#import "bootstrap";
Everything should work if you do this.

Related

rails 5 bootstrap 4 cuztomization

Just upgraded to bootstrap 4.
In the old version I was using #import bootstrap on my app/assets/stylesheets/custom.scss file and thus customizations worked fine.
Now, following the getbootstrap.com Get Started guide, I have included #import bootstrap in my application.scss and customizations have stopped working.
Here's my gemfile;
gem 'rails', '5.1.4'
gem 'bcrypt', '~> 3.1.7'
gem 'faker', '1.7.3'
gem 'will_paginate', '3.1.6'
gem 'bootstrap-will_paginate', '1.0.0'
gem 'puma', '3.9.1'
gem 'uglifier', '3.2.0'
gem 'coffee-rails', '4.2.2'
gem 'jquery-rails', '4.3.1'
gem 'turbolinks', '5.0.1'
gem 'jbuilder', '2.7.0'
gem 'coffee-script-source', '1.8.0'
gem 'letsencrypt_plugin', '~> 0.0.10'
gem 'etsy', '~> 0.3.2'
gem 'bootstrap', '~> 4.0'
gem 'sprockets-rails', '~> 3.2', '>= 3.2.1'
gem 'popper_js', '~> 1.12', '>= 1.12.9'
My application.scss file:
/*
* 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, or any plugin's
* vendor/assets/stylesheets directory 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 bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*/
#import "bootstrap"
Here's what I'm trying to get to work in custom.scss:
body {
padding-top: 60px;
background-color: $light-gray!important;
}
Thanks in advance :)
Аfter #import, a semicolon is missing. Make sure that the variable $light-gray is also defined. I think #import with bootstrap 4 version works pretty the same as for bootstrap 3.

Compass with rails 4 doesn't work [duplicate]

This question already has answers here:
Does compass-rails support Ruby on Rails 4.0?
(6 answers)
Closed 9 years ago.
I read that compass for rails 4 is not ready, but its work with "2.0 alpha"... I don't understand.
Has anyone solved this problem it?
my Gemfile
gem 'sass-rails'
gem "compass-rails" #or gem "compass-rails", "~> 2.0.alpha.0"
my application.css.scss //no error, rails recognize the directory
#import "compass";
my error for my first mixin test
Sass::SyntaxError at /partners/dashboard
Undefined mixin 'border-radius'.
Not ready for Rails 4.0:
http://ready4rails4.net/gems/compass-rails
And the contributors were clear on that 9 months before Rails 4 dropped:
https://github.com/Compass/compass-rails/pull/59
I have updated from Rails 3.2 to Rails 4.0 including the gem compass-rails. I have pasted in my gem file below.
I updated as many gems as possible but a couple could not get very latest versions.
The command "bundle outdated" gives you an idea about outdated gem
Pierre
source 'https://rubygems.org'
ruby '2.0.0'
gem 'rails_12factor', group: :production
gem 'rails', '4.0.0'
gem 'pg'
gem 'thin'
# do I need this gem for form backing objects
gem 'virtus'
gem 'jbuilder', '~> 1.2'
gem 'sass-rails', '~> 4.0.0'
gem 'coffee-rails', '~> 4.0.0'
gem "compass-rails", '~> 2.0.alpha.0'
gem 'uglifier', '~> 2.2.1' # java script compression
gem 'rspec-rails'
gem 'debugger'
gem 'better_errors' # railscast 402
gem 'binding_of_caller'
# Use jquery as the JavaScript library
gem 'jquery-rails'
gem 'bcrypt-ruby', '~> 3.0.0'
# tried this update but got errors so backed out
# gem 'bcrypt-ruby' '~>3.1.2'
# paging, searching
gem 'will_paginate', '~> 3.0'
gem 'ransack'
gem "redcarpet", '~> 3.0.0'
gem 'cancan'
gem 'simple_form'
# For drill evaluation- railscast 326
gem 'active_attr'
# For db population
gem 'seed_dump'
# longitude and latitude
gem 'geo_position'
It's not good to use #import in a .css file. You need to rename it to application.css.scss. But I prefer to import compass directly in the files where I need it. And Also I prefer to import only the parts I really need like compass/css3 so that I don't include anything I don't really use.
If that does not help with your problem, you might need to paste in the /partners/dashboard styles to see what's in there.

bootswatch-rails theme doesn't work all

I try to use bootswatch-rails, but it doesn't work well, for example, button doesn't appear right, not like on the bootwatch site, that show.
I put bootstrap-sass and bootswatch in my gemfile and bundle install
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'bootswatch-rails', '>=0.2.0'
gem 'uglifier', '>= 1.0.3'
end
gem 'bootstrap-sass', '>= 2.1.0.0'
and in my bootstrap_and_overrides.css.scss file looks like this
// First import journal variables
#import "bootswatch/cerulean/variables";
// Then bootstrap itself
#import "bootstrap";
// Responsive styles go here in case you want them
#import "bootstrap-responsive";
// And finally bootswatch style itself
#import "bootswatch/cerulean/bootswatch";
I really don't know what I do wrong.
do you have any other css files being imported that you aren't taking into consideration such as scaffold.css (when you generate a resource via the scaffold command)?

jquery-ui-rails gem doesn't work on preexisting project

I'm using the jquery-ui-rails gem to create a slider, however it does not work on a preexisting project for some odd reason. If I create a new project (rails new blog), generate a user scaffold, then add gmaps4rails gem and then jquery-ui-rails gem the map and slider work and appear just fine. However if I open an older project, follow the exact same steps (adding same columns etc), the map will appear fine but the slider will not appear. Does anyone know why this is/how to fix it?
This is my gemfile in case there are any gems that cause conflicts
source 'http://rubygems.org'
gem 'rails', '3.2.8'
gem 'mysql2'
# Gems used only for assets and not required
# in production environments by default.
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'uglifier', '>= 1.0.3'
gem 'jquery-ui-rails'
end
gem 'jquery-rails'
gem 'gmaps4rails'
gem 'bcrypt-ruby', :require => "bcrypt"
gem 'mail'
found the issue, after adding the jquery-rails-ui gem you need to run bundle exec rake assets:precompile in the command line for it to work.
It could be that you are including jquery-ui-rails only in the assets group. The gems in the assets group are only used during asset pipeline operations.
Move jquery-ui-rails outside of the assets group, run 'bundle install', and see if it works.

Why do I need the gem in the host application

I'm developing my first Rails Engine. It's an admin panel layout with assets and basic functionality.
What I really want is for it to be based on Twitter Bootstrap + SASS.
If I just have these lines in my gemspec file of my engine:
gem.add_dependency "railties", "~> 3.2"
gem.add_dependency "sass-rails"
gem.add_dependency "bootstrap-sass"
I get this error when trying to access a page:
ActionView::Template::Error (couldn't find file 'bootstrap'
(in /Users/swamiatma/Documents/Dropbox/coding/ruby/gems/tkh_admin_panel/app/assets/javascripts/admin.js:9)):
However if I add this to the host application gemfile:
gem 'bootstrap-sass'
So that I get the following lines:
group :assets do
gem 'jquery-rails'
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'uglifier', '>= 1.0.3'
gem 'bootstrap-sass'
end
It now works fine. I think this dependency belongs strictly to the Rails engine gem and should just be there.
What gives?
Take a look at 'rails-admin' engine. It is using 'bootstrap-sass' and it requires it in engine.rb : https://github.com/sferik/rails_admin/blob/master/lib/rails_admin/engine.rb
For future reference, the important line in rails_admin/engine.rb (at least in my case) was the following:
require 'bootstrap-sass'
After I added this to my engine.rb, the error went away for me.

Resources