first commit

ant-design · Jan 13, 2016 · 5157644 · 5157644
commit 5157644
Show file tree

Hide file tree

Showing 15 changed files with 1,416 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+
diff --git a/README.md b/README.md
@@ -0,0 +1,78 @@
+![](https://t.alipayobjects.com/images/T1yplhXkhiXXXXXXXX.png)
+
+### Ant-UX
+
+#### 这是一套页面逻辑原型，它可以帮助你快速创建页面之间的逻辑图,了解用户流量
+
+配合工具: OmniGraffle ,Sketch
+
+- OmniGraffle 可以用来绘制图表，流程图，组织结构图以及插图，也可以用来组织头脑中思考的信息，组织头脑风暴的结果，绘制心智图，作为样式管理器，或设计网页或PDF文档的原型。
+它具有采用拖放的所见即所得界面。所谓的 "Stencils" 一组用于拖放的形状—可以作为 OmniGraffle 的插件使用，用户也可以创建自定义的 Stencils。
+- Sketch 是一个矢量设计软件，可以快速投入UI设计当中
+
+### 使用方式
+
+首先你需要 [下载](http://ux.ant.design) 我们的最新版本控件，然后点击导入到你的OmniGraffle中，这样你就可以在你的项目里调用这套控件，通过简单的拖拽就可以形成一张页面逻辑图
+如果不会操作OmniGraffle ，可以看这里的[初级教程](http://beforweb.com/node/202)，非常简单就能上手
+
+### 演示图
+
+
+
+### 更新日记
+
+目前版本：v0.6
+
+- v0.6 
+  - 修改“附加模块”名称，改为“附加元素”
+  - 增加 19 个附加元素
+
+- v0.5 
+  - 添加了功能／子元素表现形式
+  - 增加Start，End 组件 
+  - 增加页面功能之间连线规则- v0.5 
+  - 添加了功能／子元素表现形式
+  - 增加Start，End 组件 
+  - 增加页面功能之间连线规则
+
+- v0.4  
+  - 增加8个页面布局模块
+  - 增加基础模块控件，两种描述表示方式
+
+- v0.3  
+  - 增加附加模块，8个图例
+  - 增加斜角矩形，代表数据
+
+- v0.2
+  - 增加12个典型页面模版，
+
+- v0.1
+  - 12个线性模版，
+  - 8个基础组件
+  - 以及页面与页面三种连接方式。
+
+
+
+### 参考范例
+
+待补充
+
+### 规范
+
+- 初步规范参考控件描述
+- 详细规范待补充
+
+### 历史版本
+
+- v0.6 2015.11.13
+- v0.5 2015.9.17
+- v0.4 2015.9.09
+- v0.3 2015.8.31
+- v0.2 2015.7.27
+- v0.1 2015.7.11
+
+### 帮助
+
+我们不提供复杂页面模版，简单化主要为了解决设计师或工程师快速创建页面逻辑图.
+我们希望大家一起能参与到这个控件库的维护和升级，这样能帮助到很多的人。
+如果遇到问题 @CaiCai
diff --git a/app.js b/app.js
@@ -0,0 +1,26 @@
+/*
+ * Module dependencies
+ */
+var express = require('express');
+
+var app = express();
+var options = {
+  dotfiles: 'ignore',
+  etag: false,
+  extensions: ['htm', 'html'],
+  index: false,
+  maxAge: '1d',
+  redirect: false,
+  setHeaders: function (res, path, stat) {
+    res.set('x-timestamp', Date.now());
+  }
+}
+
+app.set('view engine', 'jade');
+app.use(express.static('./', options));
+
+app.get('/', function (req, res) {
+  res.render('index');
+});
+app.listen(3000);
+
diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,25 @@
+var gulp = require('gulp');
+var watch = require('gulp-watch');
+var jade = require('gulp-jade');
+var cssmin = require('gulp-cssmin');
+
+gulp.task('jade', function() {
+	gulp.src(['./views/*.jade'])
+		.pipe(jade({
+			pretty: true
+		}))
+		.pipe(gulp.dest('./'));
+});
+
+gulp.task('css', function () {
+	gulp.src('views/public/css/*.css')
+		.pipe(cssmin())
+		.pipe(gulp.dest('./public/css'));
+});
+
+gulp.task('js', function() {
+	gulp.src('views/public/js/*.js')
+	.pipe(gulp.dest('./public/js/'));
+});
+
+gulp.task('site', ['jade','css','js']);
diff --git a/index.html b/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+  <meta charset="utf-8">
+  <head>
+    <title>Ant-UX</title>
+    <link rel="stylesheet" type="text/css" href="public/css/style.css">
+  </head>
+  <body>
+    <div class="main">
+      <div class="part_1">
+        <div class="ux">
+          <div class="logo"><img src="https://t.alipayobjects.com/images/rmsweb/T1MXJiXaNlXXXXXXXX.svg" alt=""></div>
+          <div class="pic"><img src="https://t.alipayobjects.com/images/rmsweb/T1xFtiXm8mXXXXXXXX.svg" alt=""></div>
+        </div>
+      </div>
+      <div class="part_2">
+        <div class="download">
+          <div class="version">
+            <h2>Ant-UX Beta</h2>
+            <p>配合工具:<a href="http://downloads2.omnigroup.com/software/MacOSX/10.10/OmniGraffle-6.4.1.dmg">OmniGraffle</a></p>
+          </div>
+          <div class="update"><a href="public/zip/Ant-UX.zip" class="btn btn-1 btn-a remove"><span>下载最新版本</span></a></div>
+        </div>
+      </div>
+      <div class="part_3">
+        <div class="instructions">
+          <div class="title">
+            <h1>如何使用</h1>
+            <p>下载最新组件后, 导入 OmniGraffle, 通过简单的拖拽, 即可连接页面与页面, 帮你梳理 页面逻辑 <a href="https://github.com/ant-design/ant-ux/wiki">了解更多</a></p>
+            <div class="video">
+              <video id="example_video" controls="" preload="auto" width="960" height="540" poster="https://t.alipayobjects.com/images/rmsweb/T13aViXjxaXXXXXXXX.svg" data-setup="{'example_option':true}" class="video-js vjs-default-skin">
+                <source src="https://t.alipayobjects.com/images/rmsweb/L1JFJiXbXlXXXXXXXX.mov">
+              </video>
+            </div>
+          </div>
+          <div class="title">
+            <h1>教程</h1>
+            <p>OmniGraffle 是一款很棒的线框图工具,虽然它不是很完美的做到对交互原型设计的支持, 但是在做页面逻辑这块, 它可算得上是一把手, 如果对 OmniGraffle 不了解, 可以看这里这篇 <a href="http://beforweb.com/node/202">教程</a>, 很容易上手.</p>
+          </div>
+          <div class="title">
+            <h1>反馈和吐槽</h1>
+            <p>如果遇到问题, 欢迎 <a href="https://github.com/hi-caicai">@CaiCai</a>, 或者到我们的 <a href="https://github.com/ant-design/ant-ux/issues">仓库 </a>提需求</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "Ant-UX",
+  "version": "0.6.0",
+  "private": "true",
+  "main": "app.js",
+  "scripts": {
+    "start": "node app.js",
+    "build": "gulp site"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ant-design/ant-ux.git"
+  },
+  "dependencies": {
+    "express": "^3.0.0",
+    "gulp": "^3.9.0",
+    "gulp-jade": "^1.1.0",
+    "gulp-styl": "~1.1.0",
+    "gulp-watch": "^4.3.5",
+    "jade": "~1.11.0",
+    "jquery": "*",
+    "marked": "~0.3.3",
+    "nib": "~1.1.0"
+  },
+  "devDependencies": {
+    "gulp-sitemap": "~2.2.0"
+  }
+}
diff --git a/public/css/style.css b/public/css/style.css
diff --git a/public/js/jquery-1.11.3.min.js b/public/js/jquery-1.11.3.min.js