UIUX Lab Blog
A Beautiful And Full Responsive Blog WordPress Theme For Displaying Topics And Artworks.

A Free HTML5 Kit For Fast Web Design – Uix Kit

Hi Everyone!

When designing themes and doing projects, you often need to do some customization of front-end code. The efficiency and quality are all important in this fast-growing Internet. Time is money!!! Using HTML5 templates? inconvenient. Using some themes? Difficult to redevelop. I spent a lot of time exploring ways to improve my job.

I released a kit to improve front-end development of basic station quality and efficiency. Uix Kit was born for quick website building, can be applied to WordPress theme and HTML website. It is very simple and easy to expand. More importantly, it is completely free.

FORK & DOWNLOAD | Demo

Getting Started

 

An underlying front-end system that makes it easy to extend and modify core files. This spec is a living document that will be updated as we continue to develop the tenets and specifics of Uix Kit. Support JS and CSS component( SCSS ) development with Gulp & Webpack together.

Enjoy the fluid grid system based on Bootstrap and self-expansion. Uix Kit is built over Bootstrap and has all the benefits that the framework comes with. Regardless of the screen size, the website content will naturally fit the given resolution. Using the Uix Kit will save you large amount of time to build your projects. It supports 3D and 2D rendering with three.js and pixi.js. More typically, automatically generate core files with Gulp & Webpack for each module (contains .js, .scss, .html files).

  • Supports 3D and 2D rendering with three.js and pixi.js.
  • Automatically generate table of contents with Gulp for each module comment of name.
  • Simple custom CSS and JS core files
  • 100% Responsive & Mobile Ready
  • Prepare some generic plug-ins in advance
  • Support Chinese and English
  • Core style sheet compatible with Bootstrap 3.x (Optimized reference to Bootstrap 4.x)
  • Provides a common web page components and layouts
  • Standard Code
  • W3C Standard Support
  • Support JS and CSS component( SCSS ) development with Gulp & Webpack together

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
$ cd uix-kit

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

$ npm install --dev

Step 3. Run the following code to enter development mode.

$ gulp default

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

http://localhost:8080/examples/

Step 5. Directly edit the entries in the components folder in order to modify the core files. (E.g. examples/assets/css/uix-kit.cssexamples/assets/css/uix-kit.min.cssexamples/assets/css/rtl/uix-kit-rtl.cssexamples/assets/js/uix-kit.jsexamples/assets/js/uix-kit.min.js ).

HTML/JS/CSS Components: _components/*
00.global and 01.index are required components.


Structures

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

uix-kit/
├── README.md
├── gulpfile.js
├── main.js
├── LICENSE
├── package-lock.json
├── package.json
├── docs/
├── _grid/
├── _screenshots/
├── _components/
│   ├── 00.global/
│   ├── 01.*/
│   └── 02.*/
├── examples/
│   ├── assets/
│   │       ├── css/
│   │       ├── fonts/
│   │       ├── images/
│   │       ├── videos/
│   │       ├── json/
│   │       └── js/
└──

 

FORK & DOWNLOAD | Demo

Scaffolding System

According to a new scaffolding system with gulp and webpack, It is mainly used to build any project from the standardized file structure. To preview the file gulpfile.js.

Conclusion

If you like it, you can use it for any purpose. If you want, you can give me a cup of coffee and allow me to spend more time doing it better. In short, I hope my product can help you to do the project.



Published by UIUX Lab

Hi. I'm a full-stack designer. Focus on UI, UX, awesome websites, front-end and WordPress development. I want to build things I can be proud of.