A Free Web Kits For Fast Web Design And Development — 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.

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

FORK & DOWNLOAD | Demo

Getting Started

Make over 120+ components to wear again and again!

Uix Kit can be used separately, or merge components and grid systems using bootstrap. 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 Webpack for each module (contains .js, .scss, .html files).

• Not a reusable component structure
• Not a JavaScript framework
• Webpack-based dev environment which is an intuitive toolkit system
• Use any JavaScript libraries in your favorite way to build styles and animation scripts
• 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
• Make a foundation for the React architecture
• Compatible with Bootstrap 4.x
• Provides a common web page components and layouts
• Using ES6 to import or export multiple modules, the third-party plugins could adopt pure file merger method and do not import and export
• The complete directory of examples in order to develop a responsive website independently without Node.js dev environment

How To Use?

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.

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

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 configuration file
├── package.json 
├── package-lock.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
├── misc/                
│   ├── screenshots/ 
│   └── grid/ 
├── src/
│   ├── third-party-plugins/
│   ├── components/
│   │   ├── _app-load.js 
│   │   ├── _app-load-rtl.js 
│   │   ├── _global/
│   │   ├── _main/  
│   │   └── */ 
├── examples/                                
│   ├── *.html 
│   └── assets/ 
│   │       ├── css/
│   │       ├── fonts/
│   │       ├── images/
│   │       ├── videos/
│   │       ├── models/
│   │       ├── json/
│   │       └── js/
└──

FORK & DOWNLOAD | Demo

Scaffolding System

According to a new scaffolding system with webpack, It is mainly used to build any project from the standardized file structure.

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

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.

Thanks for your reading. Want more? Check out my website UIUX Lab