uix kit
Uix Kit Stable(webpack 5+)
製作超過120多個組件以一次又一次的磨損！
UIX套件不是一個框架，只是基於一些常見庫來構建美麗響應式網站的UI工具包。
UIX套件不是可重複使用的組件結構，主要是基於自定義CSS和JavaScript。絕對有趣的是，如果您主要開發的網絡內容而不是應用程序，那麼這是特別有用的。它是Web開發式構建工具/腳手架，不取決於任何框架。您可以將任何外部庫/框架或本機ES模塊導入生產。
DIST目錄中生成的核心文件可以在任何網站中分別使用。支持JS，HTML和SASS組件庫自動打包。它用於開發全靜電網站（HTML模板或動態語言集成）。
演示取決於jQuery（如果需要，您可以完全重寫腳本）。
dist不會捆綁任何第三方腳本和样式庫，所有庫都在HTML文件中外部加載。
UIX套件現在處於長期支持（LTS）模式。
https://xizon.github.io/uix-kit/examples/
GitHub頁面只能提供靜態內容，並且無法在頁面上運行PHP或獲得AJAX請求。您需要訪問下面的鏈接以查看一些特殊的演示嗎？
https://uiux.cc/uix-kit
https://www.youtube.com/watch?v=ardy9cr-1-e
uix-kit/
├── README.md --------------------------- # Main Documentation
├── CHANGELOG.md ------------------------ # Changelog
├── CONTRIBUTING.md --------------------- # External resource references
├── LICENSE --------------------------- # License
├── webpack.config.js -------------------- # Webpack scaffold configuration file
├── server.js ---------------------------- # Local server configuration
├── package.json ------------------------- # Project configuration file (site info can be modified here)
├── package-lock.json
├── dist/
│ ├── css/
│ │ ├── uix-kit.css ------------------ # Main css file
│ │ ├── uix-kit.css.map
│ │ ├── uix-kit.min.css -------------- # Main css file which is used for production
│ │ ├── uix-kit.min.css.map
│ │ ├── uix-kit-rtl.css ------------- # Main RTL css file
│ │ ├── uix-kit-rtl.css.map
│ │ ├── uix-kit-rtl.min.css --------- # Main RTL css file which is used for production
│ │ └── uix-kit-rtl.min.css.map
│ └── js/
│ │ ├── uix-kit.js ------------------ # Main js file
│ │ ├── uix-kit.js.map
│ │ ├── uix-kit.min.js --------------- # Main js file which is used for production
│ │ ├── uix-kit.min.js.map
│ │ ├── uix-kit-rtl.js
│ │ ├── uix-kit-rtl.js.map
│ │ ├── uix-kit-rtl.min.js
│ │ └── uix-kit-rtl.min.js.map
├── misc/
│ ├── screenshots/ --------------------- # Screenshots
│ └── grid/ ----------------------------- # PSD grid system
├── src/
│ ├── components/
│ │ ├── _app-load.ts ------------- # Import your modules to be used
│ │ ├── _app-load-rtl.ts --------- # Import your RTL modules to be used
│ │ ├── _global/ ------------------ # Generic modules
│ │ ├── _main/ ------------------- # Customization site file directory (for secondary or new website development)
│ │ ├── _third-party-plugins/ ---- # Third-party plugins
│ │ └── * / ----------------------- # Core functional modules
├── examples/
│ ├── * .html --------------------------- # HTML templates
│ └── assets/ -------------------------- # Static resource directory
│ │ ├── css/
│ │ ├── fonts/
│ │ ├── images/
│ │ ├── videos/
│ │ ├── models/
│ │ ├── json/
│ │ └── js/
└──dist不會捆綁任何第三方腳本和样式庫，所有庫都在HTML文件中外部加載。
您需要在計算機上設置節點。那將把已構建的分銷商品輸出到./dist/* and ./examples/*.html 。
步驟1。使用NPM（找到您當前的項目目錄，然後輸入以下命令。）或從Github下載最新版本。對於Nodejs，您必須安裝一些依賴項。
$ sudo npm install uix-kit或克隆回購以獲取所有源文件，包括構建腳本：
$ git clone git://github.com/xizon/uix-kit.git步驟2。首先，使用"uix-kit/"文件夾目錄中的絕對路徑。
$ cd /{your_directory}/uix-kit步驟3。在執行所有開發工作之前，請確保安裝了Node 10+ 。之後，在主目錄中運行以下代碼以安裝節點模塊依賴項。
$ npm install當前的測試環境為`node 18+`，`npm 9+`。如果依賴性安裝失敗（通常是因為您已經升級了NodeJS版本，當前已測試到Node 18+），則可能是NPM的新版本將與舊版本的NPM衝突，請使用以下命令來安裝依賴項：$ npm install --legacy-peer-deps如果安裝仍然失敗，請使用以下方法：刪除
package.jsonpackage-lock.json的dev depentencies 。$ 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
步驟4。當您準備部署到生產時，使用以下方式創建一個縮小的捆綁包：
$ npm run build使用Ctrl + C停止它。
完成後，這將旋轉可以在http://localhost:8080/examples/
步驟5。要在不編譯和包裝的情況下預覽頁面，請運行以下命令：
$ npm run preview所有頁面都可以通過http://localhost:3000預覽。
但是，無法在頁面上運行PHP或獲得AJAX請求。您需要訪問服務器上的鏈接，或通過MAMP構建服務器。然後訪問類似的URL： http：// localhost：{port}/uix-kit/xpess/
a）如何使用模塊？
您可以自定義在src/components/_app-load.ts和src/components/_app-load-rtl.ts中導入什麼的模塊。由於導入的模塊太多，因此您需要至少等待5.5秒（默認值）。您可以根據所需的導入模塊在webpack.config.js中設置彙編等待時間。
b）站點信息配置
您可以通過修改package.json的站點信息配置來更新模板中的佔位符。像這樣：
{
"author" : " UIUX Lab " ,
"name" : " uix-kit " ,
"email" : " [email protected] " ,
"version" : " 1.0.0 " ,
"projectName" : " Uix Kit " ,
"createdInfo" : " UIUX Lab (https://uiux.cc) " ,
"projectURL" : " https://uiux.cc " ,
"description" : " A free web kits for fast web design and development, compatible with Bootstrap v5. " ,
...
}c）錯誤：NPM更新檢查失敗。
解決方案：
$ sudo chown -R $USER : $( id -gn $USER ) /Users/{username}/.configd）錯誤：節點sass版本6.xx與 ^ 4.xx不兼容
解決方案：
$ npm install [email protected]e）如果升級節點版本，請執行以下代碼：
$ sudo npm install
$ sudo npm rebuild node-sass <!DOCTYPE html >
< html dir =" ltr " lang =" en-US " >
< head >
< meta charset =" utf-8 " />
< title > Web Site Title </ title >
<!-- Compatibility Settings
============================================= -->
< meta name =" viewport " content =" width=device-width, initial-scale=1, maximum-scale=1 " />
< meta http-equiv =" X-UA-Compatible " content =" IE=edge " >
<!-- Compatibility Settings end -->
<!-- Core & Theme CSS
============================================= -->
<!-- Basic -->
< link rel =" stylesheet " href =" assets/css/bootstrap.min.css?ver=5.2.3 " media =" all " />
< link rel =" stylesheet " href =" assets/css/video.min.css?ver=7.4.1 " media =" all " />
<!-- Icons -->
< link rel =" stylesheet " href =" assets/fonts/fontawesome/css/all.min.css?ver=5.7.0 " >
< link rel =" stylesheet " href =" assets/fonts/fontawesome/css/v4-shims.min.css?ver=5.7.0 " >
<!-- Theme -->
< link rel =" stylesheet " href =" ../dist/css/uix-kit.min.css?ver=1.0.0 " />
<!-- Overwrite Font Files
*
* The fonts extracted with `mini-css-extract-plugin` may not load correctly
* Font files in `dist/fonts/` are fetched automatically by `file-loader`, you can configure webpack.config.js to name them.
============================================= -->
<!--
<style>
@font-face {
font-family: '...';
font-style: normal;
font-weight: 900;
font-display: $fa-font-display;
src: url('../dist/fonts/....eot');
src: url('../dist/fonts/....eot?#iefix') format('embedded-opentype'),
url('../dist/fonts/....woff2') format('woff2'),
url('../dist/fonts/....woff') format('woff'),
url('../dist/fonts/....ttf') format('truetype'),
url('../dist/fonts/....svg#fontawesome') format('svg');
}
</style>
-->
<!-- Overwrite Font Files end -->
<!--[if lt IE 10]>
<link rel="stylesheet" href="assets/css/IE.css?ver=1.0.0" />
<![endif]-->
<!-- Core & Theme CSS end -->
<!-- Vendor
============================================= -->
< script src =" assets/js/min/jquery.min.js?ver=3.6.1 " > </ script >
< script src =" assets/js/min/modernizr.min.js?ver=3.5.0 " > </ script >
<!-- Vendor end -->
<!-- Break free from CSS prefix hell!
============================================= -->
< script src =" assets/js/min/prefixfree.min.js?ver=1.0.7 " > </ script >
</ head >
< body >
{your_html_codes_here}
<!-- Vendor -->
< script src =" assets/js/min/axios.min.js?ver=0.19.2 " > </ script >
< script src =" assets/js/min/jquery.waitforimages.min.js?ver=1.0 " > </ script >
< script src =" assets/js/min/video.min.js?ver=7.4.1 " > </ script >
< script src =" assets/js/min/TweenMax.min.js?ver=2.0.2 " > </ script >
< script src =" assets/js/min/pixi.min.js?ver=4.8.4 " > </ script >
< script src =" assets/js/min/three.min.js?ver=r99 " > </ script >
< script src =" assets/js/min/anime.min.js?ver=2.2.0 " > </ script >
< script src =" assets/js/min/hammer.min.js?ver=2.0.8 " > </ script >
<!-- Your Plugins & Theme Scripts
============================================= -->
< script >
/*
* Some global vars. DO NOT change these variables names.
* These variables are being used in `uix-kit.min.js`.
*
*/
var REVISION = "1.0.0" ,
APP_ROOTPATH = {
"templateUrl" : "" , //If the file is in the root directory, you can leave it empty. If in another directory, you can write: "/blog"
"homeUrl" : "" , //Eg. https://uiux.cc
"ajaxUrl" : "" //Eg. https://uiux.cc/wp-admin/admin-ajax.php
} ;
/*
* Fixed a bug that Cannot read property 'fn' of undefined for jQuery 1.xx.x.
*
*/
window . $ = window . jQuery ;
</ script >
< script src =" ../dist/js/uix-kit.min.js?ver=1.0.0 " > </ script >
</ body >
</ html >您可以下載相應的.psd網格文件。
misc/grid/bootstrap3_1170_grid_web.psd （默認容器：1170px）misc/grid/bootstrap3_1278_grid_web.psd （XL容器：1278px）misc/grid/bootstrap3_1410_grid_web.psd （XXL容器：1410px） 假設您處於應用程序的根目錄中，並且想要在上面顯示的src/components/中創建組件。您可以創建一個新的目錄並將其命名為演示模塊。
???
這是一個示例自定義模塊目錄結構，我包含了一些文件夾中的文件示例：
uix-kit/
├── src/
│ ├── components/
│ │ ├── _app-load.ts
│ │ ├── _app-load-rtl.ts
│ │ └── demo-module/
│ │ ├── scss/ * .scss
│ │ ├── scss-rtl/ * .scss
│ │ ├── js/ * .(js | ts | tsx)
│ │ └── * .html
└──步驟1。在該文件夾內部創建兩個子文件夾： /scss和/js 。如果您需要支持RTL，請創建另一個/scss-rtl 。
步驟2。創建一個SASS/SCSS文件。進入src/components/demo-module/scss/文件夾，然後創建一個名為： _style.scss的文件。請導入全局變量或功能。這是一個例子：
/ * ======================================================
< ! -- Demo Module Stylesheets -- >
/ * ====================================================== * /
@import ' @uixkit/core/_global/scss/_variable-and-mixin.scss ' ;
.app-demo {
font-size: $basic -font-size ;
text-align: left ;
}步驟2-2（可選）。好吧，如果您需要支持RTL。您需要創建一個新的SASS/SCSS文件。進入src/components/demo-module/scss-rtl/文件夾，然後創建一個名為： _style.scss的文件。像這樣：
/ * ======================================================
< ! -- Demo Module Stylesheets -- >
/ * ====================================================== * /
@import ' @uixkit/core/_global/scss/_variable-and-mixin.scss ' ;
.app-demo {
text-align: right ;
}步驟3。創建一個JS文件。進入src/components/demo-module/js/文件夾，然後創建一個名為： index.js文件。為了使其起作用，我們需要在文件索引中導入全局變量或函數。
同時，現在您準備將樣式表導入到該組件中。在src/components/demo-module/js/index.js中導入sass/scss文件。
像這樣：。
/ *
*************************************
* < ! -- Demo Module Scripts -- >
*************************************
* /
import {
templateUrl,
homeUrl,
ajaxUrl,
UixBrowser,
UixModuleInstance,
UixGUID,
UixMath,
UixCssProperty,
UixDebounce,
UixThrottle
} from ' @uixkit/core/_global/js ' ;
import ' ../scss/_style.scss ' ;
export const DEMO_MODULE = ( ( module, $, window, document ) = > {
if ( window.DEMO_MODULE === null ) return false ;
module.DEMO_MODULE = module.DEMO_MODULE || {} ;
module.DEMO_MODULE.version = ' 0.0.1 ' ;
// executes when HTML-Document is loaded and DOM is ready
module.DEMO_MODULE.documentReady = function( $ ) {
/ *
---------------------------
Function Name
---------------------------
* /
// your code here...
} ;
module.components.documentReady.push( module.DEMO_MODULE.documentReady ) ;
// executes when complete page is fully loaded, including all frames, objects and images
module.DEMO_MODULE.pageLoaded = function () {
/ *
---------------------------
Function Name
---------------------------
* /
// your code here...
};
module.components.pageLoaded.push( module.DEMO_MODULE.pageLoaded ) ;
return class DEMO_MODULE {
constructor () {
this.module = module ;
}
} ;
})( UixModuleInstance, jQuery, window, document ) ;
步驟4。到目前為止，要動態導入您剛剛在src/components/_app-load.ts中創建的模塊。最簡單的版本直接導入默認值：
import DEMO_MODULE from ' @uixkit/core/demo-module/js ' ;步驟4-2（可選）。如果您需要支持RTL，則在src/components/_app-load-rtl.ts中。像這樣：
import ' @uixkit/core/demo-module/scss-rtl/_style.scss ' ;這些RTL模塊不需要JavaScript。
步驟5（可選）。您還可以創建一個HTML文件以分別運行該模塊的演示，所有HTML文件將自動導出到目錄examples/ 。 HTML文件的演示代碼如下：
< ! DOCTYPE html >
< html lang= " @@{website_lang} " dir= " @@{website_dirLTR} " >
< head >
< meta charset= " @@{website_charset} " / >
< title > Demo Module - @@{website_title} < /title >
@@include( ' ./src/components/_global/include-header.html ' )
< /head >
< body class= " page " >
@@include( ' ./src/components/_global/include-loader.html ' )
@@include( ' ./src/components/_global/include-toggle-trigger.html ' )
< div class= " uix-wrapper " >
< ! -- Header Area
============================================= -- >
< header class= " uix-header__container " >
< div class= " uix-header " >
< div class= " container " >
@@include( ' ./src/components/_global/include-brand.html ' )
@@include( ' ./src/components/_global/include-menu.html ' )
< /div >
< ! -- .container end -- >
< div class= " uix-clearfix " ></div >
< /div >
< /header >
< div class= " uix-header__placeholder js-uix-header__placeholder-autoheight " ></div >
< main id= " uix-maincontent " >
< ! -- Content
====================================================== -- >
< section class= " uix-spacing--s uix-spacing--no-bottom " >
< div class= " container " >
< div class= " row " >
< div class= " col-12 " >
< h 3> Demo Module < /h 3>
< hr >
< /div >
< /div >
< /div >
< /section >
< ! -- Content
====================================================== -- >
< section class= " uix-spacing--s " >
< div class= " container uix-t-c " >
< div class= " row " >
< div class= " col-12 " >
...
< /div >
< /div >
< /div >
< /section >
< /main >
@@include( ' ./src/components/_global/include-copyright.html ' )
< /div >
< ! -- .uix-wrapper end -- >
@@include( ' ./src/components/_global/include-footer.html ' )注意：您可以調用指定的模塊腳本，該腳本通常用於來自異步方法的AJAX請求回調。演示代碼在這裡：
import { UixModuleInstance } from ' @uixkit/core/_global/js ' ;
if ( UixModuleInstance.DEMO_MODULE ) UixModuleInstance.DEMO_MODULE.pageLoaded ();
if ( UixModuleInstance.DEMO_MODULE ) UixModuleInstance.DEMO_MODULE.documentReady($) ;由於UIX套件不是JavaScript框架，因此您可以使用最直觀的方式使用任何第三方庫來構建自定義模塊樣式和動畫腳本。
查找錯誤，發送拉請請求或改進我們的文檔 - 歡迎任何貢獻和高度讚賞。首先，請遵守我們的貢獻指南。謝謝！
發行
| 鉻合金 | Firefox | 邊緣 | IE | 野生動物園 | 歌劇 | ios | 安卓 |
|---|---|---|---|---|---|---|---|
| > = 49 | > = 45 | > = 14 | > = 11 | > = 9 | > = 30 | > = 10 | > = 4.4 |
根據麻省理工學院許可。
