Beta Testing

介紹

aLib 是一套輕量級的 CSS 套件，著重的重點是版面安排、圖文區塊的安排等基本排版內容。aLib 使用 Normalize.css 作為初值化基礎，僅修改小部份原始 HTML 標籤格式，例如 H1~H6 標題。

自動自適應編排

aLib 的網格系統，針對手機直式、手機橫式、平板橫式及大畫面等不同顯示裝置，自動調整編排。使用者不需要針對同一區塊內容，加注不同尺寸大小的 CSS 樣式。

下列三種裝置，一般撰寫方式為 <div class="col-xs-6 col-sm-3 col-lg-2"></div> 在 aLib 中只要寫成 <div class="grid4"></div> 就完成

中文也行

aLib 大部份樣式名稱，都支援中文，例如 .text-shadow 也可以寫成 .文字陰影

	aLib 的 CSS 樣式名稱，中文嘛 A 通

無 Javascript

aLib 不包含任何 Javascript，一切動畫或動作，都由 CSS transition 或 animation 完成

中文字型

檔案及安裝

檔案清單如下，安裝時，請將字型檔資料夾 fonts 與 CSS 檔案，放置在同階層資料夾中

normalize.css
aLib.basic.css
aLib.style.css
aLib.grid.css
aLib.css
customer.css
fonts\idautoationhc39m_free-wefbont.svg
fonts\idautoationhc39m_free-wefbont.ttf
fonts\idautoationhc39m_free-wefbont.otf
fonts\idautoationhc39m_free-wefbont.eot
fonts\idautoationhc39m_free-wefbont.woff

上述檔案清單中，customer.css 是預設好供使用者自行修改的樣式表檔案，內容包括字型設定，MediaQuery 區間等。

使用方法

完整使用 aLib.css

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="{path}/aLib.css">
	<link rel="stylesheet" href="{path}/customer.css">
</head>

僅使用 aLib 樣式(不使用網格系統)

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="{path}/aLib.basic.css">
	<link rel="stylesheet" href="{path}/aLib.style.css">
	<link rel="stylesheet" href="{path}/customer.css">
</head>

字型

aLib 字型使用設定順序如下，如果要修改，在自己的CSS中，以同樣語法覆蓋即可。

*{
  font-family:Lucida Sans Unicode,Trebuchet MS,Verdana,Arial,黑體,宋體,微軟正黑體,新細明體,cwTeXHei;
}

部份字型在您的畫面上，無法正常顯示，這是正常情況

MediaQuery

MediaQuery是針對不同尺寸顯示裝置，可以各別設定樣式，例如，在大多數行動裝置中瀏覽本頁，右側的功能表是隱藏的

aLib 對版面寬度的區分點為：568px、768px、992px，共四個區間，分別代表：

以下設定，均包含在空白 CSS 檔案 customer.css 中

@media screen and (min-width:993px){
	/*手機直式*/
}
@media screen and (max-width:992px) and (min-width:769px){
	/*手機橫式、平板直式*/
}
@media screen and (max-width:768px) and (min-width:569px){
	/*平板橫式*/
}
@media screen and (max-width:568px){
	/*桌上型顯示器*/
}

BoxModel

aLib 對所有元件 BoxModel 的設定，一律加上 box-sizing:border-box;

瀏覽器對於區塊大小的認定，原則上是：指定的寬度及高度，是不包含留白(padding)、邊界(margin)以及外框(border)

例如下列設定：

#alib-list{
	width:480px;
	height:240px;
	padding:12px;
	margin:20px 36px;
	border:#00F 6px solid;
}

上圖，黃底文字部份的尺寸是寬 480px 高 240px，也就是初始設定的大小，但是要加上留白上右下左各 12px，再加上藍色框線四周各 6px，所以實際上區塊的尺寸，就變成寬 516px (480+12+12+6+6)，高 276px (240+12+12+6+6)。也就是紅框代表的部份

這種計算和編排方式，大多數情況沒有太大問題，但對於需要指定元件寬度滿版(width:100%)時，如果再加上留白，往往就超出畫面範圍，例如：

