uix kit Download - uix kit Source Code Download

طقم UIX

قم بعمل أكثر من 120 مكونًا للارتداء مرارًا وتكرارًا!

UIX Kit ليس إطارًا ، بل مجرد مجموعة أدوات واجهة المستخدم بناءً على بعض المكتبات الشائعة لبناء موقع جميل مستجيب.

UIX KIT ليست بنية مكون قابلة لإعادة الاستخدام ، ومعظمها CSS مخصص و javaScript. بالتأكيد مثيرة للاهتمام ، وإذا كنت تقوم بتطوير محتوى الويب في الغالب وليس التطبيقات ، فهذا مفيد بشكل خاص. إنها أداة/سقالة على شبكة الإنترنت لا تعتمد على أي إطار. يمكنك استيراد أي مكتبات/أطر عمل خارجية أو وحدات ES الأصلية للإنتاج.

يمكن استخدام الملف الأساسي الذي تم إنشاؤه في Distory بشكل منفصل في أي موقع ويب. دعم مكتبة مكون JS و HTML و SASS تلقائيًا. يتم استخدامه لتطوير موقع الويب الكامل (قوالب HTML أو لتكامل اللغة الديناميكية).

يعتمد العرض التوضيحي على jQuery (يمكنك إعادة كتابة البرنامج النصي تمامًا إذا لزم الأمر). و dist لا تجمع أي برنامج نصي ونمط من طرف ثالث ، يتم تحميل جميع المكتبات خارجيًا في ملف HTML.

طقم UIX الآن في وضع الدعم على المدى الطويل (LTS).

React Version - Scaffolding للرجوع إليه

الوثائق الإنجليزية
中文版说明文档

العرض التوضيحي

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

يمكن أن تخدم صفحات Github محتوى ثابتًا فقط ، ولا توجد طريقة لتشغيل PHP أو الحصول على طلب AJAX على الصفحات. تحتاج إلى زيارة الرابط أدناه لمشاهدة بعض العروض التوضيحية الخاصة؟

https://uiux.cc/uix-kit

جدول المحتويات

البدء في مقاطع الفيديو
لماذا تستخدمه
هياكل الملفات
ابدء
قالب HTML
كيفية إنشاء وحدة مخصصة？
المساهمة
Changelog
دعم المتصفح
بيئة التنمية المدعومة
الترخيص

البدء في مقاطع الفيديو

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 بتجميع أي برنامج نصي وطرف ثالث ، يتم تحميل جميع المكتبات خارجيًا في ملف HTML.
ليس بنية مكون قابلة لإعادة الاستخدام
ليس إطار عمل JavaScript
يتم استخدامه لإنشاء موقع الويب الكامل (قوالب HTML أو لتكامل اللغة الديناميكية)
مناسبة لتطوير مواقع التفاعل البصري وقوالب WordPress
معيار W3C وكبار المسئولين الاقتصاديين
نطاق التحكم مع تسمية BEM ، وبالتالي فإن مشروع Core Uix Kit لا يتعارض مع المشاريع الأخرى
قم بإنشاء جدول محتويات لكل تعليق من الاسم تلقائيًا
تتكون كل وحدة من ملفات SASS / SCSS و JavaScript و HTML
استراتيجية التحقق المدمجة لـ TypeScript و React . (مثل هذه البرامج النصية مضمنة في الصفحة ، وليس المشروع بأكمله)
متوافق مع Bootstrap 5.x (يمكنك أيضًا إزالة أوراق أنماط Bootstrap)
يوفر مكونات وتخطيطات صفحة ويب شائعة
الدليل الكامل للأمثلة من أجل تطوير موقع ويب مستجيب بشكل مستقل بدون Node.js Dev Environment
يعتمد العرض التوضيحي على jQuery (يمكنك إعادة كتابة البرنامج النصي تمامًا إذا لزم الأمر)

ابدء

نظرة عامة سريعة 1

نظرة عامة سريعة 2

