I need to reduce the font-size of Bootstrap's Jumbotron header in Rails.
I see here
that I need to add something like
#jumbotron-heading-font-size: ceil((#font-size-base * 2.5));
in my file
app/assets/stylesheets/bootstrap_customization.css.scss
So I changed "#" to "$", please see below how the file looks now:
$jumbotron-heading-font-size: ceil(($font-size-base * 2.5));
$jumbotron-padding: 20px;
#import "bootstrap";
But this doesn't work.
I've found a solution.
As I'm using Bootstrap 4, I had a look at
https://github.com/twbs/bootstrap-rubygem/blob/master/assets/stylesheets/bootstrap/_variables.scss
and found $display3-size variable there (this is a class for h1 tag inside Jumbotrone), so then I added the following line before #import bootstrap into my .scss file:
$display3-size: 2.5rem;
So it works now
Related
Why do I get the following error?
Error: Undefined variable: "$red-100"
...when I try to use any of Bootstrap's color variables, like so:
div {
background-color: $red-100;
}
In my Gemfile, I have:
gem 'bootstrap'
In my application.scss file, I have:
#import "bootstrap";
What is missing in order to access these color variables?
EDIT: These color variables are listed in: https://github.com/twbs/bootstrap-rubygem/blob/master/assets/stylesheets/bootstrap/_variables.scss
EDIT 2: I use Bootstrap v4.6.0.
The only thing that I can see is that https://github.com/twbs/bootstrap-rubygem/blob/master/assets/stylesheets/bootstrap/_variables.scss is for v5.0.0beta2 and probably you are not using that version.
I looked over v4.6.0, https://github.com/twbs/bootstrap-rubygem/blob/v4.6.0/assets/stylesheets/bootstrap/_variables.scss and $red-100 does not show up.
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 SASS for the first time, and my variables seem to have stopped working. I have the following code in my application.css.scss file:
*= require_self
*/
#import "layout";
#import "colors";
...
#import "text";
In my partial _colors.css.scss file, there is:
...
$ct-white: #F8F8F8 !global;
and in my partial _layout.css.scss file (the Rails default layout file):
/* Site-wide layout syntax */
body {
background-color: $ct-white;
}
I know that the _layout.css.scss file is loading because other styles on the page work fine when I set body { background-color: #F8F8F8; }. For some reason, the variable isn't being parsed correctly.
Any ideas why?
You're importing colors after layout , so the variables you define in colors are not available for layout. You could simply invert the order of those two lines. In SASS, import order matters.
If you're using the sass-rails gem, it uses sass 3.2.0 so !global throws an error.
I am using bootstrap-sass and the font-awesome ( https://github.com/littlebtc/font-awesome-sass-rails) gems. I would like to override the bootstrap font setting from that of font-awesome.
From font-awesome's site I can override the bootstrap defaults, if I just import if after bootstrap's import.
#import 'bootstrap';
#import 'font-awesome';
I have done the above, but font-awesome's font is not overriding. I have pushed my project on github - https://github.com/murtaza52/rails-base. The url is accessible on localhost:3000/posts
I will appreciate if someone can help me overriding bootstraps's default font with those of font-awesome's
Modify your application.css.scss to look like below
#import "font-awesome";
$baseFontFamily: 'FontAwesome';
#import "bootstrap";
...
#import "bootstrap-responsive";
//#import "scaffolds";
#import "posts";
WHY?
You move import "font-awesome" at the top and then define baseFontFamily because that's what bootstrap uses to define font-family for all the elements. Check Typography and links block in the middle. If you import bootstrap after this, FontAwesome will be used by default.
You should remove import "scaffolds"; line because scaffolds.css.scss will reset your font family for body element which will be inherited by every other element.
If you can't avoid importing it before bootstrap. I hope that helps.
For those of you guys using Bootstrap 3.2+ (I guess), here's the list of SASS variables you can modify:
https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss
In our case, we want to make sure to define $font-family-base before doing #import "bootstrap".
By setting $font-family-base before the line below is reached, Bootstrap uses our $font-family-base instead (otherwise, it defaults to $font-family-base-serif, also defined in the variables.scss above).
$font-family-base: $font-family-sans-serif !default;
This is how my application.css.sass looks like
/*
*= require_tree .
*= require_self
*/
#import "fonts"
#import "compass"
#import "bootstrap"
And I have the following in _fonts.css.sass (You don't have to have it in a separate file)
$font-family-sans-serif: 'Roboto', verdana, arial, sans-serif
I don't know if this helps you but at least sometimes when template code seems valid you need to force refresh your browser with ctrl+shirt+r to see changes (works at least in mozilla).
Using Rails 3.
Right now in each new .css.scss file that I am creating, I want to be able to use the mixins, but I just couldn't seem to use it.
Here is my bootstrap_import.css.scss:
// Import bootstrap
// --------------------------------------------------
#import "bootstrap";
#import "bootstrap-responsive";
#media (min-width: 1200px) {
.span12, .container {
width: 1170px;
}
}
#import "base";
When I have another file called a.css.scss and I try to #include border-radius(12px);, but it just gives this error:
Undefined mixin 'border-radius'.
Same goes to variables, I would like to change some colors on some variables so that I can use it on any file without needing to include in each CSS file.
Thank you.
Only one import works in my project, probably a bug or a mistake from my side.
My solution with bootstrap-sass v2.0.3.1 to achieve a solution is:
(not 100% what do you expect, I know..)
I create a new scss file like: myAppBase.css.scss
/* override bootstrap default variables */
$linkColor: #FF0000;
$linkColorHover: #000;
#import "bootstrap";
/* App variables */
$bgImage: url('bg.jpg');
$radius: 4px;
$maxHeight:600px;
$minHeight:400px;
$bSize:1px;
and if i need bootstrap and my variables in an other *.css.scss file.
I include this line on the top:
#import "myAppBase";
I followed this guidelines and I was able to fix the error "undefined border-radius".
https://github.com/thomas-mcdonald/bootstrap-sass