A front-end framework to make web UI development faster and easier.

Official Website：http://qmuiteam.com/web

Demo：https://github.com/QMUI/QMUIDemo_Web/releases

[English] / [简体中文] / [繁體中文]

This framework consists of a collection of SASS methods and a built-in workflow, which can help you easily improve the efficiency, maintainability and robustness of your web UI development. Especially, when you want to adjust appearance of your website globally or deal with frequent UI design alteration, QMUI Web will be your best choice.

You can easily adjust global appearance of basic built-in components by editing a SASS config file. （How do QMUI config file and basic components contribute to your UI development?）

QMUI Web ships with more than 70 SASS Mixin, Function and Extend, dealing with layout, appearance, animation, device adaptation, math calculation and other SASS enhancement, which will make your development faster and easier.

QMUI Web has a built-in workflow and tools to automate a lot of work, including the Sprite image, html template engine, image management and compression, static resource merging and compression, and redundant file cleanup.

In addition to the built-in basic components, we also provide several extended components such as file upload button, tree menu, etc.

ure to install Node.js (recommend 14.0 or later) and then install Gulp globally with the following command:

#Install gulp
npm install --global gulp

It is recommend for you to use a Yeoman project named generator-qmui to install and configure QMUI Web.

#Install Yeoman. If you have already installed, please ignore this step.
npm install -g yo
#Install QMUI Template
npm install -g generator-qmui
#Execute the following command in the root directory of the project
yo qmui

Root Directory
├─public          // Static resource directory, generated by gulp
│  ├─js           // Javascript
│  └─style        // All UI files generate here
│     ├─css       // All styles files generate here
│     └─images    // Images generate here
├─UI_dev          // Development directory
│  ├─project      // SASS and images files
│  │  ├─images    // Image source directory
│  │  ├─logic     // SASS file of each module
│  │  └─widget    // SASS file of components
│  └─qmui_web     // QMUI Web Source Code
├─UI_html         // HTML files
└─UI_html_result  // HTML files compiled by gulp

If you need more customization, please refer to Creating Project (Advanced)

gulp list

You can create issues or send pull requests if you have any feedback or suggestion. Please read the documentation before debugging or modifying this framework.

Thanks very much for your support and contributions.

Design file (Sketch) is available on Dribbble.

If you prefer visual interface rather than CLI, it is recommended to try an additional desktop application: QMUI Web Desktop. You can manage projects based on QMUI Web, toggle QMUI Web services, and get compilation or error message in time through it.