一些平鋪直敘技術相關文: 認識 Pure CSS 之筆記一：了解Base, Grids, Forms

2013年8月10日星期六

最近本來看一點 Bootstrap 3 RC1，因為 RC1 是我一直有點興趣的 Flat Design 的風格，不過目前用起來沒有想像中 Flat (目前我正在期待正式版)，突然想到還有另一套可以用，那就是 Pure 了（是說他也出來一陣子了XD）！

簡單逛了一下 Pure 的網站，只能說我是越看越喜歡，他主打的是輕量而且符合 RWD，又有 Flat Design，輕又簡單明瞭，大概是我喜歡它的主因吧！另一方面是被網站上的範例給迷住

，感覺得會讓人很有自信的去使用。

Pure 把一般網站上會用得到元素分成幾大類，也就是在官網上面看到的那幾類，就連從github下載下來也以這幾類作為資料夾的分類：

主要是使用 normalize.css，你可以把 normalize.css 想成是跟 reset.css '類似' 功能的css檔（說是類似但還是有些不一樣）， normalize.css 是一套支援 HTML5 標準的 css reset，然後目前 normalize.css 已經出到 v.2.x 的版本了，不過在 Pure 的文件明確地寫到，目前 Pure 使用 v.1.x 版本，因為 v.1.x 較能支援比較老舊的 IE 版本 ( 原文參考 : We use Normalize v1.x because it supports older versions of Internet Explorer. )。
另一件事情是，所有的 Pure 的模組都是建立在 normalize.css 之下。
H1~H6 的字型大小的單位是使用 em。
關於 ol, ol, dl, Pure都有預設的樣式，如果是想要用這些做 Menus 的東西，建議你另外看 Menus 的系列。

grid ，如果有用過 grid 的人，看文件應該不會太難理解，不過我從以前就沒有好好理解過 grid，可能是我不喜歡這麼多 class name 加在 html 標籤裡。
Pure 的 grid ，只用一個 pure-g 就是一個 row 或是一個 grid，使用 pure-u-*-* 代表 pure-g 裡面的 columns 或是 units 。每個 pure-g 可以包含好幾個 pure-u-*-*。
pure-u-*-* 的寫法可以想像成 pure-u-分子-分母，我以官網提供的範例來說，假如你有一個row裡面分成三小塊，也就是說 pure-g 會有三塊 pure-u-*-*，所以每一塊都是1/3，那麼 html 結構看起來就會像是這樣：
```
 <div class="pure-g">  
   <div class="pure-u-1-3">  
   </div>  
   <div class="pure-u-1-3">  
   </div>  
   <div class="pure-u-1-3">  
   </div>  
 </div>  
```
另外每個 pure-u-*-* 預設是沒有 padding/margin ，如果你需要必須自己加在 pure-u-*-* 的子層，還是看一下原文可能較好理解：

原文：By default, grid units don't have any margin/padding. If you want to add these, put them in a child container.

如果你希望你的 grid 是要符合 RWD 的話，只要把 pure-g 換成 pure-g-r ( r 代表著reponsive 的意思 )，你可以直接使用 pure-g-r 就可以了，只要父層使用 pure-g-r ，他的子層 pure-u-*-* 就會自動變成 reponsive 的形式了，所以你某個的 grid 要不要有RWD，看你有沒有使用 pure-g-r 來決定，原文參考： All elements with a class name of pure-u-*-* will automatically become responsive if they are direct descendents of a pure-g-r.。
有興趣可以看看這個網站 YUI Grid Builder 。

老實說 Pure 的 Forms 看起來還蠻像 Bootstrap (逃)。
如果你是要 form 的內容是 inline 形式的 ( 這也是預設的形式 )，請在 <form> 加上 pure-form 的 class ， ex：<form class="pure-form">...</div>。
如果是要 form 的內容一堆疊形式的，除了加上 pure-form 的 class name 之外，還要補上 pure-form-stacked 的 class name ，ex：<form class="pure-form pure-form-stacked">。
還有一些表單元素的 class name 使用方式，因為有點零碎，我就不再說明了。

有點晚了，我想剩下的部分，會再找時間把document看一看，把筆記補齊。

Ｑ＆Ａ：

normalize.css 跟 Reset 有什麼不同嗎 ?

( 搜尋關鍵字 : Normalize vs Reset )

看了之後還是不太懂(英文不太好)，感覺起來像是 reset 是要把 browser 預設的樣式清掉，而 normalize.css 則是想把法讓所有的樣式在不同的 browser 看起來能夠一致 ; 看起來感覺前者很像是減法，後者是加法。（<---若我理解方式有錯誤跪求分享較精確的解釋><）

其他參考資源：

若你看的文章，時間太久遠的問題就別問了，因為我應該也忘了... XD

一些平鋪直敘技術相關文