uix kit
Uix Kit Stable(webpack 5+)
Сделайте более 120 компонентов, чтобы носить снова и снова!
UIX Kit - это не фреймворк, просто инструментарий пользовательского интерфейса, основанный на некоторых общих библиотеках для создания красивого адаптивного веб -сайта.
Kit Uix не является многоразовой компонентной структурой, в основном на заказ CSS и JavaScript. Определенно интересно, и если вы разрабатываете в основном веб -контент, а не приложения, это особенно полезно. Это инструмент/каркас для сборки Web Dev, который не зависит от какой -либо структуры. Вы можете импортировать любые внешние библиотеки/структуры или нативные модули ES для производства.
Сгенерированный файл ядра в Dist Directory может использоваться отдельно на любом веб -сайте. Поддержка библиотеки компонентов JS, HTML и SASS автоматически упакована. Он используется для разработки полного статического веб-сайта (шаблоны HTML или для динамической интеграции языка).
Демонстрация зависит от jQuery (вы можете полностью переписать сценарий, если это необходимо). И
distне связывает какую-либо стороннюю библиотеку сценариев и стилей, все библиотеки загружаются извне в файле HTML.
UIX Kit теперь находится в режиме долгосрочной поддержки (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, в настоящее время протестированная до узла 18+), возможно, новая версия NPM будет противоречить старой версии NPM, используйте следующую команду для установки зависимостей:$ npm install --legacy-peer-depsЕсли установка по-прежнему не удается, используйте этот метод: Удалите DevDependencies в
package.json, удалить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/примеры/
а) Как использовать модули?
Вы можете индивидуальные модули того, что импортировать в src/components/_app-load.ts и src/components/_app-load-rtl.ts . Поскольку модули импортируются слишком много, вам нужно подождать не менее 5,5 секунд (значение по умолчанию). Вы можете установить время ожидания компиляции в webpack.config.js в соответствии с импортированными модулями, которые вы хотите.
б) конфигурация информации о сайте
Вы можете обновить заполнители в шаблонах, изменяя конфигурацию информации сайта 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 Update Проверка проверка.
Решение:
$ 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 Container: 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 . Чтобы заставить его работать, нам нужно импортировать глобальные переменные или функции в файле index.js.
Одновременно, теперь вы готовы импортировать свои таблицы стилей для использования с этим компонентом. Импортный файл SASS/SCSS в src/components/demo-module/js/index.js .
Так:.
/ *
*************************************
* < ! -- 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 Kit не является фреймворком JavaScript, вы можете использовать любые сторонние библиотеки для создания ваших пользовательских стилей модулей и сценариев анимации наиболее интуитивно понятным образом.
Поиск ошибок, отправка запросов на притяжение или улучшение наших документов - любой вклад приветствуется и высоко ценится. Чтобы начать, перейдите к нашим руководящим принципам взноса. Спасибо!
выпуски
| Хром | Firefox | Край | Т.е. | Сафари | Опера | ios | Android |
|---|---|---|---|---|---|---|---|
| > = 49 | > = 45 | > = 14 | > = 11 | > = 9 | > = 30 | > = 10 | > = 4,4 |
Лицензирован под MIT.
