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.
- Angular CLI
- Semantic UI
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.
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.
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.
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.
cdinto 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
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
... "styles": [ "../semantic/dist/semantic.min.css", "sass/styles.scss" ], "scripts": [ "../semantic/dist/semantic.min.js" ], ...
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!