相關文章

39aa1105bfc97220261833f26225c8ad 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來設計呢?

部落格

重內容的網站

後台控制頁面

單一文章網站

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

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

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

資料來源:Google Developer

使用 Facebook 留言

發表回應

謹慎發言,尊重彼此。按此展開留言規則