README
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.
Bootstrap
Compile bootstrap.scss into bootstrap.css and put it under assets/css/vendor folder.Sass
Compile scss files under sass/common/ folder to css files and put it under assets/css/common/ folder.verticalLayout
Compile scss files under sass/layouts/vertical/core/ folder to css files and put it under assets/css/layouts/vertical/core/ folder.horizontalLayout
Compile scss files under sass/layouts/horizontal/core/ folder to css files and put it under assets/css/layouts/horizontal/core/ folder.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.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.verticalThemes
Compile scss files under sass/layouts/vertical/themes/ folder to css files and put it under assets/css/layouts/vertical/themes/ folder.horizontalThemes
Compile scss files under sass/layouts/horizontal/themes/ folder to css files and put it under assets/css/layouts/vertical/themes/ folder.installCustomDependencies
Install all dependencies that are put under customDependencies section in package.json to its latest version.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 this page.
- Run below command to publish the package
npm publish --access public