introduction:
With the progress of time, a lot of drag and drop website builder zero code, intelligent website tools that can quickly meet common site layout and interaction (parallax, carousel, etc.) needs. But often some of the customized interactive (3D, VR, SVG, etc.), or the need to use common engines and libraries to complete the interaction framework. Face some special visual interaction requirements, you need a toolkit to help developers to quickly complete the site's structure, standard reference, basic visual style, grid layout, Uix Kit thus was born! Uix Kit! Is a tool for a partial set of visual interaction, data exchange module is very small, it is based on common script library to help developers to quickly complete a comprehensive interactive website. It is not a framework, not a script library, which is a compatible Bootstrap the rapid establishment HTML5 kit, follow the W3C standards, including accordion, Tab switching, large-scale navigation, one-page, parallax, paging, bulleted lists, article lists, grids system, AJAX interaction, common multi-style carousel, video, counters, galleries show works, modal popups, simple boxes, loaded infinite scrolling, mouse interaction, listening scroll animation, timeline, button, multi-style Footer, text effect, badges, etc. commonly used form of website modules, and supports unlimited updates and the official expansion, optimized to meet common, interactive and dynamic efficiency level of demand for all types of Web front-end development. Gulp Webpack support and development model. Suite provides a standardized and modular structure of HTML HTML, CSS, JS Code (the default), enables developers to quickly enter development mode, customize, modify, or delete any of the modules.
demand:
Now many ordinary websites already online drag and drop website builder, intelligent website system quickly, so ordinary without special website has been spending a lot of money and time to find a developer to complete. Uix Kit Kit is the site of interaction for a number of special effects can also be used to develop more personalized custom design website.
More than 120 + base module, to quickly build your responsive website!
Uix Kit is a partial collection of interactive visual tool, which is based on common script library to help developers to quickly complete a comprehensive interactive website. It is not a framework , all the scripts and style modules, all controlled by you!
Show
https://xizon.github.io/uix-kit/examples/
GitHub pages only static content access, AJAX and PHP request can not preview, you can complete online preview through server.
Resources Address:
https://github.com/xizon/uix-kit
Core directory structure:
Hardly-kit / ├── README.md --------------------------- # primary documentation ├── CHANGELOG.md ------------------------ # Update Log ├── CONTRIBUTING.md --------------------- # reference resources ├── LICENSE --------------------------- # license ├── webpack.config.js -------------------- # webpack scaffolding configuration ├── package.json ------------------------- # project configuration file [website compiled comment on this information can be modified] ├── package-lock.json ├── dist/ │ ├── css/ │ │ ├── uix-kit.css ------------------ # site core style (compiled) │ │ ├── uix-kit.css.map │ │ ├── uix-kit.min.css -------------- # site core styles compressed version, the default product call (compiled) │ │ ├── uix-kit.min.css.map │ │ ├── uix-kit-rtl.css ------------- # site core RTL style (compiled) │ │ ├── uix-kit-rtl.css.map │ │ ├── uix-kit-rtl.min.css --------- # site core RTL style Compact, the default product call (compiled) │ │ └── uix-kit-rtl.min.css.map │ └── js/ │ │ ├── uix-kit.js ------------------ # site core script (compiled) │ │ ├── uix-kit.js.map │ │ ├── uix-kit.min.js --------------- # site core styles compressed version, the default product call (compiled) │ │ ├── uix-kit.min.js.map │ │ ├── barely-kit-rtl.js │ │ ├── uix-kit-rtl.js.map │ │ ├── barely-kit-rtl.min.js │ │ └── uix-kit-rtl.min.js.map ├── misc/ │ ├── screenshots / --------------------- # Screenshot │ └── grid / ----------------------------- # PSD version of the basic grid system, auxiliary UI design ├── src/ │ ├── components/ │ │ ├── ES5 / ------------------------- # third-party plug-ins (direct merger, not compiled for ES6) │ │ ├── ES6 / _global ------------------- # website generic code module │ │ ├── ES6 / _main -------------------- # site customization file directory [for secondary development or new site development. The new website HTML templates and other style scripts directly into this folder] │ │ └── ES6 / ------------------------- # Website common function module [generally do not need to modify them, you can modify it according to the situation styles and scripts] ├── examples/ │ ├── * .html after --------------------------- # compiler pure HTML template for back-end integration or presentation │ └── assets / -------------------------- # static resource directory │ │ ├── css/ │ │ ├── fonts/ │ │ ├── images/ │ │ ├── videos/ │ │ ├── models/ │ │ ├── json/ │ │ └── js/ └──
Developers basic operations:
Configure your computer Node.js environment
After downloading the resources, go to
uix-kitthe directory, runnpm run buildinto the development modelWhen you need to configure the scaffolding and site structure and basic information, please directly edit the
package.jsonfile.Site customization module functions
src/components/ES6/_globalandsrc/components/ES6/_main, thesrc/components/ES6/*other module is a universal function modules. HTML document will be generated automatically packaged intoexamples/a folder, the core JavaScript and CSS files are automatically packaged into adist/folder
Development model is not recommended to skip directly modify the file examples / folder, because the code is very large, it is difficult to maintain and customize a variety of animation, interactivity, structure.
Command to use:
Step 1. Use the command into the uix-kit/ directory, {your_directory} into your directory path
$ cd /{your_directory}/uix-kit
Step 2. If there is no node_modulesfolder, you need to run the following code to install the development environment
$ sudo npm install --only=dev --unsafe-perm --production
Step 3. Run the following code in real-time development projects, modify the function module
$ npm run build
Step 4. You can use the following URL to access, we recommend using a local server to access, because access to the following URL is static, will not perform asynchronous ajax requests, some sites need to test the effect of asynchronous
http://localhost:8080/examples/
FAQ:
If the environment or permission problems nodejs appears, you can use the following command to resolve, attention to {username} into your own equipment in the name.
$ sudo chown -R $USER:$(id -gn $USER) /Users/{username}/.config
Below is a screenshot and described in FIG. (English), welcome to suck drilling :)
