Kule Lazy 4

Getting Started

Lazy4 依然是套 CSS Framework，會陸續開發 Javascript 與 Vue 組件。目前所有操作效果以純 CSS 為主。

使用 Lazy4 之前請先了解基本規則，好讓你可以更容易了解並使用它。在閱讀組件說明之前請先了解文件內標注方式，如果對 CSS 有一定了解，想必知道 Selector 規則，基本上就是以 Selector 規則描述。如果想更了解 CSS Selector 請詳看 https://www.w3schools.com/cssref/css_selectors.asp。

  • <tag> 表示 HTML 標籤。
  • [attr] 表示擁有屬性名稱。
  • [attr=value] 表示擁有屬性名稱且符合值。
  • #id 表示 ID 名稱。
  • .class 表示組件的類別名稱。
  • .class_child 表示子組件類別名稱。
  • .class-mode 表示組件其他模式的類別名稱。
  • <tag class="xxx"> 表示特定標籤並符合類別名稱。

瀏覽器繪製 CSS 時是依序 Selector 由右至左，因此任何組件盡可能避免直接使用標籤名稱而降低繪製效能。

類別名稱命名法

除了 Bases 預設樣式之外，每個組件都會有各自的組件名稱，Lazy4 參考了部分 BEM 命名法，但將過多的 -- 與 __ 簡化為只需要一個，因此子元件皆使用一個底線，而 dashed 線則視為不同單字的連接線，最後則會視為一個組件名稱。

  • .btn, .btn-text 都是組件類別名稱，皆與 btn 相關的獨立組件。
  • .embed_media 這是 Embed 的子組件類別名稱。

同個組件不同樣式的類別名稱請使用冒號，例如 :bordered。

<table class="table :bordered"></table> // 這個範例則是表格加上框線樣式

通用類別名稱

每個組件都會有各自獨有的樣式類別名稱，但也有全域共用的命名方式。

類別名稱與說明 組件屬性
配色 .clr:{顏色代號} clr="{顏色代號}"
品牌色 .clr:{品牌名稱} clr="{品牌名稱}"
主題 .theme:{主題名稱} theme="{主題名稱}"
尺寸 .sz:{尺寸代號或倍數} sz="{尺寸代號或倍數}"
狀態 .is:{狀態名稱}
[status={狀態名稱}]		 is="{狀態名稱}"
存在 .has:{組件名稱} has="{組件名稱}"

特殊前綴詞

除了組件名稱會當作子組件的前綴詞之外，有兩個特別項目會加上前綴詞。Grid System 會使用 .f- 作為代表使用 Flex 的前綴詞名稱；Utilities 則會使用 .u- 作為前綴詞。

<div class="f-row"></div> <div class="u-align:r"></div>

斷點與方位

Grid System 可以使用斷點來區分不同範圍要適應的寬度單位，標注斷點時請使用 @ 符號；部分組件會有特殊顯示方位時，也請使用 @ 來表示位置。

<div class="f-col:12 f-col@sm:6 f-col@md:4"></div> <div class="u-align:c u-align@sm:r"></div> <div class="drop @top"></div>

色彩

Lazy4 有主色、次色、深色與淺色。另外還有三種狀態的成功、警告、危險。實際上在組件上的配色不會提供狀態色，只有少數需要用到狀態來呈現時才會使用。

四個基本上的使用方式以 .clr: 為前綴詞再搭配以下顏色名稱，例如：.clr:primary。而狀態則使用 is: 為前綴詞，例如 .is:danger；或者使用屬性的方式標註狀態，例如[status=danger]。

主色系
Primary
次色系
Secondary
深色系
Dark
淺色系
Light
成功
Success
警告
Warning
危險
Danger

無彩度

從白色到灰階以及黑色。

0%
2%
5%
8%
10%
12%
15%
20%
30%
40%
50%
60%
70%
80%
90%
100%

色票群

額外加載色票檔，部分組件與類別可以擴增更多種顏色。

Red
Orange
Fire
Yellow
Olive
Sapphire
Cyan
Magenta
Bone
Silver
Momo
Rosewood
Skin
Chartreuse
Green
Aegean
Blue
Violet
Brown
Gray
Black

品牌色

額外加載品牌色檔案，部分組件與類別可以擴增更多品牌 CI 顏色。

Youtube
Google
Pinterest
Weibo
Rss
Snapchat
Whatsapp
Wechat
Line
Slack
Tumblr
Behance
Messager
Skype
Dropbox
Viemo
Twitter
Linkedin
Facebook
Vk
Paypal
Yahoo
Vue
React
Angular

尺寸

尺寸代號在不同組件會略有不同。主要區分尺寸代碼，例如：xs, sm, md, lg, xl, xxl。少數組件會以倍數來呈現，例如：quarter, half, 2x, 3x, 4x。

<button class="btn sz:xs"><button> <button class="btn sz:sm"><button> <button class="btn sz:lg"><button> <button class="btn sz:xl"><button> // Button 尺寸只提供這四種 <Btn sz="xl" /> // 組件上可使用屬性 sz 來表示 <hr class="sz:quarter"> <hr class="sz:half"> <hr class="sz:2x"> <hr class="sz:3x"> <hr class="sz:4x"> // hr 是依照預設間距的值再乘上倍數產生不同間距變化

狀態

組件的狀態有很多種，例如回饋的狀態、啟用、停用以及填寫表單時是否必填。

  • .is:on 相當於常見的 .active，可當作啟用或開啟 （如果組件預設為不顯示時，這時的 .is:on 就會視為開啟或顯示）。
  • .is:off 可視為常見的 [disabled]，部分組件會需要不顯示作用時可使用。
  • .is:required 是必需的意思，用於表單上等於必填。
  • .is:success 或 [status=success] 表示回饋的訊息是成功狀態。
  • .is:warning 或 [status=warning] 表示回饋的訊息是警告狀態。
  • .is:danger 或 [status=danger] 表示回饋的訊息是危險狀態。

主題

少數組件會提供深色主題配色，此時會使用 .theme:dark 來表示。

臺灣是位於亞洲東部、太平洋西北側的島嶼，地處琉球群島與菲律賓群島之間，西隔臺灣海峽與歐亞大陸相望；面積約三點六萬平方公里，為世界第卅八大島嶼，其中七成為山地與丘陵，平原則主要集中於西部沿海，地形海拔變化大。由於地處熱帶及亞熱帶氣候區之交界，自然景觀與生態系資源相當豐富而多元。
<blockquote class="theme:dark">~略~</blockquote">

圖示

部分組件內顯示的圖示除了使用純 CSS 繪製與 HTML Character Code 之外，Iconfont 目前使用 Font Awesome。

Vue 組件

目前 Vue 組件只提供 Lazy Components 結構較為複雜或是複合式、並且在資料互動需求較高的組件，若是單層結構如 Button 的情況下，沒有需要製作成 Vue 組件，也沒有使用 HTML 都還來得直接。當然或許哪天換個想法就陸續都補上了？