解決 ellipsis 無法在 table-row 之下正常顯示

CSS 的 ellipsis 是用來解決限制文字長度，過長則可以幫你在字尾加上 “...”，讓你不必費心思考怎麼處理 ... ，也不須麻煩後端做字元數量計算， 參考連結。

---
BTW: 但有個缺點就是只限制在文字只需要顯示最多一行的情況，多行的話則沒有辦法 (應該說辦法是有，只是還不能用 (以後可以期待 https://drafts.csswg.org/css-ui-4/#overflow-string)，而且解法我也認為大多是 workaround，除非等新的 css 屬性出來，所以多行擷取字元的話還是交給強大的後端吧，JS 處理顯得有些麻煩)
---



不過問題是因為我參考了網路上 sticky-footer 的做法 (參考)，因為網頁主要的 container, dispay: 是 table-row, 結果在整個網站想要使用 ellipsis 突然就沒有作用，解法是在設定 display:table 的 <body> 上 加上 table-layout: fixed 的屬性。

雖然 table-layout: fixed 這解法有點讓我不太理解 (啊...我也不曉得當初為什麼我會選擇用 table 來做 sticky-footer，大概又是趕時間的衝動 XD)，下次使用 sticky-footer 時也許可以改用其他方式 (當然還是要看瀏覽器支援的程度)。

[工作筆記] 原來 IE 不支援 SVG 的 animation...

參考: [SVG animation is not working on IE11] http://stackoverflow.com/questions/33812303/svg-animation-is-not-working-on-ie11

因為今天在處理一個 svg 的動畫發現在 IE 跑不出來，原本以為是因為使用 stroke-dasharray 跟 stroke-dashoffset... ，結果得到的解答是只有 Edge 會支援 SVG 的 Transition 跟 animation。簡單來說目前沒有特別方便快速的解法，網路上的解法建議是轉用 svg 的 library 像是 GreenSock 。

連我都還沒使用到 Edge 的人了，直接放棄在 IE 上的效果，結案。不過依舊要寫兩份樣式，先偵測瀏覽器是否為 IE，在 <body> 上 append 一個新的 css class，再用 .ie something, 跟 .not-ie something.. 類似的方式去做替換 SVG 的方案。

Chrome 測試 Media Query 的 print 樣式

每次在測列印樣式，總不可能都按一次 『檔案』 -> 『列印』，這樣太浪費時間了。

開啟 F12 開發人員工具，然後選擇三個圓點的按鈕，在 『More tools』 -> 『Rendering Settings』。

在 Rendering Setting 勾選 Emulate Media 為 print。請注意如果你根本沒有針對 print 寫 Media Query，畫面應該是不會有變化的，你可以找個銀行的網站來參考試看看。有無勾選後的差別。

[Bootstrap 補充技巧] Bootstrap 讓 Grid 的項目 column 能夠等高

怎麼讓 Bootstrap 的 Grid 的 column 等高呢?! 好奇怪感覺這需求應該很早就應該出現，結果我這幾天才發現到..

舉個例子，如果你每個 column 內容不一致，那麼每個 Row 的內容高度也會不一致:

(我用 jsbin 來寫 sample code)，會向右邊那樣，我預期希望黃色跟藍色的區塊可以跟紅色的等高：

後來 Google 發現有人幫我處理好這個好用的功能了，他是利用 display 的 flex 的屬性來達到每個 column 等高，請參考 http://getbootstrap.com.vn/examples/equal-height-columns/。 用法文件寫得很清楚，要引用這個作者寫的 .row-eq-name 樣式 ，然後在需要等高的 row 上附加這個 class name .row-eq-height 

Example: <div class="row"> 加上 row-eq-height <div class="row row-eq-height">

jsbin 範例

注意事項

* Flex 只支援到 IE 10

* .row-eq-height 可能會改變原本的 column wrap 的行為，所以還是得取捨，至於差別在哪，你多測測 螢幕小一點的時候就知道了，原本設定的 column 變化可能會因為 row-eq-height 而有點不同哦!

Swiper 套件在 Bootstrap Modal 裡面會失效

如題，如果想知道為什麼可以 google 一下: swiper in bootstrap modal.

然後把呼叫(使用) Swiper 的地方，包進 Bootstrap Modal 的這個 Event 裡:  shown.bs.modal 。

$thisModal.on('shown.bs.modal', function (e) {
   // init Swiper
  //   var swiper =   new Swiper('.swiper-container-bank-query', {});
});

[CSS] 用 transform scale 針對 input checkbox 放大

左一: safari / 中間:  Chrome / 後: Firefox

今天在製作一個 checkbox 時，為了在手機版上方便點擊，刻意想要把它放大。

就以放大三倍來說，就是 scale(3):

這段都沒問題，我只是想說， transform 的表現在 safari 沒有用，如上圖你可以看到，還是一樣小顆，甚至他只有在 :active 時才會放大，也是一個很詭異的行為。
在 Stackoverflow 也有人跟我有一樣的問題，原因是在 webkit 下要用 3d transform 去處理這個放大的效果。

後來我就把 webkit 那一段改成 scale3d:

文章中也有參考的link，可以去詳讀看看
http://stackoverflow.com/questions/31843647/webkit-css-transforms-scaling-doesnt-work-on-retina-mac-if-the-scale-factor-is
有更好的方式也可以留言跟大家分享一下，感謝! :D

translate3d 為什麼會讓子層的 css position fixed 失效... ?!

在處理一個 header 位子要固定的問題時，發現怎麼樣也都無法 fixed

超級詭異....

找超久才發現原來是因為我在 body 加上了這個 css 屬性: 

-webkit-transform:translate3d(0, 0, 0);

-moz-transform:translate3d(0, 0, 0);

原因不明，我也想知道為什麼，如果有人知道，請告訴我謝謝 :)

這是造成無法 fixed 的 demo:

http://jsbin.com/suroginozi/edit?html,css,output

如果把 body 的 transform:translate3d 拿掉，就正常了..... 

來個參考連結:
https://code.google.com/p/chromium/issues/detail?id=20574
http://www.w3.org/TR/css3-2d-transforms/#transform-rendering
http://stackoverflow.com/questions/15194313/webkit-css-transform3d-position-fixed-issue/15256339#15256339

[隨筆] 用 css mask-image 做遮罩

晚上剛好幫我朋友看一個 colorbox 的問題，起初我以為只是一個改改 css  border-radius 就好的問題，沒想到弄到最後竟然去找 mask-image 的方法。

情況是他希望在 colorbox 打開時，四邊都維持某種程度的 border-radius，但是在 colorbox 的 iframe 裡面，當你 scroll 時，border-radius 就失效了，其實不是失效，而是裡面的 div 的背景色本來就存在於那個區域，所以 content 是滿的沒有錯

廢話不多說，我只能講最後我用了這個方法，他使用了 mask-image 的方式去做遮罩的概念，在 colorbox 那一個 iframe 做這層，就可以一直 mask 四邊都有 border-radius 的效果:  How to make CSS3 rounded corners hide overflow in Chrome/Opera。

改完之後不管裡面怎麼捲，都能維持外框有 border-radius 的情況:

太久沒有好好研究 css，已經退化到這種程度也真是一種悲哀。
因為 colorbox 一直都是網頁製作 popup/lightbox 當紅炸子雞的套件，所以我還是記一下，以防以後有需要用到又忘了。

CSS Transform 在 hover 時有殘影

最近在寫一些 css 的效果，主要是利用 css3 的 transform 跟 animation，在一個 div hover 時，有些小特效，像是往上移動，或是某些小元件放大，主要是有用到 scale，不過發現在 hover 時，有時候會殘影，在網路上找到兩個解法，一個是在某 div 加上 image-rendering 屬性，另一個是 backface-visibility，實測之後，image-rendering 非常有用，幾乎是9成機率未再見到 hover 時的殘影，給大家參考 :)

