Cx UI Kit for Abp vNext

Getting Started

To start working on the UI kit, please install all npm dependencies.

npm install

Sass

Files inside sass folder are .scss files from Quantum Pro UI kit and are modifiable. These files will be compiled into css files that will be put under assets/css folder.

Custom Dependencies

By default, the package will have a dependency to ABP MVC Basic UI Theme and natives. This can be found under dependencies section in package.json.

"dependencies": {
    "@abp/aspnetcore.mvc.ui.theme.basic": "^0.4.9",
    "natives": "^1.1.6"
}

However, when the UI kit is not able to handle new requirements and there is a need to add more references, the new dependencies should be added under customDependencies section.

"customDependencies": {
    "jquery-blockui": "^2.7.0",
    "blueimp-file-upload": "^9.31.0"
}

Compiling Package Using Gulp

To compile, run the command below in terminal.

gulp

There are several gulp tasks that will run by default when the command is executed.

1. Bootstrap
   Compile bootstrap.scss into bootstrap.css and put it under assets/css/vendor folder.

2. Sass
   Compile scss files under sass/common/ folder to css files and put it under assets/css/common/ folder.

3. verticalLayout
   Compile scss files under sass/layouts/vertical/core/ folder to css files and put it under assets/css/layouts/vertical/core/ folder.

4. horizontalLayout
   Compile scss files under sass/layouts/horizontal/core/ folder to css files and put it under assets/css/layouts/horizontal/core/ folder.

5. verticalLayoutMenu
   Compile scss files under sass/layouts/vertical/menu-type/ folder to css files and put it under assets/css/layouts/vertical/menu-type/ folder.

6. horizontalLayoutMenu
   Compile scss files under sass/layouts/horizontal/menu-type/ folder to css files and put it under assets/css/layouts/horizontal/menu-type/ folder.

7. verticalThemes
   Compile scss files under sass/layouts/vertical/themes/ folder to css files and put it under assets/css/layouts/vertical/themes/ folder.

8. horizontalThemes
   Compile scss files under sass/layouts/horizontal/themes/ folder to css files and put it under assets/css/layouts/vertical/themes/ folder.

9. installCustomDependencies
   Install all dependencies that are put under customDependencies section in package.json to its latest version.

10. copyCustomDependencies
    Copy all the installed custom dependencies files to assets/vendor folder

@icon-info-circle Note

When executing gulp command, all the tasks will be executed in order (task 1 will be the first and task 10 will be the last)

Publishing a Package

• Run gulp if it has not been done prior to publishing

• Log in to npm package repository with Ascentis developer account, run the command below in terminal and fill in username, password and email

    npm login

• Increment the package version in package.json accordingly.

> Current version : 1.0.0

@icon-info-circle Semantic Versioning

For more information on semantic versioning, go to

• Run below command to publish the package

    npm publish --access public