I've used Zurb Foundation Framework to build my website, now I'd want to use "Sticky footer" of Compass but I cannot include Compass
gem 'zurb-foundation', :git => "https://github.com/zurb/foundation.git"
gem "compass"
Application.scss
#import "bourbon";
#import "foundation_and_overrides";
#import "buttons";
#import "font-awesome";
#import "page";
#import "pagination";
#import "footer";
#import "app";
footer.css.sass
#import compass/reset.scss
#import compass/layout.scss
+sticky-footer(72px, "#layout", "#layout_footer", "#footer")
That looks like Rails4 -- compass is not yet ready for Rails4.
You could try your luck with version 2.0.alpha.0 on compass-rails -- it's been released for about 4 days now.
gem 'compass-rails', '2.0.alpha.0'
Related
I am running Rails 5.1 with the gem 'bootstrap', '~> 4.1.3' and I want to activate gradients and the shadows in the application.
For now, there is no gradient on the inputs :
I would like to get this appearance (a shadow and not a solid border) :
I suppose it'is linked to the default variables in _variables.scss (inside the gem)
$enable-shadows: false !default;
$enable-gradients: false !default;
I don't want to modidy the bootstrap gem itself, so I tried to add the following in app/assets/stylesheets/application.css.scss
/* Trying to overwrite CSS default variables in SCSS */
$enable-shadows: true;
$enable-gradients: true;
/* Vendor CSS */
#import "bootstrap";
#import "fontawesome-all";
#import "selectize.js-master/dist/css/selectize";
#import "selectize.js-master/dist/css/selectize.bootstrap4";
#import "jquery-ui/autocomplete.css";
#import "devise";
/* My CSS */
#import "colors";
#import "global";
#import "items";
#import "posts";
#import "tags";
#import "users";
#import "welcome";
but there is no effect on the input gradient... What do I miss ?
Bootstrap doc variable overwrite : https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults
I can't seem to find an answer that works for me.
The icon shows up as a box:
I'm using:
font-awesome-rails (4.6.2.0)
rails (4.2.3)
I imported font-awesome-rails in my application.scss file using:
#import "font-awesome";
and here is what I wrote for the view:
<i class="quote-left fa fa-quote-left"></i>
I've tried including it before and after bootstrap.
I also tried manually adding the font folder to the pipeline in application.rb
config.assets.paths << Rails.root.join("app", "assets", "fonts")
Clearing the tmp folder didn't seem to do anything either.
I spent way too much time on this, please help :(
I had this issue when working with Rails 6 and Bootstrap 4 in Ubuntu 20.04.
I had set up Fontawesome this way:
First I added Font Awesome to my package.json file:
yarn add #fortawesome/fontawesome-free
Next, I imported it into my app/javascript/packs/application.js file:
require("#fortawesome/fontawesome-free")
Next, I imported it into my app/assets/stylesheets/application.scss file:
$fa-font-path: '#fortawesome/fontawesome-free/webfonts';
#import '#fortawesome/fontawesome-free/scss/fontawesome';
#import '#fortawesome/fontawesome-free/scss/brands';
#import '#fortawesome/fontawesome-free/scss/solid';
#import '#fortawesome/fontawesome-free/scss/regular';
#import '#fortawesome/fontawesome-free/scss/v4-shims';
I also added the Font Awesome 5 Rails gem to my Gemfile:
gem 'font_awesome5_rails'
and installed it in my project:
bundle install
And finally I modified where my fontawesome icons were called from this format:
<i class="fas fa-camera-retro"></i>
to this format
fa_icon('camera-retro')
But the issue was that the icons were displaying fine in development but not in production.
Here's how I fixed it:
The issue was that I needed to import the FontAwesome 5 fonts into the app/assets/stylesheets/application.scss file. So I imported this to it:
#import 'font_awesome5_webfont';
So my fontawesome import to the app/assets/stylesheets/application.scss file looked like this finally:
#import 'font_awesome5_webfont';
$fa-font-path: '#fortawesome/fontawesome-free/webfonts';
#import '#fortawesome/fontawesome-free/scss/fontawesome';
#import '#fortawesome/fontawesome-free/scss/brands';
#import '#fortawesome/fontawesome-free/scss/solid';
#import '#fortawesome/fontawesome-free/scss/regular';
#import '#fortawesome/fontawesome-free/scss/v4-shims';
This time the icons displayed properly in development as well as production.
Note: Please ensure to re-compile your assets after making these changes and restart your server.
That's all.
I hope this helps
I moved my import of font-awesome below my font import and it solved it.
from this:
#import "font-awesome";
#import url("https://fonts.googleapis.com/css?family=Playfair+Display:700,900");
to this:
#import url("https://fonts.googleapis.com/css?family=Playfair+Display:700,900");
#import "font-awesome";
Try restarting your webserver, after adding #import 'font-awesome.css' to your application.scss.
Also read these, if you haven't yet,
https://github.com/bokmann/font-awesome-rails/issues/130#issuecomment-95308175
https://github.com/bokmann/font-awesome-rails/issues?q=is%3Aissue+is%3Aclosed
I solved this issue by explicitly declaring a font-family: FontAwesome; rule in my stylesheet because a global * style was overwriting the font-family attribute for the .fa class.
I am using bower for third parties on front-end.
I have problem with iCheck component which is used in AdminLTE theme.
Here is application.sass file of my Ruby on Rails 4.2.1 server side app:
#import "bootstrap-css-only/css/bootstrap"
#import "css/AdminLTE"
#import "css/skin-purple"
/*theme AdminLTE-2.3.0*/
#import "font-awesome/css/font-awesome"
#import "iCheck/skins/minimal/_all"
#import "iCheck/skins/square/_all"
#import "iCheck/skins/flat/_all"
#import "iCheck/skins/line/_all"
#import "iCheck/skins/polaris/polaris"
#import "iCheck/skins/futurico/futurico"
#import "iCheck/skins/all"
/*javascript notifications*/
#import "pnotify/src/pnotify.core"
#import "pnotify/src/pnotify.buttons"
/* Font awesome import*/
#import "font-awesome/css/font-awesome"
/*angular modules stylesheets*/
#import "core/stylesheets/users"
There is a problem with iCheck component because in file iCheck/skins/all.css there are imports:
#import url("minimal/_all.css");
#import url("square/_all.css");
And when I precompile assets for production environment, those css files do not exist. In development mode, everything works like a charm!
Any suggestion on this?
The problem here is that your compiled css file still has the same import commands, which is referencing the minimal/_all.css and square/_all.css.
There are two solutions for this problem:
You could change the extension of all imported files to scss, and change the import directive from #import url("...") to #import "..."
Or you could copy the files, which are imported with url to your public folder, and your browser will find them (of course, they will not be minified, and i would not suggest you do use this solution)
I'm using sass-bootstrap for my project, I have a _colors.scss file where I save my colors variables .
I import my _colors.scss before importing bootstrap.
I can modify main bootstrap variables like:
$navbar-default-link-active-color: red;
// active link in header menu became red
But I cannot use color var in my other sass files like:
$brand-primary: #428bca;
body {
color: $brand-primary;
}
// this give undefined variable
How is that?
My import application.css.scss:
#import "base-elements/colors";
#import "base-elements/typography";
#import "base-elements/helpers";
#import "bootstrap-sprockets";
#import "bootstrap";
#import "bootstrap-theme.min";
#import "components/login";
#import "components/carousel";
#import "pages/pages";
Just discover that sass-rails version bigger than 4.0.1 doesn't work well with bootstrap. I needed to define
gem sass-rails '4.0.1 '
and
gem 'sprockets', '2.11.0'
in order to make colours and bootstraps mixins working properly
Hopefully that can help someone else
I'm using the bootstrap-sass gem. With these instructions https://github.com/twbs/bootstrap-sass#usage Things work ok except when I want to add a new stylesheet.
application.css.scss
#import "bourbon";
#import "custom";
#import "users";
#import "font-awesome";
#import "comments";
#import "animations";
directory structure
▾ stylesheets/
animations.css
application.css.scss
classifieds.css.scss
comments.css.scss
custom.css.scss
foo.css.scss
news.css.scss
relationships.css.scss
scaffolds.css.scss
users.css.scss
But if I add foo.css.scss to /stylesheets/ and add #import 'foo' to application.css.scss
I get a wrong number of arguments (2 for 1)
(in app/assets/stylesheets/application.css.scss) error
What could I be doing wrong?
it seems sass gem changed number of arguments of Sass::Importers::Base#public_url.
New version of sass-rails-source-maps should resolve this.