Getting Semantic UI to Work with BrunchJS

14. August 2016 Elixir, Howto 2

This weekend I’ve been playing around with a Phoenix application. By default, it appears as if Phoenix uses Bootstrap, but I’m not a fan of Bootstrap, so I wanted to bring in Semantic UI. I ran into a problem, however, trying to configure my brunch-config.js file.  (Phoenix uses brunch by default. You can turn it off, but I didn’t want to, because I wanted to get the full Phoenix experience, just without Bootstrap.)

Anyway, after a lot of trials and errors, I think I finally figured out how to make it work.

  1. From the terminal run mix phoenix.new to create your new Phoenix project.
  2. After that is done, run npm install semantic-ui and install Semantic UI. I installed mine in semantic/
  3. Open up semantic.json file and change the path for output.themes to “dist/assets/themes”
  4. Open up semantic/tasks/config/user.js on the next to last line add this line: gulpConfig.paths.assets.packaged = ‘../themes’;
  5. Open up brunch-config.js Change the conventions.assets value to: /^(semantic\/dist\/assets)/
  6. Add semantic/dist to the paths.watched array
  7. Change stylesheets.joinTo from a single value to an object with the key “css/app.css”: /^(semantic\/dist)/
  8. Delete web/static/css/app.css

Go back to the command line and navigate to where you installed semantic at and call “gulp build”.

Then run your phoenix project (mix phoenix.server)

Your stylesheets should now be Semantic UI.

Let me walk through these steps.

Step 3 is splitting themes into their own parent directory. We don’t need to copy everything over from semantic/dist just themes, and this step makes that a bit easier.

Step 4, user.js specifies where the icon files should be found. By default they’re in css/themes/…. but ours won’t be there, they’ll be in their own themes folder up one level, so we need to specify ../themes

Step 5 tells brunch where to pull our assets from (in this case, it’s going to pull our newly built themes directory in.)

Step 6 tells brunch to watch our dist folder for any changes.


2 thoughts on “Getting Semantic UI to Work with BrunchJS”

  • 1
    Darren on September 29, 2016 Reply

    Thanks for posting these steps. It’s the only place I’ve found that covers them clearly. They got the Semantic UI elements happening, with the exception of those requiring javascript such as dropdowns (that are not pure css based – it are not just the ui simple dropdowns). Were you able to get the javascript based dropdown or popup elements working as well? What more did you need to do?

  • 2
    admin on October 19, 2016 Reply

    I didn’t get that working. I ended up following along with this blog post http://matthewlehner.net/using-webpack-with-phoenix-and-elixir/ and got my site up with Webpack. It was easier for me to do than work with brunch & semantic together.

Leave a Reply

Your email address will not be published. Required fields are marked *