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).
Related
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
I have a Rails 4 app, using the foundation-rails v5.2.1.0 gem, and one custom SCSS file for my application layout. When I use a variable from the foundation_and_overrides.scss file, I get the following error:
Undefined variable: "$header-font-family"
I've included relevant code below. I can post more if needed. Anyone know what's going on here?
From application.css:
*
*= require foundation_and_overrides
*= require_self
*= require_tree .
*/
From foundation_and_overrides.scss:
// We use these to control header font styles
$header-font-family: "futura-pt", sans-serif;
$header-font-weight: 400;
// $header-font-style: normal;
From custom.css.scss:
$include-html-global-classes: false;
#import "foundation/components/global";
.
.
.
.footer {
background-color: black;
color: white;
height: 100px;
font-family: $header-font-family;
}
You are getting the error because foundation_and_overrides.scss is executing after custom.css.scss. Best way to do this is to define your variables in a partial and import it in your main stylesheet after foundation.
First change the file name from
foundation_and_overrides.scss to _foundation_and_overrides.scss
and then import it in custom.css.scss file after foundation with
#import 'foundation_and_overrides';
Update
Rename your application.css to application.css.scss and custom.css.scss to custom.scss
In your application.css.scss remove *= require_tree .
And then import your main stylesheet with
#import 'custom'
I hope this helps
The cleanest way is to add the line
#import "custom";
to your file foundation_and_overrides.scss before the line
#import "foundation";
There's no need to remove *= require_tree . from application.css.scss as stated in the accepted answer. There's also no need to add require foundation_and_overrides to application.css if you leave require_tree . in there.
According to the Rails Docs:
If you want to use multiple Sass files, you should generally use the Sass >#import rule instead of these Sprockets directives. When using Sprockets >directives, Sass files exist within their own scope, making variables or >mixins only available within the document they were defined in.
So in this case the order of the directives (the lines in application.css that start with *=) doesn't matter because each of those files lives in its own scope and you can't access their variables from another scss file. That's why you want to either #import foundation_and_overrides and then custom, or #import your custom stylesheet into foundation_and_overrides.
In the stylesheets/bootstrap directory I have:
_variables.scss I have:
$black: #000 !default;
$grayDark: #333 !default;
...
$textColor: $grayDark !default;
This file is imported in the bootstrap.scss file:
// Core variables and mixins
#import "bootstrap/variables"; // Modify this for custom colors, font-sizes, etc
#import "bootstrap/mixins";
...
In the stylesheets directory I have bootstrap_include.scss
#import "bootstrap/bootstrap";
#import "bootstrap/responsive";
I want to override the default text to be black, so I create a custom variables file and imported it in my custom bootstrap file
_variables_custom.scss:
$black: #000 !default;
$textColor: $black !default;
and then in bootstrap_custom.scss
#import "variables_custom";
Finally in the application.css.scss
*= require bootstrap_custom
*= require bootstrap_include
When I refresh the page, bootstrap_custom is always empty, I'm a css newbie, and why it isn't working?
Thanks
NOT SURE IF THIS IS NICE BUT I SOLVED IT USING:
my bootstrap_custom now includes
$black: #000 !default;
$textColor: $black !default;
#import "bootstrap/bootstrap";
#import "bootstrap/responsive";
and my application.css.scss now only includes
*= require bootstrap_custom
in your stylesheet, remove !default
that is, in your file _variables_custom.scss - instead of:
$black: #000 !default;
$textColor: $black !default;
use this instead:
$black: #000;
$textColor: $black;
!default is a sass variable flag that allows for reassignment before or after the !default is declared, with the non !default value always winning.
so:
$foo: black;
$foo: red !default;
body { background: $foo; }
will result in a black body background, even though red is declared after black
While we are talking about variables, there's nothing related to CSS. Variables, in this case, are used by SASS/Compass a CSS preprocessor tool, used by Rails to make the use of CSS more easy (eg. by using variables).
So when you insert your variables in a file, and let it be processed alone, it wont produce any CSS code unless you make any use of then in a valid CSS attribute.
If you want to test it, add to your bootstrap_custom.css something like:
body {
background-color: $black;
}
And you will see your $black variable being used.
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
Getting around to using sass in my latest rails project, specifically the bootstrap-sass gem to get all of twitter bootstrappy goodness.
Is it possible to reference the variables already defined? The vendor /assets/stylesheets/bootstrap/_variables.scss file contains declarations for colors.
$blue: #049cdb !default;
$blueDark: #0064cd !default;
$green: #46a546 !default;
$red: #9d261d !default;
Do I need to redefine these in the top of my base application.css.scss file or can I import/reference the variables file? I've tried a couple of approaches like this:
$bodyBackground: $black;
#import 'bootstrap'
But that errors out with undefined variable $black.
First, define the variable $black:
$black: #000;
$bodyBackground: $black;
#import "bootstrap";
or change it to:
$bodyBackground: #000;
#import "bootstrap";
Remove the below two lines from application.scss file:
*= require_self
*= require_tree .