customizing Bulma via SASS

[gour]

Hello,

Bulma framework uses SASS along with npm (via package.json) as build tool. Its docs says that in order to:

Add your own colors, set new fonts, override Bulma styles...

one has to provide file with the following content:

// 1. Import the initial variables
@import "../sass/utilities/initial-variables"

// 2. Set your own initial variables
// Update blue
$blue: #72d0eb
// Add pink
$pink: #ffb3b3
// Add a serif family
$family-serif: "Merriweather", "Georgia", serif

// 3. Set the derived variables
// Use the new pink as the primary color
$primary: $pink
// Use the existing orange as the danger color
$danger: $orange
// Use the new serif family
$family-primary: $family-serif

// 4. Import the rest of Bulma
@import "../bulma"

but it's not clear to me if one e.g. names such file as master.sass, how to incorporate it into the present build system?

One way to customize Bulma theme is to use:

<link rel="stylesheet" href="{{ .Site.BaseURL}}/css/custom.css"> <!--Custom CSS-->

but I wonder how could I achieve to generate the above custom.css by using SASS mechanism within Bulma framework itself instead of overriding styles directly in CSS file?

[jeblister]

Hello,

My suggestion for you @gour is to use this great pipeline project hugulp as explained in the readme you have to :

1. Create the following folder assets/styles inside your hugo site.
2. After doing you customization on Bulma scss source files, you can generate a custom css file with hugulp build --config config.yaml

If all you need is a theme color variation, you can use my feature in bulma theme : https://github.com/jeblister/bulma#theme-variants.

[gour]

My suggestion for you @gour is to use this great pipeline project hugulp as explained in the readme

OK, I'll certainly try that...

After doing you customization on Bulma scss source files, you can generate a custom css file with hugulp build --config config.yaml

That looks cute. ;)

Edit: I wonder how to do it considering that the theme is not shipping source files?

It looks it's also related to the following issue: jbrodriguez/hugulp#15?

If all you need is a theme color variation, you can use my feature in bulma theme : https://github.com/jeblister/bulma#theme-variants.

I was wondering what is recommended way to do it with plain project within Bulma itself, and, so far, found the following method:

• created sass/my.sass file with the following contents (as in the Bulma docs):

// 1. Import the initial variables
@import "../sass/utilities/initial-variables"

// 2. Set your own initial variables
// Update blue
$blue: #72d0eb
// Add pink
$pink: #ffb3b3
// Add a serif family
$family-serif: "Merriweather", "Georgia", serif

// 3. Set the derived variables
// Use the new pink as the primary color
$primary: $pink
// Use the existing orange as the danger color
$danger: $orange
// Use the new serif family
$family-primary: $family-serif

// 4. Import the rest of Bulma
@import "../bulma"

• modified package.json file with the following:

"build-sass": "node-sass --output-style expanded --source-map true sass/my.sass css/bulma.css",

iow. to use sass/my.sass file and then:

npm start

does its job. :-)

However, when working with Hugo, it seems that hugolp is better/simpler method.