0%

Uix Kit - HTML5 UI Kit for Fast Web Design

Make over 120+ components to wear again and again!

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 can be used separately, or merge components and grid systems using bootstrap. Support JS, HTML and SASS component library automatically packaged. Automatically convert ES6 JS to ES5 using Babel in this scaffold.

  • Supports 3D and 2D rendering with three.js and pixi.js.
  • Using Sass to Control Scope With BEM Naming
  • Automatically generate a table of contents for each module comment of the name.
  • Simple custom CSS and JS core files
  • 100% Responsive & Mobile Ready
  • Prepare some generic plug-ins in advance
  • Compatible with Bootstrap 4.x
  • Provides a common web page components and layouts
  • W3C Standard Support
  • Support PJAX no refresh method for loading pages
  • Support JS, HTML and SASS component library automatically packaged.
  • Make a foundation for the React architecture.
  • The core module adopts ES6 import and export, and the third-party plugins adopt pure file merger and do not import and export.

 

How To Use?

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.

$ 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.

$ sudo npm install --only=dev --unsafe-perm --production

Step 4. Run the following code to enter development mode. The converted ES5 files will be created.

$ npm run build

Step 5. When you done, please open the browser and enter the following URL to check out.

http://localhost:8080/examples/

 

Note:

a) ERROR: npm update check failed.

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

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 v4.",
  ...
}

Structures

You can customize these files to meet the different needs of the site you want 🙂

uix-kit/
├── README.md
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── webpack.config.js
├── package-lock.json
├── package.json
├── dist/
│   ├── css/
│   │   ├── uix-kit.css
│   │   ├── uix-kit.css.map
│   │   ├── uix-kit.min.css
│   │   ├── uix-kit.min.css.map
│   │   ├── uix-kit-rtl.css
│   │   ├── uix-kit-rtl.css.map
│   │   ├── uix-kit-rtl.min.css
│   │   └── uix-kit-rtl.min.css.map
│   └── js/
│   │   ├── uix-kit.js
│   │   ├── uix-kit.js.map
│   │   ├── uix-kit.min.js
│   │   ├── 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
│   │   ├── uix-kit.concat.es5.dev.js
│   │   └── uix-kit.concat.es5.dev.js.map
├── misc/
│   ├── screenshots/
│   └── grid/
├── src/
│   ├── index.js
│   ├── index-rtl.js
│   ├── components/
│   │   ├── ES5/
│   │   └── ES6/
├── examples/
│   ├── *.html
│   ├── assets/
│   │       ├── css/
│   │       ├── fonts/
│   │       ├── images/
│   │       ├── videos/
│   │       ├── models/
│   │       ├── json/
│   │       └── js/
└──