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.
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.
Step 5. Directly edit the entries in the components folder in order to modify the core files. (E.g.
01.indexare required components.
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/ └──
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.
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.