OSCHINA-MIRROR/xizon-Uix-Kit

Uix Kit — это не фреймворк, а набор инструментов для создания пользовательского интерфейса (UI), основанный на некоторых распространённых библиотеках для разработки красивых адаптивных веб-сайтов.

Uix Kit не является структурой повторно используемых компонентов. Он основан преимущественно на пользовательских CSS и JavaScript. Это интересный инструмент, который может быть особенно полезен при разработке в основном веб-контента, а не приложений. Uix Kit представляет собой инструмент для сборки веб-разработчика, не зависящий от какого-либо фреймворка. Вы можете импортировать любые внешние библиотеки или собственные модули ES для производства.

Сгенерированный основной файл в каталоге dist можно использовать отдельно на любом веб-сайте. Поддерживаются компоненты JS, HTML и SASS, автоматически упакованные в библиотеку. Они используются для разработки полностатического веб-сайта (HTML-шаблоны или для интеграции динамических языков).

Демонстрация зависит от jQuery (при необходимости вы можете полностью переписать сценарий). Каталог dist НЕ включает сторонние скрипты и библиотеки стилей, все библиотеки загружаются извне в HTML-файл.

Сейчас Uix Kit находится в режиме долгосрочной поддержки (LTS).

Версия React — собственная структура для справки

Демо

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   --------------------------- # Основная документация
├── CHANGELOG.md   ------------------------ # Журнал изменений
├── CONTRIBUTING.md   --------------------- # Ссылки на внешние ресурсы
├── LICENSE     --------------------------- # Лицензия
├── webpack.config.js  -------------------- # Файл конфигурации веб-пакета
├── server.js  ---------------------------- # Конфигурация локального сервера
├── package.json  ------------------------- # Файл конфигурации проекта (здесь можно изменить информацию о сайте)
├── package-lock.json
├── dist/
│   ├── css/
│   │   ├── uix-kit.css  ------------------ # Основной файл CSS
│   │   ├── uix-kit.css.map
│   │   ├── uix-kit.min.css  -------------- # Основной файл CSS, используемый для производства
│   │   ├── uix-kit.min.css.map
│   │   ├── uix-kit-rtl.css   ------------- # Основной RTL-файл CSS
│   │   └── uix-kit-rtl.css.map
``` **Почему стоит использовать его**

* В dist не связываются никакие сторонние скрипты и библиотеки стилей, все библиотеки загружаются извне в HTML-файл.
* Не является структурой повторно используемых компонентов.
* Это не фреймворк JavaScript.
* Используется для создания полностью статического веб-сайта (HTML-шаблоны или для интеграции динамических языков).
* Подходит для разработки веб-сайтов с визуальным взаимодействием и шаблонов WordPress.
* Соответствует стандартам W3C и SEO.
* Управление областью действия с помощью именования BEM, поэтому основной проект Uix Kit не конфликтует с другими проектами.
* Автоматическое создание оглавления для каждого комментария модуля имени.
* Каждый модуль состоит из файлов SASS / SCSS, JavaScript и HTML.
* Встроенная стратегия проверки для TypeScript и React. (Такие скрипты встраиваются на страницу, а не во весь проект).
* Совместимость с Bootstrap 5.x (вы также можете удалить таблицы стилей Bootstrap).
* Предоставляет общие компоненты и макеты веб-страниц.
* Полный каталог примеров для самостоятельной разработки адаптивного веб-сайта без среды разработки Node.js.
* Демоверсия зависит от jQuery (при необходимости вы можете полностью переписать сценарий).

**Начало работы**

Вам потребуется настроить [node](https://nodejs.org/) на вашем компьютере. Это выведет созданные дистрибутивы в `./dist/*` и `./examples/*.html`.

**Шаг 1.** Используйте NPM (найдите текущий каталог проекта и введите следующую команду) или загрузите последнюю версию с [Github](https://github.com/xizon/uix-kit). Для nodejs вам необходимо установить некоторые зависимости.

```sh
$ 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

Если установка по-прежнему завершается неудачно, воспользуйтесь следующим методом: удалите devDependencies в package.json, удалите файл package-lock.json и... Шрифт-вес: 900; шрифт-дисплей: $фа-шрифт-дисплей; источник: URL('../dist/fonts/...eot'); источник: URL('../dist/fonts/...eot?#iefix') формат('встроенный-opentype'), URL('../dist/fonts/...woff2') формат('woff2'), URL('../dist/fonts/...woff') формат('woff'), URL('../dist/fonts/...ttf') формат('truetype'), URL('../dist/fonts/...svg#fontawesome') формат('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>
        /*
        * Некоторые глобальные переменные. НЕ изменяйте имена этих переменных. 
        * Эти переменные используются в `uix-kit.min.js`.
        *
        */ 
        var REVISION     = "1.0.0",
            APP_ROOTPATH = {
                "templateUrl" : "", //Если файл находится в корневом каталоге, вы можете оставить его пустым. Если в другом каталоге, можно написать: "/blog"
                "homeUrl"     : "",  //Например, https://uiux.cc
                "ajaxUrl"     : ""   //Например, https://uiux.cc/wp-admin/admin-ajax.php
            };
        

        /*
        * Исправлена ошибка Cannot read property 'fn' of undefined для jQuery 1.xx.x.
        *
        */
        window.$ = window.jQuery;
    </script>
    <script src="../dist/js/uix-kit.min.js?ver=1.0.0"></script>
    
</body>

</html>

2. PSD Grid Templates

Вы можете скачать соответствующие файлы PSD с сеткой.

misc/grid/bootstrap3_1170_grid_web.psd (Default Container: 1170px)
misc/grid/bootstrap3_1278_grid_web.psd (XL Container: 1278px)
misc/grid/bootstrap3_1410_grid_web.psd (XXL Container: 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:
``` **Примечание:** вы можете вызвать скрипт указанного модуля, который обычно используется для обратных вызовов AJAX-запроса из асинхронного метода. Демо-код здесь:

```sh
import { UixModuleInstance } from '@uixkit/core/_global/js';

if (UixModuleInstance.DEMO_MODULE) UixModuleInstance.DEМО_MODULE.pageLoaded();
if (UixModuleInstance.DEMO_MODULE) UixModuleInstance.DEМО_MODULE.documentReady($);

Поскольку Uix Kit не является фреймворком JavaScript, вы можете использовать любые сторонние библиотеки для создания собственных стилей модулей и сценариев анимации наиболее интуитивно понятным способом.

Вклад в проект

Поиск ошибок, отправка запросов на вытягивание или улучшение наших документов — любой вклад приветствуется и высоко ценится. Чтобы начать работу, ознакомьтесь с нашими рекомендациями по внесению вклада (CONTRIBUTING.md). Спасибо!

Журнал изменений

releases

Поддержка браузеров

Chrome	Firefox	Edge	IE	Safari	Opera	iOS	Android
>= 49	>= 45	>=14	>=11	>= 9	>= 30	>=10	>=4.4

Поддерживаемые среды разработки

— React 18 +; — TypeScript 4.x.x +; — Babel 7.x.x +; — Webpack 5.x.x; — Express 4.x.x.

Лицензирование

Лицензия MIT (https://opensource.org/licenses/MIT).