認識 Pure CSS 之筆記二：了解Buttons, Tables, Menus

此篇是延續上一篇的內容：認識 Pure CSS 之筆記一：了解Base, Grids, Forms


Buttons:
button一直是我覺得網站上應該要蠻單純的元件，統一風格，大小不要忽大忽小是我最喜歡的狀態。在這裡介紹一下 Pure 的 Button ，幾個大方向要記而已，還蠻單純的。

• 如果要產生一般的button，使用 class name ：pure-button （不論用在<a>還是<button>）。
• 如果要 disable 效果，請累加 class name ： pure-button-disabled ，例：pure-button pure-button-disabled。
• 如果要 active 效果，請累加 class name ： pure-button-active ，例：pure-button pure-button-active。
• primary效果，例：pure-button pure-button-primary。
• 客制化你自己的 button ， 希望你的客制化 button 的 css 命名可以 follow pure 的命名方式，如 pure-button-red, pure-button-success, pure-button-info,...。
• pure button 的 size有分幾種等級：
• xsmall : pure-button  pure-button-xsmall
• small :  pure-button pure-button-small
• default : pure-button 
• large :  pure-button  pure-button-large
• xlarge :  pure-button pure-button-xlarge
• button 裡要有 icon嗎？ 沒問題，pure 是搭配 Font Awesome ，詳情的載入方式請看pure button 介紹，使用的時候是類似在 pure-button 裡面包 <i class="icon-XXX"></i>。

Tables:

• 猜猜看pure 的 table 要加什麼樣的 class name 在 table 的標籤上 ? 前面 button 用的是 pure-button，table 則是使用 pure-table ，只要在 table 的 class name 加上 pure-table 就可以得到 pure 的預設樣式。 
• pure 目前總共提供三種 table 樣式：
• Default Table
• Border Table
• Striped Table

Menus:
menu還蠻多種選擇的，不過有些menu的效果必須搭配 YUI 的 JavaScript。
分頁的項目也算在 Menus 這個項目裡。
這個部分我希望透過實作來瞭解（好敷衍）




其實看到這裡，大概也手癢，只想實作一下:P
官網上也提供了好幾個用 pure CSS 做出來的 Layouts，看了真是超熱血的～
如果我有遇到什麼問題再上來分享吧！



對了，如果很想用 pure ，配色上卻又不知從何下手
歡迎試試看這個 Skin Builder or YUI Skin Builder - Documentation