Pure CSS 實作練習：homepage

又到了練習的時間了...，其實這昨天就弄好了只是沒力寫文。
這篇是延續好久好久以前寫的兩篇筆記，只是看看文章而已會讓我覺得學習中斷，感覺不是很好，後來我還是覺得想弄點什麼東西出來。
之前的兩篇是這個：

• 認識 Pure CSS 之筆記一：了解Base, Grids, Forms
• 認識 Pure CSS 之筆記二：了解Buttons, Tables, Menus
• Demo頁面：http://winwu.github.io/pureCSS-practice/homepage/

先來看看練習的結果：
主要是要練習 pureCSS 的 Grid，然後整格排版設計是參考某家搜尋網站的首頁做改造：P，icon 部分搭配的是 Font-Awesome ，Font-Awesome 的使用方式跟在用 bootstrap 的時候一樣，所以非常順手。至於配色就別跟我這個前端挑了（><），這個練習的重點是在做前端不是Art (Orz)。

這張圖是放上一些圖片後的效果：




接下來是這張畫的有點慘的 Grid 排列方式（沒有畫到最細）：

一些建議：
pureCSS在他的網頁上有寫到，如果你要在 grid-u-?-? 的div裡加上 padding（除非你那塊沒有文字，不然很難不加 padding），它上面有寫到你可以這樣做（如果不這麼做寬度就會太多只至於div往下掉）：

  .pure-g > div {  
     box-sizing: border-box;   
   }  

可是... 在我的 FireFox 整個大跑版，這時候你可以試試看補上-moz-box-sizing
參考：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

 .pure-g>div{  
   box-sizing: border-box;  
   -moz-box-sizing: border-box;   
 }  

然後後來還有發現一套也是 yahoo 的，YUI Responsive Grid ，看起來還不錯但跟 pureCSS 有點像...，有機會再研究它。


用起來的心得...還不錯啊，蠻簡單的，尤其在下 css name 的時候，其實很好記，然後我好像沒有在 css 找到 clearfix...，最後我 clearfix 是自己加上去。恩...大概就這樣了吧，我預計會有下一次的練習（希望有時間）。