├── .gitignore
├── README.md
├── app.js
├── app.json
├── app.wxss
├── package.json
└── page
    └── index
        ├── index.js
        ├── index.json
        ├── index.wxml
        └── index.wxss


/.gitignore:
--------------------------------------------------------------------------------
1 | .idea


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # H5UI for weApp
2 | 
3 | #### 微信小程序演示：
4 | <p><img src="https://s.h5ui.io/img/h5ui-weapp-qrcode.jpg" width="300"></p>
5 | 
6 | <p><img src="https://s.h5ui.io/img/h5ui-weapp-demo.png" width="400"></p>
7 | 


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | App({
2 |   
3 | })


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "pages": [
 3 |         "page/index/index"
 4 |     ],
 5 |     "window": {
 6 |         "navigationBarTextStyle": "black",
 7 |         "navigationBarTitleText": "H5UI",
 8 |         "navigationBarBackgroundColor": "#FFF",
 9 |         "backgroundColor": "#F5F6F7"
10 |     }
11 | }


--------------------------------------------------------------------------------
/app.wxss:
--------------------------------------------------------------------------------
 1 | page{
 2 |     background-color: #F5F6F7;
 3 |     height: 100%;
 4 | }
 5 | .page {
 6 |     font-family: -apple-system-font, "Helvetica Neue", sans-serif;
 7 |     flex: 1;
 8 |     min-height: 100%;
 9 |     font-size: 17px;
10 |     overflow: hidden;
11 | }
12 | 
13 | /* clear */
14 | .clearfix:before,
15 | .clearfix:after {
16 |     content: "";
17 |     display: table;
18 | }
19 | .clearfix:after {
20 |     clear: both;
21 | }
22 | 
23 | /* Grid */
24 | .h5ui-grid_item {
25 |     width: 33.3333%;
26 |     background: #fff;
27 |     display: block;
28 |     text-align: center;
29 |     float: left;
30 |     padding: 20px 0;
31 |     color: #666;
32 |     font-size: 14px;
33 |     position: relative;
34 | }
35 | .h5ui-grid_item::after,
36 | .h5ui-grid_item::before{
37 |     content: " ";
38 |     display: block;
39 |     -webkit-transform: scale(0.5);
40 |     transform: scale(0.5);
41 |     -webkit-transform-origin: 0 0;
42 |     transform-origin: 0 0;
43 |     pointer-events: none;
44 |     position: absolute;
45 |     top: 0;
46 |     left: 0;
47 |     width: 200%;
48 |     z-index: 1;
49 | }
50 | .h5ui-grid_item::after{
51 |     height: 200%;
52 |     border-right: 1px solid #E5E5E5;
53 | }
54 | .h5ui-grid_item::before{
55 |     height: 0;
56 |     border-top: 1px solid #E5E5E5;
57 | }
58 | .h5ui-grid_item:nth-child(3n)::after{
59 |     border-right: none;
60 | }
61 | .h5ui-grid_item:nth-last-child(-n+3)::before{
62 |     bottom: 0;
63 |     height: 200%;
64 |     border-bottom: 1px solid #E5E5E5;
65 | }
66 | .h5ui-grid_item_icon{
67 |     width: 32px;
68 |     height: 32px;
69 |     display: block;
70 |     margin: 10px auto 5px;
71 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "h5ui",
 3 |   "version": "0.0.1",
 4 |   "description": "Mobile front-end CSS framework",
 5 |   "homepage": "http://h5ui.io",
 6 |   "author": "Acterce",
 7 |   "repository": {
 8 |     "type": "git",
 9 |     "url": "git@github.com:h5ui/h5ui.git"
10 |   },
11 |   "keywords": [
12 |     "H5UI",
13 |     "CSS",
14 |     "mobile",
15 |     "LESS",
16 |     "ui"
17 |   ],
18 |   "license": "MIT"
19 | }


--------------------------------------------------------------------------------
/page/index/index.js:
--------------------------------------------------------------------------------
1 | Page({
2 |     
3 | })


--------------------------------------------------------------------------------
/page/index/index.json:
--------------------------------------------------------------------------------
1 | {
2 |   "navigationBarBackgroundColor": "#F5F6F7",
3 |   "navigationBarTitleText": " "
4 | }


