Adding Semantic UI to Phoenix 1.3

In this post I will guide you through what I did in order to get Semantic UI working on a Phoenix 1.3 project.

Out of the box Phoenix supports Bootstrap, which is great and all but I’ve heard a lot of good things about Semantic UI and wanted to give it a go.

Semantic what now? Into Phoenix who?

I’m guessing if you’ve searched and found this post that you know what Semantic UI and Phoenix are, if not here are some lightening fast definitions.

Semantic UI is;

a development framework that helps create beautiful, responsive layouts using human-friendly HTML.

Phoenix is an Elixir framework that is;

A productive web framework that does not compromise speed and maintainability.

I want to use Semantic UI to style the pages I’m making on a Phoenix project.

Getting the files

The first thing we need to do is get the files from Semantic UI. There are some build tools that work out of the box with Semantic UI, brunch isn’t one of them so I opted to just grab the files from their site and manually add them.

What we lose in being able to update quickly we gain from the knowledge that the files our site are using are fixed and aren’t going to break on us.

Adding the files

Once we have that zip file downloaded we can extract it and move some of the files to their new homes.

In no particular order.

• Find the semantic.min.js file and move it into assets/js/
• Find the semantic.min.css file and move it into assets/css/
• Move the fonts folder (and all contents) into assets/static
• Find the flags.png image and move it into assets/static/images/

Updating some CSS

Once we have these files in place there is one small change we need to make to the semantic.min.css file. Right now there are some fonts being loaded in at a path that no longer exists.

Open up semantic.min.css and search for “fonts/icons.eot”, you will see a line beginning with @font-face{ and it will have lots of paths to some fonts.

We need to change those paths to end up looking like this;

url(../fonts/icons.eot);

This is to reflect the new location of the font files.

Removing Bootstrap

By this point we should be ready to go, we’ve all the files we need being loaded in.

We still have bootstrap CSS being loaded in though, we should remove it.

You can do this by removing /assets/css/phoenix.css

Updating some classes

Once we’ve removed bootstrap our pages will look pretty basic, it is now time to update those classes!

This article can’t really go into how to do that for your site, but this is how I wrapped my render/3 function in web/templates/layout/app.html.eex

<main role="main" class="main container">
  <%= if get_flash(@conn, :info) do %>
    <p class="ui green message" role="alert"><%= get_flash(@conn, :info) %></p>
  <% end %>
  <%= if get_flash(@conn, :error) do %>
    <p class="ui red message" role="alert"><%= get_flash(@conn, :error) %></p>
  <% end %>
  <%= render @view_module, @view_template, assigns %>
</main>

Hope that helps!