I am attempting to simply change the colour of the "is-primary" class in bulma. I am attempting to write a scss file to change the values without installing bulma via npm. I am attempting to import by using the cloudfare link, is this possible?
this is my scss file:
#import "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4./css/bulma.cssbulma/sass/utilities/initial-variables";
$tech-blue : #2c3e50;
$primary : $tech-blue;
#import "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.3/css/bulma.css";
This file compiles but I cannot find the corresponding css file and makes no affect to my actual page.
I don't think that this is possible. The variables in use by Bulma are only accessible by SCSS. So you need to build the whole thing to have your colors blend in. The rendered CSS already contains:
a {
color: #00d1b2; /* can't change that later on */
…
}
A feature request for Bulma would be to make those variables accessible via CSS variables. That way you could easily customize the look even with the pre-rendered CSS from the CDN.
Related
I am trying to customize Bulma by overriding some Sass variables.
In my app.scss file I import the files using the following order:
#import 'node_modules/bulma/sass/utilities/initial-variables';
#import 'node_modules/bulma/sass/utilities/functions';
#import 'bulma_overrides';
#import 'node_modules/bulma/bulma';
The file bulma_overrides.scss includes the following:
$footer-padding: 3rem 1.5rem 3rem;
$footer-background-color: whitesmoke;
My goal was to make the footer a little bit thinner, and I tried to achieve this by changing the padding from 3rem 1.5rem 6rem to 3rem 1.5rem 3rem. At the same time I am changing the backgroud color to whitesmoke.
After running and successfully building:
npm run watch
I reload the page.
Result:
The background color of the footer changes just fine but the padding does not.
At first, I thought that maybe this is not something we can customize, but the official documentation says that we can:
https://bulma.io/documentation/layout/footer/
Any ideas why? By the way, I faced the same issue with another variable in a previous project, and I can't understand what is going on.
PS1: i am using Laravel 5.7 for this project. No changes are done in webpack.mix.js
PS2: i tried multiple browsers (Chrome, Firefox, Safari, Edge[lol]) but no luck.
Your bulma import is already importing "sass/utilities/_all", so this app.scss worked for me just fine:
// Bulma Overrides
#import 'bulma_overrides';
// Bulma
#import '~bulma/bulma';
In my laravel 5.6 / vue.js 2.5.7/ Bootstrap4.1.0 application I want to set different color themes and I found this collection https://github.com/thomaspark/bootswatch
But how correctly to set them to my project? I tried to replace files
node_modules/bootstrap/dist/css/bootstrap.css
node_modules/bootstrap/dist/css/bootstrap.min.css
and cleared cache and rerun
npm run watch-poll
But no effect... Which is the right way?
Are there some tools to change color themes programmatically, say depending on logged user options ?
Adding a link of one bootswatch file in my layout file resources/views/layouts/app.blade.php, like:
<link href="{{ asset('css/darkly/bootstrap.min.css') }}" rel="stylesheet">
I see that colors of my layout of my pages is different, but I mean that in this case I ADD this css/darkly/bootstrap.min.css file to the EXISTING(ORIGINAL) bootstrap.min.css
and now I have 2 bootstrap.min.css files in my system.
Is it good decision?
I supposed that creators of bootswatch meant to REPLACE the original bootstrap.min.css file. How do you think?
And that is the question where original Bootstrap css(and bootstrap.js to) are attached to the project ?
in my layout file resources/views/layouts/app.blade.php a line:
that is a ref to my custom css file, the styles I add to the project.
I did not find how to skip attaching of the original Bootstrap CSS file...
Thanks!
Bootswatch is not meant to REPLACE the existing bootstrap CSS file. It is meant to work and OVERRIDE the styling rules from the default one, which means, load bootswatch css after you load the bootstrap css.
It would also be advisable to rename your downloaded bootswatch CSS file.
Like many developers I am using SASS as a preprocessor. I want to edit my stylesheets in Chrome. I've setup Source Maps to do this, and I know Chrome now supports SASS.
I have a SASS file, style.scss, used to create style.css used on the page. It's mainly just imports of other SASS files. Eg:
#import "colors";
Clicking an imported SASS file, like _colors.scss, it shows a green 'active' icon and shows it is linked to a source map.
However when I edit a SASS variable - like the $dark-blue in the screenshot below, where I've made it a red instead - the file doesn't change, nor does the page update.
How do I edit an imported SASS file in Chrome DevTools?
Edit: note the 'Linked to' on the imported file doesn't seem correct. The only way _colors.scss is used is part of style.scss which is turned into style.css. I suspect this is the cause of the problem. I've opened https://github.com/gulp-sourcemaps/gulp-sourcemaps/issues/349 to see if this is the case.
Adding color modifier classes to Bulma's navbar is supposed to change the background color (as mentioned here: http://bulma.io/documentation/components/navbar/#colors).
I find that this is working fine if I use the css version. But I"m using the sass version and it is not working.
Any idea why not?
Note -- this is also an unanswered issue on Github: https://github.com/jgthms/bulma/issues/1192
You have to create file like my-bulma-theme.scss, then override needed variables or import other .scss files with variables and finally, import bulma from node_modules and include that my-bulma-theme.scss in your pages/preprocessor.
For example my-bulma-theme.scss:
$navbar-background-color: #f0f0f0;
$another-bulma-variable: 14px;
#import './another-style-variables.scss';
#import '../node_modules/bulma/bulma.sass'; // must be the last thing in file
I updated to version 0.5.2 of Bulma and now it works as it should.
I tried several times to use #import 'reset' in my sass code. Unfortunately its not importing. The rest of the code sublime highlights and recognise with no problem. What should I do to #import the reset.css through sass?
When #importing CSS files into your SASS, you need to specify file extension (e.g. #import "reset.css";). See documentation.
Note: Importing file with .css extension will result in a real "CSS import" at runtime instead of inline SASS-like import. If you want to inject the contents of the file into your compiled CSS, change file extension to .scss.