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?

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)

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.

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.

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.

For Phoenix 1.2: Copy semantic.min.css and semantic.min.js to web/static/vendor/css/ and web/static/vendor/js/ respectively. Remove bootstrap and normalize code from phoenix.css. Set ordering of files in brunch-config.js (jquery goes before semantic-ui.js). Copy the fonts and images folders to web…

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 followi…

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

@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 !

@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 om…

Elixir Programming Language Forum

How do you integrate Semantic UI with Phoenix?

Questions & Help Questions

themarlzy January 9, 2017, 1:42am 4

Interested to learn semantic - looks nicer than bootstrap.