uix kit
Uix Kit Stable(webpack 5+)
120 개가 넘는 구성 요소를 반복해서 착용하십시오!
UIX 키트는 프레임 워크가 아니라 아름다운 반응 형 웹 사이트를 구축하기위한 일부 일반적인 라이브러리를 기반으로 한 UI 툴킷입니다.
UIX 키트는 재사용 가능한 구성 요소 구조가 아니며 대부분 사용자 정의 CSS 및 JavaScript 기반입니다. 확실히 흥미롭고, 주로 웹 컨텐츠를 개발하고 응용 프로그램이 아닌 경우 특히 유용합니다. 프레임 워크에 의존하지 않는 웹 개발자 빌드 도구/스캐 폴드입니다. 생산을 위해 외부 라이브러리/프레임 워크 또는 기본 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/* 및 ./examples/*.html 로 출력합니다.
1 단계. NPM을 사용하십시오 (현재 프로젝트 디렉토리를 찾고 다음 명령을 입력하십시오.) 또는 GitHub에서 최신 버전을 다운로드하십시오. nodejs의 경우 일부 종속성을 설치해야합니다.
$ sudo npm install uix-kit또는 빌드 스크립트를 포함한 모든 소스 파일을 얻으려면 Repo를 복제하십시오.
$ git clone git://github.com/xizon/uix-kit.git 2 단계. 먼저, "uix-kit/" 폴더 디렉토리에 대한 절대 경로를 사용합니다.
$ cd /{your_directory}/uix-kit 3 단계. 모든 DEV 작업을 수행하기 전에 Node 10+ 설치되어 있는지 확인하십시오. 그런 다음 기본 디렉토리에서 다음 코드를 실행하여 노드 모듈 종속성을 설치하십시오.
$ npm install현재 테스트 환경은`노드 18+`,`npm 9+`입니다. 종속성 설치가 실패한 경우 (일반적으로 NodeJS 버전을 업그레이드했기 때문에 현재 18 세 이상으로 테스트 되었기 때문에) NPM의 새 버전은 이전 버전의 NPM과 충돌 할 수 있습니다. 다음 명령을 사용하여 종속성을 설치하십시오.$ npm install --legacy-peer-deps설치가 여전히 실패하면이 방법을 사용하십시오.
package.json에서 devdependencies를 제거하고 파일package-lock.json삭제하고 종속성을 다시 설치하십시오.$ 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/examples/
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/ 내에서 구성 요소를 작성하려고한다고 가정합니다. 새 디렉토리를 만들고 Demo-Module의 이름을 지정할 수 있습니다.
?
샘플 사용자 정의 모듈 디렉토리 구조는 다음과 같습니다. 각 폴더 내부에있는 파일의 몇 가지 예가 포함되어 있습니다.
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 라는 파일을 만듭니다. 작동하려면 File 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 프레임 워크가 아니기 때문에 타사 라이브러리를 사용하여 가장 직관적 인 방식으로 사용자 정의 모듈 스타일 및 애니메이션 스크립트를 구축 할 수 있습니다.
버그 찾기, 풀 요청 보내기 또는 문서 개선 - 모든 기여를 환영하고 높이 평가합니다. 시작하려면 기여 가이드 라인으로 가십시오. 감사해요!
릴리스
| 크롬 | 파이어 폭스 | 가장자리 | 즉 | 원정 여행 | 오페라 | iOS | 기계적 인조 인간 |
|---|---|---|---|---|---|---|---|
| > = 49 | > = 45 | > = 14 | > = 11 | > = 9 | > = 30 | > = 10 | > = 4.4 |
MIT에 따라 라이센스.