image-rendering: optimizeSpeed;
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;


-webkit-backface-visibility: hidden;
backface-visibility: hidden;


參考文章:
＊Image-rendering 參考文章 : https://css-tricks.com/almanac/properties/i/image-rendering/。文章有提到 :『The image-rendering property defines how the browser should render an image if it is scaled up or down from its original dimensions. 』。

* http://stackoverflow.com/questions/15464055/css-transition-effect-makes-image-blurry-moves-image-1px-in-chrome

BTW 我對 animation 沒有很熟，剛好有機會練到而已 Orz...

Hack inline-block Element Spacing

今天在教我朋友寫前端的時後發現我們在 <ul> 底下所有的 <li> 做 inline-block 的時候會有奇怪的間距 (因為也不知道問題是 margin 還是 padding 還是 font-size 之類的...，但清掉還是一樣)。

問題是都已經 inline-block 而且寬度也除到剛好的百分比了，怎麼會有這種怪事...。

demo Source:
http://jsbin.com/juloyekinu/1/watch?html,css,output
http://jsbin.com/juloyekinu/1/

但我又不想用 float 解決，這樣還要用 clearfix 也不是方便哪裡去。後來找到了這篇
Fighting the Space Between Inline Block Elements Published April 21, 2012 by Chris Coyier ，當作解法，解法有幾種，我都不很喜歡... 最後還是挑了 Negative margin，當做最後的方法。

