Bulma: Using Bulma with a templating engine.

Created on 23 Aug 2017 · 7Comments · Source: jgthms/bulma

Good day!

I installed Bulma with npm install bulma and am wondering: how do I apply it to my .pug templates? A quick workaround was to just use the CDN provided, but still, I'm curious to learn how to utilize the npm package installation.

Thanks!

Source

alchermd

Most helpful comment

You need a build system to compile the bulma npm package from sass to css. Check out the following resources:

scottwernervt on 23 Aug 2017

👍2

All 7 comments

You need to use Bulma classes in your templates, and import the Bulma CSS in the head.

jgthms on 23 Aug 2017

With bulma already npm installed:

<!-- base.pug -->
<!DOCTYPE html>
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        meta(http-equiv="X-UA-Compatible", content="ie=edge")
        title #{title} - My App

        import bulma <!-- Is this what you meant? It doesn't work :( -->
    body
        block content

alchermd on 23 Aug 2017

This should work:

link(rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.min.css")

jgthms on 23 Aug 2017

That's what I'm doing now, per the original post. That kinda defeats the purpose of installing it through npm, right? I'm probably missing something obvious here 😄

alchermd on 23 Aug 2017

You need a build system to compile the bulma npm package from sass to css. Check out the following resources:

scottwernervt on 23 Aug 2017

👍2

@alchermd If you do npm install bulma, you also get the compiled .css file. Simply link to the .css:

link(rel="stylesheet" type="text/css" href="node_modules/bulma/0.5.1/css/bulma.css")

(adjust according to your project structure)

rajshrimohanks on 24 Aug 2017

I tried @rajshrimohanks method (thank you!), but I was not getting the CSS. I noticed that I forgot to "serve" those static files from node, so whenever my HTML file pulled the CSS, it was getting a 200 but with an HTML file instead (in my case, just the Index page). To fix that I added this line to my node app:

app.use('/bulma', express.static(__dirname + '/node_modules/bulma/css/'));

and then in my PUG files:

link(rel="stylesheet" type="text/css" href="bulma/bulma.css")

Now it's loading correctly. I hope it helps!
Cheers