From 5e10f1294784e54219745136f145aeef0cbf5e78 Mon Sep 17 00:00:00 2001 From: baiyaaaaa <bigpet1991@gmail.com> Date: Thu, 1 Sep 2016 12:34:33 +0800 Subject: [PATCH] add color && typo docs --- examples/docs/color.md | 157 ++++++++++++++++++++++++++++++++++++ examples/docs/typography.md | 148 +++++++++++++++++++++++++++++++++ examples/nav.config.json | 12 +++ 3 files changed, 317 insertions(+) create mode 100644 examples/docs/color.md create mode 100644 examples/docs/typography.md diff --git a/examples/docs/color.md b/examples/docs/color.md new file mode 100644 index 000000000..fe08b398e --- /dev/null +++ b/examples/docs/color.md @@ -0,0 +1,157 @@ +<style> + .demo-color-box { + border-radius: 4px; + padding: 20px; + height: 74px; + box-sizing: border-box; + color: #fff; + font-size: 14px; + + & .value { + font-size: 12px; + opacity: 0.69; + } + } + .demo-color-box-group { + .demo-color-box { + border-radius: 0; + } + .demo-color-box:first-child { + border-radius: 4px 4px 0 0; + } + .demo-color-box:last-child { + border-radius: 0 0 4px 4px; + } + } + .bg-blue-light { + background-color: #58b7ff; + } + .bg-blue, + .bg-info { + background-color: #20a0ff; + } + .bg-blue-dark { + background-color: #1d8ce0; + } + + .bg-success { + background-color: #13CE66; + } + .bg-warning { + background-color: #f7ba2a; + } + .bg-danger { + background-color: #ff4949; + } + + .bg-black { + background-color: #1f2d3d; + } + .bg-black-light { + background-color: #324057; + } + .bg-black-lighter { + background-color: #475669; + } + + .bg-silver { + background-color: #8492a6; + } + .bg-silver-light { + background-color: #99a9bf; + } + .bg-silver-lighter { + background-color: #c0ccda; + } + + .bg-gray { + background-color: #d3dce6; + } + .bg-gray-light { + background-color: #e5e9f2; + } + .bg-gray-lighter { + background-color: #eff2f7; + } + + .bg-white-dark { + background-color: #f9fafc; + } + + .color-gray { + color: #5e6d82; + } +</style> + +## Color 色彩 + +Element 为了避免视觉传达差异,使用一套特定的调色板来规定颜色,为你所搭建的产品提供一致的外观视觉感受。 + +### 主色 + +Element 主要品牌颜色是鲜艳、友好的蓝色。 + +<el-row :gutter="12"> + <el-col :span="8"> + <div class="demo-color-box bg-blue-light">Light Blue<div class="value">#58B7FF</div></div> + </el-col> + <el-col :span="8"> + <div class="demo-color-box bg-blue">Blue<div class="value">#20A0FF</div></div> + </el-col> + <el-col :span="8"> + <div class="demo-color-box bg-blue-dark">Dark Blue<div class="value">#1D8CE0</div></div> + </el-col> +</el-row> + +### 辅助色 + +除了主色外的场景色,需要在不同的场景中使用(例如危险色表示危险的操作)。每种颜色都有较浅和较深两种。 + +<el-row :gutter="12"> + <el-col :span="6"> + <div class="demo-color-box bg-info">Blue<div class="value">#20A0FF</div></div> + </el-col> + <el-col :span="6"> + <div class="demo-color-box bg-success">Success<div class="value">#13CE66</div></div> + </el-col> + <el-col :span="6"> + <div class="demo-color-box bg-warning">Warning<div class="value">#F7BA2A</div></div> + </el-col> + <el-col :span="6"> + <div class="demo-color-box bg-danger">Danger<div class="value">#ff4949</div></div> + </el-col> +</el-row> + +### 中性色 + +中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。 + +<el-row :gutter="12"> + <el-col :span="6"> + <div class="demo-color-box-group"> + <div class="demo-color-box bg-black">Black<div class="value">#1f2d3d</div></div> + <div class="demo-color-box bg-black-light">Light Black<div class="value">#324057</div></div> + <div class="demo-color-box bg-black-lighter">Extra Light Black<div class="value">#475669</div></div> + </div> + </el-col> + <el-col :span="6"> + <div class="demo-color-box-group"> + <div class="demo-color-box bg-silver">Silver<div class="value">#8492a6</div></div> + <div class="demo-color-box bg-silver-light">Light Silver<div class="value">#99a9bf</div></div> + <div class="demo-color-box bg-silver-lighter">Extra Light Silver<div class="value">#c0ccda</div></div> + </div> + </el-col> + <el-col :span="6"> + <div class="demo-color-box-group"> + <div class="demo-color-box color-gray bg-gray">Gray<div class="value">#d3dce6</div></div> + <div class="demo-color-box color-gray bg-gray-light">Light Gray<div class="value">#e5e9f2</div></div> + <div class="demo-color-box color-gray bg-gray-lighter">Extra Light Gray<div class="value">#eff2f7</div></div> + </div> + </el-col> + <el-col :span="6"> + <div class="demo-color-box-group" style="border: 1px solid #e0e6ed;border-radius: 4px;"> + <div class="demo-color-box color-gray bg-white">Dark White<div class="value">#F9FAFC</div></div> + <div class="demo-color-box color-gray bg-white-dark">White<div class="value">#FFFFFF</div></div> + </div> + </el-col> +</el-row> diff --git a/examples/docs/typography.md b/examples/docs/typography.md new file mode 100644 index 000000000..15249a639 --- /dev/null +++ b/examples/docs/typography.md @@ -0,0 +1,148 @@ +<style> + .demo-typo-box { + height: 200px; + width: 200px; + position: relative; + border: 1px solid #eaeefb; + font-size: 40px; + color: #1f2d3d; + text-align: center; + line-height: 162px; + padding-bottom: 36px; + box-sizing: border-box; + display: inline-block; + margin-right: 17px; + + .name { + position: absolute; + bottom: 0; + width: 100%; + height: 35px; + border-top: 1px solid #eaeefb; + font-size: 14px; + color: #8492a6; + line-height: 35px; + text-align: left; + text-indent: 10px; + } + } + .demo-typo-size { + .h1 { + font-size: 20px; + } + .h2 { + font-size: 18px; + } + .h3 { + font-size: 16px; + } + .text-regular { + font-size: 14px; + } + .text-small { + font-size: 13px; + } + .text-smaller { + font-size: 12px; + } + .color-dark-light { + color: #99a9bf; + } + } + .typo-PingFang { + font-family: 'PingFang SC'; + } + .typo-Hiragino { + font-family: 'Hiragino Sans GB'; + } + .typo-Microsoft { + font-family: 'Microsoft YaHei'; + } + /* 英文 */ + .typo-Helvetica-Neue { + font-family: 'Helvetica Neue'; + } + .typo-Helvetica { + font-family: 'Helvetica'; + } + .typo-Arial { + font-family: 'Arial'; + } +</style> + +## Typography 字体 + +我们对字体进行统一规范,力求在各个操作系统下都有最佳展示效果。 + +### 中文字体 + +<div class="demo-typo-box typo-PingFang"> + 和畅惠风 + <div class="name">PingFang SC</div> +</div> +<div class="demo-typo-box typo-Hiragino"> + 和畅惠风 + <div class="name">Hiragino Sans GB</div> +</div> +<div class="demo-typo-box typo-Microsoft"> + 和畅惠风 + <div class="name">Microsoft YaHei</div> +</div> + +### 英文/数字字体 + +<div class="demo-typo-box typo-Helvetica-neue"> + RGag + <div class="name">Helvetica Neue</div> +</div> +<div class="demo-typo-box typo-Helvetica"> + RGag + <div class="name">Helvetica</div> +</div> +<div class="demo-typo-box typo-Arial"> + RGag + <div class="name">Arial</div> +</div> + +### 字体家族 css 代码: + +```css +font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; +``` + +### 字体使用规范: + +<table class="demo-typo-size"> + <tbody> + <tr> + <td class="h1">主标题</td> + <td class="h1">用 Element 快速搭建页面</td> + <td class="color-dark-light">20px Extra large</td> + </tr> + <tr> + <td class="h2">标题</td> + <td class="h2">用 Element 快速搭建页面</td> + <td class="color-dark-light">18px large</td> + </tr> + <tr> + <td class="h3">小标题</td> + <td class="h3">用 Element 快速搭建页面</td> + <td class="color-dark-light">16px Medium</td> + </tr> + <tr> + <td class="text-regular">正文</td> + <td class="text-regular">用 Element 快速搭建页面</td> + <td class="color-dark-light">14px Small</td> + </tr> + <tr> + <td class="text-small">正文(小)</td> + <td class="text-small">用 Element 快速搭建页面</td> + <td class="color-dark-light">13px Extra Small</td> + </tr> + <tr> + <td class="text-smaller">辅助文字</td> + <td class="text-smaller">用 Element 快速搭建页面</td> + <td class="color-dark-light">12px Extra Extra Small</td> + </tr> + </tbody> +</table> diff --git a/examples/nav.config.json b/examples/nav.config.json index b92076044..696bb3432 100644 --- a/examples/nav.config.json +++ b/examples/nav.config.json @@ -10,6 +10,18 @@ "title": "Layout 布局", "description": "" }, + { + "path": "/color", + "name": "色彩 (color)", + "title": "Color 色彩", + "description": "" + }, + { + "path": "/typography", + "name": "字体 (typography)", + "title": "Typography 字体", + "description": "" + }, { "path": "/icon", "name": "图标 (icon)",