Hello everyone! A young guy trying to be MEAN Stack here..

In this post I will talk about how to include UIKit in your angular project. You know , Angular Material doesn't have enough components required to build a complete website, either you use bootstrap or make your own components. I also had a hard time searching for a better frontend framework because you know lazy developer :P Have a little logic but no creativity !!

NOTE : I am talking about angular-cli project not a compiled version from any CDN.

I hope you already have a clear understanding about creating a Angular Project. If not , Click here

Navigate your terminal into the project directory. First, we need to install the main dependency of any JS/CSS framework for frontend i.e. JQuery

npm install jquery uikit --save

Now , We need to update our JSON file of Angular Project to include our uikit files while compiling the source files. Open angular.json ( @Angular 6 ) and update it as below.

"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, you can include classes and javascript functions used with the framework as described in UIKit docs.

If you prefer to use SCSS ( if you haven't already chosen it in the initialization step )..

Change these two properties as follows..

"schematics": { "@schematics/angular:component": { "styleext": "scss" } },

And also the style.css needs to be renamed and updated. "styles": [ "src/styles.scss" ],

Be sure to import UIKIT styling in the styles.scss file..

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

Well , Do what you wish ! Be sure to comment if you got a better frontend ;)