How do I set variables in Feliz.Bulma?
For example say I want to set the $card-header-background-color variable as described in the
Card Component Documentation
I've hunted around on google and I can't find any examples or documentation on how to do this.
See here:
To override any of these variables, just set them before importing Bulma.
So if you are importing Bulma in an SCSS file you could do this:
$card-header-background-color: #05164d;
#import "~bulma/bulma";
Related
I have installed bootflat using bower. The instaltion location was set up as "vendor/assets/components/Bootflat". I have also included the relevant files in my application.scss, application.js and application.haml files. I assume that it's being included correctly because everything is working as expected.
My question now is, how do I customize scss variables used in Bootflat? Here is my current code in application.scss (app/assets/stylesheets):
$alert-primary:red !important;
#import "Bootflat/bootflat/scss/bootflat";
"$alert-primary" is a variable that's already used by Bootflat and I want to redefine it. How/Where would I redefine this? I get that what I'm doing above is probably not right as the variable is defined by a Bootflat file, which would mean that my definition above is overwritten. But I also do not want to change the scss code in the origin files? What is the best solution? Will it be to copy and paste the code for a specific component into my app's stylesheet and then redefine a component after importing bootflat (this should overwrite the original definition by Bootflat)?
I am trying to use Foundation 5 in a Rails 4 app. The problem I am having is I would like to have some custom CSS in addition to Foundation. In my CSS I would like to use some of the variables from Foundation. To use them I did added the following to the top of my scss file
$include-html-classes: false;
#import "foundation/components/global";
This works great except there is some junk still included on each page. According to https://github.com/zurb/foundation/issues/1629 this shouldn't happen.
If you look at the source here https://github.com/zurb/foundation/blob/master/scss/foundation/components/_global.scss then you can see that the meta stuff starting at line 284 will be included.
This is a problem since it will be included on every page that I want to use the variables/mixins on. Rails 4 combines all the css files into one which will have this same code over and over again...
Is there any way to include this file without it including any text?
I just discovered that using
#import "foundation/functions";
#include exports("global") {}
#import "foundation/components/global";
will include all the variables and mixins but won't add anything to your scss file!
I believe this is because the exports function is there to prevent css from being duplicated every time the global file is included. By having the fake exports function call it thinks it's already added the css.
I'm new to LESS and Bootstrap and I'm confused at the outcome of my css file.
My basic goal is to use the mixins and variables in bootstrap in my own css files.
From my understanding the process would be, get the less files, import them into the project, and import the bootstrap reference. So at this point I can now use the mixins in my own css file.
Example:
#import "less/bootstrap.less";
.myRow{
.make-row();
}
However now I have a 7400+ lines of styling in myCustomStyles.css. Is this "correct"? I don't understand why it actually imports all the styles. My understanding is... that I have a reference to bootstrap.min.css CDN or local. Then myCustomStyles.css will be included AFTER that and override the default values.
I guess I'm confused at how do I take advantage of a CDN and still use the mixins and variables in bootstrap?
I've used the following two articles as a reference:
http://www.helloerik.com/bootstrap-3-less-workflow-tutorial
http://www.codeproject.com/Articles/594098/How-to-customize-Twitter-Bootstrap-to-fit-your-web
Bootstrap.less is the full bootstrap implementation. It is going to have all the variables and mixins to build the entire CSS for bootstrap. If you don't want this, then you should probably pick and choose which LESS files to include instead. You probably want variables and mixins, so you could maybe get by with only importing variables.less and mixins.less?
If you look at bootstrap.less it looks like this:
// Core variables and mixins
#import "variables.less";
#import "mixins.less";
// Reset
#import "normalize.less";
#import "print.less";
// Core CSS
#import "scaffolding.less";
#import "type.less";
#import "code.less";
#import "grid.less";
#import "tables.less";
#import "forms.less";
#import "buttons.less";
// snip...
It is nothing but a bunch of imports to other .less files. Each file is sort of specific to what it is doing. At a minimum I think you would need variables and possibly mixins. Normalize does a CSS reset. Grid defines the grid classes, etc.
Possible Since LESS 1.5
You can specify that you want the code only as a reference like so:
#import (reference) "less/bootstrap.less";
.myRow{
.make-row();
}
The addition of the (reference) tells LESS to import it by not compile the code to CSS. This allows you to use the entirety of bootstrap for mixin reference purposes, but avoids adding all the code in. Of course, one needs to know how this may affect the implementation, as there are parts of bootstrap that expect certain code to be in place to work properly. But that this a whole other thing.
I'm having an issue with using #import to load global variables and also for the purpose of #extend from other files.
Let's say I have a settings.css.scss and I want this available in all my files by using #import 'settings'; at the top of each other scss file.
This works fine and I do get proper access to all my variables and stuff -- but doesn't this inject all the styles again to each file?
When I look at the source in the after-compiled version, I'm seeing the same style for a given class repeated 3-4 times in firebug, except it's scratching out all but one.
Is this repetitive bloat normal or am I doing something wrong??
Maybe I don't understand how to use mixin with sass, or how to work with the ones with bootstrap-sass (https://github.com/thomas-mcdonald/bootstrap-sass). But how can I do something like change the box-shadow on a class of input fields?
EDIT: Should clarify, in this example I'm trying to change the glow effect on an active input field when it is selected. By default it's blue.
For my project setup, I have it just like it says on the github page and have the gem in the Gemfile and then in a controller I have something like:
#import "bootstrap"
.testInput {
/*(here I have put a variation of variables that I change to see
if I can do something with the mixin like $bordercolor: #000;*/
#include formFieldState()
}
So maybe my understanding of how sass works is way off. I guess if I wanted to change the box-shadow for inputs I could just repeat the code in my own mixin but it was also just kind of a general question on if this kind of thing was possible with the other mixins as well.
Did you look at the source to see what the formFieldState mixin does? It lives here: https://github.com/thomas-mcdonald/bootstrap-sass/blob/master/vendor/assets/stylesheets/bootstrap/_mixins.scss#L159. It looks like this mixin is designed to be used within some type of container, most likely a form.
There are no variables controlling the default input:focus box-shadow (its declaration is here: https://github.com/thomas-mcdonald/bootstrap-sass/blob/master/vendor/assets/stylesheets/bootstrap/_forms.scss#L126). You'll have to override it the old fashioned way.
You should put the things you want to change after the #include, instead of before. The last declaration wins with CSS so if you put them before the mixin, the mixin version will win.
See here: http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/ for an advanced discussion of CSS precedence.