--------------------------------------------------------------------------------
/page/index/index.wxml:
--------------------------------------------------------------------------------
 1 | <view class="h5ui-page">
 2 |     <view class="example-home_hd">
 3 |         <view class="h5ui-logo"></view>
 4 |         <text>Mobile front-end CSS framework</text>
 5 |     </view>
 6 | 
 7 |     <view class="h5ui-grid example-home_grid_bd clearfix">
 8 |         <navigator url="example/form.html" class="h5ui-grid_item">
 9 |             <view class="h5ui-grid_item_icon icon-grid_form"></view>
10 |             Form
11 |         </navigator>
12 |         <navigator url="example/slider.html" class="h5ui-grid_item">
13 |             <view class="h5ui-grid_item_icon icon-grid_slider"></view>
14 |             Slider
15 |         </navigator>
16 |         <navigator url="example/switch.html" class="h5ui-grid_item">
17 |             <view class="h5ui-grid_item_icon icon-grid_switch"></view>
18 |             Switch
19 |         </navigator>
20 |         <navigator url="example/checkbox.html" class="h5ui-grid_item">
21 |             <view class="h5ui-grid_item_icon icon-grid_checkbox"></view>
22 |             Checkbox
23 |         </navigator>
24 |         <navigator url="example/radio.html" class="h5ui-grid_item">
25 |             <view class="h5ui-grid_item_icon icon-grid_radio"></view>
26 |             Radio
27 |         </navigator>
28 |         <navigator url="example/select.html" class="h5ui-grid_item">
29 |             <view class="h5ui-grid_item_icon icon-grid_select"></view>
30 |             Select
31 |         </navigator>
32 |         <navigator url="example/navbar.html" class="h5ui-grid_item">
33 |             <view class="h5ui-grid_item_icon icon-grid_navbar"></view>
34 |             Navbar
35 |         </navigator>
36 |         <navigator url="example/button.html" class="h5ui-grid_item">
37 |             <view class="h5ui-grid_item_icon icon-grid_button"></view>
38 |             Button
39 |         </navigator>
40 |         <navigator url="example/tab.html" class="h5ui-grid_item">
41 |             <view class="h5ui-grid_item_icon icon-grid_tab"></view>
42 |             Tab
43 |         </navigator>
44 |     </view>
45 | 
46 |     <view class="h5ui-grid example-home_grid_bd clearfix">
47 |         <navigator url="example/list.html" class="h5ui-grid_item">
48 |             <view class="h5ui-grid_item_icon icon-grid_list"></view>
49 |             List
50 |         </navigator>
51 |         <navigator url="example/modal.html" class="h5ui-grid_item">
52 |             <view class="h5ui-grid_item_icon icon-grid_modal"></view>
53 |             Modal
54 |         </navigator>
55 |         <navigator url="example/dialog.html" class="h5ui-grid_item">
56 |             <view class="h5ui-grid_item_icon icon-grid_dialog"></view>
57 |             Dialog
58 |         </navigator>
59 |         <navigator url="example/toptips.html" class="h5ui-grid_item">
60 |             <view class="h5ui-grid_item_icon icon-grid_toptips"></view>
61 |             TopTips
62 |         </navigator>
63 |         <navigator url="example/toast.html" class="h5ui-grid_item">
64 |             <view class="h5ui-grid_item_icon icon-grid_toast"></view>
65 |             Toast
66 |         </navigator>
67 |         <navigator url="example/msg.html" class="h5ui-grid_item">
68 |             <view class="h5ui-grid_item_icon icon-grid_msg"></view>
69 |             Msg
70 |         </navigator>
71 |         <navigator url="example/timeline.html" class="h5ui-grid_item">
72 |             <view class="h5ui-grid_item_icon icon-grid_timeline"></view>
73 |             TimeLine
74 |         </navigator>
75 |         <navigator url="example/lazyload.html" class="h5ui-grid_item">
76 |             <view class="h5ui-grid_item_icon icon-grid_lazyload"></view>
77 |             Lazyload
78 |         </navigator>
79 |         <navigator url="example/more.html" class="h5ui-grid_item">
80 |             <view class="h5ui-grid_item_icon icon-grid_more"></view>
81 |             More
82 |         </navigator>
83 |     </view>
84 | </view>
85 | 
86 | <view class="example-copyright">
87 |     <view class="flag"></view>
88 | </view>