上例，沒有留白的文字欄位，可以完整滿版顯示在畫面中，不過少了留白，稍嫌擁擠，美觀度比第二列的欄位要略遜；但，第二列欄位卻因為寬度加上留白，早己超出版面，而最右側被截掉

本文件語法

凡本文件中，以點開頭，如 .cssName 代表這是一個樣式名稱。

某些樣式，可以使用多個樣式名稱，都有相同效果，則文件中，在樣式名稱中間加上直線區分，例如：.blue | .藍 這代表兩者皆可以使用

一段藍色文字
一段藍色文字

標題 H1~H6

註解區塊 Blockquote

	:

	:

	:

	:

	:

	:

	:

影像 Images

The quick brown fox jumps over the lazy dog is an English-language pangram—a phrase that contains all of the letters of the alphabet. It is commonly used for touch-typing practice. It is also used to test typewriters and computer keyboards, show fonts, and other applications involving all of the letters in the English alphabet. Owing to its brevity and coherence, it has become widely known.

The quick brown fox jumps over the lazy dog is an English-language pangram—a phrase that contains all of the letters of the alphabet. It is commonly used for touch-typing practice. It is also used to test typewriters and computer keyboards, show fonts, and other applications involving all of the letters in the English alphabet. Owing to its brevity and coherence, it has become widely known.

...
...

清單 Lists

	
list
	
list
	
list

	
list
	
list
	
list

	
list
	
list
	
list

	
list
	
list
	
list

網格系統 Grid

兩種方式，請使用 class="row" 作為上層樣式。

class="gridN" | class="網格N"

使用 gridN 網格系統，大多數情況只要考慮 > 992px 這種版面安排即可，aLib 在不同尺寸裝置中，僅可能為設計人員安排合適版面。詳情如下：

網格使用範例 > 992px

以下顯示範例，為確保不同顯示裝置寬度能顯示相同網格數，特別繪製，不適用一般設定情況。真實網格系統在不同寬度上呈現效果，請檢視 Grid.html

網格使用範例 > 768px

以下顯示範例，為確保不同顯示裝置寬度能顯示相同網格數，特別繪製，不適用一般設定情況。真實網格系統在不同寬度上呈現效果，請檢視 Grid.html

網格使用範例 > 568px

以下顯示範例，為確保不同顯示裝置寬度能顯示相同網格數，特別繪製，不適用一般設定情況。真實網格系統在不同寬度上呈現效果，請檢視 Grid.html

網格使用範例 < 568px

以下顯示範例，為確保不同顯示裝置寬度能顯示相同網格數，特別繪製，不適用一般設定情況。真實網格系統在不同寬度上呈現效果，請檢視 Grid.html

這種方式，讓設計簡單化，大多數狀況，不需要針對版面安排，進行不同裝置寬度設定。

巢狀範例

以下顯示範例，為確保不同顯示裝置寬度能顯示相同網格數，特別繪製，不適用一般設定情況。真實網格系統在不同寬度上呈現效果，請檢視 Grid.html

	
grid8
	

		
grid6
		
grid6
		
grid6
		
grid6
	

使用 class="grid" 補滿剩餘寬度

以下顯示範例，為確保不同顯示裝置寬度能顯示相同網格數，特別繪製，不適用一般設定情況。真實網格系統在不同寬度上呈現效果，請檢視 Grid.html

	
grid8
	
grid


	
grid6
	
grid


	
grid4
	
grid

class="grid-N-M" | class="網格-M分之N"

使用 .grid-N-M 將版面分割成指定 N/M，其中 M 的值由 2 開始到 12，N 則由 1 至 M-1

	
grid-1-2 
	
grid-1-2 


	
grid-1-3 
	
grid-2-3 


	
grid-1-4 
	
grid-3-4 


	
grid-1-5 
	
grid-4-5 


	
grid-1-6 
	
grid-5-6 


	
grid-1-7 
	
grid-6-7 


	
grid-1-8 
	
grid-7-8 


	
grid-1-9 
	
grid-1-10


	
grid-1-10 
	
grid-9-10


	
grid-1-11 
	
