• 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

  • 相关阅读:
    URAL 2046 A
    URAL 2056 Scholarship 水题
    Codeforces Gym 100286I iSharp 水题
    Codeforces Gym H. Hell on the Markets 贪心
    Codeforces Gym 100286G Giant Screen 水题
    Codeforces Gym 100286B Blind Walk DFS
    Codeforces Gym 100286F Problem F. Fibonacci System 数位DP
    Codeforces Gym 100286A. Aerodynamics 计算几何 求二维凸包面积
    Codeforces Gym 100418K Cards 暴力打表
    Codeforces Gym 100418J Lucky tickets 数位DP
  • 原文地址:https://www.cnblogs.com/jinhengyu/p/10257761.html
Copyright © 2020-2023  润新知