HTML / CSS Frameworks

Pure
http://purecss.io/

Bootstrap
http://getbootstrap.com/

HTML KickStart
http://www.99lime.com/elements/

Semantic UI
http://semantic-ui.com/element.html

Mobile :

Lungo - HTML5 Cross-Device Framework
http://lungo.tapquo.com/

Reference :
bmark -title="18 Best CSS Frameworks for Accelerated Development | Code Geekz" http://codegeekz.com/css-frameworks-for-accelerated-development/

CSS Sprites 小圖示

將很多小圖製作成一張大圖，再使用 css 定位的方式取用圖示


優點：載入一張圖即可，減少載入圖片時的 HTTP 交通量




Reference :
Font Awesome, the iconic font designed for use with Twitter Bootstrap
草監網路: [GUI]純CSS製作 GUI 圖示按鈕-Nowill Design
CSS Sprites 產生器，改造網頁以加快圖示載入速度

Compass 建立一個專案

$ mkdir mystyle
$ cd mystyle
$ compass create
$ cd sass
$ vi test.sass

td, th
padding: 4px

thead th
text-align: center
background: #E6EDF5
color: #4F76A3
font-size: 100% !important

tbody th
font-weight: bold

tbody tr
background: #FCFDFE

tbody tr.odd
background: #F7F9FC

$ cd ../../
$ compass compile mystyle

CSS Web Column Layout

Reference :
Faux Column CSS Layouts - Code-Sucks.com
Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download!

一些 table css 樣式

cuscosky

Bootstrap

Reference :
PHP & JavaScript Room: CSS テーブル
테이블 레이아웃 모음 64개. :: 네이버 블로그

Compass 安裝

安裝 Ruby

# Windows
http://rubyinstaller.org/downloads/

#Linux
$ sudo apt-get install ruby1.9.1

安裝 Compass

$ gem install compass
$ export PATH=${PATH}:/home/yan/.gem/ruby/1.9.1/bin

$ compass create





Reference :
Install the Compass Stylesheet Authoring Framework | Compass Documentation