2013年8月10日 星期六

認識 Pure CSS 之筆記一:了解Base, Grids, Forms



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

簡單逛了一下 Pure 的網站,只能說我是越看越喜歡,他主打的是輕量而且符合 RWD,又有 Flat Design, 輕又簡單明瞭,大概是我喜歡它的主因吧!另一方面是被網站上的範例給迷住
,感覺得會讓人很有自信的去使用。



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


  • Base
    • 主要是使用 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 的系列。
  • Grids( and Responsive Grids)
    • 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 。
  • Forms
    • 老實說 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看一看,把筆記補齊。


Q&A:
normalize.css 跟 Reset 有什麼不同嗎 ?
( 搜尋關鍵字 : Normalize vs Reset ) 
看了之後還是不太懂(英文不太好),感覺起來像是 reset 是要把 browser 預設的樣式清掉, 而 normalize.css 則是想把法讓所有的樣式在不同的 browser 看起來能夠一致 ; 看起來感覺前者很像是減法,後者是加法。(<---若我理解方式有錯誤跪求分享較精確的解釋><) 



其他參考資源 :




沒有留言:

張貼留言

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

Vue multiselect set autofocus and tinymce set autofocus

要在畫面一進來 focus multiselect 的方式: 參考: https://jsfiddle.net/shentao/mnphdt2g/ 主要就是在 multiselect 的 tag 加上 ref (例如: my_multiselect), 另外在 mounted...