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)?
Related
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.
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.
I am using Font Awesome in a rails 3.2.13 app. I have successfull added the following icons to the app: icon-search icon-shopping-cart and others. But for some reason when I try to use icon-thumbs-up and icon-thumbs-down they look like icon-thumbs-up-alt or icon-thumbs-up-alt. If I try and use icon-thumbs-up-alt, no icon shows on the page.
I access both bootstrap and font awesome via gems:
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'therubyracer'
gem 'font-awesome-rails'
gem 'jquery-ui-rails'
gem 'less-rails'
gem 'twitter-bootstrap-rails'
gem 'uglifier', '>= 1.0.3'
end
Here is the application.css.scss file:
*= require bootstrap_and_overrides
*= require_self
*= require_tree .
#import "font-awesome";
.icon-thumbs-up {
color: green;
}
.icon-thumbs-down {
color: red;
}
Here is the bootstrap_and_overrides.css.less
#import "twitter/bootstrap/bootstrap";
body { padding-top: 50px; }
#import "twitter/bootstrap/responsive";
// Set the correct sprite paths
#iconSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings");
#iconWhiteSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings-white");
// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
// Note: If you use asset_path() here, your compiled boostrap_and_overrides.css will not
// have the proper paths. So for now we use the absolute path.
#fontAwesomeEotPath: asset-path("fontawesome-webfont.eot");
#fontAwesomeWoffPath: asset-path("fontawesome-webfont.woff");
#fontAwesomeTtfPath: asset-path("fontawesome-webfont.ttf");
#fontAwesomeSvgPath: asset-path("fontawesome-webfont.svg");
// Font Awesome
#import "fontawesome";
Here is the button using the icons:
<%= link_to (content_tag(:i, "", :class=>"icon-thumbs-up")) + (content_tag(:i, "", :class=>"icon-thumbs-down")) + " Review", root_path , :class => "btn" %>
Could the issue be a conflict because I added both the twitter-bootstrap-rails and font-awesome-rails gems?
Thanks
Steve
It seems like the twitter-bootstrap-rails gem isn't importing the most recent version of font awesome, version 3.2.1 so I had to keep the font-awesome-rails gem. But I did update the gem to the most recent version, 3.2.1.1
The gemfile now looks like:
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'therubyracer'
gem 'jquery-ui-rails'
gem 'less-rails'
gem "twitter-bootstrap-rails"
gem "font-awesome-rails"
gem 'uglifier', '>= 1.0.3'
end
The application.css.scss:
*= require bootstrap_and_overrides
*= require_self
*= require_tree .
*/
#import "font-awesome";
To avoid the chance of conflict between the twitter-bootstrap-rails and font-awesome gems I disabled the defaults that come with twitter-bootstrap-rails:
// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
// Note: If you use asset_path() here, your compiled boostrap_and_overrides.css will not
// have the proper paths. So for now we use the absolute path.
//#fontAwesomeEotPath: asset-path("fontawesome-webfont.eot");
//#fontAwesomeWoffPath: asset-path("fontawesome-webfont.woff");
//#fontAwesomeTtfPath: asset-path("fontawesome-webfont.ttf");
//#fontAwesomeSvgPath: asset-path("fontawesome-webfont.svg");
// Font Awesome
//#import "fontawesome";
I think you problem is because you're mixin gems!
The gem "twitter-bootstrap-rails" already include font-awesome you dont need to include any extra gem's for getting the icons. First of all you need to remove the gem "font-awesome-rails",
Your files should look like this:
Gemfile
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'therubyracer'
gem 'jquery-ui-rails'
gem 'less-rails'
gem 'twitter-bootstrap-rails'
gem 'uglifier', '>= 1.0.3'
end
application.css.scss
*= require bootstrap_and_overrides
*= require_self
*= require_tree .
.color-green {
color: green;
}
.color-red {
color: red;
}
bootstrap_and_overrides.css.less
#import "twitter/bootstrap/bootstrap";
body { padding-top: 50px; }
#import "twitter/bootstrap/responsive";
// Set the correct sprite paths
#iconSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings");
#iconWhiteSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings-white");
// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
// Note: If you use asset_path() here, your compiled boostrap_and_overrides.css will not
// have the proper paths. So for now we use the absolute path.
#fontAwesomeEotPath: asset-path("fontawesome-webfont.eot");
#fontAwesomeWoffPath: asset-path("fontawesome-webfont.woff");
#fontAwesomeTtfPath: asset-path("fontawesome-webfont.ttf");
#fontAwesomeSvgPath: asset-path("fontawesome-webfont.svg");
// Font Awesome
#import "fontawesome";
Your.html
<i class='icon-thumbs-up color-green'></i>
Note: Your should check what version of "twitter-bootstrap-rails" do you have, because the thumb up icon its on the last update of the gem (It was 4 days ago when they add support for font-awesome 3.2.1). Make sure to update your gem. Hope it helps!
I'm just starting with ruby on rails and one of the first things I tried to do was install the gems compass and susy. After figuring out that I needed to include them in the gemfile (I'm using RubyMine and thought it would do it for me), I still got a missing "Could not find", "susy" error when I tried to import susy into one of my css.scss files.
I have ruby version 1.9.3 (194)
and ruby gems version 1.8.23
Any help on which gems (and versions) I need in my bundle, how to make sure they get in the project bundle, is greatly appreciated.
I'm on rails 3.2.7 and use Susy (and Compass) like this.
##### Gemfile:
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'compass-rails'
gem 'susy', git: "git://github.com/ericam/susy.git"
gem 'uglifier', '>= 1.0.3'
end
Then I have several different css files.
application.css.scss, screen.css.scss and _base.scss.css.
application.css.scss
#### application.css.scss:
#import "screen";
# Here you import your normal .scss files as well, like:
# #import "products";
screen.css.scss
#### screen.css.scss
// ---------------------------------------------------------------------------
// Imports
#import "compass";
#import "base";
/* -------------------------------------------------------------------------*/
/* Layout */
// Here you can add layout styling or whatever... :)
_base.css.scss
// ---------------------------------------------------------------------------
// Imports
#import "susy";
// ---------------------------------------------------------------------------
// Basic Grid
$total-columns : 12;
$column-width : 4em;
$gutter-width : 1em;
$grid-padding : $gutter-width;
$show-grid-backgrounds : true;
And that's it. Now you can use Susy in all your scss files that you import in application.css.scss.
I hope it helps you to get started.
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.