檔案與下載

檔案結構

kule/
└── css/
    ├── kule-animates.min.css
    ├── kule-bases.min.css
    ├── kule-effects.min.css
    ├── kule-extend-grid.min.css
    ├── kule-grid.min.css
    ├── kule-hacks.min.css
    ├── kule-jquery-ui.min.css
    ├── kule-lazy.min.css
    ├── kule-reset.min.css
    └── kule-theme-default.min.css
└── js/
    └── kule.urbrowser.min.js

下載 Lazy 3.1.170618

使用在專案上時,有時因專案內容可能不需要加載所有項目,因此您可以依照使用需求來決定載入哪些CSS檔案,各CSS檔案簡單說明如下,詳情使用說明請看『文件』。


基本使用方式

直接選用所有樣式:

1 kule-lazy.min.css 包含 grid, base, addons 等完整版檔案。 121KB
2 kule-theme-default.min.css 預設主題 37KB

選擇你所需要的項目

當不需要使用全部內容時,可依照使用範圍來決定加載檔案,加載順序請參考以下表格的順序:

3 kule-grid.min.css 獨立的 Grid System,只包含 Column 12。 29KB
4 kule-base.min.css 獨立的 Kule 的基本樣式 27KB

額外的項目

以下CSS完全依照個人使用情況加載,沒有與上述檔案合併,是完全獨立的項目:

5 kule-animates.min.css Animation 動畫效果 IE10+ 47KB
6 kule-effects.min.css Transition 動畫效果 IE10+ 6KB
7 kule-jquery-ui.min.css jQuery UI Theme 可以不使用官方的 css 檔案 17KB
8 kule-reset.min.css CSS Reset 3KB
9 kule-hacks.min.css 所有 Hack,包含 IE 11 以下。 14KB
10 kule-extend-grid.min.css 擴充 Column 5 與 Column 7 兩種分欄的 Grid。 13KB

CDN

cdnjs: https://cdnjs.com/libraries/kule.lazy

https://cdnjs.cloudflare.com/ajax/libs/kule.lazy/3.1.161002/css/kule-addons.min.css
https://cdnjs.cloudflare.com/ajax/libs/kule.lazy/3.1.161002/css/kule-animates.min.css
https://cdnjs.cloudflare.com/ajax/libs/kule.lazy/3.1.161002/css/kule-base.min.css
https://cdnjs.cloudflare.com/ajax/libs/kule.lazy/3.1.161002/css/kule-effects.min.css
https://cdnjs.cloudflare.com/ajax/libs/kule.lazy/3.1.161002/css/kule-extend-grid.min.css
https://cdnjs.cloudflare.com/ajax/libs/kule.lazy/3.1.161002/css/kule-grid.min.css
https://cdnjs.cloudflare.com/ajax/libs/kule.lazy/3.1.161002/css/kule-hacks.min.css
https://cdnjs.cloudflare.com/ajax/libs/kule.lazy/3.1.161002/css/kule-icons.min.css
https://cdnjs.cloudflare.com/ajax/libs/kule.lazy/3.1.161002/css/kule-jquery-ui.min.css
https://cdnjs.cloudflare.com/ajax/libs/kule.lazy/3.1.161002/css/kule-lazy.min.css
https://cdnjs.cloudflare.com/ajax/libs/kule.lazy/3.1.161002/css/kule-reset.min.css
https://cdnjs.cloudflare.com/ajax/libs/kule.lazy/3.1.161002/css/kule-theme-default.min.css
https://cdnjs.cloudflare.com/ajax/libs/kule.lazy/3.1.161002/js/kule.urbrowser.min.js

載入檔案

將依照您的路徑連結您使用的檔案,例如:

<link href="你的資料夾路徑/kule-lazy.min.css" />
<link href="你的資料夾路徑/kule-theme-default.min.css" />
<script src="你的資料夾路徑/kule-urbrowser.min.js" />
建議載入的順序

載入順序可參照上方表格的順序

使用全部效果:
<link href="你的資料夾路徑/kule-lazy.min.css" />
<link href="你的資料夾路徑/kule-effects.min.css" />
<link href="你的資料夾路徑/kule-animates.min.css" />
<link href="你的資料夾路徑/kule-jquery-ui.min.css" />
<link href="你的資料夾路徑/kule-theme-default.min.css" />
<link href="你的資料夾路徑/kule-hacks.min.css" />
<script src="你的資料夾路徑/kule-urbrowser.min.js" />
單獨使用 Grid System(只有 Column 12):
<link href="你的資料夾路徑/kule-grid.min.css" />
<script src="你的資料夾路徑/kule-urbrowser.min.js" />
如要擴充 Column 5 與 Column 7
<link href="你的資料夾路徑/kule-grid.min.css" />
<link href="你的資料夾路徑/kule-extend-grid.min.css" />
<script src="你的資料夾路徑/kule-urbrowser.min.js" />
只要使用基本樣式:
<link href="你的資料夾路徑/kule-base.min.css" />
<link href="你的資料夾路徑/kule-theme-default.min.css" />
<script src="你的資料夾路徑/kule-urbrowser.min.js" />

