Adding Semantic UI Sass to Phoenix with Brunch

Kim Lindholm
Oct 30, 2017 · 2 min read

Sometimes adding Semantic UI as minified CSS is all you need for your Phoenix project. And for the times you want more fine-grained control over which modules to include, there’s Semantic UI Sass. Here’s how to get started with Phoenix 1.3 and Brunch.

Step 1: New Phoenix Project

$ mix phx.new my_app

Step 2: Add jQuery and Sass

$ cd assets
$ yarn add jquery
$ yarn add --dev sass-brunch

You can of course replace Yarn commands with NPM equivalents if you’d like.

Next, add jQuery as a global inside brunch-config.js:

npm: {
globals: {
$: "jquery",
jQuery: "jquery"
}
}

Example commit

Step 3: Add Semantic UI

Assuming you’re in project root:

$ cd assets
$ yarn add --dev semantic-ui-sass

Copy images and fonts from Semantic UI Sass GitHub repo to a new folder assets/static/semantic-ui.

Example commit

Step 4: Configuration

Edit brunch-config.js again:

plugins: {
// etc...
sass: {
options: {
includePaths: ["node_modules/semantic-ui-sass"]
}
}
},

Lastly, have Phoenix pick up the static assets you copied earlier by editing endpoint.ex:

plug Plug.Static,
at: "/", from: :my_app, gzip: false,
only: ~w(css fonts images js favicon.ico robots.txt semantic-ui)

Example commit

Step 5: Usage

Now we’re ready to use Semantic UI. Add this line to app.js:

import "semantic-ui-sass";

Rename app.css to app.scss and add the following:

$import-google-fonts: true;
$icons-font-path: '/semantic-ui';
$flags-image-path: '/semantic-ui';
// Fix: https://github.com/aniftyco/semantic-ui-sass/issues/3
i.flag:not(.icon)::before {
background: url("#{$flags-image-path}/flags.png") no-repeat -108px -1976px;
}
@import 'scss/globals/all';
@import 'scss/elements/all';
@import 'scss/collections/all';
@import 'scss/views/all';
@import 'scss/modules/all';

You can remove the fix once this issue has been resolved or if you don’t need the flag module.

Now you can hand-pick the modules you want. Simply replace all with the exact module names that you want to include.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store