讓你的網站也有Material Design風格?Google釋出免費 Material Design Lite 工具

讓你的網站也有Material Design風格?Google釋出免費 Material Design Lite 工具

2014年Google推出了Material Design的設計風格,從熱門的Inbox App到新的Android 5.0作業系統,不只在行動裝置上,網頁版的新服務也可以看到,而Google現在推出了Material Design Lite(MDL),讓你的網頁也可以有Material Design風格,快來試用!

雖然社群媒體盛行,不過還是有不少人會想要使用部落格,更進階的就會想要自己架設網站,利用WordPress等免費工具,設計自己的小天地,Material Design風格出現之後,不少網站也想要效仿這樣的風格,而Google聽到了這樣的聲音,因此才推出這個工具:Material Design Lite(MDL)。

MDL是一套前端語言開發工具,讓你可以自行套用各種Material Design風格工具到自己的網頁上,包含按鈕、核取方塊、輸入區、排版樣式、以及對應的網格系統和自我調整排版系統,而且跟CSS、HTML還有 JavaScript相容。

MDL有幾個特色:

1.依賴度低,方便安裝使用

2.框架是獨立的(framework-agnostic),可用於任何一款前端工具鏈

3.編碼所需空間不大,只要27 KB即可

什麼樣的網站適合使用MDL來設計呢?

部落格

讓你的網站也有Material Design風格?Google釋出免費 Material Design Lite 工具

重內容的網站

讓你的網站也有Material Design風格?Google釋出免費 Material Design Lite 工具

後台控制頁面

讓你的網站也有Material Design風格?Google釋出免費 Material Design Lite 工具

單一文章網站

讓你的網站也有Material Design風格?Google釋出免費 Material Design Lite 工具

MDL對於版面整體設計有比較具體的規範,它是使用Sass語言結合CSS(BEM 規範)工具寫成,可以適用於不同尺寸的螢幕,Google有提供模版可直接下載套用,也為單一的元件開設專區下載,如果你想建立自己的版本,也能下載CSS或通過npmBower導入MDL。

讓你的網站也有Material Design風格?Google釋出免費 Material Design Lite 工具

▲ MDL幫助網頁設計每個裝置上都有統一風格

MDL和大部分瀏覽器都可以完美相容,如 Chrome、Firefox、Opera、Microsoft Edge 和 Safari,目前對於IE9無法做到最完美的相容,Google說MDL比較適合用在靜態的網頁呈現,如果是更多樣呈現的網頁,還是要尋求其他工具唷,快來下載試試吧!

資料來源:Google Developer

Wendy
作者

使用 Facebook 留言
發表回應
謹慎發言,尊重彼此。按此展開留言規則