文件之前

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>

基本上每個組件說明都會附上範例，例如：

Drop

在文件上有時會增加額外的 Class 來顯示裡面的選單，但並非 Lazy 內的 Class，因此在使用時請注意，例如：

Drop

文件範例的後方基本上都會搭配一個 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/