Permalink
Browse files

update english doc

  • Loading branch information...
1 parent 21510fb commit 613ed526dbde90b6bb323f286851d6265019d00f @lihongxun945 committed Dec 2, 2015
View
@@ -0,0 +1,48 @@
+# light7 - a light H5 UI lib for webapp
+
+简单易用的h5 UI库,是从 [SUI Mobile](https://github.com/sdc-alibaba/SUI-Mobile) Fork 出来的一个版本。 官网地址: [http://www.light7.org/](http://www.light7.org/)
+
+**官网因为没有备案,服务器还在国外,国内可以暂时用 [http://123.56.245.102/](http://123.56.245.102/)**
+
+# 下载
+
+建议下载源码自行编译。如果不想编译,你也可以直接切换到 `build` 分支,这个分支包含全部的编译后的JS,CSS和文档。或者直接点击 [这里下载](https://github.com/lihongxun945/light7/archive/build.zip).
+
+# grunt 配置
+
+执行 `grunt` 编译打包所有JS和CSS文件,并生成离线文档。
+
+执行 `grunt watch` 进入 watch 状态。
+
+
+# 离线文档
+
+
+你可以直接在nginx之类的服务器中打开 `_site` 目录。
+
+或者执行 `jekyll serve` 打开本地服务器. 如果你的系统中没有ruby,请先[安装ruby](https://www.ruby-lang.org/en/documentation/installation/)。然后再安装 `jekyll``rouge` (执行 `gem install jekyll``gem install rouge`)。
+如果发现 `gem install` 失败,可能是因为 gem 服务器被和谐,参考[淘宝gem镜像](https://ruby.taobao.org/)
+
+# 兼容性
+
+兼容 iOS 6+,Android 4.0+
+
+
+# 联系方式
+
+- 请加QQ群 255389987
+- 有比较丰富的手机H5开发经验且对这个项目感兴趣的同学可以加群,然后加群主联系。
+
+# 关于作者
+
+前阿里巴巴国际UED前端, 在阿里主要负责 [SUI Mobile](https://github.com/sdc-alibaba/SUI-Mobile) 和 [Framework7-Plus](https://github.com/sdc-fe/Framework7-Plus) 以及 [Framework7](http://framework7.taobao.org/) 。博客地址:http://blog.csdn.net/lihongxun945?viewmode=contents。
+
+# 关于 f7, sui 和 light7
+
+很多人没搞清楚这三者的关系。
+
+F7 是国外大神写的一个UI库。SUI 是我在阿里的时候基于F7改造的,主要是提升兼容性以及更轻量化。
+
+现在因为离职了,不方便继续改阿里的东西。 所以从SUI fork出了一个新的 light7。以后我个人只会维护 light7, SUI 属于阿里巴巴国际UED团队。
+
+*就事论事,尊重版权,上述提到的 SUI Mobile & Framework7-cn 均是阿里巴巴国际UED团队的成果*
View
@@ -1,48 +1,37 @@
-# light7 - a light H5 UI lib for webapp
+# Light7 - a light and easy to use UI lib for webapp
-简单易用的h5 UI库,是从 [SUI Mobile](https://github.com/sdc-alibaba/SUI-Mobile) Fork 出来的一个版本。 官网地址: [http://www.light7.org/](http://www.light7.org/)
+Light7 is a fork of [Framework7](https://github.com/nolimits4web/Framework7). Framework7 is a very amazing framework for build webapp. I use it in my project last year.
-**官网因为没有备案,服务器还在国外,国内可以暂时用 [http://123.56.245.102/](http://123.56.245.102/)**
+But I find it's to hard to learn, and most time I only need a simple UI lib instead of a heavy framework. So, I forked Framework7 and rewrite it to be Light7 - a very light and easy to use UI lib.I have fix some compatibility problems on Android 4.0~4.2 too.
-# 下载
+For more docs please visit [Light7 Website](http://light7.org/)
-建议下载源码自行编译。如果不想编译,你也可以直接切换到 `build` 分支,这个分支包含全部的编译后的JS,CSS和文档。或者直接点击 [这里下载](https://github.com/lihongxun945/light7/archive/build.zip).
+# Download
-# grunt 配置
+Please clone this repo and compile by yourself. The `master` branch contains only source file, You can clone and change to `build` branch to get all compiled files under `dist/`.
-执行 `grunt` 编译打包所有JS和CSS文件,并生成离线文档。
+# Grunt
-执行 `grunt watch` 进入 watch 状态。
+exec `grunt` to compile all source file, and the compiled file is in `dist` dir.
+`grunt watch` to enter `watch mode`.
-# 离线文档
+# Offline docs
+exec `jekyll serve` to open local server. You should install [ruby](https://www.ruby-lang.org/en/documentation/installation/), and then install `jekyll` and `rouge`.
-你可以直接在nginx之类的服务器中打开 `_site` 目录。
+Also, you can change to `build` branch, you will find all compiled docs under `_site`.
-或者执行 `jekyll serve` 打开本地服务器. 如果你的系统中没有ruby,请先[安装ruby](https://www.ruby-lang.org/en/documentation/installation/)。然后再安装 `jekyll``rouge` (执行 `gem install jekyll``gem install rouge`)。
-如果发现 `gem install` 失败,可能是因为 gem 服务器被和谐,参考[淘宝gem镜像](https://ruby.taobao.org/)
+**Don't open `docs` dir in your browser please**
-# 兼容性
+# Compatibility
-兼容 iOS 6+,Android 4.0+
+- iOS 6+
+- Android 4.0+
+Create issue if you find any compatibility problems.
-# 联系方式
+# Contact me
-- 请加QQ群 255389987
-- 有比较丰富的手机H5开发经验且对这个项目感兴趣的同学可以加群,然后加群主联系。
-
-# 关于作者
-
-前阿里巴巴国际UED前端, 在阿里主要负责 [SUI Mobile](https://github.com/sdc-alibaba/SUI-Mobile) 和 [Framework7-Plus](https://github.com/sdc-fe/Framework7-Plus) 以及 [Framework7](http://framework7.taobao.org/) 。博客地址:http://blog.csdn.net/lihongxun945?viewmode=contents。
-
-# 关于 f7, sui 和 light7
-
-很多人没搞清楚这三者的关系。
-
-F7 是国外大神写的一个UI库。SUI 是我在阿里的时候基于F7改造的,主要是提升兼容性以及更轻量化。
-
-现在因为离职了,不方便继续改阿里的东西。 所以从SUI fork出了一个新的 light7。以后我个人只会维护 light7, SUI 属于阿里巴巴国际UED团队。
-
-*就事论事,尊重版权,上述提到的 SUI Mobile & Framework7-cn 均是阿里巴巴国际UED团队的成果*
+- mailto: lihongxun945@gmail.com
+- forum is coming...
@@ -1,47 +1,47 @@
<article class="component" id='actions'>
- <h2 class="component-title">操作表</h2>
- <p class="component-description">操作表可以让用户从多个可选的操作中选择一个</p>
- <p class="component-description"><code>$.actions(buttons)</code> - 创建并弹出一个操作表</p>
+ <h2 class="component-title">Action sheet</h2>
+ <p class="component-description">Action sheet can show many action buttons for user to choose.</p>
+ <p class="component-description"><code>$.actions(buttons)</code> - create and show Action Sheet.</p>
<ul>
- <li><code>buttons</code> - 显示的几个按钮,你也可以把按钮分组</li>
+ <li><code>buttons</code> - buttons in action sheet, you can put buttons in different group.</li>
</ul>
- <p>你可以通过 <code>color: "danger"</code> 来指定按钮的文案为红色</p>
- <p>或者通过 <code>bg: "danger"</code> 来指定按钮的背景为红色</p>
+ <p>use <code>color: "danger"</code> to set text color as danger.</p>
+ <p>use <code>bg: "danger"</code> to set background color as danger.</p>
<div class="component-example component-example-fullbleed">
<header class="bar bar-nav">
- <h1 class="title">操作表</h1>
+ <h1 class="title">Actions</h1>
</header>
<div class="content">
<div class="content-block">
<!-- In data-popup attribute we specify CSS selector of popup we need to open -->
- <p><a href="#" class="create-actions">选择操作</a></p>
+ <p><a href="#" class="create-actions">show actions</a></p>
</div>
</div>
<script>
$(document).on('click','.create-actions', function () {
var buttons1 = [
{
- text: '请选择',
+ text: 'title',
label: true
},
{
- text: '卖出',
+ text: 'Tom',
bold: true,
color: 'danger',
onClick: function() {
- $.alert("你选择了“卖出“");
+ $.alert("you choose 'Tom'");
}
},
{
- text: '买入',
+ text: 'Bob',
onClick: function() {
- $.alert("你选择了“买入“");
+ $.alert("you choose 'Bob'");
}
}
];
var buttons2 = [
{
- text: '取消',
+ text: 'cancel',
bg: 'danger'
}
];
@@ -52,45 +52,45 @@ <h1 class="title">操作表</h1>
</div>
{% highlight html %}
<header class="bar bar-nav">
- <h1 class="title">操作表</h1>
+ <h1 class="title">Actions</h1>
</header>
<div class="content">
<div class="content-block">
<!-- In data-popup attribute we specify CSS selector of popup we need to open -->
- <p><a href="#" class="create-actions">选择操作</a></p>
+ <p><a href="#" class="create-actions">please choose</a></p>
</div>
</div>
{% endhighlight %}
{% highlight js %}
$(document).on('click','.create-actions', function () {
- var buttons1 = [
- {
- text: '请选择',
- label: true
- },
- {
- text: '卖出',
- bold: true,
- color: 'danger',
- onClick: function() {
- $.alert("你选择了“卖出“");
- }
- },
- {
- text: '买入',
- onClick: function() {
- $.alert("你选择了“买入“");
- }
+ var buttons1 = [
+ {
+ text: 'title',
+ label: true
+ },
+ {
+ text: 'Tom',
+ bold: true,
+ color: 'danger',
+ onClick: function() {
+ $.alert("you choose 'Tom'");
}
- ];
- var buttons2 = [
- {
- text: '取消',
- bg: 'danger'
+ },
+ {
+ text: 'Bob',
+ onClick: function() {
+ $.alert("you choose 'Bob'");
}
- ];
- var groups = [buttons1, buttons2];
- $.actions(groups);
- });
+ }
+ ];
+ var buttons2 = [
+ {
+ text: 'cancel',
+ bg: 'danger'
+ }
+ ];
+ var groups = [buttons1, buttons2];
+ $.actions(groups);
+ });
{% endhighlight %}
</article>
@@ -1,23 +1,23 @@
<article class="component active" id="bars">
- <h2 class="component-title">标题栏</h2>
- <p class="component-description">标题栏放在页面顶部</p>
+ <h2 class="component-title">Titlebar</h2>
+ <p class="component-description">Title bar is on top of page.</p>
<div class="component-example component-example-fullbleed">
<header class="bar bar-nav">
- <h1 class="title">标题</h1>
+ <h1 class="title">title</h1>
</header>
</div>
{% highlight html %}
<header class="bar bar-nav">
- <h1 class="title">标题</h1>
+ <h1 class="title">title</h1>
</header>
{% endhighlight %}
</article>
<article class="component">
- <h3 class="component-title">带按钮的标题栏</h3>
+ <h3 class="component-title">Title bar with buttons</h3>
<div class="component-example component-example-fullbleed">
<header class="bar bar-nav">
@@ -33,66 +33,61 @@ <h1 class="title">Title</h1>
{% highlight html %}
<header class="bar bar-nav">
<button class="button pull-left">
- 按钮
+ Btn
</button>
<button class="button pull-right">
- 按钮
+ Btn
</button>
- <h1 class="title">标题</h1>
+ <h1 class="title">Title</h1>
</header>
{% endhighlight %}
</article>
<article class="component">
- <h3 class="component-title">带图标的标题栏</h3>
+ <h3 class="component-title">With icons</h3>
<div class="component-example component-example-fullbleed">
- <header class="bar bar-nav">
- <a class="icon icon-left pull-left"></a>
- <a class="icon icon-refresh pull-right"></a>
- <h1 class="title">标题</h1>
- </header>
</div>
{% highlight html %}
<header class="bar bar-nav">
<a class="icon icon-left pull-left"></a>
<a class="icon icon-refresh pull-right"></a>
- <h1 class="title">标题</h1>
+ <h1 class="title">title</h1>
</header>
{% endhighlight %}
</article>
<article class="component">
- <h3 class="component-title">带链接和图标</h3>
+ <h3 class="component-title">With icons and text</h3>
<div class="component-example component-example-fullbleed">
<header class="bar bar-nav">
<button class="button button-link button-nav pull-left">
<span class="icon icon-left"></span>
- 返回
+ back
</button>
<button class="button button-link button-nav pull-right">
- 下一步
+ next
<span class="icon icon-right"></span>
</button>
- <h1 class="title">标题</h1>
+ <h1 class="title">title</h1>
</header>
</div>
{% highlight html %}
<header class="bar bar-nav">
<button class="button button-link button-nav pull-left">
<span class="icon icon-left"></span>
- 返回
+ back
</button>
<button class="button button-link button-nav pull-right">
- 下一步
+ next
<span class="icon icon-right"></span>
</button>
- <h1 class="title">标题</h1>
+ <h1 class="title">title</h1>
</header>
{% endhighlight %}
@@ -1,11 +1,11 @@
<div class="docs-footer">
<!-- Social links -->
- <p class="docs-footer-text">@author <a href="mailto:lihongxun945@gmail.com">任行</a> QQ群: 255389987</p>
+ <p class="docs-footer-text">@author <a href="mailto:lihongxun945@gmail.com">lihongxun945</a></p>
<ul class="docs-footer-links">
- <li>友情链接</li>
- <li><a href="http://f7cn.com/" data-ignore="push">Framework7</a></li>
+ <li>links</li>
+ <li><a href="http://www.idangero.us/framework7/" data-ignore="push">Framework7</a></li>
</ul>
</div>
Oops, something went wrong.

0 comments on commit 613ed52

Please sign in to comment.