Bulma 4 Hugo - Use Bulma easily within your Hugo site

Bulma releases packaged for use with Hugo as module or using git.

Features

• access to all build variants from Bulma release.
• choose a precompiled CSS variant
• use the SASS and your build pipeline
  • customize SASS if you want
• easy version change (depending on your chosen usage)

Disclaimer

This is a brute force repacking of Bulma release to ease up adding it to a Hugo site.

• There's no stuff like verification and testing.
• delivered as-is, no guarantee no warranty
• No Bulma support here

Support

If you have problems/issues with Bulma itself, please use the Bulma issue tracker.

Anything regarding packaging may be addressed here Bulma 4 Hugo

Use Bulma 4 Hugo in your Hugo project

Set up a your Hugo site and cd to site root folder.

Now add Bulma 4 Hugo to your site using one of the below methods

Hugo module (preferred)

• First install Go (needed for Hugo modules)

• initialize your Hugo site as module

  hugo mod init your_module

• add the module to your site config file:

  • Hugo.yaml

    module:
      imports:
        - path: github.com/irkode/bulma4hugo

  • Hugo.toml

    [module]
      [[module.imports]]
        path = "github.com/irkode/bulma4hugo"

Git

Add Bulma 4 Hugo either using plain clone or as submodule.

HINT: we have no branches for the Bulma releases, just tags:

Example: release 0.7.5 is tagged as v0.7.5

• Clone

  git clone --depth 1 --branch v0.7.5 https://github.com/irkode/bulma4hugo.git themes/bulma4hugo
  

• Submodule

  To use a git submodule you must ofc hava a git repository for your site. If your's is not git init .

  It's not possible add a submodule using a tag. so you will have to something like:

  git submodule add https://github.com/irkode/bulma4hugo.git themes/bulma4hugo
  cd themes/bulma4hugo
  git checkout v0.7.5
  cd ../..
  git add themes/bulma4hugo
  git commit -m "bumped Bulma 4 Hugo to release 0.7.5"
  

Source archive

Each release also has it's files added as .zip and .tar.gzarchives attached.

• Download an archive from it's Release: eg: https://github.com/irkode/bulma4hugo/archive/refs/tags/v1.0.2.zip
• Extract the archive to your themes folder
• rename the created bulma4hugo-1.02folder to bulma

If you want to keep the version suffix, make sure to include it in your theme site parameter.

Add the theme to your site configuration

• Hugo.yaml

  theme: bulma4hugo

• Hugo.toml

  theme = "bulma4hugo"

If you kept the version information in the folder name when using the source variant. Use bulma4hugo-1.0.2

Use Bulma

After installing Bulma 4 Hugo you may refer to the Bulma css, sass files from /assets/bulma

Just follow the Official Bulma documentation.

In general you will use Hugo Asset Management to add Bulma to your site.

Files provided in different versions

Different releases of bulma provide different css/sass files to include

• pre 0.6.x versions just provide css/bulma.css, bulma.sass

• with 7.0 a minified CSS is provided css/bulma.min.css

• later versions may add more stuff

Since Bulma 4 Hugo 0.7.6 we list the provided files in our release notes. For more details on a release consult the bulma release notes.

keep in mind that we mount Bulma to assets/bulma folder, so you will have to add a leading bulma. See examples below.

Examples

• use the (minified) css file

• use as any other global resource resources.Get

  {{ with resources.Get "bulma/css/bulma.min.css" }}
     <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous" />
  {{ end }}

• use the sass file (0.x versions)

  Straight from the docs at: Asset Management - SASS

  {{ $opts := dict "transpiler" "libsass" "targetPath" "css/bulma4hugo.css" }}
   {{ with resources.Get "bulma/bulma.sass" | toCSS $opts | minify | fingerprint }}
     <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
  {{ end }}
  

• use the sass file (1.x versions)

  since Bulma 1.0.0 you need dartsass to assemble. Install it and configure your hugo pipe to use it

  {{ $opts := dict "transpiler" "dartsass" "targetPath" "css/bulma4hugo.css" }}
  {{ with resources.Get "bulma/bulma.scss" | toCSS $opts | minify | fingerprint }}
     <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
  {{ end }}
  

Release versioning

Bulma 4 Hugo follows the Bulma release scheme. So version numbers are same.

New Bulma releases should be added shortly after published.

Licensing

This is just a repack of Bulma. This packer itself is MIT licensed

For Bulma Licensing terms consult the Bulma Documentation at Bulma Licensing and Copyright

Resources

The Bulma CSS framework is (c) by Jeremy Thomas (jgthms)

• Bulma Homepage
• Bulma on GitHub