{"id":13789283,"url":"https://github.com/xizon/uix-kit","last_synced_at":"2025-05-15T08:04:48.825Z","repository":{"id":27281404,"uuid":"113192736","full_name":"xizon/uix-kit","owner":"xizon","description":"A free UI toolkit based on some common libraries for building beautiful responsive website, compatible with Bootstrap v5.","archived":false,"fork":false,"pushed_at":"2025-04-30T08:14:53.000Z","size":118166,"stargazers_count":383,"open_issues_count":1,"forks_count":59,"subscribers_count":21,"default_branch":"master","last_synced_at":"2025-04-30T08:15:17.165Z","etag":null,"topics":["bootstrap","bootstrap5","css","css3","front-end","front-end-development","frontend","gsap","html","responsive","responsive-web-design","sass","scss","static-site","static-site-generator","typescript","ui-components","uikit","uix","wordpress"],"latest_commit_sha":null,"homepage":"https://xizon.github.io/uix-kit/examples/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xizon.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":["https://paypal.me/uiuxlab"]}},"created_at":"2017-12-05T14:31:17.000Z","updated_at":"2025-04-30T08:12:08.000Z","dependencies_parsed_at":"2025-04-14T16:01:28.123Z","dependency_job_id":null,"html_url":"https://github.com/xizon/uix-kit","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xizon%2Fuix-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xizon%2Fuix-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xizon%2Fuix-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xizon%2Fuix-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xizon","download_url":"https://codeload.github.com/xizon/uix-kit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254301422,"owners_count":22047901,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","bootstrap5","css","css3","front-end","front-end-development","frontend","gsap","html","responsive","responsive-web-design","sass","scss","static-site","static-site-generator","typescript","ui-components","uikit","uix","wordpress"],"created_at":"2024-08-03T21:01:01.085Z","updated_at":"2025-05-15T08:04:48.776Z","avatar_url":"https://github.com/xizon.png","language":"JavaScript","funding_links":["https://paypal.me/uiuxlab"],"categories":["UI 库"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/xizon/uix-kit\"\u003e\n\t  \u003cimg src=\"misc/screenshots/logo-colorful.png\"  alt=\"Uix Kit\"  width=\"180\" \u003e\n  \u003c/a\u003e\n  \u003cp align=\"center\"\u003eMake over \u003cstrong\u003e120+\u003c/strong\u003e components to wear again and again!\u003c/p\u003e\n  \u003cp align=\"center\"\u003e\n      \u003ca href=\"https://app.travis-ci.com/github/xizon/uix-kit\" title=\"Travis CI\"\u003e\u003cimg src=\"https://img.shields.io/travis/com/xizon/uix-kit?style=for-the-badge\"/\u003e\u003c/a\u003e\n      \u003ca href=\"https://validator.w3.org/nu/?doc=https%3A%2F%2Fxizon.github.io%2Fuix-kit%2Fexamples%2F\" title=\"w3c\"\u003e\u003cimg src=\"https://img.shields.io/w3c-validation/html?style=for-the-badge\u0026targetUrl=https%3A%2F%2Fxizon.github.io%2Fuix-kit%2Fexamples%2F\"/\u003e\u003c/a\u003e\n\t  \u003ca href=\"https://www.npmjs.com/package/uix-kit\" title=\"npm version\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/uix-kit?style=for-the-badge\"/\u003e\u003c/a\u003e\n\t  \u003ca href=\"https://github.com/xizon/uix-kit/blob/master/LICENSE\" title=\"license\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-MIT-brightgreen.svg?style=for-the-badge\"/\u003e\u003c/a\u003e\n\t   \n  \u003c/p\u003e\n  \u003cbr\u003e\n\u003c/p\u003e\n\n**Uix Kit is not a framework, just a UI toolkit based on some common libraries for building beautiful responsive website.**\n\nUix Kit isn't a reusable component structure, mostly custom CSS and JavaScript based. Definitely interesting, and if you're developing mostly web content and not applications this is particularly useful. It is a web dev build tool/scaffold that does not depend on any framework.  You can import any external libraries/frameworks or native ES Modules for production. \n\nThe generated core file in the dist directory can be used separately in any website. Support JS, HTML, and SASS component library automatically packaged. It is used to develop the full-static website (HTML templates or for dynamic language integration). \n\n\u003e *The demo depends on jQuery (you can completely rewrite the script if needed). And `dist` DOES NOT bundle any third-party script and style library, all libraries are loaded externally in the HTML file.*\n\n**Uix Kit is now in Long Term Support (LTS) mode.**\n\n---\n\n- [React Version - Native scaffolding for reference](https://github.com/xizon/poemkit)\n\n\n---\n\n- [English Documentation](README.md)\n- [中文版说明文档](README_CN.md)\n\n---\n\n\n## Demo\n\n[https://xizon.github.io/uix-kit/examples/](https://xizon.github.io/uix-kit/examples/)\n\nGitHub pages can only serve static content, and there is no way to run PHP or get AJAX request on the pages. You need to visit the link below to see some special demos \u0026#128071;\n\n[https://uiux.cc/uix-kit](https://uiux.cc/uix-kit) \n\n\n\n## Table of Contents\n\n* [Getting Started with Videos](#getting-started-with-videos)\n* [Why use it](#why-use-it)\n* [File Structures](#file-structures)\n* [Getting Started](#getting-started)\n* [HTML Template](#html-template)\n* [How to Create a Custom Module？ \u0026#128293; ](#how-to-create-a-custom-module)\n* [Contributing](#contributing)\n* [Changelog](#changelog)\n* [Browser Support](#browser-support)\n* [Supported development environment](#supported-development-environment)\n* [Licensing](#licensing)\n\n\n\n## Getting Started with Videos\n\n[https://www.youtube.com/watch?v=aRDY9Cr-1-E](https://www.youtube.com/watch?v=aRDY9Cr-1-E)\n\n\n\n## File Structures\n\n\n```sh\n\nuix-kit/\n├── README.md   --------------------------- # Main Documentation\n├── CHANGELOG.md   ------------------------ # Changelog\n├── CONTRIBUTING.md   --------------------- # External resource references\n├── LICENSE     --------------------------- # License\n├── webpack.config.js  -------------------- # Webpack scaffold configuration file\n├── server.js  ---------------------------- # Local server configuration\n├── package.json  ------------------------- # Project configuration file (site info can be modified here)\n├── package-lock.json\n├── dist/\n│   ├── css/\n│   │   ├── uix-kit.css  ------------------ # Main css file\n│   │   ├── uix-kit.css.map\n│   │   ├── uix-kit.min.css  -------------- # Main css file which is used for production\n│   │   ├── uix-kit.min.css.map\n│   │   ├── uix-kit-rtl.css   ------------- # Main RTL css file\n│   │   ├── uix-kit-rtl.css.map\n│   │   ├── uix-kit-rtl.min.css   --------- # Main RTL css file which is used for production\n│   │   └── uix-kit-rtl.min.css.map\n│   └── js/\n│   │   ├── uix-kit.js   ------------------ # Main js file\n│   │   ├── uix-kit.js.map\n│   │   ├── uix-kit.min.js  --------------- # Main js file which is used for production\n│   │   ├── uix-kit.min.js.map\n│   │   ├── uix-kit-rtl.js\n│   │   ├── uix-kit-rtl.js.map\n│   │   ├── uix-kit-rtl.min.js\n│   │   └── uix-kit-rtl.min.js.map\n├── misc/                \n│   ├── screenshots/  --------------------- # Screenshots\n│   └── grid/ ----------------------------- # PSD grid system\n├── src/\n│   ├── components/\n│   │   ├── _app-load.ts  ------------- # Import your modules to be used\n│   │   ├── _app-load-rtl.ts  --------- # Import your RTL modules to be used\n│   │   ├── _global/ ------------------ # Generic modules\n│   │   ├── _main/  ------------------- # Customization site file directory (for secondary or new website development)\n│   │   ├── _third-party-plugins/  ---- # Third-party plugins\n│   │   └── */  ----------------------- # Core functional modules\n├── examples/                                \n│   ├── *.html  --------------------------- # HTML templates\n│   └── assets/  -------------------------- # Static resource directory\n│   │       ├── css/\n│   │       ├── fonts/\n│   │       ├── images/\n│   │       ├── videos/\n│   │       ├── models/\n│   │       ├── json/\n│   │       └── js/\n├── tools/\n│   └── threejs-dist-builder/   ------------ # three.js \u0026 three.min.js Generator (Compatible with 174+ versions)\n└──\n```\n\n\n## Why use it\n\n* `dist` DOES NOT bundle any third-party script and style library, all libraries are loaded externally in the HTML file.\n* Not a reusable component structure\n* Not a JavaScript framework\n* It is used to build the full-static website (HTML templates or for dynamic language integration)\n* Suitable for developing Visual Interaction websites and WordPress templates\n* W3C standard and SEO \n* Control scope with BEM naming, so the core Uix Kit project is not in conflict with the other projects\n* Automatically generate a table of contents for each module comment of the name\n* Each module consists of SASS / SCSS, JavaScript and HTML files\n* Embedded verification strategy for **TypeScript** and **React**. (Such scripts are embedded in the page, not the entire project)\n* Compatible with Bootstrap 5.x (You could also remove Bootstrap's stylesheets)\n* Provides a common web page components and layouts\n* The complete directory of examples in order to develop a responsive website independently without Node.js dev environment\n* The demo depends on jQuery (you can completely rewrite the script if needed)\n\n\n\n* * *\n\n\n## Getting Started\n\n![quick overview 1](misc/screenshots/quick-overview-1.gif)\n\n![quick overview 2](misc/screenshots/quick-overview-2.gif)\n\nYou will need to have [node](https://nodejs.org/) setup on your machine. That will output the built distributables to `./dist/*` and `./examples/*.html`.\n\n\n**Step 1.** Use NPM (Locate your current directory of project, and enter the following command.) or download the latest version from [Github](https://github.com/xizon/uix-kit). For nodejs you have to install some dependencies.\n\n```sh\n$ sudo npm install uix-kit\n```\n\nOr clone the repo to get all source files including build scripts: \n\n```sh\n$ git clone git://github.com/xizon/uix-kit.git\n```\n\n\n**Step 2.** First, using an absolute path into your `\"uix-kit/\"` folder directory.\n\n```sh\n$ cd /{your_directory}/uix-kit\n```\n\n\n**Step 3.** Before doing all dev stuff make sure you have `Node 10+` installed. After that, run the following code in the main directory to install the node module dependencies.\n\n```sh\n$ npm install\n```\n\n\u003cblockquote\u003e\nThe current test environment is `Node 18+`, `npm 9+`. If dependency installation fails ( Usually it is because you have upgraded your Nodejs version, currently tested to Node 18+ ), maybe the new version of npm will conflict with the old version of npm, please use following command to install dependencies:\n\n```sh\n$ npm install --legacy-peer-deps\n```\n\nIf the installation still fails, please use this method: remove **devDependencies** in `package.json`, delete file `package-lock.json`  and reinstall dependencies:\n\n```sh\n$ npm install --save-dev @babel/core @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime @babel/polyfill @babel/preset-env @babel/preset-flow @babel/preset-react @babel/preset-typescript babel-loader babel-plugin-module-resolver clean-webpack-plugin cross-env css-loader css-minimizer-webpack-plugin express file-loader glslify-loader html-loader include-file-webpack-plugin json-loader log-timestamp mini-css-extract-plugin moment sass postcss prettier prettier-loader random-string raw-loader react react-dom sass-loader style-loader tar terser-webpack-plugin webpack webpack-cli webpack-concat-files-plugin webpack-dev-middleware webpack-dev-server\n```\n\u003c/blockquote\u003e\n\n\n\n\n\n**Step 4.** When you’re ready to deploy to production, create a minified bundle with:\n\n```sh\n$ npm run build\n```\nUsing `Ctrl + C` to stop it.\n\nWhen you have done, this will spin up a server that can be accessed at `http://localhost:8080/examples/`\n\n\n**Step 5.** To preview the page without compiling and packaging, please run the following command:\n\n```sh\n$ npm run preview\n```\n\nAll pages can be previewed via `http://localhost:3000`. \n\n\u003cblockquote\u003e\nBut there is no way to run PHP or get AJAX request on the pages. You need to visit the link on your server, or build a server via MAMP. Then visit a similar URL: \u003cstrong\u003ehttp://localhost:{port}/uix-kit/examples/\u003c/strong\u003e\n\u003c/blockquote\u003e\n\n\n\n### Note:\n \n\n**a) How to use modules?**\n\nYou could custom modules of what to import in `src/components/_app-load.ts` and `src/components/_app-load-rtl.ts`. Because the modules are imported too much, you need to wait at least 5.5 seconds (default value). You can set the compilation wait time in the `webpack.config.js` according to the imported modules you want.\n\n\n**b) Site Info Configuration**\n\nYou can update the Placeholders in Templates by modifying the Site Info configuration of `package.json`. Like this:\n\n```json\n{\n  \"author\": \"UIUX Lab\",\n  \"name\": \"uix-kit\",\n  \"email\": \"uiuxlab@gmail.com\",\n  \"version\": \"1.0.0\",\n  \"projectName\": \"Uix Kit\",\n  \"createdInfo\": \"UIUX Lab (https://uiux.cc)\",\n  \"projectURL\": \"https://uiux.cc\",\n  \"description\": \"A free web kits for fast web design and development, compatible with Bootstrap v5.\",\n  ...\n}\n```\n\n\n**c) ERROR: npm update check failed.**\n\nSolution:\n\n```sh\n$ sudo chown -R $USER:$(id -gn $USER) /Users/{username}/.config\n```\n\n**d) ERROR: Node sass version 6.x.x is not compatible with ^ 4.x.x.**\n\nSolution:\n\n```sh\n$ npm install node-sass@4.14.1\n```\n\n\n**e) If you upgrade the version of Node, please execute the following code:**\n\n```sh\n$ sudo npm install\n$ sudo npm rebuild node-sass\n```\n\n\n\n\n* * *\n\n\n## HTML Template\n\n### 1\\. Static HTML code\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml dir=\"ltr\" lang=\"en-US\"\u003e\n\u003chead\u003e\n\t\u003cmeta charset=\"utf-8\" /\u003e\n\t\u003ctitle\u003eWeb Site Title\u003c/title\u003e\n\t\n\t\u003c!-- Compatibility Settings\n\t============================================= --\u003e\n\t\u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1\" /\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\u003e\n\t\u003c!-- Compatibility Settings end --\u003e\n\n\t\u003c!-- Core \u0026 Theme CSS\n\t============================================= --\u003e\n\n\t\u003c!-- Basic  --\u003e\n\t\u003clink rel=\"stylesheet\" href=\"assets/css/bootstrap.min.css?ver=5.2.3\" media=\"all\"/\u003e\n\t\u003clink rel=\"stylesheet\" href=\"assets/css/video.min.css?ver=7.4.1\" media=\"all\"/\u003e\n\n\n\t\u003c!-- Icons  --\u003e\n\t\u003clink rel=\"stylesheet\" href=\"assets/fonts/fontawesome/css/all.min.css?ver=5.7.0\"\u003e\n\t\u003clink rel=\"stylesheet\" href=\"assets/fonts/fontawesome/css/v4-shims.min.css?ver=5.7.0\"\u003e\n\n\n\t\u003c!-- Theme  --\u003e\n\t\u003clink rel=\"stylesheet\" href=\"../dist/css/uix-kit.min.css?ver=1.0.0\"/\u003e\n\n\n\n    \u003c!-- Overwrite Font Files \n        *\n        * The fonts extracted with `mini-css-extract-plugin` may not load correctly\n        * Font files in `dist/fonts/` are fetched automatically by `file-loader`, you can configure webpack.config.js to name them.\n    ============================================= --\u003e \n    \u003c!--\n    \u003cstyle\u003e\n    @font-face {\n        font-family: '...';\n        font-style: normal;\n        font-weight: 900;\n        font-display: $fa-font-display;\n        src: url('../dist/fonts/....eot');\n        src: url('../dist/fonts/....eot?#iefix') format('embedded-opentype'),\n        url('../dist/fonts/....woff2') format('woff2'),\n        url('../dist/fonts/....woff') format('woff'),\n        url('../dist/fonts/....ttf') format('truetype'),\n        url('../dist/fonts/....svg#fontawesome') format('svg');\n    }\n    \u003c/style\u003e\n    --\u003e\n    \u003c!-- Overwrite Font Files   end --\u003e\n\n\n\n\t\u003c!--[if lt IE 10]\u003e\n\t\u003clink rel=\"stylesheet\" href=\"assets/css/IE.css?ver=1.0.0\" /\u003e\n\t\u003c![endif]--\u003e\n\n\n\t\u003c!-- Core \u0026 Theme CSS  end --\u003e\n\t\u003c!-- Vendor\n\t============================================= --\u003e\n\t\u003cscript src=\"assets/js/min/jquery.min.js?ver=3.6.1\"\u003e\u003c/script\u003e\n    \u003cscript src=\"assets/js/min/modernizr.min.js?ver=3.5.0\"\u003e\u003c/script\u003e\n\t\u003c!-- Vendor  end --\u003e\n\n\t\u003c!-- Break free from CSS prefix hell!\n\t============================================= --\u003e\n\t\u003cscript src=\"assets/js/min/prefixfree.min.js?ver=1.0.7\"\u003e\u003c/script\u003e\n\n\u003c/head\u003e \n\n\u003cbody\u003e \n\t\n\t{your_html_codes_here}\n\t\n\t\n\t\u003c!-- Vendor --\u003e\n\t\u003cscript defer src=\"assets/js/min/axios.min.js?ver=0.19.2\"\u003e\u003c/script\u003e\n    \u003cscript defer src=\"assets/js/min/jquery.waitforimages.min.js?ver=1.0\"\u003e\u003c/script\u003e\n    \u003cscript defer src=\"assets/js/min/video.min.js?ver=7.5.3\"\u003e\u003c/script\u003e\n    \u003cscript defer src=\"assets/js/min/TweenMax.min.js?ver=2.0.2\"\u003e\u003c/script\u003e\n    \u003cscript defer src=\"assets/js/min/pixi.min.js?ver=5.2.0\"\u003e\u003c/script\u003e\n    \u003cscript defer src=\"assets/js/min/three.min.js?ver=r175\"\u003e\u003c/script\u003e\n    \u003cscript defer src=\"assets/js/min/anime.min.js?ver=3.1\"\u003e\u003c/script\u003e\n    \u003cscript defer src=\"assets/js/min/hammer.min.js?ver=2.0.8\"\u003e\u003c/script\u003e\n\n\t\u003c!-- Your Plugins \u0026 Theme Scripts\n\t============================================= --\u003e\n\t\u003cscript\u003e\n        /*\n        * Some global vars. DO NOT change these variables names. \n        * These variables are being used in `uix-kit.min.js`.\n        *    \n        */ \n\t\tvar REVISION     = \"1.0.0\",\n\t\t\tAPP_ROOTPATH = {\n\t\t\t\t\"templateUrl\" : \"\", //If the file is in the root directory, you can leave it empty. If in another directory, you can write: \"/blog\"\n\t\t\t\t\"homeUrl\"     : \"\",  //Eg. https://uiux.cc\n\t\t\t\t\"ajaxUrl\"     : \"\"   //Eg. https://uiux.cc/wp-admin/admin-ajax.php\n\t\t\t};\n        \n\n        /*\n        * Fixed a bug that Cannot read property 'fn' of undefined for jQuery 1.xx.x.\n        *    \n        */\n        window.$ = window.jQuery;\n\t\u003c/script\u003e\n\t\u003cscript defer src=\"../dist/js/uix-kit.min.js?ver=1.0.0\"\u003e\u003c/script\u003e\n\t\n\u003c/body\u003e\n\n\u003c/html\u003e\n\n```\n\n### 2\\. PSD Grid Templates\n\nYou can download the corresponding .PSD grid files.\n\n*   `misc/grid/bootstrap3_1170_grid_web.psd` (Default Container: 1170px)\n*   `misc/grid/bootstrap3_1278_grid_web.psd` (XL Container: 1278px)\n*   `misc/grid/bootstrap3_1410_grid_web.psd` (XXL Container: 1410px)\n\n\n\n## How to Create a Custom Module\n\nAssuming you are in your application's root directory and want to create components inside `src/components/` as you show above. You can create a new directory and name it **demo-module**. \n\n\u0026#128071;\u0026#128071;\u0026#128071;\n\n\nHere’s a sample custom module directory structure, I’ve included some examples of files that would sit inside of each folder:\n\n\n```sh\n\nuix-kit/\n├── src/\n│   ├── components/\n│   │     ├── _app-load.ts\n│   │     ├── _app-load-rtl.ts\n│   │     └── demo-module/\n│   │              ├── scss/*.scss\n│   │              ├── scss-rtl/*.scss\n│   │              ├── js/*.(js|ts|tsx)\n│   │              └── *.html\n└──\n```\n\n\n**Step 1.** Inside that folder create two sub folders: `/scss` and `/js`. If you need to support RTL, create another `/scss-rtl`.\n\n\n**Step 2.** Create a SASS/SCSS file. Go into the `src/components/demo-module/scss/` folder and create a file called: `_style.scss`. Please import global variables or functions. Here's an example:\n\n```sh\n/* ====================================================== \n   \u003c!-- Demo Module Stylesheets --\u003e \n/* ====================================================== */\n@import '@uixkit/core/_global/scss/_variable-and-mixin.scss';\n\n.app-demo {\n\tfont-size: $basic-font-size;\n    text-align: left;\n}\n```\n\n**Step 2-2 (Optional).** Alright, so if you need to support RTL. You need create a new SASS/SCSS file. Go into the `src/components/demo-module/scss-rtl/` folder and create a file called: `_style.scss`. Like this:\n\n```sh\n/* ====================================================== \n   \u003c!-- Demo Module Stylesheets --\u003e \n/* ====================================================== */\n@import '@uixkit/core/_global/scss/_variable-and-mixin.scss';\n\n.app-demo {\n    text-align: right;\n}\n```\n\n\n**Step 3.** Create a JS file. Go into the `src/components/demo-module/js/` folder and create a file called: `index.js`. In order to make it work we need to import the global variables or functions in file index.js. \n\nSimultaneously, Now you’re ready to import your Stylesheets to use with this component. Import SASS/SCSS file in `src/components/demo-module/js/index.js`.\n\nLike this:.\n\n```sh\n/* \n *************************************\n * \u003c!-- Demo Module Scripts  --\u003e\n *************************************\n */\nimport {\n    templateUrl,\n    homeUrl,\n    ajaxUrl,\n    UixBrowser,\n    UixModuleInstance,\n    UixGUID,\n    UixMath,\n    UixCssProperty,\n    UixDebounce,\n    UixThrottle\n} from '@uixkit/core/_global/js';\n\nimport '../scss/_style.scss';\n\nexport const DEMO_MODULE = ( ( module, $, window, document ) =\u003e {\n\tif ( window.DEMO_MODULE === null ) return false;\n\n    module.DEMO_MODULE               = module.DEMO_MODULE || {};\n    module.DEMO_MODULE.version       = '0.0.1';\n    \n    \n    // executes when HTML-Document is loaded and DOM is ready\n    module.DEMO_MODULE.documentReady = function( $ ) {\n\t\t/* \n\t\t ---------------------------\n\t\t Function Name\n\t\t ---------------------------\n\t\t */ \n\t\t// your code here...\n\t\n    };\n    module.components.documentReady.push( module.DEMO_MODULE.documentReady );\n\t\n    \n    \n    // executes when complete page is fully loaded, including all frames, objects and images\n    module.DEMO_MODULE.pageLoaded    = function() {\n\t\t/* \n\t\t ---------------------------\n\t\t Function Name\n\t\t ---------------------------\n\t\t */ \n\t\t // your code here...\n\t\t\n    };\n    module.components.pageLoaded.push( module.DEMO_MODULE.pageLoaded );\t\n\n\n\treturn class DEMO_MODULE {\n\t\tconstructor() {\n\t\t\tthis.module = module;\n\t\t}\n\t};\n})( UixModuleInstance, jQuery, window, document );\n\n```\n\n\n\n**Step 4.** So far, to dynamically import the module you just created in `src/components/_app-load.ts`.  The simplest version directly imports the default:\n\n\n```sh\nimport DEMO_MODULE from '@uixkit/core/demo-module/js';\n```\n\n\n**Step 4-2  (Optional).** If you need to support RTL, in `src/components/_app-load-rtl.ts`.  like this:\n\n\n```sh\nimport '@uixkit/core/demo-module/scss-rtl/_style.scss';\n```\n\nThese RTL modules do not need JavaScript.\n\n\n**Step 5 (Optional).** You could also create an HTML file to run the demo of this module separately, all HTML files will be automatically exported into the directory `examples/`. The demo code of the HTML file is as follows:\n\n\n```sh\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"@@{website_lang}\" dir=\"@@{website_dirLTR}\"\u003e\n\u003chead\u003e\n\t\u003cmeta charset=\"@@{website_charset}\" /\u003e\n\t\u003ctitle\u003eDemo Module - @@{website_title}\u003c/title\u003e\t\n\t@@include('./src/components/_global/include-header.html')\n\u003c/head\u003e  \n\u003cbody class=\"page\"\u003e\n     \n    @@include('./src/components/_global/include-loader.html')\n    @@include('./src/components/_global/include-toggle-trigger.html')\n \n    \u003cdiv class=\"uix-wrapper\"\u003e\n        \u003c!-- Header Area\n        ============================================= --\u003e      \n        \u003cheader class=\"uix-header__container\"\u003e\n             \u003cdiv class=\"uix-header\"\u003e\n                 \u003cdiv class=\"container\"\u003e\n                        @@include('./src/components/_global/include-brand.html')\n                        @@include('./src/components/_global/include-menu.html')\n                  \u003c/div\u003e\n                  \u003c!-- .container end --\u003e\n                  \n                  \u003cdiv class=\"uix-clearfix\"\u003e\u003c/div\u003e\n             \u003c/div\u003e\n        \n        \u003c/header\u003e\n        \u003cdiv class=\"uix-header__placeholder js-uix-header__placeholder-autoheight\"\u003e\u003c/div\u003e\n    \n\t\t\u003cmain id=\"uix-maincontent\"\u003e\n\t\t\t\u003c!-- Content   \n\t\t\t====================================================== --\u003e\n\t\t\t\u003csection class=\"uix-spacing--s uix-spacing--no-bottom\"\u003e\n\t\t\t\t\u003cdiv class=\"container\"\u003e\n\t\t\t\t\t\u003cdiv class=\"row\"\u003e\n\t\t\t\t\t\t\u003cdiv class=\"col-12\"\u003e\n\t\t\t\t\t\t\t\u003ch3\u003eDemo Module\u003c/h3\u003e\n\t\t\t\t\t\t\t\u003chr\u003e\n\t\t\t\t\t\t\u003c/div\u003e\n\t\t\t\t\t\u003c/div\u003e\n\t\t\t\t\u003c/div\u003e\n\t\t\t\u003c/section\u003e\n\t\t\t\n\t\t   \u003c!-- Content  \n\t\t\t====================================================== --\u003e\n\t\t\t\u003csection class=\"uix-spacing--s\"\u003e\n\t\t\t\t\u003cdiv class=\"container uix-t-c\"\u003e\n                    \u003cdiv class=\"row\"\u003e\n                        \u003cdiv class=\"col-12\"\u003e\n                            ...\n                        \u003c/div\u003e\n                    \u003c/div\u003e\n\t\t\t\t\u003c/div\u003e\n\t\t\t\u003c/section\u003e   \n\t\t\u003c/main\u003e \n        \n        @@include('./src/components/_global/include-copyright.html')\n        \n    \u003c/div\u003e\n    \u003c!-- .uix-wrapper end --\u003e\n        \n    @@include('./src/components/_global/include-footer.html')\n```\n\n**Note \u0026#128161;:** You could call a specified module script which is commonly used for callbacks of AJAX request from Asynchronous method. The demo code is here:\n\n```sh\nimport { UixModuleInstance } from '@uixkit/core/_global/js';\n\nif ( UixModuleInstance.DEMO_MODULE ) UixModuleInstance.DEMO_MODULE.pageLoaded();\nif ( UixModuleInstance.DEMO_MODULE ) UixModuleInstance.DEMO_MODULE.documentReady($);\n```\n\n\n\n**Since Uix Kit is not a JavaScript framework, you could use any third-party libraries to build your custom module styles and animation scripts in the most intuitive way.**\n\n\n\n\n\n## Contributing\n\nFinding bugs, sending pull requests or improving our docs - any contribution is welcome and highly appreciated. To get started, head over to our [contribution guidelines](CONTRIBUTING.md). Thanks!\n\n\n## Changelog\n\n[releases](CHANGELOG.md)\n\n\n\n## Browser Support\n\n| Chrome | Firefox | Edge | IE| Safari |Opera | iOS  | Android\n| --- | --- | --- | --- | --- | --- | --- | --- |\n| \u003e= 49 | \u003e= 45 | \u003e=14 | \u003e=11 | \u003e= 9 | \u003e= 30 | \u003e=10 | \u003e=4.4 |\n\n\n## Supported development environment\n\n- React 18 +\n- TypeScript 4.x.x + \n- Babel 7.x.x + \n- Webpack 5.x.x\n- Express 4.x.x\n\n## Licensing\n\nLicensed under the [MIT](https://opensource.org/licenses/MIT).\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxizon%2Fuix-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxizon%2Fuix-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxizon%2Fuix-kit/lists"}