Всем привет!
При разработке тем и выполнении проектов вам часто необходимо выполнить некоторую настройку внешнего кода. В этом быстрорастущем Интернете важны эффективность и качество. Время - деньги!!! Используете шаблоны HTML5? неудобно. Используете какие-то темы? Трудно перепланировать. Я потратил много времени, исследуя способы улучшить свою работу.
Я выпустил комплект для улучшения качества и эффективности клиентской разработки базовой станции. Uix Kit был создан для быстрого создания веб-сайтов, может быть применен к теме WordPress и веб-сайту HTML. Его очень просто и легко расширить. Что еще более важно, это совершенно бесплатно.
💥 Uix Kit - это не фреймворк, а просто набор инструментов пользовательского интерфейса на основе некоторых распространенных библиотек для создания красивого адаптивного веб-сайта.
Uix Kit - это не многократно используемая структура компонентов, в основном на основе настраиваемого CSS и JavaScript. Определенно интересно, и если вы разрабатываете в основном веб-контент, а не приложения, это особенно полезно.
Его можно использовать отдельно или объединять компоненты и сеточные системы с помощью начальной загрузки. Поддержка автоматически упакованных библиотек компонентов JS, HTML и SASS. Автоматически конвертируйте ES6 JS в ES5, используя Babel в этом шаблоне.
Начиная
Сделайте более 120+ компонентов, которые можно носить снова и снова!
Uix Kit можно использовать отдельно или объединять компоненты и сеточные системы с помощью начальной загрузки. Независимо от размера экрана, контент веб-сайта, естественно, будет соответствовать заданному разрешению. Использование Uix Kit сэкономит вам много времени на создание ваших проектов. Он поддерживает 3D- и 2D-рендеринг с помощью three.js и pixi.js. Обычно автоматическое создание файлов ядра с помощью Webpack для каждого модуля (содержит файлы .js, .scss, .html).
- Не многократно используемая структура компонентов
- Не JavaScript-фреймворк
- Среда разработки на основе Webpack, представляющая собой интуитивно понятную систему инструментов.
- Используйте любые библиотеки JavaScript по своему вкусу для создания стилей и сценариев анимации.
- Подходит для разработки веб-сайтов с визуальным взаимодействием и шаблонов WordPress.
- Стандарт W3C и SEO
- Контролируйте область действия с помощью БЭМ-именования, поэтому основной проект Uix Kit не конфликтует с другими проектами.
- Автоматически создавать оглавление для каждого комментария модуля с названием
- Каждый модуль состоит из файлов SASS / SCSS, JavaScript и HTML.
- Сделайте фундамент для архитектуры React
- Совместим с Bootstrap 4.x
- Предоставляет общие компоненты и макеты веб-страницы
- Используя ES6 для импорта или экспорта нескольких модулей, сторонние плагины могут использовать чистый метод слияния файлов и не импортировать и экспортировать
- Полный каталог примеров для самостоятельной разработки адаптивного веб-сайта без среды разработки Node.js
Как использовать?
Вам потребуется настроить узел на вашем компьютере. Это выведет построенные распространяемые файлы в ./dist/* и ./examples/*.html.
Шаг 1. Используйте NPM (найдите текущий каталог проекта и введите следующую команду.) Или загрузите последнюю версию с Github. Для nodejs вам необходимо установить некоторые зависимости.
$ npm install uix-kit
Или клонируйте репо, чтобы получить все исходные файлы, включая сценарии сборки:
$ git clone git://github.com/xizon/uix-kit.git
Шаг 2. Во-первых, используйте абсолютный путь к вашей "uix-kit/" папке.
$ cd /{your_directory}/uix-kit
Шаг 3. Прежде чем приступить к разработке, убедитесь, что у вас установлено Node 10+. После этого запустите следующий код в основном каталоге, чтобы установить зависимости модуля узла.
$ sudo npm install --only=dev --unsafe-perm --production
Шаг 4. Запустите следующий код, чтобы войти в режим разработки. Преобразованные файлы ES5 будут созданы.
$ npm run build
Шаг 5. Когда вы это сделаете, это запустит сервер, к которому можно будет получить доступ по адресу
http://localhost:8080/examples/
Примечание:
ОШИБКА: проверка обновления npm завершилась неудачно.
$ sudo chown -R $USER:$(id -gn $USER) /Users/{username}/.config
Структуры
Вы можете настроить эти файлы в соответствии с различными потребностями сайта, который вам нужен :-)
uix-kit/ ├── README.md ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENSE ├── webpack.config.js configuration file ├── package.json ├── package-lock.json ├── dist/ │ ├── css/ │ │ ├── uix-kit.css │ │ ├── uix-kit.css.map │ │ ├── uix-kit.min.css │ │ ├── uix-kit.min.css.map │ │ ├── uix-kit-rtl.css │ │ ├── uix-kit-rtl.css.map │ │ ├── uix-kit-rtl.min.css │ │ └── uix-kit-rtl.min.css.map │ └── js/ │ │ ├── uix-kit.js │ │ ├── uix-kit.js.map │ │ ├── uix-kit.min.js │ │ ├── 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/ │ └── grid/ ├── src/ │ ├── third-party-plugins/ │ ├── components/ │ │ ├── _app-load.js │ │ ├── _app-load-rtl.js │ │ ├── _global/ │ │ ├── _main/ │ │ └── */ ├── examples/ │ ├── *.html │ └── assets/ │ │ ├── css/ │ │ ├── fonts/ │ │ ├── images/ │ │ ├── videos/ │ │ ├── models/ │ │ ├── json/ │ │ └── js/ └──
Система строительных лесов
Согласно новой системе строительных лесов с webpack, он в основном используется для создания любого проекта из стандартизированной файловой структуры.
Вы можете обновить заполнители в шаблонах, изменив конфигурацию информации о сайте 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 v4.",
...
}
Заключение
Если он вам нравится, вы можете использовать его для любых целей. Если хочешь, можешь дать мне чашку кофе и позволить мне проводить больше времени, делая это лучше. Короче говоря, я надеюсь, что мой продукт поможет вам в реализации проекта.
Спасибо за чтение. Хочу больше? Посетите мой сайт UIUX Lab