ستحتاج إلى إعداد عقدة على جهازك. من شأنه أن يخرج التوزيعات المبنية إلى ./dist/* و ./examples/*.html .

الخطوة 1. استخدم NPM (حدد موقع دليل المشروع الحالي الخاص بك ، وأدخل الأمر التالي.) أو قم بتنزيل أحدث إصدار من GitHub. بالنسبة إلى Nodejs ، يجب عليك تثبيت بعض التبعيات.

$ sudo npm install uix-kit

أو استنساخ الريبو للحصول على جميع ملفات المصدر بما في ذلك البرامج النصية البناء:

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

الخطوة 2. أولاً ، باستخدام مسار مطلق في دليل مجلد "uix-kit/" .

$ cd /{your_directory}/uix-kit

الخطوة 3. قبل القيام بجميع أشياء DEV ، تأكد من تثبيت Node 10+ . بعد ذلك ، قم بتشغيل الكود التالي في الدليل الرئيسي لتثبيت تبعيات وحدة العقدة.

$ npm install

بيئة الاختبار الحالية هي "العقدة 18+` ، `npm 9+`. إذا فشل تثبيت التبعية (عادةً ما يكون ذلك لأنك قمت بترقية إصدار NodeJS ، الذي تم اختباره حاليًا إلى Node 18+) ، ربما يتعارض الإصدار الجديد من NPM مع الإصدار القديم من NPM ، يرجى استخدام الأمر التالي لتثبيت التبعيات:
$ npm install --legacy-peer-deps
إذا كان التثبيت لا يزال يفشل ، فيرجى استخدام هذه الطريقة: إزالة devDependencies في package.json ، وحذف package-lock.json وإعادة التبعية:
$ 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

الخطوة 4. عندما تكون مستعدًا للنشر في الإنتاج ، قم بإنشاء حزمة مصورة مع:

$ npm run build

باستخدام Ctrl + C لإيقافه.

عند القيام بذلك ، سيؤدي ذلك إلى تدوير خادم يمكن الوصول إليه على http://localhost:8080/examples/

الخطوة 5. لمعاينة الصفحة دون تجميع وتعبئة ، يرجى تشغيل الأمر التالي:

$ npm run preview

يمكن معاينة جميع الصفحات عبر http://localhost:3000 .

ولكن لا توجد طريقة لتشغيل PHP أو الحصول على طلب AJAX على الصفحات. تحتاج إلى زيارة الرابط على الخادم الخاص بك ، أو إنشاء خادم عبر MAMP. ثم تفضل بزيارة عنوان URL مماثل: http: // localhost: {port}/uix-kit/أمثلة/

ملحوظة:

أ) كيفية استخدام الوحدات النمطية؟

يمكنك مخصص وحدات مخصصة لما يجب استيراده في src/components/_app-load.ts و src/components/_app-load-rtl.ts . نظرًا لأن الوحدات يتم استيرادها أكثر من اللازم ، فأنت بحاجة إلى الانتظار على الأقل 5.5 ثانية (القيمة الافتراضية). يمكنك تعيين وقت انتظار التجميع في webpack.config.js وفقًا للوحدات النمطية المستوردة التي تريدها.

ب) تكوين معلومات الموقع

يمكنك تحديث العناصر النائبة في القوالب عن طريق تعديل تكوين معلومات الموقع من 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 v5. " ,
  ...
}

ج) الخطأ: فشل التحقق من تحديث NPM.

حل:

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

د) خطأ: Node Sass الإصدار 6.xx غير متوافق مع ^ 4.xx

حل:

$ npm install [email protected]

هـ) إذا قمت بترقية إصدار العقدة ، فيرجى تنفيذ الكود التالي:

$ sudo npm install
$ sudo npm rebuild node-sass

قالب HTML

1. رمز HTML ثابت

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

يمكنك تنزيل ملفات الشبكة .PSD المقابلة.

misc/grid/bootstrap3_1170_grid_web.psd (الحاوية الافتراضية: 1170px)
misc/grid/bootstrap3_1278_grid_web.psd (حاوية XL: 1278px)
misc/grid/bootstrap3_1410_grid_web.psd (حاوية XXL: 1410PX)

كيفية إنشاء وحدة مخصصة

على افتراض أنك في دليل الجذر الخاص بالتطبيق الخاص بك ، وترغب في إنشاء مكونات داخل src/components/ كما تظهر أعلاه. يمكنك إنشاء دليل جديد وتسمية وحدة تجريبية .

؟؟؟

فيما يلي هيكل دليل وحدة مخصصة ، قمت بتضمين بعض الأمثلة على الملفات التي من شأنها أن تجلس داخل كل مجلد:

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

الخطوة 1. داخل هذا المجلد قم بإنشاء مجلدين فرعيين: /scss و /js . إذا كنت بحاجة إلى دعم RTL ، قم بإنشاء آخر /scss-rtl .

الخطوة 2. إنشاء ملف SASS/SCSS. انتقل إلى src/components/demo-module/scss/ Folder وقم بإنشاء ملف يسمى: _style.scss . يرجى استيراد المتغيرات أو الوظائف العالمية. هذا مثال:

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

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

الخطوة 2-2 (اختياري). حسنًا ، إذا كنت بحاجة إلى دعم RTL. تحتاج إلى إنشاء ملف SASS/SCSS جديد. انتقل إلى المجلد src/components/demo-module/scss-rtl/ Folder وقم بإنشاء ملف يسمى: _style.scss . مثله:

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

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

الخطوة 3. إنشاء ملف JS. انتقل إلى src/components/demo-module/js/ Folder وإنشاء ملف يسمى: index.js . لجعله يعمل ، نحتاج إلى استيراد المتغيرات أو الوظائف العالمية في ملفات File Index.js.

في نفس الوقت ، أنت الآن مستعد لاستيراد أوراق الأنماط الخاصة بك لاستخدامها مع هذا المكون. استيراد ملف SASS/SCSS في src/components/demo-module/js/index.js .

مثله:.

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

الخطوة 4. حتى الآن ، لاستيراد الوحدة النمطية التي قمت بإنشائها للتو في src/components/_app-load.ts . أبسط إصدار يستورد مباشرة الافتراضي:

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

الخطوة 4-2 (اختياري). إذا كنت بحاجة إلى دعم RTL ، في src/components/_app-load-rtl.ts . مثله:

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

وحدات RTL هذه لا تحتاج إلى JavaScript.

الخطوة 5 (اختياري). يمكنك أيضًا إنشاء ملف HTML لتشغيل العرض التوضيحي لهذه الوحدة بشكل منفصل ، وسيتم تصدير جميع ملفات HTML تلقائيًا إلى examples/ . الرمز التجريبي لملف HTML كما يلي:

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

ملاحظة: يمكنك استدعاء برنامج نصي للوحدة المحددة والذي يتم استخدامه بشكل شائع لتراجعات طلب AJAX من الطريقة غير المتزامنة. الرمز التجريبي هنا:

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

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

نظرًا لأن UIX Kit ليس إطارًا JavaScript ، يمكنك استخدام أي مكتبات من طرف ثالث لإنشاء أنماط الوحدة النمطية المخصصة والبرامج النصية للرسوم المتحركة بأكثر الطرق سهولة.