uix kit Download - uix kit Quellcode Download

UIX Kit

Machen Sie mehr als 120 Komponenten, um immer wieder zu tragen!

Das UIX -Kit ist kein Framework, nur ein UI -Toolkit, das auf einigen gemeinsamen Bibliotheken basiert, um eine wunderschöne reaktionsschnelle Website zu erstellen.

Das UIX -Kit ist keine wiederverwendbare Komponentenstruktur, hauptsächlich benutzerdefinierte CSS und JavaScript -basiert. Auf jeden Fall interessant, und wenn Sie hauptsächlich Webinhalte und nicht Anwendungen entwickeln, ist dies besonders nützlich. Es handelt sich um ein Web -Dev -Build -Tool/ein Gerüst, das nicht von einem Framework abhängt. Sie können alle externen Bibliotheken/Frameworks oder nativen ES -Module für die Produktion importieren.

Die generierte Kerndatei im DIST -Verzeichnis kann in jeder Website separat verwendet werden. Unterstützen Sie die Bibliothek JS, HTML und SASS -Komponenten automatisch verpackt. Es wird verwendet, um die vollständige statische Website (HTML-Vorlagen oder für dynamische Sprachintegration) zu entwickeln.

Die Demo hängt von JQuery ab (Sie können das Skript bei Bedarf vollständig umschreiben). Und dist bündet keine Drittanbieter-Skript- und Stilbibliothek, alle Bibliotheken werden extern in der HTML-Datei geladen.

Das UIX -Kit befindet sich jetzt im Langzeit -Support (LTS) -Modus.

React Version - Native Gerüst als Referenz

Englische Dokumentation
中文版说明文档

Demo

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

GitHub -Seiten können nur statische Inhalte bedienen, und es gibt keine Möglichkeit, PHP auszuführen oder AJAX -Anforderungen auf den Seiten zu erhalten. Sie müssen den Link unten besuchen, um einige spezielle Demos zu sehen?

https://uiux.cc/uix-kit

Inhaltsverzeichnis

Erste Schritte mit Videos
Warum es benutzen?
Dateistrukturen
Erste Schritte
HTML -Vorlage
So erstellen Sie ein benutzerdefiniertes Modul？
Beitragen
Changelog
Browserunterstützung
Unterstützte Entwicklungsumgebung
Lizenzierung

Erste Schritte mit Videos

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

Dateistrukturen

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

Warum es benutzen?

dist bündelt keine Drittanbieter-Skript- und Stilbibliothek, alle Bibliotheken werden extern in der HTML-Datei geladen.
Keine wiederverwendbare Komponentenstruktur
Kein JavaScript -Framework
Es wird verwendet, um die vollständige statische Website (HTML-Vorlagen oder für dynamische Sprachintegration) zu erstellen.
Geeignet für die Entwicklung von Websites für visuelle Interaktion und WordPress -Vorlagen
W3C Standard und SEO
Steuerungsumfang mit BEM -Namens -Namen, so
Generieren Sie für jeden Modul -Kommentar des Namens automatisch eine Inhaltsverzeichnis
Jedes Modul besteht aus SASS / SCSS-, JavaScript- und HTML -Dateien
Eingebettete Verifizierungsstrategie für Typenkripte und Reaktionen . (Solche Skripte sind in die Seite eingebettet, nicht das gesamte Projekt)
Kompatibel mit Bootstrap 5.x (Sie können auch die Stylesheets von Bootstrap entfernen)
Bietet ein gemeinsames Webseitenkomponenten und -layouts
Das vollständige Verzeichnis von Beispielen, um eine reaktionsschnelle Website unabhängig voneinander ohne Node.js Dev -Umgebung zu entwickeln
Die Demo hängt von JQuery ab (Sie können das Skript bei Bedarf vollständig umschreiben)

Erste Schritte

Schnelle Übersicht 1

Schnelle Übersicht 2

