MDL---Material Design Lite框架推薦

INTRO

material design相比不會陌生, 如今的移動端基本遵循了這個設計規範, 微軟退出過一個殘次品universal design(花了半個月時間趕出來的規範)也是借鑑了MD的思想, 官網以下:

getmdl.io -vanilla CSS，HTML和JS中的組件和模板庫

 

早在2014年，Google就發佈了material design 規範，目標是爲全部設備外形提供良好設計和精美UI的指南。谷歌本身固然也推出了符合這一規範的前端web框架愛: Material Design Lite（MDL）。

MDL能夠輕鬆地爲您的網站添加材料設計外觀。MDL的「Lite」部分來自幾個關鍵設計目標：MDL具備不多的依賴性，使其易於安裝和使用。它與框架無關，這意味着MDL能夠與任何快速變化的前端工具鏈環境一塊兒使用。MDL在代碼大小方面的開銷很低（約27KB gzip），並且關注點很窄 - 爲網站提供了材料設計樣式。

 

MDL是使用Polymer構建的Paper元素的補充實現。Paper元素是徹底封裝的組件，能夠單獨使用或組合在一塊兒以建立材料設計風格的站點，並支持更高級的用戶交互。也就是說，MDL能夠與Polymer元素對應物一塊兒使用。

和其餘UI框架同樣, 它是開箱即用的模板

MDL針對內容很重的網站進行優化，例如營銷頁面，文本文章和博客。咱們構建了響應式模板，以顯示可使用MDL建立的站點範圍。這些能激發您構建外觀漂亮的網站。

DEMO

博客：

內容網站：

管理系統：

獨立文章：

 

ABOUT

對MD的實現有無數種, 在web領域就有數十種開源框架基於material來實現的, 國內有一個MDUI的框架我的認爲對md的實現很是完美, 同時在兼容性上超越了MDL, 能夠嘗試一下:

https://www.mdui.org/

技術細節和瀏覽器支持

MDL包含豐富的組件，包括材料設計按鈕，文本字段，工具提示，微調器等等。它還包括響應網格和斷點.

 

完整的MDL體驗適用於全部現代常青瀏覽器（Chrome，Firefox，Opera，Microsoft Edge）和Safari.

其餘

MDL的核心是Lite, 即精簡, 比mdui要小不少,也快不少, 可是缺點是不少地方須要polyfill來兼容, 甚至是firefox.

谷歌一直在與設計師合做，不斷髮展材料設計，爲網絡構建額外的思惟。這包括處理響應式模板，高性能排版和徽章等缺失組件的解決方案。

 

MDL創建在您已經知道並天天使用的Web核心技術的基礎上 - CSS，HTML和JS。經過在項目中採用MDL，您能夠訪問權威且高度策劃的Web材料設計實現。

我火燒眉毛地想要使用MDL來構建的美麗，現代，響應迅速的blog網站: 歡迎關注我用mdl實現的的我的主頁;

jinhengyu.github.io