uix kit Download - uix kit Sumber Code Unduh

Kit Uix

Buat lebih dari 120+ komponen untuk dipakai lagi dan lagi!

Uix Kit bukan kerangka kerja, hanya toolkit UI berdasarkan beberapa perpustakaan umum untuk membangun situs web responsif yang indah.

Uix Kit bukanlah struktur komponen yang dapat digunakan kembali, sebagian besar CSS khusus dan JavaScript. Jelas menarik, dan jika Anda mengembangkan sebagian besar konten web dan bukan aplikasi ini sangat berguna. Ini adalah alat/perancah Web Dev yang tidak bergantung pada kerangka kerja apa pun. Anda dapat mengimpor pustaka/kerangka kerja eksternal atau modul ES asli untuk produksi.

File inti yang dihasilkan di direktori dist dapat digunakan secara terpisah di situs web mana pun. Dukung Perpustakaan Komponen JS, HTML, dan SASS secara otomatis dikemas. Ini digunakan untuk mengembangkan situs web statis penuh (templat HTML atau untuk integrasi bahasa dinamis).

Demo ini tergantung pada jQuery (Anda dapat sepenuhnya menulis ulang skrip jika diperlukan). Dan dist tidak menggabungkan skrip pihak ketiga dan perpustakaan gaya, semua perpustakaan dimuat secara eksternal dalam file HTML.

UIX Kit sekarang dalam mode Dukungan Jangka Panjang (LTS).

Versi Bereaksi - Perancah Asli untuk Referensi

Dokumentasi bahasa Inggris
中文版说明文档

Demo

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

Halaman GitHub hanya dapat melayani konten statis, dan tidak ada cara untuk menjalankan PHP atau mendapatkan permintaan AJAX di halaman. Anda perlu mengunjungi tautan di bawah ini untuk melihat beberapa demo khusus?

https://uiux.cc/uix-kit

Daftar isi

Memulai dengan video
Mengapa menggunakannya
Struktur file
Memulai
Template html
Cara membuat modul khusus？
Berkontribusi
Changelog
Dukungan Browser
Lingkungan pembangunan yang didukung
Lisensi

Memulai dengan video

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

Struktur file

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

Mengapa menggunakannya

dist tidak menggabungkan skrip pihak ketiga dan perpustakaan gaya, semua perpustakaan dimuat secara eksternal dalam file HTML.
Bukan struktur komponen yang dapat digunakan kembali
Bukan kerangka kerja JavaScript
Ini digunakan untuk membangun situs web statis penuh (templat HTML atau untuk integrasi bahasa yang dinamis)
Cocok untuk mengembangkan situs web interaksi visual dan template WordPress
W3C Standar dan SEO
Ruang lingkup kontrol dengan penamaan Bem, jadi proyek inti Uix kit tidak bertentangan dengan proyek lain
Secara otomatis menghasilkan daftar konten untuk setiap komentar modul dari nama tersebut
Setiap modul terdiri dari file SASS / SCSS, JavaScript dan HTML
Strategi verifikasi tertanam untuk naskah dan bereaksi . (Script seperti itu tertanam di halaman, bukan seluruh proyek)
Kompatibel dengan bootstrap 5.x (Anda juga bisa menghapus stylesheet bootstrap)
Menyediakan komponen dan tata letak halaman web umum
Direktori Contoh Lengkap untuk mengembangkan situs web responsif secara mandiri tanpa lingkungan Node.js Dev
Demo tergantung pada jQuery (Anda dapat sepenuhnya menulis ulang skrip jika diperlukan)

Memulai

Tinjauan cepat 1

Tinjauan cepat 2

