Lazy 是一套 CSS Framework,目前沒有提供 Javacript,所有動作主要皆 CSS 完成。
在閱讀每個組件的說明之前,請先了解文件內的標注方式。
<tag>
HTML 標籤名稱的標註方式。[attr]
HTML 標籤上的屬性名稱。[attr="value"]
HTML 標籤的屬性名稱與該屬性值。#id
ID 的標註方式,名稱前會加上 # 符號。.selector
Class 標註方式,會以單一一個點加上 Class 名稱。.selector-*
以某個Class名稱為開頭的所有 Class。.selector-[a]
以某個Class名稱為開頭,並且 [a] 為附註。<tag class="selector">
HTML標籤含有某個 Class。由於瀏覽器讀取 CSS 時都是由右至左[1],因此 Lazy 3 當中的所有組件盡可能避免在選擇器上直接使用 Tag 而增加瀏覽器繪製 CSS 樣式時的負擔。
組件內的每個項目開頭名稱都會相同,當引用其他不同組件或是額外新增的組件則不在此規則內。例如:
<ul class="nav">
<li class="nav-item"><a class="nav-link">Home</a></li>
<li class="nav-item"><a class="nav-link">About</a></li>
<li class="nav-item"><a class="nav-link">Products</a></li>
<li class="nav-item"><a class="nav-link">Contact</a></li>
</ul>
下方範例因為增加了 .menu
額外的組件,所以開頭名稱不會加上 .drop-
<div class="drop drop-hover">
<a class="btn">Drop <span class="caret"></span></a>
<ul class="drop-box menu">
<li class="menu-item"><a class="menu-link">Item1</a></li>
<li class="menu-item"><a class="menu-link">Item2</a></li>
</ul>
</div>
基本上每個組件說明都會附上範例,例如:
在文件上有時會增加額外的 Class 來顯示裡面的選單,但並非 Lazy 內的 Class,因此在使用時請注意,例如:
文件範例的後方基本上都會搭配一個 HTML Code,在範例程式當中不會加上文件使用的 Class。例如:
<div class="drop drop-hover">
<a class="btn">Drop <span class="caret"></span></a>
<ul class="drop-box menu">
<li class="menu-item"><a class="menu-link">Item1</a></li>
<li class="menu-item"><a class="menu-link">Item2</a></li>
</ul>
</div>
當 HTML Code 顯示 『~略~』時,表示內容不變,只變更 Class。
<div class="drop open">
~略~
</div>
各文件使用到 Icon 時,暫時以灰色方塊做為替代說明。(真的沒時間畫)
[1]: 當 CSS Selector 的寫法為 .nav > li > a
時,瀏覽器會先找整份HTML文件裡的 <a>
然後再往上層找是否符合 <li>
,最後才是找是否為 .nav
。因此當一份文件有 數十數百的 <a>
時,會造成效率低落。參考文章:http://csswizardry.com/2011/09/writing-efficient-css-selectors/