How do you integrate Semantic UI with Phoenix?

Phoenix Forum Questions / Help
#1

How do you integrate Semantic UI in Phoenix? As a dependency in package.json or do you directly downlaod the assets in your project directory?

1 Like
Which frontend technology or frameworks do you use
#2

Never tried installing frontend technologies with NPM, with Phoenix I usually place them inside web/static/vendor and leave them there for eternity.

Sometimes I go into the Brunch config. so I can adjust which file gets compiled first (such as jquery before bootstrap, etc)

1 Like
#3

you can do both… put semanticui into your packaga.json and then move the dist files (you run a build step on semanticui after you npm install) to your web/static/vendor folder.

1 Like
#4

Interested to learn semantic - looks nicer than bootstrap.

#5

I have used Semantic UI with Phoenix before. I did it by just putting the folder into web/static/vendor, as I did not have any need to alter its config at that time.

2 Likes
#6

I recently wrote an in-depth step-by-step tutorial to integrate Semantic UI framework with Elixir based Phoenix application and Webpack.

Link: How to Integrate Your Phoenix Application with Semantic UI and Webpack

Hope that helps.

8 Likes
#7

For Phoenix 1.2:

  1. Copy semantic.min.css and semantic.min.js to web/static/vendor/css/ and web/static/vendor/js/ respectively.
  2. Remove bootstrap and normalize code from phoenix.css.
  3. Set ordering of files in brunch-config.js (jquery goes before semantic-ui.js).
  4. Copy the fonts and images folders to web/static/assets/.
  5. Change “themes/default/assets” to “…” in paths in semantic.min.css.

Then you need to change your HTML tags and classes to match Semantic UI’s. Hope this helps.

3 Likes
#8

I was playing around with Semantic UI tonight in a Phoenix app. It was a little tricky to get it working without just copying the assets into my app’s directories. I’d rather just use things directly from the npm package if I can. So here’s how I solved it.

  • In brunch-config.js include the following:
exports.config = {
  files: {
    stylesheets: {
      joinTo: "css/app.css"
    }
  },

  plugins: {
    // This will copy the font files to priv/static/fonts
    copycat: {
      "fonts" [
        "node_modules/semantic-ui-css/themes/default/assets/fonts"
      ]
    }
  },

  npm: {
    enabled: true
    styles: {
      // Adds this to app.css
      "semantic-ui-css": ["semantic.min.css"]
    }
  }
}
  • Open up your package.json and update the scripts section:
{
  "scripts": {
    "postinstall": "elixir fix-asset-urls.exs"
  }
}
  • Obviously that won’t do anything yet, so we need to add fix-asset-urls.exs to our assets directory:
defmodule FixAsset do
  def update_file(filename, old, new) do
    File.stream!(filename)
    |> Enum.map(&String.replace(&1, old, new))
    |> Stream.into(File.stream!(filename))
    |> Stream.run
  end
end

FixAsset.update_file(
  "node_modules/semantic-ui-css/semantic.min.css",
  "url(themes/default/assets/fonts",
  "url(../fonts"
)
  • You’ll need to run npm install --save-dev copycat-brunch.

At this point running npm install should run our postinstall script, which will modify semantic.min.css under our node_modules directory. The reason for that script is because there are all these font-face directives that will direct the browser to load (from the relative directory of /css), so it will try to load /css/themes/default/assets/fonts/icons.ttf for example.

If there’s a smarter way of making this work please correct me. This is what I came up with tonight and it seems to work for me. :slight_smile:

I’m playing with Semantic React, so semantic.min.js isn’t relevant for what I’m doing. But I hope this comment helps other people who at least want to get the CSS and fonts loading and working.

2 Likes
#9

You may want to look here. It use brunch and semantic configuration for its approach.

1 Like
#10

@bratsche to get the JS part working, just require("semantic-ui-css") from within your assets/js/app.js file, and Brunch will include it. :slight_smile:

Thank you for that great guide, @bratsche!

#11

@bratsche Thanks for the great guide!

One addition from my side:
If you change

copycat: {
  "fonts" [
    "node_modules/semantic-ui-css/themes/default/assets/fonts"
  ]
}

to`

copycat: {
  "css/themes/default/assets/": [
    "node_modules/semantic-ui-css/themes/default/assets/"
  ]
}

You can omit the fix-asset-urls.exs helper script and the flags will also work. :slight_smile:

1 Like