Téléchargement uix kit - Téléchargement du code source uix kit

Kit uix

Faites plus de plus de 120 composants à porter encore et encore!

UIX Kit n'est pas un cadre, juste une boîte à outils d'interface utilisateur basée sur certaines bibliothèques communes pour créer un beau site Web réactif.

Le kit UIX n'est pas une structure de composants réutilisable, principalement basée sur CSS et JavaScript personnalisées. Certainement intéressant, et si vous développez principalement du contenu Web et non des applications, cela est particulièrement utile. Il s'agit d'un outil / échafaudage de création de développement Web qui ne dépend d'aucun cadre. Vous pouvez importer des bibliothèques / frameworks externes ou des modules ES natifs pour la production.

Le fichier de base généré dans le répertoire DIST peut être utilisé séparément sur n'importe quel site Web. Prise en charge de la bibliothèque de composants JS, HTML et SASS emballée automatiquement. Il est utilisé pour développer le site Web complet (modèles HTML ou pour l'intégration du langage dynamique).

La démo dépend de jQuery (vous pouvez complètement réécrire le script si nécessaire). Et dist n'entraîne aucune bibliothèque de scripts et de style tiers, toutes les bibliothèques sont chargées à l'extérieur dans le fichier HTML.

Le kit UIX est maintenant en mode de support à long terme (LTS).

React Version - Échafaudage natif pour référence

Documentation en anglais
中文版说明文档

Démo

https://xizon.github.io/uix-kit/examples/

Les pages GitHub ne peuvent servir que du contenu statique, et il n'y a aucun moyen d'exécuter PHP ou d'obtenir une demande Ajax sur les pages. Vous devez visiter le lien ci-dessous pour voir des démos spéciales?

https://uiux.cc/uix-kit

Table des matières

Prendre des vidéos
Pourquoi l'utiliser
Structures de fichiers
Commencer
Modèle HTML
Comment créer un module personnalisé？
Contributif
Changelog
Support de navigateur
Environnement de développement soutenu
Licence

Prendre des vidéos

https://www.youtube.com/watch?v=ardy9cr-1-E

Structures de fichiers

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/
└──

Pourquoi l'utiliser