Anda harus memiliki pengaturan simpul di mesin Anda. Itu akan menghasilkan distribusi yang dibangun ke ./dist/* dan ./examples/*.html .

Langkah 1. Gunakan NPM (cari direktori proyek Anda saat ini, dan masukkan perintah berikut.) Atau unduh versi terbaru dari GitHub. Untuk nodej Anda harus menginstal beberapa dependensi.

$ sudo npm install uix-kit

Atau klon repo untuk mendapatkan semua file sumber termasuk skrip build:

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

Langkah 2. Pertama, menggunakan jalur absolut ke direktori folder "uix-kit/" Anda.

$ cd /{your_directory}/uix-kit

Langkah 3. Sebelum melakukan semua hal dev, pastikan Anda menginstal Node 10+ . Setelah itu, jalankan kode berikut di direktori utama untuk menginstal dependensi modul node.

$ npm install

Lingkungan uji saat ini adalah `node 18+`, `npm 9+`. Jika instalasi ketergantungan gagal (biasanya karena Anda telah meningkatkan versi nodeJS Anda, yang saat ini diuji ke node 18+), mungkin versi baru NPM akan bertentangan dengan versi lama NPM, silakan gunakan perintah berikut untuk menginstal dependensi:
$ npm install --legacy-peer-deps
Jika instalasi masih gagal, silakan gunakan metode ini: Hapus DevDependencies di package.json , hapus file package-lock.json dan instal ulang dependensi:
$ 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

Langkah 4. Saat Anda siap untuk digunakan untuk produksi, membuat bundel yang lebih kecil dengan:

$ npm run build

Menggunakan Ctrl + C untuk menghentikannya.

Setelah selesai, ini akan memutar server yang dapat diakses di http://localhost:8080/examples/

Langkah 5. Untuk mempratinjau halaman tanpa menyusun dan kemasan, silakan jalankan perintah berikut:

$ npm run preview

Semua halaman dapat dipratinjau melalui http://localhost:3000 .

Tetapi tidak ada cara untuk menjalankan PHP atau mendapatkan permintaan AJAX di halaman. Anda perlu mengunjungi tautan di server Anda, atau membangun server melalui MAMP. Kemudian kunjungi URL serupa: http: // localhost: {port}/uix-kit/contoh/

Catatan:

a) Bagaimana cara menggunakan modul?

Anda dapat modul khusus tentang apa yang akan diimpor di src/components/_app-load.ts dan src/components/_app-load-rtl.ts . Karena modul terlalu banyak diimpor, Anda harus menunggu setidaknya 5,5 detik (nilai default). Anda dapat mengatur waktu tunggu kompilasi di webpack.config.js sesuai dengan modul impor yang Anda inginkan.

b) Konfigurasi Info Situs

Anda dapat memperbarui placeholder dalam templat dengan memodifikasi konfigurasi info situs package.json . Seperti ini:

{
  "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) Kesalahan: Pemeriksaan Pembaruan NPM gagal.

Larutan:

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

D) Kesalahan: Node Sass Versi 6.xx tidak kompatibel dengan ^ 4.xx

Larutan:

$ npm install [email protected]

e) Jika Anda memutakhirkan versi node, harap jalankan kode berikut:

$ sudo npm install
$ sudo npm rebuild node-sass

Template html

1. Kode HTML statis

 <!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. Template Grid PSD

Anda dapat mengunduh file grid .psd yang sesuai.

misc/grid/bootstrap3_1170_grid_web.psd (wadah default: 1170px)
misc/grid/bootstrap3_1278_grid_web.psd (XL Container: 1278px)
misc/grid/bootstrap3_1410_grid_web.psd (kontainer xxl: 1410px)

Cara membuat modul khusus

Dengan asumsi Anda berada di direktori root aplikasi Anda dan ingin membuat komponen di dalam src/components/ seperti yang Anda tunjukkan di atas. Anda dapat membuat direktori baru dan menamainya modul demo .

???

Berikut adalah sampel struktur direktori modul kustom, saya telah menyertakan beberapa contoh file yang akan duduk di dalam setiap folder:

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

Langkah 1. Di dalam folder itu Buat dua sub folder: /scss dan /js . Jika Anda perlu mendukung RTL, buat /scss-rtl lain.

Langkah 2. Buat file SASS/SCSS. Masuk ke src/components/demo-module/scss/ folder dan buat file yang disebut: _style.scss . Harap impor variabel atau fungsi global. Inilah contohnya:

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

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

Langkah 2-2 (opsional). Baiklah, jadi jika Anda perlu mendukung RTL. Anda perlu membuat file SASS/SCSS baru. Masuk ke src/components/demo-module/scss-rtl/ folder dan buat file yang disebut: _style.scss . Seperti ini:

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

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

Langkah 3. Buat file JS. Masuk ke src/components/demo-module/js/ folder dan buat file yang disebut: index.js . Untuk membuatnya berfungsi, kita perlu mengimpor variabel atau fungsi global di file index.js.

Secara bersamaan, sekarang Anda siap mengimpor stylesheet Anda untuk digunakan dengan komponen ini. Impor file sass/scss di src/components/demo-module/js/index.js .

Seperti ini:.

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

Langkah 4. Sejauh ini, untuk mengimpor modul secara dinamis yang baru saja Anda buat di src/components/_app-load.ts . Versi paling sederhana secara langsung mengimpor default:

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

Langkah 4-2 (opsional). Jika Anda perlu mendukung RTL, di src/components/_app-load-rtl.ts . seperti ini:

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

Modul RTL ini tidak memerlukan JavaScript.

Langkah 5 (opsional). Anda juga dapat membuat file HTML untuk menjalankan demo modul ini secara terpisah, semua file HTML akan secara otomatis diekspor ke dalam examples/ . Kode demo file HTML adalah sebagai berikut:

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

Catatan: Anda dapat memanggil skrip modul tertentu yang biasanya digunakan untuk panggilan balik permintaan AJAX dari metode asinkron. Kode demo ada di sini:

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

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

Karena Uix Kit bukanlah kerangka kerja JavaScript, Anda dapat menggunakan perpustakaan pihak ketiga mana pun untuk membangun gaya modul kustom dan skrip animasi dengan cara yang paling intuitif.

Berkontribusi

Menemukan bug, mengirim permintaan tarik atau meningkatkan dokumen kami - kontribusi apa pun diterima dan sangat dihargai. Untuk memulai, pergilah ke pedoman kontribusi kami. Terima kasih!