add index page

sdc-alibaba · Mar 6, 2014 · 90d1a3d · 90d1a3d
1 parent 36cc92d
commit 90d1a3d
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 20 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>案例</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="../build/css/sui.css" rel="stylesheet">
+    <link href="../build/css/sui-responsive.css" rel="stylesheet">
+    <link href="assets/css/docs.css" rel="stylesheet">
+    <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
+    <link rel="shortcut icon" href="assets/ico/favicon.png">
+    <script src="../js/lib/jquery.js"></script>
+    <script src="../build/js/sui.js"></script>
+    <!--[if lt IE 9]><script src="assets/js/html5shiv.js"></script><![endif]-->
+    <style type="text/css">
+      h1 {
+        font-size: 36px;
+        line-height: 1.5;
+        padding: 12px 0;
+      }
+      .jumbotron {
+        background-color: #6f5499;
+        color: #fff;
+        padding: 40px 0;
+      }
+
+      .sui-row {
+        margin-top: 20px;
+        border-radius: 6px;
+        background: #DEE8F3;
+      }
+
+      .sui-row [class^='span'] {
+        padding: 20px;
+        box-sizing: border-box;
+      }
+
+    </style>
+  </head>
+  <body>
+        <div class="sui-navbar navbar-inverse navbar-fixed-top">
+          <div class="navbar-inner"><a href="./index.html" class="sui-brand"><i class="sui-icon icon-github-alt">&nbsp;</i>SUI</a>
+            <ul class="sui-nav">
+              <li class="active"><a href="./index.html">首页</a></li>
+              <li><a href="./global.html">组件库</a></li>
+              <li><a href="./examples.html">案例</a></li>
+              <li><a href="./tutorial.html">教程</a></li>
+              <li><a href="./download.html">下载</a></li>
+              <li><a href="./about.html">关于</a></li>
+            </ul>
+          </div>
+        </div>
+    <div class="jumbotron">
+      <div class="sui-container">
+        <h1>SUI</h1>
+        <p class="sui-lead">SUI 是一个基于bootstrap开发的前端组件库。</p>
+      </div>
+    </div>
+    <script src="assets/js/google-code-prettify/prettify.js"></script>
+    <script src="assets/zeroclipboard/ZeroClipboard.js"></script>
+    <script src="assets/js/application.js"></script>
+    <script src="http://localhost:3456/livereload.js"></script>
+  </body>
+</html>
diff --git a/docs/templates/index.jade b/docs/templates/index.jade
@@ -0,0 +1,38 @@
+extends base
+
+block title
+  title 案例
+
+block head
+  style(type='text/css').
+    h1 {
+      font-size: 36px;
+      line-height: 1.5;
+      padding: 12px 0;
+    }
+    .jumbotron {
+      background-color: #6f5499;
+      color: #fff;
+      padding: 40px 0;
+    }
+
+    .sui-row {
+      margin-top: 20px;
+      border-radius: 6px;
+      background: #DEE8F3;
+    }
+
+    .sui-row [class^='span'] {
+      padding: 20px;
+      box-sizing: border-box;
+    }
+
+block header
+  +header('index')
+
+block content_wrap
+  .jumbotron
+    .sui-container
+      h1 SUI
+      p.sui-lead
+        | SUI 是一个基于bootstrap开发的前端组件库。
diff --git a/docs/templates/tutorial.jade b/docs/templates/tutorial.jade
@@ -16,7 +16,7 @@ block content_wrap
       此页面共涉及到了三个组件：面包屑、提示消息、表单。
       br
       | 最终页面效果见&nbsp;
-      a(href='../examples/todo-create.html', target="_blank") 新建待办事项。
+      a(href='examples/todo-create.html', target="_blank") 新建待办事项。
 
     h1.sui-page-header 第一步，下载文件
     div

diff --git a/docs/tutorial.html b/docs/tutorial.html
@@ -29,7 +29,7 @@
         </div>
     <div class="sui-container">
       <h1 class="sui-page-header">教程内容</h1>
-      <p class="sui-lead">本教程是创建一个非常简单的”新建待办事项”页面，可以填写待办事项的名称、时间和补充说明，可以显示创建结果。<br>此页面共涉及到了三个组件：面包屑、提示消息、表单。<br>最终页面效果见&nbsp;<a href="../examples/todo-create.html" target="_blank">新建待办事项。</a></p>
+      <p class="sui-lead">本教程是创建一个非常简单的”新建待办事项”页面，可以填写待办事项的名称、时间和补充说明，可以显示创建结果。<br>此页面共涉及到了三个组件：面包屑、提示消息、表单。<br>最终页面效果见&nbsp;<a href="examples/todo-create.html" target="_blank">新建待办事项。</a></p>
       <h1 class="sui-page-header">第一步，下载文件</h1>
       <div>
         <p>SUI 文件主要有三个，分别是：

diff --git a/index.html b/index.html
@@ -3,32 +3,25 @@
 <head>
 	<meta charset="UTF-8">
 	<title></title>
-  <link href="build/css/bootstrap.css" rel="stylesheet">
-  <link href="build/css/bootstrap-responsive.css" rel="stylesheet">
+  <link href="build/css/sui.css" rel="stylesheet">
+  <link href="build/css/sui-responsive.css" rel="stylesheet">
   <style type="text/css">
     a {
       font-size: 14px;
     }
   </style>
+  <script type="text/javascript">
+    window.location.href = 'docs/index.html';
+  </script>
 </head>
 <body>
-  <div class="container">
-    <div class="page-header">
-      <h1>DPL 一期组件列表</h1>
+  <div class="sui-container">
+    <div class="sui-page-header">
+      SUI v1.0
     </div>
-    <ul>
-      <li><a href="docs/demos/grid.html">栅格</a></li>
-      <li><a href="docs/demos/layout.html">2&3栏布局</a></li>
-      <li><a href="docs/demos/buttons.html">按钮</a></li>
-      <li><a href="docs/demos/dialog.html">对话框</a></li>
-      <li><a href="docs/demos/forms.html">表单</a></li>
-      <li><a href="docs/demos/msgs.html">提示消息</a></li>
-      <li><a href="docs/demos/pagination.html">分页器</a></li>
-      <li><a href="docs/demos/steps.html">进度条</a></li>
-      <li><a href="docs/demos/tab.html">标签页</a></li>
-      <li><a href="docs/demos/tables.html">表格</a></li>
-      <li><a href="docs/demos/tooltip.html">tooltip</a></li>
-    </ul>
+    <p class="sui-lead">
+      <a class="sui-btn btn-primary" href="docs/index.html">访问 SUI 官方网站</a>
+    </p>
   </div>
 </body>
 </html>