不知道大家有沒有什麼好建議，歡迎留言給我~ 謝謝!

更新:
後來找到一篇討論:
How to get rid of space between divs when display inline-block and stacked horizontally?
除了子層加 margin-left: -4px; 之外，可以用把父層的 font-size 設為 0 也可以。
哦.. 好不科學哦... css你... ><

讓 Youtube 影片符合螢幕寬度縮放 (RWD)

老掉牙的問題了，但每次都忘記，直接把 code 貼過來。

iframe, object, embed 前面最好都加上『上一層』的 selector。

iframe,
object,
embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

DEMO: JS Bin

做 Mobile Web 的兩三事...

是說編編擔任前端一職至今也兩年了，也有做過幾次 Mobile Web，(雖然稱不上專業...，但是我沒有放棄要努力好好學的意思...)，之前一直想要記錄一下心路歷程，但是一直停留在我那點好幾次分頁的 google 草稿，再加上今年年中有一段懶散，一直沒有寫文章 。

對了，我喜歡片段式的記錄自己學的東西，然後再一次集結起來。

(此圖僅是示意圖而已)

我見過兩種手機版網站的開發的方法

1. 一種是真的當作另一個網站在開發

mobile web 的 scroll 行為調整

最近研究起 Mobile Web，發現某區塊在上下滑動的時候沒有那種很滑的感覺(不好意思... 真的不知道怎麼形容這種感覺)，想要這種感覺的話，可以試試 overflow-scrolling 的屬性:

-webkit-overflow-scrolling: touch;
overflow-y: scroll

畢竟 mobile web 不是 native App，如果想要 scroll 很順的話，可以參考看看。不過要很抱歉的說我並沒有細心的研究這個 CSS 的用法，不過上網查到的都是介紹使用 overflow-scrolling 。有機會我會再詳細補上。

參考:
Native Scrolling on Touch Devices & Polyfilling
Momentum Scrolling on iOS Overflow Elements

安裝 Compass

compass簡介：

Compass 使用 Sass，而 sass 是一種 Css Preprocessor / Css Extension，
Compass & Sass 都是需要 Ruby 編譯
Compass 是一個 css 編寫 Framework (css authoring framework)
(題外話，像 Sass 這種透過編譯的方式就可以產出 Css 的 通常稱之為 CSS 預處理器(css preprocessor)，當然世界上不止 Sass，很多人也聽過 less, stylus 等等的，可以看看 8 CSS preprocessors to speed up development time)

通常大家都會 Sass 搭配 Compass 做使用，為什麼？因為 Sass 搭配 Compass 更強大，這也是為什麼很多網路上的教學都會把這兩個一起做教學。

比方說 Compass 讓我覺得最主要的功能是 @import ，比方說我們需要用到 border-shawow，會幫你寫好所有的 css 前綴，像這樣：

@import 'compass/css3/box-shadow'
h1
    @include box-shadow(3px)

而編譯後會得到的結果是：

h1 {
  -moz-box-shadow: 3px;
  -webkit-box-shadow: 3px;
  box-shadow: 3px;
}

要開始用 Compass 以及想要擁有 import, sprites 等等的功能，你必須要有可以編譯 compass 的環境，或者是一些現成的工具，以下是介紹用 CLI 安裝 Compass。
compass 有很多很神奇之處，之後再聊 :) 我歡迎有人陪我一起學習。

