Bulma

You can use this package to install Bulma in your Phoenix project without needing to rely on Node or NPM. It works by leveraging the DartSass package.

Installing DartSass

DartSass is an Elixir library that works similar to Esbuild and does actual Sass processing.

Install DartSass in mix.exs

https://github.com/CargoSense/dart_sass Github repo.

Add the following line to your deps() section:

{:dart_sass, "~> 0.7", runtime: Mix.env() == :dev}

Then configure which version of dart-sass to use by adding this to your config/config.exs file.

You will probably need to check on NPM to get the latest version number.

config :dart_sass,
version: "1.79.3",
default: [
args: ~w(css:../priv/static/assets),
cd: Path.expand("../assets", __DIR__)
]

Run mix deps.get then install Sass:

mix sass.install

Rename assets/css/app.css

Rename the existing assets/css/app.css to assets/css/app.scss.

Update app.js in assets/js/

Comment out or delete this line:

// import "../css/app.css";

For development, enable watch mode by changing your watchers configuration for MyApp.Endpoint in config/dev.exs.

watchers: [
  # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
  esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
  sass: {
    DartSass,
    :install_and_run,
    [:default, ~w(--embed-source-map --source-map-urls=absolute --watch)]
  }
]

Finally, back in your mix.exs, make sure you have an assets.deploy alias for deployments, which will also use the --style=compressed option:

"assets.deploy": [
  "esbuild default --minify",
  "sass default --no-source-map --style=compressed",
  "phx.digest"
]

Installing Bulma

There are effectively three different ways to install Bulma.

Method 1: Using a CDN

The first way to install Bulma is to just include the bulma.min.css file from a CDN like JSDeliver. With this approach, you would not be able to customize Bulma at all.

Method 2: Using Node and npm

The second way is to install node and npm, create a package.json file, add bulma to it, then tell dart-sass where the Sass files were installed. However, this makes our app depend on node again.

Method 3: Using Hex Package

The third way is to install the Bulma Hex package. This approach includes all of the Bulma Sass files in a convenient package that can easily be added to your Mix project. To do this:

• Go to your mix.exs file and add it:

{:bulma, "1.0.2"}

• Update your dart-sass config to include it as a load path:

config :dart_sass,
  version: "1.79.3",
  default: [
    args: ~w(--load-path=../deps/bulma css:../priv/static/assets),
    cd: Path.expand("../assets", __DIR__)
  ]

• Import Bulma into your root style sheet, assets/css/app.scss:

@import "bulma";

Using Bulma and CSS Cleanup

Now that we have Bulma installed, let's do some minimal changes to the generated app. First, get rid of the assets/css/phoenix.css file.

Then replace the content of the assets/css/app.scss file with:

// override bulma variables before import to customize
$phoenix-orange: #f05423;
$primary: $phoenix-orange;

@import "bulma";

// add our own styles after the Bulma import

Here we are overriding the $primary variable outlined in the Bulma docs to our $phoenix-orange color.

Updating HTML Files

Let's update some of our HTML files so we can show Bulma in action. First, remove the header in root.html.heex.

Then let's make a nice big Bulma hero section on our main index.html page:

<section class="hero is-primary is-fullheight">
  <div class="hero-body">
    <div class="container has-text-centered">
      <p class="title">Phoenix</p>
      <p class="subtitle">With Bulma!</p>
    </div>
  </div>
</section>

The version of this package exactly matches the version of Bulma that it contains. As of now, it has version 1.0.2.