Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support Multi-language, added traditional chinese translation #89

Open
wants to merge 45 commits into
base: gh-pages
Choose a base branch
from
Open
Changes from 4 commits
Commits
Show all changes
45 commits
Select commit Hold shift + click to select a range
0c73c70
Add zh-TW folder
asika32764 Sep 18, 2014
f90d268
Added Immediately Invoked Function Expression for Mootools
bblurock Sep 22, 2014
c21626e
Added jQuery ver 1.11.1
bblurock Sep 22, 2014
b3860de
Added Dropdown menu for multi-languages support.
bblurock Sep 22, 2014
e17096d
Added multi-languages support to manual.js, it can now detect the sel…
bblurock Sep 22, 2014
2f31b6a
Merge pull request #7 from bblurock/gh-pages-multi-languages-support
asika32764 Sep 23, 2014
3401692
add raw translation of javascript coding standards
skylying Sep 24, 2014
4ba4cc4
translation refector
skylying Sep 25, 2014
9710c55
fix mark down format
skylying Sep 30, 2014
90d74e7
Merge pull request #8 from skylying/feature-js-coding-standards-chinese
asika32764 Sep 30, 2014
51afb0c
translate chapter "source-code-management" and "xml"
LeoOnTheEarth Oct 2, 2014
a03c89d
Translate
Oct 3, 2014
4b19f23
updated translate
LeoOnTheEarth Oct 3, 2014
8831e10
Quality fix
Oct 3, 2014
f9d8548
Merge pull request #12 from michael520/analysis-gh-pages
asika32764 Oct 3, 2014
6ead17f
Merge pull request #11 from LeoOnTheEarth/translate-20141003
asika32764 Oct 3, 2014
2c84c88
Translate menu
Oct 3, 2014
bf10705
Merge pull request #13 from michael520/menu-gh-pages
asika32764 Oct 3, 2014
945123c
Translate Introduction
asika32764 Oct 3, 2014
3e1660b
Update introduction.md
asika32764 Oct 3, 2014
4de75d2
Update introduction.md
asika32764 Oct 3, 2014
d562b51
html.md 翻譯
bblurock Sep 29, 2014
4cbd708
CSS.md 翻譯
bblurock Oct 6, 2014
2736b52
Update introduction.md
asika32764 Oct 6, 2014
9fa82d0
錯字,正確 good 錯誤 bad
bblurock Oct 6, 2014
f14bc8f
Merge pull request #10 from bblurock/translate-html-page
asika32764 Oct 6, 2014
3da6c77
Update introduction.md
asika32764 Oct 6, 2014
9e0a9ef
Merge pull request #15 from smstw/asika-intro
bblurock Oct 6, 2014
1400b99
新翻譯
takeshiwayne Oct 7, 2014
1baf391
翻譯revised2
takeshiwayne Oct 7, 2014
0a4f851
revised3
takeshiwayne Oct 7, 2014
0e7076d
改"開頭"和加逗號
takeshiwayne Oct 7, 2014
ab151df
revised 4th
takeshiwayne Oct 7, 2014
414a155
Fix php chapter
asika32764 Oct 13, 2014
59359da
Add Inline comment
asika32764 Oct 13, 2014
113bde6
Merge pull request #16 from takeshiwayne/docblock
LeoOnTheEarth Oct 13, 2014
212fe9a
Update inline-comments.md
asika32764 Oct 13, 2014
10b4642
Quality fix.
Oct 27, 2014
85f2d57
Merge pull request #18 from smstw/comment
LeoOnTheEarth Oct 27, 2014
0239e86
After language menu selected. populate menu
bblurock Oct 28, 2014
08a49ba
Merge pull request #20 from bblurock/bugfix-populate-menu
asika32764 Oct 28, 2014
3d44a04
Use language.md to track multi-lang.
bblurock Oct 28, 2014
5210398
Merge pull request #21 from bblurock/using-md-to-track-language
asika32764 Oct 28, 2014
4db3a4b
Removed outdated zh-TW translation.
bblurock Nov 3, 2014
4bbdd84
Merge pull request #22 from bblurock/remove_outdated_chinese_translation
asika32764 Nov 3, 2014
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
107 changes: 54 additions & 53 deletions manual/zh-TW/coding-standards/chapters/css.md
Original file line number Diff line number Diff line change
@@ -1,93 +1,93 @@
## CSS
These guidelines have been assembled following an examination of emerging practices, ideas and existing styleguides, namely:
這份準則是透過檢視一些新興的程式實作、想法、以及現有的編碼規範所集思廣益而成,並引用以下清單中所使用的概念:

1. [OOCSS Code Standards](https://github.com/stubbornella/oocss-code-standards)
2. [Oneweb Style Guide](https://github.com/nternetinspired/OneWeb/blob/master/STYLEGUIDE.md)
3. [Idiomatic CSS](https://github.com/necolas/idiomatic-css)


## Commenting
## 註解

### 主要段落
主要的程式碼段落必須以完整的註解區塊作為開頭,例如:

### Major sections
Major code sections should be named in caps and within a full comment block, eg:
```css
/* ==========================================================================
PRIMARY NAVIGATION
========================================================================== */
```

### Sub sections
Subsections should be normally cased and within an open comment block.
### 次要段落
次要段落須以開放式的註解區塊為開頭:

```css
/* Mobile navigation
========================================================================== */
```

### Verbose comments
### 文字註解
```css
/**
* Short description using Doxygen-style comment format
* 短的註解描述使用 Doxygen 風格的註解格式
*
* The first sentence of the long description starts here and continues on this
* line for a while finally concluding here at the end of this paragraph.
*
* The long description is ideal for more detailed explanations and
* documentation. It can include example HTML, URLs, or any other information
* that is deemed necessary or useful.
* 長的註解描述很適合做詳細的解釋與說明。如果有需要,可以使用 HTML、URLs 或其他資訊作為範例。
*
* @tag This is a tag named 'tag'
*
* TODO: This is a todo statement that describes an atomic task to be completed
* at a later date. It wraps after 80 characters and following lines are
* indented by 2 spaces.
* TODO: 這是一個註解區塊中 todo 的範例,描述之後需要被完成的項目。
* 一行應小於 80 個字元,換行之後須以兩個空白作為縮排開頭
*/
```

### Basic comments
### 基本註解方式
```css
/* Basic comment */
```

### Uncompiled LESS/Scss comments
### 未編譯的 LESS/Scss 註解
```css
// These are stripped on compile.
// 這段註解在編譯的時候會被移除
```

## Class naming
Use dashes to create compound class names:
## Class 命名方式
使用破折號 (-) 來處理復合式命名:

```css
/* Good - use dashes */
/* 正確 - 使用破折號 */
.compound-class-name {…}

/* Bad - uses underscores */
/* 錯誤 - 使用底線 */
.compound_class_name {…}

/* Bad - uses camelCase */
/* 錯誤 - 使用駝峰式命名 */
.compoundClassName {…}

/* Bad - does not use seperators */
/* 錯誤 - 不使用符號分隔 */
.compoundclassname {…}
```

### Indentation
Rules should be indented one tab (equal to 4 spaces):
### 縮排
須以一個 tab 來縮排 (等於 4 個空白)

```css
/* Good */
/* 正確 */
.example {
color: #000;
visibility: hidden;
}

/* Bad - all on one line */
/* 錯誤 - 寫在同一行 */
.example {color: #000; visibility: hidden;}
```

LESS/Scss 也應該正確被縮排寫成巢狀,其子選擇器還有樣式規則都應該縮排。巢狀的規則須以一空行作為間隔:
LESS/Scss should also be nested , with child selectors and rules indented again. Nested rules should also be spaced by one line:

```css
/* Good */
/* 正確 */
.example {

> li {
@@ -101,7 +101,7 @@ LESS/Scss should also be nested , with child selectors and rules indented again.
}

}
/* Bad - nested rules not indented */
/* 錯誤 - 巢狀的樣式沒有正確縮排 */
.example {

> li {
@@ -115,7 +115,7 @@ LESS/Scss should also be nested , with child selectors and rules indented again.
}

}
/* Bad - nested rules not spaced */
/* 錯誤 - 巢狀的規則沒有以一空行作為間隔 */
.example {
> li {
float: none;
@@ -127,93 +127,94 @@ LESS/Scss should also be nested , with child selectors and rules indented again.
}
```

### Alignment
The opening brace must be on the same line as the last selector and preceded by a space. The closing brace must be on its own line after the last property and be indented to the same level as the opening brace.
### 對齊
左大括號必須跟選擇器位於同一行,並前綴一空白字元。右大括號須存在於最後一個屬性規則之後並獨立於新的一行,且應與左大括號處於相同的縮排。

```css
/* Good */
/* 正確 */
.example {
color: #fff;
}

/* Bad - closing brace is in the wrong place */
/* 錯誤 - 右大括號的位置錯了,沒有正確縮排 */
.example {
color: #fff;
}

/* Bad - opening brace missing space */
/* 錯誤 - 左大括號之前沒有空白 */
.example{
color: #fff;
}
```

### Property Format
Each property must be on its own line and indented one level. There should be no space before the colon and one space after. All properties must end with a semicolon.
### 樣式屬性格式
每一個屬性都應該存在獨立的一行,並縮排一個層級。冒號之前不應該有空白字元,但須後綴一空白字元。所有的樣式屬性須以分號 (;) 作為結尾。

```css
/* Good */
/* 正確 */
.example {
background: black;
color: #fff;
}

/* Bad - missing spaces after colons */
/* 錯誤 - 冒號後面沒有後綴空白 */
.example {
background:black;
color:#fff;
}

/* Bad - missing last semicolon */
/* 錯誤 - 沒有以分號作為結尾 */
.example {
background: black;
color: #fff
}
```

### HEX values
HEX values must be declared in lowercase and shorthand:
### HEX 值
HEX 值應該使用小寫並以最小縮寫宣告:

```css
/* Good */
/* 正確 */
.example {
color: #eee;
}

/* Bad */
/* 錯誤 */
.example {
color: #EEEEEE;
}
```

### Attribute selectors
Always use double quotes around attribute selectors.
### HTML 屬性選擇器
屬性選擇器須以雙引號包含。

```css
/* Good */
/* 正確 */
input[type="button"] {
...
}

/* Bad - missing quotes */
/* 錯誤 - 沒有雙引號 */
input[type=button] {
...
}

/* Bad - using single quote */
/* 錯誤 - 使用單引號 */
input[type='button'] {
...
}
```

### Zero value units
Zero values should not carry units.
### 零值的單位
零值不應該使用單位。

```css
/* Good */
/* 正確 */
.example {
padding: 0;
}

/* Bad - uses units */
/* 錯誤 - 使用單位 */
.example {
padding: 0px;
}
Loading