grid-10-11


	
grid-1-12 
	
grid-11-12

	
1/3
	
1/4

class="grid-P" | class="網格-P"

使用 .grid-P 將版面分割成指定 P%，其中 M 的值由 10 開始到 90,共計九種

	
.grid-10
	
.grid-90 | .網格-90


	
.grid-20 | .網格-20
	
.grid-80 | .網格-80


	
.grid-30 | .網格-30
	
.grid-70 | .網格-70


	
.grid-40 | .網格-40
	
.grid-60 | .網格-60


	
.grid-50 | .網格-50 | .grid-half | .網格-半
	
.grid-50 | .網格-50 | .grid-half | .網格-半

網格邊界 Grid Offset

邊界系統：使用 .offsetN | .邊界N 使元件依父層寬度百分比設定邊界。N 的範圍 1 到 24

網格邊界只有在顯示寬度大於 992px 時，才依下列原則設定邊界，其他顯示寬度尺寸一律為 0 。與網格系統 gridN 搭配時，網格與邊界同時佔用父層寬度，直到總和超出 24 後自動換行。每一組 class="row" N 的總和都重新計算

	
.grid4 .offset1
		:
	
.grid4 .offset1


	
.grid4 .offset3
	
.grid4 .offset4
	
.grid4 .offset5
	
.grid4 .offset6
	
.grid4 .offset7
	
.grid4 .offset8
	
.grid4 .offset9
	
.grid4 .offset10
	
.grid4 .offset11
	
.grid4 .offset12

寬度 Width

class="widthN" | class="寬N"

widthN 或 寬N 只適用在 display 屬性為 block 或 inline-block 這種以區塊型式顯示的元件，N 由 1 到 24，無論顯示裝置寬度，都分成 24 份

.widthN 適用於區塊、表單文字欄位、文字區塊等

class="width-N-M" | class="寬－M分之N"

使用 .width-N-M 將元件寬度指定為畫面寬度的 N/M，其中 M 的值由 2 開始到 12

width-N-M 只負責指定元件寬度，可以應用在 display 屬性值為 inline-block 或 block

class="width-P" | class="寬-P"

使用 .width-P 將元件寬度指定為畫面寬度的 P%，其中 M 的值由 10 開始到 90,共計九種

width-P 只負責指定元件寬度，可以應用在 display 屬性值為 inline-block 或 block

高度 Height

class="height-#em" | class="高-#em"

使用 .height-#em 將區塊高度設定為指定列數，＃ 由 1 到 24。列的高度是根樣式字元大小，也就是以 rem 為單位。

多欄 Multi-Column

多欄系統：使用 col-N 設定多欄排版，其中 N 由 2 至 6。

中文使用 "N欄" 其中 N 可用值 二,三,四,五,六

	The quick brown fox jumps over the lazy dog is an English-language
	pangram—a phrase that contains all of the letters of the alphabet.
	It is commonly used for touch-typing practice.


	The quick brown fox jumps over the lazy dog is an English-language
	pangram—a phrase that contains all of the letters of the alphabet.
	It is commonly used for touch-typing practice.

位置 Position

呈現模式 Display

<div hide></div>
<div hidden></div>
<div 隱藏></div>


<div show></div>
<div 顯示></div>


<div visible></div>
<div 可見></div>


<div invisible></div>
<div 不可見></div>

浮動 Float

對齊 Alignment

1
2
3
4
 
4
5
6
 
6
7
8
9

齊頂

垂直居中

齊底

邊界 Margin

邊界有兩種類別，名稱為 .margin-? 代表四個邊的邊界相同；另一稱名稱為 .margin-?-* 代表上下的邊界是由問號代表的值，左右邊界是星號代表的值。

留白 Padding

留白有兩種類別，名稱為 .padding-? 代表四個邊的留白相同；另一稱名稱為 .padding-?-* 代表上下的留白是由問號代表的值，左右留白是星號代表的值。

文字 Fonts

透明度 Opacity

旋轉 Rotate

外框 Border / Colored Border

文字框 Text Border

