Adding Semantic UI to Phoenix v1.4 with Webpack

Phoenix Forum Questions / Help
,
4

https://github.com/benperiton/phoenix_semantic_ui_less

Here is a repo with semantic-ui working on it. It uses the less version, so you can include what you want and tweak as needed.

Pretty much:

  1. mix phx.new --no-ecto semantic_test
  2. cd semantic_test/assets
  3. npm install --save-dev semantic-ui-less jquery less less-loader file-loader
  4. Apply the changes as per the commit log

CSS

For example, you could add a file in assets/vendor/semantic-ui/theme/globals/site.overrides with the contents:

@text-colors: blue, green, orange, pink, purple, red, teal, yellow, black, grey, white, violet;
.text {
    .-(@i: length(@text-colors)) when (@i > 0) {
        @c: extract(@text-colors, @i);
        &.@{c} { color: @@c !important }
        .-((@i - 1));
    }.-;
}

That will let you use .text.blue as a class to style things.

Or if you wanted to change the font, create a file in assets/vendor/semantic-ui/theme/globals/site.variables with the contents:

/*-------------------
       Fonts
--------------------*/

@importGoogleFonts: false;
@fontName: 'Verdana';

You can pretty much follow Semantic-UI-LESS/themes/default at master · Semantic-Org/Semantic-UI-LESS · GitHub for which files you can create.

JS
I just update assets/js/vendor/semanmtic-ui.js with the things that I want to activate, then use them in the main app.js

HTH

2 Likes