Last active
October 22, 2021 10:02
-
-
Save jung-hunsoo/ef0c8dafedd4f2bf9e7b234b5c712bb4 to your computer and use it in GitHub Desktop.
Adding Semantic-UI to Phoenix
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This is maybe the simple implementation which I've used. (Tried NPM but too tricky) | |
### Environment | |
- Elixir 1.5.1 | |
- Phoenix 1.3.0 | |
- Semantic-UI 2.2.13 | |
### Steps | |
1) [Download] Download the Semantic-UI tgz from its CDN(https://www.jsdelivr.com/package/npm/semantic-ui). | |
2) [Extract] Extract the "semantic-ui-2.2.13.tgz". | |
3) [Copy js] Copy "/package/dist/semantic.min.js" to "assets/js/semantic.min.js". | |
4) [Copy css] Copy "/package/dist/semantic.min.css" to "assets/css/semantic.min.css". | |
5) [Copy fonts] Copy "/package/dist/themes/default/assets/fonts" to "assets/static/fonts". | |
6) [Copy images] Copy "/package/dist/themes/default/assets/images" to "assets/static/images". | |
7) [Fix paths] Open "semantic.min.css" and replace the resource paths from "themes/default/assets/" to "../". | |
- It's in i.flag:not(.icon) around line 59 and @font-face around line 75. | |
### After install | |
1) Replace flash messages "layout/app.html.eex" | |
Find : | |
<p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p> | |
<p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p> | |
Replace with : | |
<%= if get_flash(@conn, :info), do: raw("<p class='ui green message' role='alert'>#{get_flash(@conn, :info)}</p>") %> | |
<%= if get_flash(@conn, :error), do: raw("<p class='ui green message' role='alert'>#{get_flash(@conn, :error)}</p>") %> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment