DEV Community

Stephen Chiang
Stephen Chiang

Posted on • Originally published at chiangs.ninja on

Integrating Semantic UI to an Angular CLI Project

I’m tired of Bootstrap (Ok, I still love it and use it often).

I recently discovered Semantic UI, and I’m loving it so far. For those of you who aren’t familiar with Semantic UI, it is a styling framework much like Bootstrap. The difference is Semantic’s classes use syntax from natural language like noun/modifier relationships, word order, and plurality to link concepts intuitively.

So I’m now playing around with it and including it into my latest Angular CLI projects. You can check out their documentation here: https://semantic-ui.com

There are a few ways to include it. The easiest being using the CDN or just including their CSS file. The downside to these options is you can only use their default theme. By installing Semantic UI in the following method, you get the full power of custom theming capabilities. Let’s get started.

What you’ll need

  • Node.js
  • Angular CLI
  • Semantic UI
  • Gulp

Installation

  1. Node.js

    Head over to the Node.js site: https://nodejs.org/

    Make sure you install Node 6.9.0 or higher.

    Open up a terminal and check that your npm version is 3.0.0 or higher: $ npm -v.

    You can also check your node version by: $ node -v.

  2. Angular CLI & TypeScript

    Next install TypeScript (you don’t need it, but you should use it): $ npm install -g typescript.

    Now install the Angular CLI with: $ npm install -g @angular/cli.

  3. Gulp

    We need Gulp to build the final configuration of our Semantic UI theme, so let’s do a global install of Gulp:

    $ npm install --global gulp-cli.

  4. Semantic UI

    Let’s start off with installing Semantic UI into your Angular project.

    If you are starting fresh, create a new Angular Project with the CLI: $ ng new semanticui-angular-project.

    cd into your the root of your project and install Semantic UI: $ npm install semantic-ui.

    You’ll be prompted a few questions, just go with the defaults and install it into a root level folder called semantic.

    semantic-ui install

Next we need to tell the project to include the dist CSS and JS files. You’ll notice there isn’t a dist folder yet.

You’ll need to cd into the semantic folder and run $ gulp build. This will take the default configuration from semantic/src/theme.config and build it into production files.

You can update or customise the build in a moment.

Next, open up your angular_cli.json, you’ll need to include the CSS and JS from the dist folder.

...
   "styles": [
        "../semantic/dist/semantic.min.css",
        "sass/styles.scss"
   ],
   "scripts": [
        "../semantic/dist/semantic.min.js"
   ],
...
Enter fullscreen mode Exit fullscreen mode

At this point, you can run your project and you should see a slight difference already:

Angular Comparison

From here, you can go back to the theme.config file and change the build around, but I strongly suggest looking at the documentation examples first. After that, I normally create a custom theme folder in src/themes and copy over all the components from the various themes I want to use / override, and then update the relevant portions of the theme.config file to the name of the custom theme folder.

Just don’t forget to run $ gulp build again when you make a change!

So there you have it, have fun and please leave feedback or questions!

Top comments (11)

Collapse
 
josuevalrob profile image
Josue Valenica

Nope, it doesnt work, maybe I have a huge problem with my installation, look:

/Users/josue/WebDevelop/angular/ng-book/semantic/node_modules/accord/lib/index.js:29
throw new Error(name + " version " + version + " is not currently supported");
^

Error: less version 3.0.4 is not currently supported
at Object.exports.load (/Users/josue/WebDevelop/angular/ng-book/semantic/node_modules/accord/lib/index.js:29:13)
at Object. (/Users/josue/WebDevelop/angular/ng-book/semantic/node_modules/gulp-less/index.js:9:29)
at Module._compile (internal/modules/cjs/loader.js:678:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:689:10)
at Module.load (internal/modules/cjs/loader.js:589:32)
at tryModuleLoad (internal/modules/cjs/loader.js:528:12)
at Function.Module._load (internal/modules/cjs/loader.js:520:3)
at Module.require (internal/modules/cjs/loader.js:626:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object. (/Users/josue/WebDevelop/angular/ng-book/semantic/node_modules/semantic-ui/tasks/watch.js:17:18)

Collapse
 
chiangs profile image
Stephen Chiang

I think I remember seeing this in one of my projects when using angular 6... When I wrote this article I was using 4 maybe 5...I have not tried integrating semantic since as I prefer to determine a lot of this stuff on my own now with css grid and angular material.

Collapse
 
josuevalrob profile image
Josue Valenica

Thanks. The error was with the less version. github.com/Semantic-Org/Semantic-U...

Thread Thread
 
chiangs profile image
Stephen Chiang

ah ok that makes sense, great you got it working!

Collapse
 
josuevalrob profile image
Josue Valenica

Is there any option that replaces the dependency of jquery?

Collapse
 
chiangs profile image
Stephen Chiang • Edited

The easy way is to include jQuery, but if you spend a little time with the debugger and watch what classes are being added and removed in the examples page, you can use plain vanilla js to query select and [ngClass] to do some, if not most, of the behaviors.

Collapse
 
josuevalrob profile image
Josue Valenica

I am trying this, what do you think: edcarroll.github.io/ng2-semantic-u...

Thread Thread
 
chiangs profile image
Stephen Chiang

I haven't tried it, but looks interesting; give it a shot and write about your experience on Dev!

Collapse
 
_quantumbit profile image
_Sachu • Edited

I tried to install it in the root folder of my NG project but it didn't work.

Note : Gulp was successfully installed with global scope though.

npm install semantic-ui (Error)

For some weird reason I am unable to attach helpful screenshots

Collapse
 
chiangs profile image
Stephen Chiang

These steps could be outdated now it's been awhile since I've added it to a project... Have you tried the ng2 version from the GitHub repo posted earlier in this discussion thread?

Collapse
 
sivaramakrishnan profile image
Siva Rama Krishnan C

Awesome..