Installing UIkit 3 in Phoenix 1.3 and Brunch

3 min readJul 29, 2017

This guide will show you how to install the UIkit 3 framework into your asset pipeline (We will be using Brunch as the build tool), in a fresh Phoenix 1.3 app. Bear in mind that the following are the steps that I took to install UIkit 3.

Pre-requisites

Obviously, you have to have Elixir and Phoenix installed. You can find out how to do so here. You also need to have NPM installed, as it will be used to install Brunch and other dependencies. You can find out how to do so here.

Installation

Once you’ve done so, create a new Phoenix project using the generator.

$ mix phx.new uikit_demo

When the prompt appears whether to install dependencies, say yes.

Fetch and install dependencies? [Yn] Y

This will run npm install in your assets directory, which will install Brunch and its babel plugin. Next, go into your assets folder and install the dependencies that we need to get UIkit working.

$ cd uikit_demo/assets
$ npm install --save-dev sass-brunch
$ npm install --save uikit jquery

We will be using the SCSS/SASS for the project. Thus, sass-brunch plugin for Brunch is required to compile the SCSS/SASS. We then install the uikit node module. As UIkit’s JavaScript requires jQuery to run, we also have to install the jquery module in our app.

Configuration

We need to tell the SASS compiler where to look for the SCSS files. Add this to your brunch-config.js, in the plugins object:

sass: {
  options: {
    includePaths: ["node_modules/uikit/src/scss"]
  }
}

Next, we need add the JavaScript of UIkit into our app. To do so, simply add this to the npm object:

globals: {
  $: "jquery",
  uikit: "uikit",
  icons: "uikit/dist/js/uikit-icons"
}

This will tell Brunch to require jquery as $ as a global, and uikit as uikit, also as a global.

Next, we need to tell uikit to use icons. To do so, add the following line to your app.js:

uikit.use(icons);

Importing

In order to use the SCSS files provided by UIkit, we need to import the SCSS into our main SCSS file. First, we need to rename our app.css file to app.scss and remove the phoenix.css file. Then we need to add the following code into our app.scss:

@import "variables-theme";
@import "mixins-theme";
@import "uikit-theme";

This will import the UIkit SCSS into our project.

Testing it out

To test this out, you can simply add the following just below <body> in app.html.eex (Taken straight from the UIkit docs):

<div class="uk-alert-danger" uk-alert>
  <a class="uk-alert-close" uk-close></a>
  <h3>Notice</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

then run mix phx.server to start the Phoenix server. Visit localhost:4000 in your browser, and you should see the following:

The cross button at the top right of the red alert box should also be clickable.

And that’s all! You should be all set to use UIkit 3 within your Phoenix app! The source for this project can be found at this repo.

P.S. I am still pretty new to everything being used here (Phoenix, UIkit, and Brunch). If I missed out anything, or did anything horribly wrong, feel free to reply, or open an issue at the Github repo.