Skeleton
用於資料讀取完成前的模擬預覽，使用類別為 .skeleton 並以此做為子元件前綴詞。Skeleton 主要以模擬圖形與模擬文字組成，排列方式可與 Grid System 搭配來決定你所需要的版型。
模擬文字
模擬文字的第一個 .skeleton_txt 會視為標題，行數可以由 <li> 的數量來決定。
<div class="skeleton">
<ul class="skeleton_content">
<li class="skeleton_txt"></li>
<li class="skeleton_txt"></li>
<li class="skeleton_txt"></li>
<li class="skeleton_txt"></li>
</ul>
</div>
模擬圖片
模擬圖片的比例可使用 .u-ratio:{*} 來選擇你要的。
<div class="skeleton">
<div class="skeleton_img"></div>
</div>
寬度比
Skeleton 的圖文之間的比例預設為 1:1，可使用 .f-col:{*} 來決定圖與文之間的比例關係，同時也可以依照 Breakpoints 來做 RWD。
<div class="skeleton">
<div class="skeleton_img u-ratio:5by4 f-col:12 f-col@md:3"></div>
<ul class="skeleton_content">
<li class="skeleton_txt"></li>
<li class="skeleton_txt"></li>
<li class="skeleton_txt"></li>
<li class="skeleton_txt"></li>
<li class="skeleton_txt"></li>
</ul>
</div>