11個Responsive Design CSS 框架

Skeleton

http://www.getskeleton.com/

Responsive Grid System

http://www.responsivegridsystem.com/

Foundation

http://foundation.zurb.com

Bootstrap

http://getbootstrap.com

Golden Grid System

http://goldengridsystem.com/

Gumby

http://gumbyframework.com/

Wirefy

http://getwirefy.com/

FRAMELESS

http://framelessgrid.com/

1140px CSS Grid Retired

http://andytaylor.me/2013/04/09/1140px-css-grid-retired/

Less Framework

http://lessframework.com/

320 and Up

http://stuffandnonsense.co.uk/projects/320andup/

製作HTML5標準網站的最佳輔助工具-Initializr

Initializr - Start an HTML5 Boilerplate project in 15 seconds

 

最近W3C宣佈2014年要推出HTML5正式版,也表示HTML5發展也已經相當成熟了!而隨著各家瀏覽器以及行動裝置紛紛支援HTML5標準,開發者使用HTML5來設計網頁也是必然的趨勢。

工欲善其事,必先利其器,這邊就介紹一個號稱15秒就可以生出一個HTML5 Project的服務-Initializr

Initializr是基於全球知名的HTML5預設模板HTML5 Boilerplate設計的,再經過加工後,可以產生支援HTML5 Boilerplate(H5BP)、Responsive(響應式布局)或Twitter Bootstrap的HTML5檔案。

目前支援的版本為H5BP v4.0.1、Modernizr 2.6.2、jQuery 1.8.3(2013/01/09)。

使用的方式很簡單,點選您所需要的HTML/CSS Template:

  • No template  – Classic H5BP

  • Mobile-first Responsive - Responsive 行動裝置優先

  • Responsive Bootstrap 2.2.1 – 使用Twitter Bootstrap

接著選擇HTML5 Polyfills、jQuery版本,最後再選擇是不是要包含H5BP預設常見的設定檔….最後按Download!就可以了!

下載後就開始修改page name、meta description、favicons等資料,就可以產生HTML5網頁了!