uix-kit

Uix Kit is not a framework, just a UI toolkit based on some common libraries for building beautiful responsive website.

Uix Kit isn't a reusable component structure, mostly custom CSS and JavaScript based. Definitely interesting, and if you're developing mostly web content and not applications this is particularly useful. It is a web dev build tool/scaffold that does not depend on any framework. You can import any external libraries/frameworks or native ES Modules for production.

The generated core file in the dist directory can be used separately in any website. Support JS, HTML, and SASS component library automatically packaged. It is used to develop the full-static website (HTML templates or for dynamic language integration).

The demo depends on jQuery (you can completely rewrite the script if needed). And dist DOES NOT bundle any third-party script and style library, all libraries are loaded externally in the HTML file.

Uix Kit is now in Long Term Support (LTS) mode.

---

• React Version - Native scaffolding for reference

---

• English Documentation
• 中文版说明文档

---

Demo

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

GitHub pages can only serve static content, and there is no way to run PHP or get AJAX request on the pages. You need to visit the link below to see some special demos 👇

https://uiux.cc/uix-kit

Table of Contents

• Getting Started with Videos
• Why use it
• File Structures
• Getting Started
• HTML Template
• How to Create a Custom Module？ 🔥
• Contributing
• Changelog
• Browser Support
• Supported development environment
• Licensing

Getting Started with Videos

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

File Structures

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/
├── tools/
│   └── threejs-dist-builder/   ------------ # three.js & three.min.js Generator (Compatible with 174+ versions)
└──

Why use it

• dist DOES NOT bundle any third-party script and style library, all libraries are loaded externally in the HTML file.
• Not a reusable component structure
• Not a JavaScript framework
• It is used to build the full-static website (HTML templates or for dynamic language integration)
• Suitable for developing Visual Interaction websites and WordPress templates
• W3C standard and SEO
• Control scope with BEM naming, so the core Uix Kit project is not in conflict with the other projects
• Automatically generate a table of contents for each module comment of the name
• Each module consists of SASS / SCSS, JavaScript and HTML files
• Embedded verification strategy for TypeScript and React. (Such scripts are embedded in the page, not the entire project)
• Compatible with Bootstrap 5.x (You could also remove Bootstrap's stylesheets)
• Provides a common web page components and layouts
• The complete directory of examples in order to develop a responsive website independently without Node.js dev environment
• The demo depends on jQuery (you can completely rewrite the script if needed)

---

Getting Started

You will need to have node setup on your machine. That will output the built distributables to ./dist/* and ./examples/*.html.

Step 1. Use NPM (Locate your current directory of project, and enter the following command.) or download the latest version from Github. For nodejs you have to install some dependencies.

$ sudo npm install uix-kit

Or clone the repo to get all source files including build scripts:

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

Step 2. First, using an absolute path into your "uix-kit/" folder directory.

$ cd /{your_directory}/uix-kit

Step 3. Before doing all dev stuff make sure you have Node 10+ installed. After that, run the following code in the main directory to install the node module dependencies.

$ npm install

$ npm install --legacy-peer-deps

If the installation still fails, please use this method: remove devDependencies in package.json, delete file package-lock.json and reinstall dependencies:

$ 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

Step 4. When you’re ready to deploy to production, create a minified bundle with:

$ npm run build

Using Ctrl + C to stop it.

When you have done, this will spin up a server that can be accessed at http://localhost:8080/examples/

Step 5. To preview the page without compiling and packaging, please run the following command:

$ npm run preview

All pages can be previewed via http://localhost:3000.

Note:

a) How to use modules?

You could custom modules of what to import in src/components/_app-load.ts and src/components/_app-load-rtl.ts. Because the modules are imported too much, you need to wait at least 5.5 seconds (default value). You can set the compilation wait time in the webpack.config.js according to the imported modules you want.

b) Site Info Configuration

You can update the Placeholders in Templates by modifying the Site Info configuration of package.json. Like this:

{
  "author": "UIUX Lab",
  "name": "uix-kit",
  "email": "uiuxlab@gmail.com",
  "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: npm update check failed.

Solution:

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

d) ERROR: Node sass version 6.x.x is not compatible with ^ 4.x.x.

Solution:

$ npm install node-sass@4.14.1

e) If you upgrade the version of Node, please execute the following code:

$ sudo npm install
$ sudo npm rebuild node-sass

---

HTML Template

1. Static 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 wit