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 |
根据麻省理工学院许可。