Sie müssen einen Knoten -Setup auf Ihrer Maschine haben. Dadurch werden die erstellten Verteilungen an ./dist/* und ./examples/*.html ausgegeben.

Schritt 1. Verwenden Sie NPM (suchen Sie Ihr aktuelles Projektverzeichnis und geben Sie den folgenden Befehl ein) oder laden Sie die neueste Version von GitHub herunter. Für NodeJS müssen Sie einige Abhängigkeiten installieren.

$ sudo npm install uix-kit

Oder klonen Sie das Repo, um alle Quelldateien einschließlich Erstellen von Skripten zu erhalten:

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

Schritt 2. Zuerst verwenden Sie einen absoluten Pfad in Ihr Ordnerverzeichnis "uix-kit/" .

$ cd /{your_directory}/uix-kit

Schritt 3. Bevor Sie alle Dev -Sachen machen, stellen Sie sicher, dass Sie Node 10+ installiert haben. Führen Sie danach den folgenden Code im Hauptverzeichnis aus, um die Abhängigkeiten des Knotenmoduls zu installieren.

$ npm install

Die aktuelle Testumgebung ist `Knoten 18+`, `npm 9+`. Wenn die Abhängigkeitsinstallation fehlschlägt (normalerweise daran, dass Sie Ihre NodeJS -Version aktualisiert haben, die derzeit auf Knoten 18+ getestet wurde), kann die neue Version von NPM möglicherweise mit der alten Version von NPM in Konflikt stehen, bitte verwenden Sie den folgenden Befehl, um Abhängigkeiten zu installieren:
$ npm install --legacy-peer-deps
Wenn die Installation noch fehlschlägt, verwenden Sie diese Methode: Entfernen Sie die DevDependenzen in package.json , löschen Sie die Dateipaket package-lock.json und installieren Sie die Abhängigkeiten neu:
$ 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

Schritt 4. Wenn Sie bereit sind, zur Produktion bereitzustellen, erstellen Sie ein Minified -Bundle mit:

$ npm run build

Verwenden von Ctrl + C um es zu stoppen.

Wenn Sie dies getan haben, wird ein Server aufgenommen, auf den unter http://localhost:8080/examples/ zugegriffen werden kann.

Schritt 5. Um die Seite ohne Kompilieren und Verpackungen anzusuchen, führen Sie bitte den folgenden Befehl aus:

$ npm run preview

Alle Seiten können über http://localhost:3000 vorsichtigt werden.

Es gibt jedoch keine Möglichkeit, PHP auszuführen oder eine AJAX -Anfrage auf den Seiten zu erhalten. Sie müssen den Link auf Ihrem Server besuchen oder einen Server über MAMP erstellen. Besuchen Sie dann eine ähnliche URL: http: // localhost: {port}/uix-kit/Beispiele/

Notiz:

a) Wie benutzt ich Module?

Sie können benutzerdefinierte Module von dem importieren, was in src/components/_app-load.ts und src/components/_app-load-rtl.ts importiert werden soll. Da die Module zu viel importiert werden, müssen Sie mindestens 5,5 Sekunden warten (Standardwert). Sie können die Kompilierungswartzeit in webpack.config.js gemäß den gewünschten importierten Modulen festlegen.

b) Site -Info -Konfiguration

Sie können die Platzhalter in Vorlagen aktualisieren, indem Sie die Site -Info -Konfiguration von package.json ändern. So was:

{
  "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) Fehler: NPM -Update -Check fehlgeschlagen.

Lösung:

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

d) Fehler: Knoten Sass Version 6.xx ist nicht mit ^ 4.xx kompatibel

Lösung:

$ npm install [email protected]

e) Wenn Sie die Version des Knotens aktualisieren, führen Sie bitte den folgenden Code aus:

$ sudo npm install
$ sudo npm rebuild node-sass

HTML -Vorlage

1. statischer HTML -Code

 <!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. PSD -Gittervorlagen

Sie können die entsprechenden .psd -Grid -Dateien herunterladen.

misc/grid/bootstrap3_1170_grid_web.psd (Standardbehälter: 1170px)
misc/grid/bootstrap3_1278_grid_web.psd (xl Container: 1278px)
misc/grid/bootstrap3_1410_grid_web.psd (xxl Container: 1410px)

So erstellen Sie ein benutzerdefiniertes Modul

Angenommen, Sie befinden sich im Stammverzeichnis Ihrer Anwendung und möchten Komponenten in src/components/ wie Sie oben angezeigt werden. Sie können ein neues Verzeichnis erstellen und IT- Demo-Modul benennen.

???

Hier ist eine Beispiel für benutzerdefinierte Modulverzeichnisstruktur. Ich habe einige Beispiele für Dateien aufgenommen, die in jedem Ordner sitzen würden:

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

Schritt 1. In diesem Ordner erstellen Sie zwei Subordner: /scss und /js . Wenn Sie RTL unterstützen müssen, erstellen Sie ein anderes /scss-rtl .

Schritt 2. Erstellen Sie eine SASS/SCSS -Datei. Gehen Sie in den src/components/demo-module/scss/ Ordner und erstellen Sie eine Datei mit dem Titel: _style.scss . Bitte importieren Sie globale Variablen oder Funktionen. Hier ist ein Beispiel:

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

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

Schritt 2-2 (optional). Okay, wenn Sie RTL unterstützen müssen. Sie müssen eine neue Sass/SCSS -Datei erstellen. Gehen Sie in die src/components/demo-module/scss-rtl/ Ordner und erstellen Sie eine Datei mit dem Titel: _style.scss . So was:

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

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

Schritt 3. Erstellen Sie eine JS -Datei. Gehen Sie in den src/components/demo-module/js/ Ordner und erstellen Sie eine Datei mit dem Titel: index.js . Damit es funktioniert, müssen wir die globalen Variablen oder Funktionen in Datei index.js importieren.

Gleichzeitig sind Sie jetzt bereit, Ihre Stylesheets für diese Komponente zu importieren. src/components/demo-module/js/index.js

So was:.

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

Schritt 4. Bisher, um das gerade in src/components/_app-load.ts erstellte Modul dynamisch zu importieren. Die einfachste Version importiert direkt die Standardeinstellung:

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

Schritt 4-2 (optional). Wenn Sie RTL unterstützen müssen, in src/components/_app-load-rtl.ts . so was:

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

Diese RTL -Module benötigen kein JavaScript.

Schritt 5 (optional). Sie können auch eine HTML -Datei erstellen, um die Demo dieses Moduls separat auszuführen. Alle HTML -Dateien werden automatisch in die examples/ . Der Demo -Code der HTML -Datei lautet wie folgt:

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

Hinweis: Sie können ein bestimmtes Modulskript aufrufen, das üblicherweise für Rückrufe der AJAX -Anforderung von Asynchronous -Methoden verwendet wird. Der Demo -Code ist hier:

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

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

Da das UIX-Kit kein JavaScript-Framework ist, können Sie alle Bibliotheken von Drittanbietern verwenden, um Ihre benutzerdefinierten Modulstile und Animationsskripte auf intuitivste Weise zu erstellen.

Beitragen

Fehler finden, Pull -Anfragen senden oder unsere Dokumente verbessern - jeder Beitrag ist willkommen und sehr geschätzt. Besuchen Sie unsere Beitragsrichtlinien, um zu beginnen. Danke!