uix kit
Uix Kit Stable(webpack 5+)
¡Haga más de 120 componentes para usar una y otra vez!
UIX Kit no es un marco, solo un conjunto de herramientas de UI basado en algunas bibliotecas comunes para construir un hermoso sitio web receptivo.
El kit UIX no es una estructura de componentes reutilizable, en su mayoría CSS personalizados y basados en JavaScript. Definitivamente interesante, y si está desarrollando principalmente contenido web y no aplicaciones, esto es particularmente útil. Es una herramienta/andamio de desarrollo web que no depende de ningún marco. Puede importar cualquier bibliotecas/marcos externos o módulos ES nativos para la producción.
El archivo central generado en el directorio DIST se puede usar por separado en cualquier sitio web. Soporte de la biblioteca de componentes JS, HTML y SASS empaquetados automáticamente. Se utiliza para desarrollar el sitio web estatal completo (plantillas HTML o para la integración del lenguaje dinámico).
La demostración depende de jQuery (puede reescribir completamente el script si es necesario). Y
distno agrupa ningún script de terceros y biblioteca de estilo, todas las bibliotecas se cargan externamente en el archivo HTML.
El kit UIX ahora está en modo de soporte a largo plazo (LTS).
https://xizon.github.io/uix-kit/examples/
Las páginas de GitHub solo pueden servir contenido estático, y no hay forma de ejecutar PHP o obtener una solicitud AJAX en las páginas. ¿Debe visitar el enlace a continuación para ver algunas demostraciones especiales?
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 no agrupa ningún script de terceros y biblioteca de estilo, todas las bibliotecas se cargan externamente en el archivo HTML.
Deberá tener una configuración de nodo en su máquina. Eso emitirá los distribuibles construidos a ./dist/* y ./examples/*.html .
Paso 1. Use NPM (ubique su directorio actual del proyecto e ingrese el siguiente comando). O descargue la última versión de GitHub. Para NodeJs debe instalar algunas dependencias.
$ sudo npm install uix-kitO clonar el repositorio para obtener todos los archivos de origen, incluidos los scripts de compilación:
$ git clone git://github.com/xizon/uix-kit.git Paso 2. Primero, usando una ruta absoluta en su directorio de carpeta "uix-kit/" .
$ cd /{your_directory}/uix-kit Paso 3. Antes de hacer todas las cosas de desarrollo, asegúrese de tener Node 10+ instalado. Después de eso, ejecute el siguiente código en el directorio principal para instalar las dependencias del módulo de nodo.
$ npm installEl entorno de prueba actual es `nodo 18+`, `npm 9+`. Si la instalación de dependencia falla (por lo general es porque ha actualizado su versión de NodeJS, actualmente probada en el nodo 18+), tal vez la nueva versión de NPM confíe en la versión anterior de NPM, use el siguiente comando para instalar dependencias:$ npm install --legacy-peer-depsSi la instalación aún falla, utilice este método: elimine DevDependencies en
package.json, elimine el archivopackage-lock.jsony reinstale las dependencias:$ 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
Paso 4. Cuando esté listo para implementar la producción, cree un paquete minificado con:
$ npm run build Usando Ctrl + C para detenerlo.
Cuando lo haya hecho, esto girará un servidor al que se puede acceder en http://localhost:8080/examples/
Paso 5. Para obtener una vista previa de la página sin compilar y empacar, ejecute el siguiente comando:
$ npm run preview Todas las páginas se pueden ver a través de http://localhost:3000 .
Pero no hay forma de ejecutar PHP o obtener una solicitud AJAX en las páginas. Debe visitar el enlace en su servidor o construir un servidor a través de MAMP. Luego visite una URL similar: http: // localhost: {puerto}/uix-kit/ejemplos/
a) ¿Cómo usar módulos?
Puede personalizar módulos de qué importar en src/components/_app-load.ts y src/components/_app-load-rtl.ts Debido a que los módulos se importan demasiado, debe esperar al menos 5.5 segundos (valor predeterminado). Puede establecer el tiempo de espera de compilación en webpack.config.js de acuerdo con los módulos importados que desee.
b) Configuración de información del sitio
Puede actualizar los marcadores de posición en plantillas modificando la configuración de información del sitio de package.json . Como esto:
{
"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) Error: la verificación de actualización de NPM falló.
Solución:
$ sudo chown -R $USER : $( id -gn $USER ) /Users/{username}/.configd) Error: el nodo SASS La versión 6.xx no es compatible con ^ 4.xx
Solución:
$ npm install [email protected]e) Si actualiza la versión de Node, ejecute el siguiente código:
$ 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 >Puede descargar los archivos de cuadrícula .psd correspondientes.
misc/grid/bootstrap3_1170_grid_web.psd (contenedor predeterminado: 1170px)misc/grid/bootstrap3_1278_grid_web.psd (contenedor xl: 1278px)misc/grid/bootstrap3_1410_grid_web.psd (contenedor xxl: 1410px) Suponiendo que se encuentre en el directorio raíz de su aplicación y desea crear componentes dentro de src/components/ como muestra anteriormente. Puede crear un nuevo directorio y nombrarlo Demo-Module .
????
Aquí hay una estructura de directorio de módulos personalizados de muestra, he incluido algunos ejemplos de archivos que se ubicarían dentro de cada carpeta:
uix-kit/
├── src/
│ ├── components/
│ │ ├── _app-load.ts
│ │ ├── _app-load-rtl.ts
│ │ └── demo-module/
│ │ ├── scss/ * .scss
│ │ ├── scss-rtl/ * .scss
│ │ ├── js/ * .(js | ts | tsx)
│ │ └── * .html
└── Paso 1. Dentro de esa carpeta Cree dos subpoletas: /scss y /js . Si necesita admitir RTL, cree otro /scss-rtl .
Paso 2. Cree un archivo SASS/SCSS. Vaya a la carpeta src/components/demo-module/scss/ crea un archivo llamado: _style.scss . Importa variables o funciones globales. Aquí hay un ejemplo:
/ * ======================================================
< ! -- Demo Module Stylesheets -- >
/ * ====================================================== * /
@import ' @uixkit/core/_global/scss/_variable-and-mixin.scss ' ;
.app-demo {
font-size: $basic -font-size ;
text-align: left ;
} Paso 2-2 (opcional). Muy bien, así que si necesita admitir RTL. Necesita crear un nuevo archivo SASS/SCSS. Vaya a la carpeta src/components/demo-module/scss-rtl/ y cree un archivo llamado: _style.scss . Como esto:
/ * ======================================================
< ! -- Demo Module Stylesheets -- >
/ * ====================================================== * /
@import ' @uixkit/core/_global/scss/_variable-and-mixin.scss ' ;
.app-demo {
text-align: right ;
} Paso 3. Cree un archivo JS. Vaya a la carpeta src/components/demo-module/js/ y cree un archivo llamado: index.js . Para que funcione, necesitamos importar las variables o funciones globales en File Index.js.
Simultáneamente, ahora está listo para importar sus hojas de estilo para usar con este componente. Importar archivo SASS/SCSS en src/components/demo-module/js/index.js .
Como esto:.
/ *
*************************************
* < ! -- 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 ) ;
Paso 4. Hasta ahora, para importar dinámicamente el módulo que acaba de crear en src/components/_app-load.ts . La versión más simple importa directamente el valor predeterminado:
import DEMO_MODULE from ' @uixkit/core/demo-module/js ' ; Paso 4-2 (opcional). Si necesita admitir RTL, en src/components/_app-load-rtl.ts . como esto:
import ' @uixkit/core/demo-module/scss-rtl/_style.scss ' ;Estos módulos RTL no necesitan JavaScript.
Paso 5 (opcional). También puede crear un archivo HTML para ejecutar la demostración de este módulo por separado, todos los archivos HTML se exportarán automáticamente a los examples/ . El código de demostración del archivo HTML es el siguiente:
< ! 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 ' )Nota: Puede llamar a un script de módulo especificado que se usa comúnmente para devoluciones de llamada de la solicitud AJAX desde el método asíncrono. El código de demostración está aquí:
import { UixModuleInstance } from ' @uixkit/core/_global/js ' ;
if ( UixModuleInstance.DEMO_MODULE ) UixModuleInstance.DEMO_MODULE.pageLoaded ();
if ( UixModuleInstance.DEMO_MODULE ) UixModuleInstance.DEMO_MODULE.documentReady($) ;Dado que UIX Kit no es un marco JavaScript, puede usar cualquier biblioteca de terceros para construir sus estilos de módulo personalizados y scripts de animación de la manera más intuitiva.
Encontrar errores, enviar solicitudes de extracción o mejorar nuestros documentos: cualquier contribución es bienvenida y muy apreciada. Para comenzar, diríjase a nuestras pautas de contribución. ¡Gracias!
lanzamientos
| Cromo | Firefox | Borde | ES DECIR | Safari | Ópera | iOS | Androide |
|---|---|---|---|---|---|---|---|
| > = 49 | > = 45 | > = 14 | > = 11 | > = 9 | > = 30 | > = 10 | > = 4.4 |
Con licencia bajo el MIT.
