文件之前

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/