Menu ▾ ▴

Home

UIUXLab

Demo

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

Official

Installation And Test

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.

$ sudo npm install --save-dev  --unsafe-perm node-sass

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, this will spin up a server that can be accessed at

http://localhost:8080/examples/

Note:

ERROR: npm update check failed.

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

How To Use

1. HTML Structure

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
    <head>
        <meta charset="utf-8" />
        <title></title>

        <!-- Mobile Settings
        ============================================= -->
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
        <!-- Mobile Settings end -->

        <!-- Vendor
        ============================================= -->
        <script src="assets/js/wp-jquery/jquery.min.js?ver=3.3.1"></script>
        <script src="assets/js/wp-jquery/jquery.migrate.min.js?ver=1.4.1"></script>
        <!-- Vendor  end -->

        <!-- Compatibility
        ============================================= -->
        <script src="assets/js/min/modernizr.min.js?ver=3.5.0"></script>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- Compatibility  end -->

        <!-- Core & Theme CSS
        ============================================= -->

        <!-- Basic  -->
        <link rel="stylesheet" href="assets/css/bootstrap.min.css?ver=4.2.1" 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" media="all"/>

         <!--[if lt IE 10]>
           <link rel="stylesheet" href="assets/css/IE.css?ver=1.0.0" media="all" />
        <![endif]-->

        <!-- Core & Theme CSS  end -->

        <!-- Break free from CSS prefix hell!
        ============================================= -->
         <script src="assets/js/min/prefixfree.min.js?ver=1.0.7"></script>

  </head>     
  <body>

    ...

    <!-- Vendor -->
    <script src="assets/js/min/jquery.easing.min.js?ver=1.3"></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/jquery.waypoints.min.js?ver=4.0.1"></script> 
    <script src="assets/js/min/template7.min.js?ver=1.2.5"></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>
    <script src="assets/js/min/muuri.min.js?ver=0.7.1"></script>

    <!-- Your Plugins & Theme Scripts
    ============================================= -->

    <script>
        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
            };
    </script>  
    <script src="../dist/js/uix-kit.min.js?ver=1.0.0"></script>

  </body>
</html>

2. File Structures

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