dist n'entraîne aucune bibliothèque de scripts et de style tiers, toutes les bibliothèques sont chargées à l'extérieur dans le fichier HTML.
Pas une structure de composants réutilisable
Pas un framework JavaScript
Il est utilisé pour créer le site Web complet (modèles HTML ou pour l'intégration du langage dynamique)
Convient pour développer des sites Web d'interaction visuelle et des modèles WordPress
Norme W3C et référencement
Contrôle de la portée avec la dénomination de BEM, donc le projet de kit UIX Core n'est pas en conflit avec les autres projets
Générez automatiquement une table des matières pour chaque commentaire de module du nom
Chaque module se compose de fichiers SASS / SCSS, JavaScript et HTML
Stratégie de vérification intégrée pour dactylographie et réagir . (De tels scripts sont intégrés dans la page, pas le projet entier)
Compatible avec Bootstrap 5.x (vous pouvez également supprimer les feuilles de style de bootstrap)
Fournit une page Web commune composants et dispositions
Le répertoire complet des exemples afin de développer un site Web réactif indépendamment sans environnement Node.js Dev
La démo dépend de jQuery (vous pouvez complètement réécrire le script si nécessaire)

Commencer

Présentation rapide 1

Aperçu rapide 2

Vous devrez avoir la configuration du nœud sur votre machine. Qui sortira les distribuables construits à ./dist/* et ./examples/*.html .

Étape 1. Utilisez NPM (Localisez votre répertoire actuel du projet et entrez la commande suivante.) Ou téléchargez la dernière version depuis GitHub. Pour NodeJS, vous devez installer certaines dépendances.

$ sudo npm install uix-kit

Ou cloner le dépôt pour obtenir tous les fichiers source, y compris la construction de scripts:

$ git clone git://github.com/xizon/uix-kit.git

Étape 2. Premièrement, en utilisant un chemin absolu dans votre répertoire de dossier "uix-kit/" .

$ cd /{your_directory}/uix-kit

Étape 3. Avant de faire tous les trucs de développement, assurez-vous que Node 10+ soit installé. Après cela, exécutez le code suivant dans le répertoire principal pour installer les dépendances du module de nœud.

$ npm install

L'environnement de test actuel est `nœud 18 +`, `npm 9 +`. Si l'installation de dépendance échoue (généralement c'est parce que vous avez mis à niveau votre version NodeJS, actuellement testée au nœud 18+), peut-être que la nouvelle version de NPM entrera en conflit avec l'ancienne version de NPM, veuillez utiliser la commande suivante pour installer les dépendances:
$ npm install --legacy-peer-deps
Si l'installation échoue toujours, veuillez utiliser cette méthode: supprimez les DevDependces dans package.json , supprimez package-lock.json et réinstallez les dépendances:
$ 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

Étape 4. Lorsque vous êtes prêt à vous déployer en production, créez un bundle minifié avec:

$ npm run build

Utilisation Ctrl + C pour l'arrêter.

Lorsque vous avez fait, cela fera tourner un serveur accessible à http://localhost:8080/examples/

Étape 5. Pour prévisualiser la page sans compilation et emballage, veuillez exécuter la commande suivante:

$ npm run preview

Toutes les pages peuvent être présentées via http://localhost:3000 .

Mais il n'y a aucun moyen d'exécuter PHP ou d'obtenir une demande Ajax sur les pages. Vous devez visiter le lien sur votre serveur ou créer un serveur via MAMP. Visitez ensuite une URL similaire: http: // localhost: {port} / uix-kit / exemples /

Note:

a) Comment utiliser des modules?

Vous pouvez personnaliser des modules de quoi importer dans src/components/_app-load.ts et src/components/_app-load-rtl.ts . Parce que les modules sont trop importés, vous devez attendre au moins 5,5 secondes (valeur par défaut). Vous pouvez définir le temps d'attente de compilation dans webpack.config.js en fonction des modules importés souhaités.

b) Configuration des informations du site

Vous pouvez mettre à jour les espaces réservés dans les modèles en modifiant la configuration des informations sur le site de package.json . Comme ça:

{
  "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) Erreur: le chèque de mise à jour NPM a échoué.

Solution:

$ sudo chown -R $USER : $( id -gn $USER ) /Users/{username}/.config

D) Erreur: Node Sass version 6.xx n'est pas compatible avec ^ 4.xx

Solution:

$ npm install [email protected]

e) Si vous mettez à niveau la version du nœud, veuillez exécuter le code suivant:

$ sudo npm install
$ sudo npm rebuild node-sass

Modèle HTML

1. Code HTML statique

 <!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 >

2. Modèles de grille PSD

Vous pouvez télécharger les fichiers de grille .psd correspondants.

misc/grid/bootstrap3_1170_grid_web.psd (conteneur par défaut: 1170px)
misc/grid/bootstrap3_1278_grid_web.psd (XL CONTEETER: 1278PX)
misc/grid/bootstrap3_1410_grid_web.psd (conteneur XXL: 1410px)

Comment créer un module personnalisé

En supposant que vous êtes dans le répertoire racine de votre application et que vous souhaitez créer des composants à l'intérieur src/components/ comme vous le montrez ci-dessus. Vous pouvez créer un nouveau répertoire et le nommer de démo-module .

???

Voici un exemple de structure de répertoire de module personnalisé, j'ai inclus quelques exemples de fichiers qui se trouveraient à l'intérieur de chaque dossier:

uix-kit/
├── src/
│   ├── components/
│   │     ├── _app-load.ts
│   │     ├── _app-load-rtl.ts
│   │     └── demo-module/
│   │              ├── scss/ * .scss
│   │              ├── scss-rtl/ * .scss
│   │              ├── js/ * .(js | ts | tsx)
│   │              └── * .html
└──

Étape 1. À l'intérieur de ce dossier, créez deux sous-dossiers: /scss et /js . Si vous devez prendre en charge RTL, créez un autre /scss-rtl .

Étape 2. Créez un fichier SASS / SCSS. Allez dans le dossier src/components/demo-module/scss/ et créez un fichier appelé: _style.scss . Veuillez importer des variables ou des fonctions globales. Voici un exemple:

/ * ====================================================== 
   < ! -- Demo Module Stylesheets -- > 
/ * ====================================================== * /
@import ' @uixkit/core/_global/scss/_variable-and-mixin.scss ' ;

.app-demo {
	font-size: $basic -font-size ;
    text-align: left ;
}

Étape 2-2 (facultative). Très bien, donc si vous avez besoin de prendre en charge RTL. Vous avez besoin de créer un nouveau fichier SASS / SCSS. Allez dans le dossier src/components/demo-module/scss-rtl/ et créez un fichier appelé: _style.scss . Comme ça:

/ * ====================================================== 
   < ! -- Demo Module Stylesheets -- > 
/ * ====================================================== * /
@import ' @uixkit/core/_global/scss/_variable-and-mixin.scss ' ;

.app-demo {
    text-align: right ;
}

Étape 3. Créez un fichier JS. Allez dans le dossier src/components/demo-module/js/ et créez un fichier appelé: index.js . Afin de le faire fonctionner, nous devons importer les variables ou les fonctions globales dans File index.js.

Simultanément, vous êtes maintenant prêt à importer vos feuilles de style à utiliser avec ce composant. Importez le fichier SASS / SCSS dans src/components/demo-module/js/index.js .

Comme ça:.

/ * 
 *************************************
 * < ! -- 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 ) ;

Étape 4. Jusqu'à présent, pour importer dynamiquement le module que vous venez de créer dans src/components/_app-load.ts . La version la plus simple importe directement la valeur par défaut:

import DEMO_MODULE from ' @uixkit/core/demo-module/js ' ;

Étape 4-2 (facultative). Si vous devez prendre en charge RTL, dans src/components/_app-load-rtl.ts . comme ça:

import ' @uixkit/core/demo-module/scss-rtl/_style.scss ' ;

Ces modules RTL n'ont pas besoin de JavaScript.

Étape 5 (facultative). Vous pouvez également créer un fichier HTML pour exécuter la démo de ce module séparément, tous les fichiers HTML seront automatiquement exportés dans les examples/ . Le code de démonstration du fichier HTML est le suivant:

 < ! 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 ' )

Remarque: Vous pouvez appeler un script de module spécifié qui est couramment utilisé pour les rappels de la demande Ajax de la méthode asynchrone. Le code de démonstration est là:

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

if ( UixModuleInstance.DEMO_MODULE ) UixModuleInstance.DEMO_MODULE.pageLoaded ();
if ( UixModuleInstance.DEMO_MODULE ) UixModuleInstance.DEMO_MODULE.documentReady($) ;

Étant donné que le kit UIX n'est pas un framework JavaScript, vous pouvez utiliser n'importe quelle bibliothèque tierce pour créer vos styles de module personnalisés et vos scripts d'animation de la manière la plus intuitive.

Contributif

Trouver des bugs, envoyer des demandes de traction ou améliorer nos documents - toute contribution est la bienvenue et très appréciée. Pour commencer, dirigez-vous vers nos directives de contribution. Merci!