# HyUI kit

[](https://hackmd.io/qB0F92BqQUeoeCFtKuCDPA)

快速開始
---

+ [**HyUI kit簡介**](/r-gdSrdTQCu_FOUTgMxHqg)
+ [**下載**](/jl0--k2DS6We66c_xbZDaA)
+ [**HTML範本**](/2LhkSVPbSwSrhkESqToRyg)
+ [**SASS 架構**](/DfpyZB4LQIa0qyX-4WoKug)
+ [**mixin / extend 引用列表**](/jf1_RTDUTVaQRlk3J1Gc1w)
+ [**無障礙與列印**](/GY6IBIw6QUySDEzGKRIaPg)

排版系統
---
+ [**Mediaquery**](/a3XPuqARQraK6TCpTFVtkg)
+ [**Bootstrap grid system**](/ZR0-K7LtT2u5sS8Cq0fdIg)
+ [**flex grid system**](/BXFPop21R0Gtr7slGasVKA)

範例頁面
---
+ [**mp**<font color="#888">(首頁)</font>](https://hywebu00.github.io/hyui_flex/mp_template.htm)
+ [**flex**<font color="#888">(flex grid)</font>](https://hywebu00.github.io/hyui_flex/flex_template.htm)
+ [**lp**<font color="#888">(列表頁)</font>](https://hywebu00.github.io/hyui_flex/lp_template.htm)
+ [**lp_table**<font color="#888">(列表頁-表格)</font>](https://hywebu00.github.io/hyui_flex/lp_table_template.htm)
+ [**lp_album**<font color="#888">(列表頁-相簿)</font>](https://hywebu00.github.io/hyui_flex/lp_album_template.htm)
+ [**cp**<font color="#888">(內容頁)</font>](https://hywebu00.github.io/hyui_flex/cp_template.htm)
+ [**cp_photo**<font color="#888">(內容頁-照片)</font>](https://hywebu00.github.io/hyui_flex/cp_photo_template.htm)
+ [**np**<font color="#888">(節點頁)</font>](https://hywebu00.github.io/hyui_flex/np_template.htm)
+ [**fp**<font color="#888">(轉寄友人)</font>](https://hywebu00.github.io/hyui_flex/fp_template.htm)
+ [**qp**<font color="#888">(意見信箱)</font>](https://hywebu00.github.io/hyui_flex/qp_template.htm)
+ [**form**<font color="#888">(表單)</font>](https://hywebu00.github.io/hyui_flex/form.htm)
+ [**form**<font color="#888">(表單 beta版)</font>](https://hywebu00.github.io/hyui_flex/form-beta.htm)
+ [**sitemap**<font color="#888">(網站地圖)</font>](https://hywebu00.github.io/hyui_flex/sitemap_template.htm)
+ [**Google Search頁面**](https://hywebu00.github.io/hyui_flex/gs_template.htm)
+ [**404 網站錯誤**](https://hywebu00.github.io/hyui_flex/404.htm)

模組
---
+ [**Header**<font color="#888">頁首</font>](/900mFLG9TlaH9PwRBVEfKA)
- [- **Search** <font color="#888">搜尋</font>](/BlF-WMyoQfGiIr1kvY-JPQ)
- [- **Menu** <font color="#888">主選單</font>](/sKWD1ZgNR-CtafYsGyGaQQ)
- [- **Language** <font color="#888">選擇語系選單</font>](/ICqpcvLaRd2gk2r4iYrITA)
+ [**Accordion** <font color="#888">收合式選單</font>](/rnL3CxDdTVOuYrHxZ-xD7w)
+ [**Album+Lightbox** <font color="#888">相簿(縮圖)+燈箱</font>](/z5yFvOvUQ5-LD-JqFaitbQ)
+ [**Breadcrumb** <font color="#888">頁面路徑</font>](/HvDiuQKoS8yg-Q-HFZHzSA)
+ [**Category** <font color="#888">分類目錄</font>](/aaWsQTI1SCGdrA9b7eDz9w)
+ [**Function Panel** <font color="#888">內頁控制及顯示模組</font>](/Oqp96iFITTilUfkBkoSbjA)
- [- **Font-Size** <font color="#888">控制文章字體大小</font>](/6SM3arriSvSN_bUmeFjWAg)
- [- **Function** <font color="#888">功能選單</font>](/ecYKCMloQXazqZEqW8rqaQ)
- [- **Share** <font color="#888">社群分享</font>](/mz6QuOJpQOa1LF84tNtFOQ)
+ [**File-download** <font color="#888">檔案下載</font>](/ClSAkRTLReyd_yu7YXUsyA)
+ [**Fixed_sidebar** <font color="#888">固定側邊欄</font>](/0Hfa4CtMSN6VuEK-4VPQ8g)
+ [**Fat-footer** <font color="#888">頁尾選單</font>](/LEQQ2b3cQtizQqzAN5qWUg)
+ [**Footer** <font color="#888">頁尾</font>](/5Q8EdhltSzC7d9Y0b-x7bw)
+ [**Marquee** <font color="#888">跑馬燈</font>](/PyYi01kxTV6dc3n7m_C-3g)
+ [**Modal** <font color="#888">彈出對話框</font>](/jdbtfePER8GrDhr0MxGvNA)
+ [**Notice** <font color="#888">提示訊息</font>](/nOBWFod2SEixJSaBOqHalQ)
+ [**Paginations** <font color="#888">分頁導覽</font>](/eOa_hqJRSnGLPrZsiwCkDg)
+ [**Silder** <font color="#888">圖片輪播</font>](/VkhALd3wTYSt_ctD6W0XPQ)
+ [**Tabs** <font color="#888">頁籤</font>](/7J1W4AH7RsWoQWTocLsFng)
+ [**Tag** <font color="#888">標籤</font>](/srqpathjRqyWqZ0FJyt56w)
+ [**Web link** <font color="#888">網頁連結</font>](/-teC6IXdR3ili4a-_K4n8A)

網頁元素
---
+ [**Buttons** <font color="#888">按鈕</font>](/D2aA7BXqS9-TkX1Ak4SwgA)
+ [**Typography** <font color="#888">文字設定( - 與compass有關，先不動 - )</font>]()
+ [**Forms** <font color="#888">表單</font>](/O08rL9bGTMas4YIik2Qn7w)
+ [**Tables** <font color="#888">表格</font>](/DBiLPu6rQlmpiclckBJ72A)
+ [**Tooltip** <font color="#888">提示框</font>](/kiQZGjE4Seq0gBxhjyB3zA)
+ [**Images** <font color="#888">圖片</font>](/bOVJBo47SuGzliEu5rF3Gw)
+ [**Icon** <font color="#888">圖示</font>](/xPrKLREmQF-cEdSFMJGcGQ)
+ [**hr & divider** <font color="#888">分隔線</font>](/WTcYj_P9TZ2bvwPksBCOsg)

###### tags: `HyUI`

<style>

.summary h1 {
font-size: 28px;
color: #08b2ff;
}
.summary h2{
font-size: 18px;
}

.nav>li>a{
padding:5px 15px;

}
.summary .nav>li>a {
font-size: 16px;
letter-spacing:0
}
.navbar-header{
margin-left:10px;
}
</style>