Setup Compass Environment

• 主旨：說明如何安裝 Compass
• 需要 Ruby環境
• 我的作業系統是 Mac
• compass 官網的 install 說明

[快快樂樂學SASS系列] Sass v.s SCSS

這兩個名詞實在有夠饒舌，
Sass 跟 SCSS 對我來說只是寫法不同，
或許有些人習慣 css 寫法有 { } ，結尾有 ; 分號 ，
那麼你可能會喜歡用 SCSS。
簡單來說 SCSS 可以讓你直接使用 CSS 的寫法，
但附檔名是名是 .scss，也有人說這是 Sassy CSS。

如果要寫 Sass，要用縮排 ( indented syntax ) 表示，
我比較喜歡這種，我比較懶 :P，懶得一直補 { }... xd，
如果第一次寫 sass 要小心別踩到雷，可能需要練習，
( 結尾不能有 ; 分號，width:100% 編譯不會過，：後面要有一個空格，改成 width: 100%)
初學者可以選擇先從 SCSS 上手，
會用一些技巧之後轉用縮排的寫法，
也就是改用 Sass。

剛剛實驗了一下同樣的效果用 sass 跟 scss 寫的差別：
style.sass:

 $primary_color : #fff  
 $content_width : 980px  
 body  
   color : $primary_color  
   width : $content_width - 20px  
 a   
   color : $primary_color  

style.scss:

 $primary_color : #fff;  
 $content_width : 980px;  
 body{  
   color : $primary_color;  
   width : $content_width - 20px;  
 }  
 a{  
  color : $primary_color;  
 }  

不過編譯出來的結果都一樣：

 body {  
  color: white;  
  width: 960px;  
 }  
 a {  
  color: white;  
 }  

大概是這樣子，這種東西還真的不知道能寫什麼，真的是多寫才知道...
不過，這類的 CSS extension 實現了讓你用變數, 程式邏輯去控制 css 撰寫，的確是蠻有趣的。

雖然說當了一年多的前端現在才開始接觸這樣的 CSS extension，
不過不知道為什麼沒有相見恨晚的感覺，
我還是覺得手刻有手刻的好，
畢竟要在這些 CSS extension 大展身手也需要經過基本的手刻過程，
再者，依照團隊與個人的習慣而定 :)
如果什麼都想擁抱，只會讓自己辛苦。

[快快樂樂學SASS系列] Sass 開發環境設定 (搭配 Grunt)

  + 

