Regular UI

Regular UI is a set of front-end components built with RegularJS.

To get started, check out http://regular-ui.github.io!

Quick Start

Following options to get Regular UI:

Download the latest release
Install with bower: bower install regular-ui
Install with npm: npm install regular-ui

You can find the compiled Regular UI distribution in Bower Repo.

Docs

All documentations are generated in the directory of ./doc by Gulp. You can read them on GitHub Page conveniently or download them to local.

Browser Support


Latest ✔	Latest ✔	IE8+	Latest ✔	Latest ✔

Develop

First of all, clone the code.

git clone git@github.com:regular-ui/regular-ui.git

Install project dependencies.

cd regular-ui
npm install

If you don't have used Gulp before, you need to install the gulp package as a global install.

npm install gulp -g

Now, you can start to develop.

Run gulp to watch and compile source files for developing anytime they are modified.

Run gulp all to prepare CSS and JS index files include all components based on ./structure.js.

Run gulp customize to prepare CSS and JS index files include partial components based on ./structure.customized.js.

Run gulp dist to compile a distribution to ./dist directory.

Run gulp bower to compile a distribution to ./dist directory and sync to Bower Repo.

Run gulp doc to rebuild docs without watching.

Run gulp page to rebuild docs and sync to GitHub Page Repo.

Run npm test to start karma for testing cases.

Structure

I'm lazy to translate...

`regular-ui`根目录

regular-ui-bower
|— css                    # css文件
|— fonts                  # 字体，Regular UI使用FontAwesome
|— js                     # js文件，整合的单入口文件
|— mcss                   # mcss文件
|— scss                   # scss文件
|— vendor                 # 第三方库
|-- bower.json             # bower配置文件
|-- README.md              # 说明文件

`regular-ui/src`目录

regular-ui
|— src                    # 组件的开发源代码
    |— js                 # 组件的js源代码
        |— base           # 基础组件和辅助类库
        |— module         # js模块类
        |— unit           # js元件类
        |— util           # js辅助类
        |-- index.js       # js引导文件
    |— mcss               # 组件的mcss源代码
        |— bootstrap      # Bootstrap主题
        |— core           # 主题内核
        |— default        # Default主题
        |— flat           # Flat主题
        |— simple         # Simple主题
        |-- bootstrap.mcss # Bootstrap主题引导文件
        |-- default.mcss   # Default主题引导文件
        |-- flat.mcss      # Flat主题引导文件
        |-- simple.mcss    # Simple主题引导文件

`regular-ui/doc-src`目录

regular-ui
|— doc-src                # 文档构建目录
    |— assets             # 静态资源，里面的内容会直接复制到doc目录下
    |— mcss               # doc的mcss源代码
    |— view               # 文档页面的模板和内容
        |— common         # 文档页面的头部、侧边栏、API等公共部分模板，ejs文件
        |— cssModule      # css模块的内容，markdown文件
        |— cssUnit        # css元件的内容，markdown文件
        |— jsModule       # js元件的内容，markdown文件
        |— jsUnit         # js元件的内容，markdown文件
        |— start          # 开始使用的内容，markdown文件
        |-- index.md       # 首页内容
    |— build.js           # 根据路径构建单个文档
    |— buildAll.js        # 构建全部文档
    |— cssdoc.js          # 暂无
    |— jsdoc.js           # 由组件js源代码的注释块生成文档API
    |— premark.js         # 将markdown中的代码段自动添加到页面中创建出活生生的例子
    |— sitemap.json       # 网站地图

Referenced Websites

Netease

Based on jQuery

Based on AngularJS

Based on React

Based on Web Component

Polymer

Others

Versioning

Regular UI is maintained by using the Semantic Versioning Specification (SemVer).

Contributing

See the contributing guidelines for details.

Copyright and License

Code released under the MIT license.

yaochiqkl/regular-ui