--------------------------------------------------------------------------------
/page/index/index.wxss:
--------------------------------------------------------------------------------
  1 | .example-home_hd {
  2 |     padding: 30px 30px 20px;
  3 |     text-align: center;
  4 | }
  5 | .example-home_hd .h5ui-logo{
  6 |     width: 124px;
  7 |     height: 50px;
  8 |     display: block;
  9 |     background: url("http://s.h5ui.io/img/example/logo.png?201612081905") no-repeat;
 10 |     background-size: 144px;
 11 |     margin: 0 auto;
 12 | }
 13 | .example-home_hd text{
 14 |     font-size: 14px;
 15 |     padding-top: 7px;
 16 |     color: #999;
 17 |     margin: 0;
 18 | }
 19 | 
 20 | .example-home_grid_hd{
 21 |     font-size: 14px;
 22 |     font-weight: 400;
 23 |     color: #333;
 24 |     margin: 0;
 25 |     padding: 8px 15px;
 26 | }
 27 | 
 28 | .example-home_grid_bd {
 29 |     margin-top: 15px;
 30 | }
 31 | 
 32 | .h5ui-grid_item{
 33 |     color: #999;
 34 | }
 35 | 
 36 | .h5ui-grid_item_icon {
 37 |     background: url("http://s.h5ui.io/img/example/icons.png?2016120081905") no-repeat;
 38 |     background-size: 32px;
 39 | }
 40 | .icon-grid_form{
 41 |      background-position: 0 0;
 42 |  }
 43 | .icon-grid_slider{
 44 |      background-position: 0 -32px;
 45 |  }
 46 | .icon-grid_switch{
 47 |      background-position: 0 -64px;
 48 |  }
 49 | .icon-grid_checkbox{
 50 |      background-position: 0 -96px;
 51 |  }
 52 | .icon-grid_radio{
 53 |      background-position: 0 -128px;
 54 |  }
 55 | .icon-grid_select{
 56 |      background-position: 0 -160px;
 57 |  }
 58 | .icon-grid_button{
 59 |      background-position: 0 -192px;
 60 |  }
 61 | .icon-grid_navbar{
 62 |      background-position: 0 -224px;
 63 |  }
 64 | .icon-grid_tab{
 65 |      background-position: 0 -256px;
 66 |  }
 67 | .icon-grid_grid{
 68 |      background-position: 0 -288px;
 69 |  }
 70 | .icon-grid_list{
 71 |      background-position: 0 -320px;
 72 |  }
 73 | .icon-grid_dialog{
 74 |      background-position: 0 -352px;
 75 |  }
 76 | .icon-grid_modal{
 77 |      background-position: 0 -384px;
 78 |  }
 79 | .icon-grid_toast{
 80 |      background-position: 0 -416px;
 81 |  }
 82 | .icon-grid_toptips{
 83 |      background-position: 0 -448px;
 84 |  }
 85 | .icon-grid_alert{
 86 |      background-position: 0 -480px;
 87 |  }
 88 | .icon-grid_msg{
 89 |      background-position: 0 -512px;
 90 |  }
 91 | .icon-grid_timeline{
 92 |      background-position: 0 -544px;
 93 |  }
 94 | .icon-grid_lazyload{
 95 |      background-position: 0 -576px;
 96 |  }
 97 | .icon-grid_more{
 98 |      background-position: 0 -608px;
 99 | }
100 | 
101 | .example-copyright {
102 |     padding: 20px 0;
103 |     display: inline-block;
104 |     width: 100%;
105 | }
106 | 
107 | .example-copyright.fixed{
108 |     position: fixed;
109 |     right: 0;
110 |     left: 0;
111 |     bottom: 0;
112 |     z-index: 10;
113 | }
114 | 
115 | .example-copyright .flag{
116 |     width: 66px;
117 |     height: 24px;
118 |     background: url("http://s.h5ui.io/img/example/flag.png?201612081905") no-repeat;
119 |     background-size: 66px;
120 |     display: block;
121 |     margin: 0 auto;
122 | }


--------------------------------------------------------------------------------