Aurelia and Semantic UI - custom theme

Question

I am building an Aurelia app with TypeScript and decided to try out Semantic UI. I followed this question (Aurelia Semantic dropdown) and it helped me install Semantic into Aurelia. It seems that it got installed already built with default theme. Is there a way I can install semantic into Aurelia TypeScript app, then add some custom gulp tasks to build according to my own theme.config? I would like also to override some variables like colors, font sizes etc. After it is built I'd like to use the built version in Aurelia view models (TypeScript) and in my views. How can I achieve that?

I also need the answer of your question, wondering have you fixed your problem? — Coder Absolute

andy250 andy250 · Accepted Answer · 2016-12-16T19:52:22

Here is how I solved this:

Installed semantic to some local folder with npm
Copied over the semantic folder and semantic.json to web app root folder (so semantic folder is on the level where I have node_modules and jspm_packages)
Inside semantic.json I specified the list of components I want to include in my app
Inside semantic.json I modified "output" and "clean" paths to match the folders where I serve files from.

The semantic.json:

{
    "base": "semantic",
    "paths": {
        "source": {
            "config": "src/theme.config",
            "definitions": "src/definitions/",
            "site": "src/site/",
            "themes": "src/themes/"
        },
        "output": {
            "packaged": "../dist/semantic",
            "uncompressed": "../dist/semantic/components/",
            "compressed": "../dist/semantic/components/",
            "themes": "../dist/semantic/themes/"
        },
        "clean": "../dist/semantic"
    },
    "permission": false,
    "autoInstall": false,
    "rtl": false,
    "version": "2.2.4",
    "components": [
        "button",
        ...
        "site"
    ]
}

Inside Aurelia's gulp definitions I added semantic build task

The build/tasks/build.js:

var buildSemantic = require('../../semantic/tasks/build');
gulp.task('build-semantic', buildSemantic);
...
gulp.task('build-layout', function (callback) {
    return runSequence(
        'build-html',
        'build-semantic',
        'build-less',
        callback
    );
});

When coding I go into semantic src (e.g. semantic\src\themes\default\globals\site.variables) and modify things in there
Run gulp build-layout
The output is added to my dist folder and I can use it in my views

As for the view models I created some helper components to be used as aurelia attributes e.g. the semantic tooltip:

import {customAttribute, inject} from 'aurelia-framework';
import * as $ from 'jquery';
import '../semantic/semantic.min.js';

@customAttribute('semantic-tooltip')
@inject(Element)
export class SemanticTooltip {
    constructor(private element: HTMLElement) {
    }

    attached() {
        $(this.element).popup();
    }
}

Usage:

<i class="info circle icon" data-content="Sample tooltip" semantic-tooltip></i>

Aurelia and Semantic UI - custom theme

1 Answers