uix kit
Uix Kit Stable(webpack 5+)
120以上のコンポーネントを作成して、何度も何度も着用してください！
UIXキットはフレームワークではなく、美しいレスポンシブWebサイトを構築するための一般的なライブラリに基づいたUIツールキットです。
UIXキットは再利用可能なコンポーネント構造ではなく、主にカスタムCSSとJavaScriptベースです。間違いなく興味深いです。ほとんどがWebコンテンツを開発していて、アプリケーションではない場合、これは特に便利です。これは、フレームワークに依存しないWeb開発ツール/足場です。生産用の外部ライブラリ/フレームワークまたはネイティブESモジュールをインポートできます。
DISTディレクトリの生成されたコアファイルは、任意のWebサイトで個別に使用できます。 JS、HTML、SASSコンポーネントライブラリを自動的にサポートします。フルスタティックのWebサイト（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または、リポジトリをクローンして、ビルドスクリプトを含むすべてのソースファイルを取得します。
$ git clone git://github.com/xizon/uix-kit.gitステップ2。最初に、 "uix-kit/"フォルダーディレクトリへの絶対パスを使用します。
$ cd /{your_directory}/uix-kitステップ3。すべての開発の前に、 Node 10+インストールされていることを確認してください。その後、メインディレクトリで次のコードを実行して、ノードモジュールの依存関係をインストールします。
$ npm install現在のテスト環境は、 `ノード18+`、 `npm 9+`です。依存関係のインストールが失敗した場合（通常、NodeJSバージョンをアップグレードしたためです。現在はNode 18+にテストされているためです）、NPMの新しいバージョンがNPMの古いバージョンと競合する可能性があります。次のコマンドを使用して依存関係をインストールしてください。$ npm install --legacy-peer-depsインストールがまだ失敗した場合は、この方法を使用してください。Package.json
package.jsonDevDependenciesを削除し、ファイル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 2つのサブフォルダーを作成します。 RTLをサポートする必要がある場合は、別の/scss-rtlを作成します。
ステップ2。SASS /SCSSファイルを作成します。 src/components/demo-module/scss/ folderに移動し、 _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/ folderに移動し、 _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というファイルを作成します。それを機能させるには、ファイル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 | 角 | すなわち | サファリ | オペラ | iOS | アンドロイド |
|---|---|---|---|---|---|---|---|
| > = 49 | > = 45 | > = 14 | > = 11 | > = 9 | > = 30 | > = 10 | > = 4.4 |
MITの下でライセンスされています。
