How to use UIkit with angular-cli

How to use UIkit with angular-cli

Read this article on my new tool Medium Plus, for a smart, customizable reading experience.

In this post, I’ll talk about the best way to use UIkit with angular 2 or 4 using angular-cli
I wrote this post just to use it later as I forgot too much.

Before we begin, English is not my first language, so if you see something weird, please, calmly point it out in the comment section or email me, there’s no need for violence :)

First I’ll assume that you already have an angular Project
or you can create a new one using angular-cli command

ng new new-project-name

then move to the project folder

cd new-project-name

next we have to add dependency to jquery and uikit

npm install jquery — save

npm install uikit — save

Now we have to edit the file .angular-cli.json and add some jquery and UIKit scripts

scroll to the part of scripts then add the scripts of jquery, UIkit and UIkit icons

"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/uikit/dist/js/uikit.min.js",
"../node_modules/uikit/dist/js/uikit-icons.min.js"
],

Now we can use UIKit wherever we want, next I’ll show simple way to use UIKit alert

First I prefer to use sass instead of css, So in the file .angular-cli.json
change the end of it to be like the next lines

I just changed styleExt from css to scss

"defaults": {
"styleExt": "scss",
"component": {}
}

and then you have to rename two files styles.css to styles.scss and in the app folder change app.components.css to app.components.scss

and in the file app.components.ts it should look like this

import { Component } from '@angular/core';@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'app';
}

then to use the UIKit alert the same file will be like this

import { Component } from '@angular/core';
declare var UIkit: any;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'app';
showAlert(): void {
UIkit.modal.alert('UIkit alert!');
}
}

now we have to change the app.component.html file to add the alert, add the next code

<div (click)="showAlert()">alert</div>

next we have to add UIKIT styling so in the styles.scss file add the next line

@import "../node_modules/uikit/src/scss/variables-theme.scss";
@import "../node_modules/uikit/src/scss/mixins-theme.scss";
@import "../node_modules/uikit/src/scss/uikit-theme.scss";

Well, That’s all.

--

--

--

Full Stack Web Developer ⚔️, Trainer 👨‍🏫, TEDx Speaker 🗣, Writer ✍️ and Dreamer 🏙. My Portfolio💪: https://wb.gy

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ahmed Abdelsalam

Ahmed Abdelsalam

Full Stack Web Developer ⚔️, Trainer 👨‍🏫, TEDx Speaker 🗣, Writer ✍️ and Dreamer 🏙. My Portfolio💪: https://wb.gy

More from Medium

Reactive JQuery using Vuex design pattern

Architecture of Chrome Extension

Vue.js Vs Angular Vs React — Which framework is suitable for your Business

Atomic Design System in Frontend