Bulma: Unable to customize Bulma

[KayJay89]

This is about Bulma and documentation.

Overview of the problem
This is about the Bulma CSS framework.

I'm using Bulma version 0.6.2
My browser: irrelevant

I am not sure this issue is not a duplicate

Description
I am following the documentation on the Bulma website. But I am completely unable to get the customization to work. There must be either a severe gap in the documentation or in my knowledge or both.

For example, I am being asked to create a mystyles.scss file, which is what I do. I copy the content of example given on (https://bulma.io/documentation/overview/customize/) but nothing happens. The page does not change colour when I change the primary colour etc.

Is it normal that I am being asked to create a .scss file while all others are .sass?

Additionally, I have also tried to get accustomed with Bulma using the "Bulma Start" version. In that one, I am able to change the colours following the short intro on the Bulma website. But everything seems completely different. You have much more folders in the "Bulma" file than the "Bulma Start" one, not to mention I hardly see any form of consistency across both repositories. One uses a "sass" folder with sub-folders and other sass files while the "Bulma Start" uses a "_sass" folder with one .scss file.

Bulma Start has no bulma.sass file in the "bulma-start" folder while Bulma has one. This is incredibly confusing for those who are starting out with Bulma and sass. The documentation does not help at all either to clarify things.

Not to mention, when you follow the Bulma-Start "main.scss" file, the customization file refers to a location that just does not exist. How does this work? I am completely confused.

I sincerely apologize if this has been asked or covered before or this is clarified somewhere in the documentation materials, but after searching for two days I really can not find the solution myself.

[Jaguar19]

Copy all lines expect last one, paste in mystyles.scss, add /node_modules/bulma in import paths (i.e. ../node_modules/bulma/sass//utilities/initial-variables) and import mystyles.scss before import bulma in main.scss. It should work. I am working with bulma-start package.

[KayJay89]

Hi Jaguar19! Thank you for your feedback. But you make me even more confused in all honesty.

There is no main.scss. The only .scss file that I have in my repository is the "mysteles.scss" file that I am being asked to create on the bulma website.

I really do not understand what I am doing wrong here. The Bulma website does not say anything about running npm watch either (which is what I do). But because I create a .scss file while the others are .sass, the npm watch is not able to convert what I put in the mysteles.scss file into the bulma.css file.

I would very very much appreciate it if someone could point me to a tutorial. It would be very much appreciated and I am sure this would be helpful for a lot more beginners.

[VizuaaLOG]

Hey, @KayJay89 I'm sorry to see your confused, Bulma is super easy to work with once you get the hang of it. I'll try and have a stab at explaining my method of customising Bulma. If you have any questions, please do let me know.

1. Install Bulma via NPM

If you're looking to customise Bulma via SASS then the easiest way is to install via NPM. Which I can see from your response you have already done and are familiar with NPM. While the docs do not tell you to run a watch command it is assumed but as everyone's SASS compilation is different, it would vary depending on your workflow. For example, I like to use Laravel Mix for my compilation as it is super easy to configure, but can be overkill for some smaller projects.

2. Create your own SCSS/SASS file

I can see you do already have a file called mystyles.scss. This can be called anything you would like. I like to use either main.scss or app.scss. Depending on the mood I'm in :P.

3. Import the Bulma files

I find I do this a little differently to how the docs handle this. Because Bulma's variables are set with the SASS !default argument, in my experience it doesn't matter the order you put your own variables and the Bulma imports. For the sake of following the docs I'll keep it in the 'correct' looking order.

@import "./node_modules/bulma/sass/utilities/initial-variables";
@import "./node_modules/bulma/sass/utilities/functions";

The path to your NPM Bulma install may be different. If you're using webpack I beleive you can instead use

@import "~bulma/sass/utilities/initial-variables";
@import "~bulma/sass/utilities/functions";

4. Customise like crazy

You can then follow the rest of the Bulma example. Creating your own initial variables, for things like font family and changing the base colour variables.

You can then change the derived variables, allowing you to allocate the primary and danger variables etc.

You can then add your own custom colours by following steps 4 and 5 in the Bulma docs. This one is actually new to me and looks super awesome. I'm assuming this would allow you to do things like is-twitter etc on elements that accept a colour class. Such as a button or the text helpers.

5. Load the rest of Bulma

You can now either load all of Bulma by following the docs. Or what I like to do is only load the components/files I need. For example loading Navbar, container etc. depending on your project. Again if you're using Webpack you can use the below text. Otherwise, it'd need to be the full path to the main Bulma folder.

@import 'bulma';

6. Compile

At this point, you should now be able to run your SASS compilation. Either via npm run watch like you mentioned above, or via any other method your project uses.

---

I personally do not like not having brackets etc. in .sass files and so I only use .scss files in my project, importing Bulma's .sass files without problems. If you have an error or anything, please post the message here and I'll try and help.

Hope this makes sense. If you have any questions please post them, I'll try and answer them where I can.

[KayJay89]

Hi @VizuaaLOG !

First of all, many thanks for such a thorough explanation. I read through it twice and I tried it again but I think I am going a bit in circles. I install bulma via NPM so I end up with something like this:

C:\Users\Kay Jay\Documents\Atom\Websites\project1\node_modules\bulma

And in this final Bulma map, you'll have everything from your css/sass folder to the bulma.sass, package.json,...

So up until that point, I believe I am doing a good job. Secondly, I will cd to the bulma folder and run npm install to install all node_modules.

And after that, I think I am having problems. Cause in this stage, I would create the mystyles.scss file or whatever name, copy the content from the documentation and run npm start to have it watch and compile the file to the bulma.css.

The thing is, whatever I do in mystyles.scss is never taken into the final 'bulma.css' file. And when I try to import my 'mystyles.scss' file into the bulma.sass file, I get an error in my CMD because it can not convert the .scss file.

So I must be missing something incredibly stupid but for a relative newcomer, I simply can't see the solution here. Do I have to run a watch manually myself that takes the mystyles.scss and compiles it to bulma.css? I can for example not run npm run watch as the script doesn't exist.

In all honesty, the documentation is lacking for beginners like me. It feels like things are left out or not even slightly referred to and one assumes the user knows everything. I have used sass before in the past (to a certain extend), I know css, js, html, etc to a certain extend. But the way the documentation is created and reads it just incredibly confusing.

[VizuaaLOG]

@KayJay89 You don't cd into the Bulma folder and run npm install. That is only if you would like to develop Bulma.

Your folder structure should instead look like this.

- project1
-- node_modules
--- bulma
---- bulma files css/sass etc
-- mystyles.scss

What you should see is that the mystyles.scss file is in the root of the project1 folder. Next to the node_modules folder. You would then need to setup your project to compile the SASS file. This will then pull in Bulma and in the process of compiling Bulma for use in your project it will apply your changes, giving you a custom Bulma CSS file.

[KayJay89]

@VizuaaLOG You, my man, are a saviour. It's been ages that I have used SASS and together with trying out Bulma and not getting it working fine was confusing the hell out of me. But thanks to you for pointing me in the right direction, I managed to get it working.

For completenesses' sake, on top of what you explained in your last response (but also what you already said in your first reponse), here's what I did to get it working:

Replaced below(first two lines as you already said in your first response)

@import "../sass/utilities/initial-variables";
@import "../sass/utilities/functions";
@import "../sass/utilities/derived-variables.sass";
@import "../bulma";

with:

@import "./node_modules/bulma/sass/utilities/initial-variables";
@import "./node_modules/bulma/sass/utilities/functions";
@import "./node_modules/bulma/sass/utilities/derived-variables.sass";
@import "./node_modules/bulma/bulma";

Run like so in CLI of choice:

sass --watch mystyles.scss:node_modules/bulma/css/bulma.css

And voila! I have been screwing up for 4 days and this got me out of it. Learnt a lot. Thanks a lot, cheers!

[VizuaaLOG]

@KayJay89 no problem. Glad you sorted it. Happy coding!

[Temiogundeji]

Hi, Everyone I am a beginner in bulma, I really need you guys to help me out. How do I customize my bulma website without using the webpack and other build tools.Also, to make my Sass variables effect a change.

[bigsee]

Hey @Temiogundeji - do you manage to solve this? If not, do you have a repo/pen where the issue is visible?

[Temiogundeji]

I'm still running the project locally.

[bigsee]

@Temiogundeji which stack are you working on?

[Temiogundeji]

Basically Frontend development.

On Mon, 29 Apr 2019 at 00:33, Carlton McFarlane [e-mail]
wrote:

@Temiogundeji https://github.com/Temiogundeji which stack are you
working on?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/jgthms/bulma/issues/1651#issuecomment-487477362, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AGYU3TI2CC32XTN33A6MK6DPS2QDDANCNFSM4EQFRLZQ
.

[bigsee]

Unless the project is private, my advice is to just commit the local code you are running to a Git repo so that someone can take a look and help you. If it is private, you can upload to a private repo or perhaps provide some snippets here of where you are trying to include Bulma and then access/amend the styles.

For instance, how are you using Bulma? Have you downloaded from npm or are you accessing via the CDN? Please share some more details...

If you are able to upload even a private repo then feel free to ping me and I'll be happy to clone and take a look. :)

[DawoodHayat]

@VizuaaLOG hello i'm using bulma with node-sass pkg .. i tried to customize color of my navbar through bulma giving variables but it did't work :( what should i do now i tried everything but it did't work please let me help it getting worse now