全域規則

在你使用 Lazy 之前,請先初步了解基本規則,這樣會幫助你更簡單使用 Lazy。

配色與狀態

以下為Lazy的配色與狀態顏色,使用配色時請以 .color- 為開頭並搭配以下配色名稱,例如:.color-primary

主色系
primary
次色系
secondary
關注色
focus
通用色
common
完成狀態
success
危險狀態
warning
錯誤狀態
error
範例:
<a class="btn color-primary">按鈕</a>
<a class="btn color-suceess">按鈕</a>
<a class="btn color-warning">按鈕</a>
<a class="btn color-error">按鈕</a>

還有一種情況也能使用配色,當給予父層標籤時,所有內容都會套上顏色,例如:

<div class="btn-grp color-primary">
    <a class="btn">按鈕</a>
    <a class="btn">按鈕</a>
    <a class="btn">按鈕</a>
    <a class="btn">按鈕</a>
</div>

尺寸大小

除了原本的預設大小之外,大部分的元素或組件都有其他四種尺寸變化,包含

  • Mini: .size-xs
  • Small: .size-sm
  • Large: .size-lg
  • XLarge: .size-xl
範例:
<a class="btn size-xs">按鈕</a>
<a class="btn size-sm">按鈕</a>
<a class="btn size-lg">按鈕</a>
<a class="btn size-xl">按鈕</a>

當然這也與配色一樣可以直接給予父層讓所有元素有著相同尺寸

<div class="btn-grp size-sm">
    <a class="btn">按鈕</a>
    <a class="btn">按鈕</a>
    <a class="btn">按鈕</a>
    <a class="btn">按鈕</a>
</div>

Disabled

只要使用到 disabled 屬性或是 .disabled 時,該區塊或是元件就會無法點選並且加上透明度。

<input type="text" class="ctrl-input" disabled />
<div class="btn-grp disabled">
    <a class="btn">按鈕</a>
    <a class="btn">按鈕</a>
    <a class="btn">按鈕</a>
    <a class="btn">按鈕</a>
</div>

瀏覽器與裝置

各平台上的瀏覽器支援

基本上市面主流系統與瀏覽器都有支援,但Opera的版本煩亂就沒有刻意去處理,至於 IE 瀏覽器主要支援 IE 9以上版本,當然如果本身CSS 3屬性完全不支援的情況下就無法支援。至於微軟最新的 Edge 瀏覽器採用的是 Webkit 核心,所以支援度應該與 Chrome 差不了太多。根據維基百科指出:『Microsoft Edge 使用了名為 EdgeHTML 的瀏覽器引擎,該引擎是 Trident 的一個分支。』但從 userAgent 來看,的確是顯示 Webkit。(Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10240)

我自己專案的瀏覽器支援度通常是最新版號-1。

Chrome Firefox Edge IE Safari Opera
Windows 支援 支援 支援 局部支援
請見下方表格
不存在 支援
Mac OS 支援 支援 不存在 不存在 支援 支援
iOS 支援 支援 不存在 不存在 支援 不支援
Android 支援 支援 不存在 不存在 不存在 不支援

IE 瀏覽器支援度

使用有關動畫效果如 Effects, Animates時,請先注意 IE 支援度是否符合你的專案。

6, 7 8 9 10 11
Lazy 不支援 局部支援 局部支援 支援 支援
Grid System 不支援 局部支援
支援 Grid
但不含 Responsive
支援 支援 支援
Animates 不支援 不支援 不支援 支援 支援
Effects 不支援 不支援 不支援 支援 支援
jQuery UI Theme 不支援 支援 支援 支援 支援

Hacks

Hack 基本上是針對 IE 瀏覽器,尤其是 IE 8,因為部分模組有使用 @media query,因此另外寫 Hack 給 IE 8,所以請記得載入 urBrowser,Hack 才能生效。


使用授權

Kule Lazy 使用 MIT 授權


問題與回報

目前處於 beta 版本中,但大致上都已完成,主要剩下 IE Hack 以及 Mobile 上的測試。當然如果你有發現任何疑問或是 bug,歡迎隨時到 Facebook 上告訴我,謝謝你。