• .text-border-black | .text-border-white and .text-shadow can not using simultaneously.
• 黑框字和文字陰影，不可以同時使用

漸層背景 Gradient Background Color

色彩 Color System

• 以下顏色清單，以 bg- 為前綴，代表應用於背景色，不加前綴為前景色。
• 中文色碼，則以「底」加在顏色名稱後，代表背景色。
• The following background color take NO effect when mixed with .btn
• 無背景色，請使用 .bg-transparent

商業色、粉色系底色

其他顏色/底色

按鈕 Button

.btn
.btn .primary
.btn .info
.btn .success
.btn .warning
.btn .danger
.btn .inverse

.btn .bg-light-orange
.btn .bg-light-white
.btn .bg-light-red
.btn .bg-light-purple
.btn .bg-light-green
.btn .bg-light-blue
.btn .bg-light-yellow

.btn .font-xs
.btn .font-s
.btn .font-m
.btn .font-l
.btn .font-xl

.btn[disabled]
.btn .light

.btn .primary[disabled]
.btn .info[disabled]
.btn .success[disabled]
.btn .warning[disabled]
.btn .danger[disabled]
.btn .inverse[disabled]

表單

單選及多選 Radio & Checkbox

	
	Radio 1

	
	Radio 2

	
	Radio 3

	
	Radio 1

	
	Radio 2

	
	Radio 3

	
	Checkbox 1

	
	Checkbox 2

	
	Checkbox 3

	
	Checkbox 1

	
	Checkbox 2

	
	Checkbox 3

表單分組 Fieldset

	
Legend
	The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

	
Legend
	The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

	
Legend
	The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

	
Legend
	The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

	
Legend
	The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

	
Legend
	The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

表格

 
	

		

			

				
...
				
...
			
		
		

			

				
...
				
...
			
		
	

表格資料，在尺寸寬度較小的裝置上，很容易超出畫面寬度，所以，為避免這個情況，建議在表格父層加上 .row-table 樣式，以使當表格超出可見範圍時，可以水平捲動

基本表格 Basic Table Style

<table class="table">
	～略～
</table>

<table class="table compact">
	～略～
</table>

表格主體

<table class="table body-cross">
	～略～
</table>

表格標題

<table class="table head-light">
	～略～
</table>

<table class="table head-dark">
	～略～
</table>

列高亮度

<table class="table hover-blur">
	～略～
</table>

<table class="table hover-highlight">
	～略～
</table>

<table class="table hover-highlight">
	～略～
</table>

條碼 Barcode

0123456789
0123456789

對齊冒號 Align to Colon

	

		
Title Long
content
	
	

		
Title
content
	

	

		
標題
說明
	
	

		
標題
說明
	

陰影分隔線 Shadow Separator

開關 Switch

陰影 Shadow

.shadow-N 本身包含淺黑色邊框

.shadow-N 不可與 .border-* 同時使用

頁面陰影 Page Curl Shadow

加框數字 Digit With Outline

使用 data-digit 自定屬性指定數字，建議使用在數字 0-9

水平捲動 Horizental Scroll

	
	
	.......
	

	
.......
	
.......
	
.......
	
.......
	
.......
	
.......
	:
	:

分頁 Tab

步驟 Steps

使用 Steps 語法，參考下列範例。但必需要注意的事項如下：

• aLib Steps 指示條與其間文字的間距以及箭頭，單位為 em，也就是 <li> 裡，超連結標籤 <a> 的文字大小。
• 部份 CSS 樣式庫，針對文字大小設定，使用參照 BODY 大小的百分比 (% ／ rem)，這使得實際計算出來的數值，可能會是帶有小數的值，例如 17.34px
• 因此可能會會造成以下情況
  • Error Demo 1
  • Error Demo 2
  • Error Demo 3
  • Error Demo 4

	
Step Words
	
Step Words
	
Step Words
	
Step Words
	
Step Words

底色

	：

	：

	：

	：

	：

	：

提示 Hint

提示文字框的箭頭有四個方向，分別是 left,leftup,right,rightup 分別是：

提示文字框的底色和文字顏色，在使用時自行指定，無預設值

:

:

:

: