What is the optimal way to implement Bulma?

support
1

Hi!

I’m using the Bulma CDN, but I want to get instead Bulma as a package.

I have installed the package with npm install bulma, but I don’t know what I should do next to get Bulma to work exactly as the CDN links.

My goal -> I want to customize some default variables of Bulma and to achieve that I have seen that I need to install the package, have a working Sass setup or create my own .scss or .sass file, so I went with the first option.

What is the right way of using and customize a package like Bulma in this situation?

The CDN way

I have added this three links inside the css.html file:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.css.map">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">

The “package” way

I have added the three files inside /node_modules/bulma/css bulma.css, bulma.css.map and bulma.min.css inside the /static/css folder.

I have added <link rel="stylesheet" href="{{ "css/bulma.css" | absURL }}"> to the header.html file.

But I’m sure something is wrong because bulma.css.map and bulma.min.css become practically useless with this approach.

And I’m seeing that the website acts differently:

CDN

Screenshot%20from%202019-03-28%2009-35-32

Removed the CDN links and going just with <link rel="stylesheet" href="{{ "css/bulma.css" | absURL }}">

Screenshot%20from%202019-03-28%2009-36-08

You can see that in the second picture the website is more centralized… different.

2

The last site I implemented with bulma was before Hugo Pipes, so I pulled it all down with bower from within Codekit. When I do work on that site, I will redo it using yarn to pull the files to assets, and then use Hugo to compile a main.scss.

You’re talking about just using the dist files, so I would check the html source of the site, and make sure those files are getting loaded properly. What paths are you seeing in the source, and does that reflect reality?

3

I think they are getting loaded correctly because when I go to localhost:1313/css/bulma.css I can see the file, and I can also see the other two files bulma.min.css and bulma.css.map.

But now, what would be an optimal workflow for using Bulma?

I just want to be able to change some Bulma variables and have the smallest css size footprint for performance.

4

I would use Hugo Pipes if you want to change variables.

5

There is a Bulma theme with a good workflow.

6

I am using bulma with Hugo Pipes on this super simple site: https://termux.holehan.org. The theme can be found here: https://github.com/holehan/termux-extras/tree/master/themes/termux

Quick summary how I am using bulma with Hugo Pipes:

  • import bulma in your main scss file, e.g. a file called assets/scss/main.scss:

    @import 'bulma.sass';

  • then let Hugo Pipes handle the import:

    {{ $cssOpts := (dict "includePaths" (slice "node_modules/bulma" "assets/scss")) }}
{{ with $styles := resources.Get "scss/main.scss" | toCSS $cssOpts }}
<style>{{ .Content | safeCSS }}</style>
{{ end }}
1 Like
7

Would it be ok if I just add at the end of the bulma.css file the lines that I need to add and that’s it?

Or when I would update the package what is inside would be overwritten?

Something like:

/* Bulma lines*/

/* Arabic language */

.navbar-burger.ar {
  margin-right: auto;
  margin-left: initial !important;
}  

.navbar-start.ar {
  margin-left: auto;
  margin-right: initial! important;
}
.navbar-end.ar {
  margin-right: auto;
  margin-left: initial! important;
}

And inside these navbar I would add for instance <div class="navbar-end {{ .Lang }}">.

I just tested it and it works, but I don’t know if it’s future proof.

8

It’s better to take the approach @holehan cites for precisely the reason you cite. Pull bulma into your file, and commit your file to git.

9

I’m doing this technique here, but with tachyons:

https://git.sr.ht/~rickcogley/logr.cogley.info/tree/master/assets/rc-main.scss

The 1st line is importing via @import "tachyons-sass/tachyons.scss"; and that tachyons-sass is in my assets folder but is also in my .gitignore so it does not get committed. I just did git clone to get it from github, and can easily update. I’m using some sass variables in there and standard css too.

Then, I’m using it in my <head> like this:

https://git.sr.ht/~rickcogley/logr.cogley.info/tree/master/layouts/partials/header.html#L28-29

You can use the same idea w/ bulma.

1 Like
10

Alright, thanks!

11

You are aware that bulma.min.css is the same as bulma.css? you need only one of these links. that is probably the reason for the changed formatting. It’s either bulma.css without bulma.css.map OR bulma.min.css with bulma.css.map.

2 Likes
12

Hey! We made a generic content builder for Bulma and other frameworks (Bootstrap, Foundation, Material Design Lite, …) as well. You can play with the builder here ( http://innovademo.com/contentbuilder/example1-bootstrap.html ) It’s a jQuery plugin, so you can use it on your website. Let me know what you think :slight_smile:

1 Like