(Grunt img source : http://gruntjs.com/img/grunt-logo.png)
(Sass img source :http://sass-lang.com/assets/img/logo-235e394c.png)

SASS 開發環境設定，搭配 Grunt 

SASS 需要 Ruby 才能編譯。
所以你一定要有 Ruby 的環境，若只裝 Grunt 是無法編譯的。
Grunt 只是 Task Runner，別誤會一定要用 Grunt...。
SASS 是 CSS 的 Extension Language，可以用比較靈活, 寫 SASS，最後透過 Grunt，幫你去處理編譯的工作 (猜測 Grunt 會請 ruby 編譯)，最後產出 css 檔案。

當初選擇 Grunt 是考慮到整個開發方式最後也需要使用 Grunt 進行 css 壓縮等整合的功能，所以選擇 Grunt。對了，不是說一定要 Grunt 才能編譯 SASS，再次強調它只是幫你做事情的工具。
若你以透過 ruby 安裝 SASS :

1. sudo gem install sass

你可以直接透過 command line 編譯 sass 產出 css 檔案:

1. sass style.scss output_style.css

就先談到這裡，剩下的留到之後再講，SASS 太多人在用了，歡迎大家上網爬好文。


環境必需品 (我是 Mac)
每種作業系統有不同的裝法，可參考 http://sass-lang.com/install（你也可以選擇使用一些現有的 Application）。

• 安裝 ruby  ( Mac本來就有 ruby的環境 )
• 安裝 sass ( sudo gem install sass) 
• 要有 node.js 環境並且安裝 NPM (node package manager)
  注意，如果你安裝的 Grunt 版本大於 0.4.x ， 那你的 node.js 版本要高於 0.8.0
• 安裝 Grunt
• 註：

• 檢測是否有ruby : ruby -v
• 檢測使否有node: node -v
• 檢測是否有裝 npm： npm -v 
• 檢測使否有 grunt : grunt -V (大寫Ｖ)
• 若以上帶 -v 有檢視版本訊息，應該不會有問題，至少我是這樣看的...。

編輯器語法變色設定

• Sublime Text 有 SASS package
• https://github.com/WhatWeDo/Sublime-Text-2-SASS-Package
• 不過我沒有試過 :P

以一個網站的資料夾為例

這是我的網站目錄:
style.css 不會是我要編輯的 css 檔，style.sass 才是，我會讓 style.sass 編譯後去蓋掉 style.css 這個檔案。

 demo_web    
   |-index.html       
   |-style.css    
   |-style.sass
   |-README.md  

接著新增 package.json 以及 Gruntfile.js 這兩個檔案：
這兩個檔案我都寫得很基本，除了這個範例，也就是 sass 會用到的東西之外，也沒加入什麼其他的相依性套件了，通常，Gruntfile.js 會用到很多套件，像是 cssmin, uglify 等等，只是在這邊簡單化。

 demo_web    
   |-index.html       
   |-style.css    
   |-style.sass
   |-README.md     
   |-Gruntfile.js  
   |-package.json  

package.json:
package.json 的相依性除了要有 grunt 之外，也要包含 grunt 的 sass 的套件，也就是 grunt-contrib-sass。
Gruntfile.js:

接著在 command line 到資料夾根目錄，以我來說是 /Users/win/Sites/demo_web。

接著下 npm install ，把會用到的相依性套件下載下來，接著就會產生 node_modules 目錄。

 npm install  

接著編輯我的 style.sass:
寫一些簡單的 sass

 $primary_color : #fff  
 body  
   color : $primary_color  
 a   
   color : $primary_color  

編輯完 sass 之後，下 Grunt 指令，就開始幫你工作了:)

Done, without errors，沒有任何編譯的 error 就會出現這句，接著再去看 style.css 編譯後的結果就可以了。


這是 before 跟 after 的結果：

實在挺方便的，接著就是好好看熟 SASS 怎麼用。
其實網路上的教學看一看，不難上手。


可以參考一些好文：

• SASS用法指南 作者： 阮一峰
• Modern Frontend Development with Sass & Compass 作者：Sven Wolfermann
• http://sass-lang.com/documentation/file.SASS_REFERENCE.html
• Sass & Compass / W3CTech Shanghai by Liang-Bin Hsueh
• Getting started with Grunt and Sass

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)。

認識 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

認識 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看一看，把筆記補齊。

Ｑ＆Ａ：

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

http://nicolasgallagher.com/about-normalize-css/ 

( 搜尋關鍵字 : Normalize vs Reset ) 

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

其他參考資源 ：

The Pure Blog

Normalize.css 支持 HTML5 的CSS Reset

http://smacss.com/

[小嘗試] 畫組織圖..

最近我看到一些網站，很多地方都是字，唯獨組織圖是用"圖"，然後就在放大/縮小頁面之間，顯得很不協調，因為字太清楚，而圖卻模糊了，而且這代表著，如果人事有改變，就要有人負責去maintain那張圖，重繪，然後上傳到網站嗎?，然後我心裡就想說，試試看用html去畫組織圖，於是就做了這件事情xd

只是想嘗試一下而已，至於有沒有人這樣做過，我想應該是一定有..，只是我就想要自己來試一下:P，然後感覺起來還不錯，至少字很清晰的，我比較習慣於看的清楚的畫面xd

Check out this Pen!

不過一開始我沒有自己畫mock-up(很久沒碰photoshop..)， 就直接開notepad寫了><
這個Demo畫面，都是寫hard code，刻ul>ol的格式，
然後困難度的部分，我想要畫到很複雜的組織圖，會需要很多時間研究，

如果想要從後端接資料來顯示，
那個json的格式，很容易走到一個誇張的境界，應該沒有這麼簡單(我猜的

Demo圖:若有個人詳細資料時，hover時會出現

Demo圖:hover到整個department時，框線改變


其實是蠻有趣的，值得花時間研究更多方法，呵呵