谷歌Material Design在如今的前端页面设计中非常流行。Material Design的设计风格向我们展示了一个简单而有内涵的现代UI设计方案。

Material Design是如此的简洁美观,那么,现在有什么Material Design框架可以使用呢?下面我们就一起来看看5个最顶级的Material Design框架。

Angular Material

Angular Material是目前所有Material Design框架中的大佬级人物。这是因为Angular在互联网上也非常普及,并且它直接被谷歌内部支持。

Angular Material的文档,例子和API都写得非常详细,全面概述了谷歌material design的所有特性。

Materialize

Materialize是 一个机遇Material Design的响应式前端设计框架,它的使用方法和Bootstrap相似。它是一个非常优秀的Material Design框架。它提供了CSS和SCSS文件、javascript文件、material design图标和Roboto字体。

这个项目本身是开源的,你可以在Github上找到它。

Material UI

Material UI是一个CSS框架,它使用React组件来实现material design。虽然这个框架非常的稳定,但是如果你不喜欢Facebook的React,你可能不会选择它。如果你初次接触React,你会觉得它的JSX(javacsript和XML)语法非常的怪异。

Material UI框架提供了非常详细的文档使你可以设置框架和使用npm(Node Package Manager)来安装React。你可以在这里查看它的文档:repository of Material UI

MUI CSS框架

MUI CSS Framework是一个轻量级的框架,它为前端开发者提供类似Bootstrap的解决方案。MUI CSS比其它的一些同类框架的运行速度要快一些,官网上建议在一些小项目上使用它。我们这里关注的是它的material design风格。

如果你对这个项目感兴趣,可以在Github查看这个项目

Polymer

谷歌的Polymer项目主张在WEB项目中使用WEB组件,同时他们也给出了自己的Material Design组件。

Polymer为WEB项目的布局提供了一些核心元素,并提供创建工具条,应用程序栏,tabs和侧边栏等material design的指南。

小结

你可能已经希望在你的下一个项目中使用Material Design UI,我们建议使用Materialize,这个框架类似于Bootstrap,元素可以通过CSS来定制。

你也可能比较熟悉Angular,非常喜欢Angular的动画。如果是这样,你可以使用Angular Material

Material Design在前端UI设计中是非常有潜力的设计方案。所以,如果你在准备制作一个新的网站,那么开始选择一种你喜欢的Material Design框架吧!

Jquery之家5个顶级Material Design框架的更多相关文章

  1. Materialize - 响应式 Material Design 框架

    由谷歌创建和设计的 Material Design(材料设计)是一种设计语言,结合成功的设计的经典原则以及创新科技.谷歌的目标是开发一个设计系统,让所有的产品在任何平台上拥有统一的用户体验. Mate ...

  2. Top 15 - Material Design框架和类库(译)

    _Material design_是Google开发的,目的是为了统一公司的web端和手机端的产品风格.它是基于很多的原则,比如像合适的动画,响应式,以及颜色和阴影的使用.完整的指南详情请看这里(ht ...

  3. 安卓开发笔记(三十四):Material Design框架实现优美的左侧侧滑栏

    首先我们先上图:  下面是主页面的代码,activity_main.xml: <?xml version="1.0" encoding="utf-8"?& ...

  4. 超实用!9个目前流行的MATERIAL DESIGN前端框架

    http://www.uisdc.com/material-design-frameworks-top-9 谷歌推出的Material Design风格已见有一些APP UI采用,视觉和交互体验都很棒 ...

  5. 开发 Material Design+RxJava+Retrofit+MVP App 参考资料

    前言     在开发一个基于 Material Design+RxJava+Retrofit+MVP 框架的 App 过程中学习的资料整理 —— 由G军仔分享 这里记录了我开发 大象 项目时,所学习的 ...

  6. 基于jQuery和CSS3超酷Material Design风格滑动菜单导航特效

    分享一款效果非常炫酷的谷歌 Material Design 风格jQuery和CSS3滑动选项卡特效.该选项卡特效集合了扁平风格设计和按钮点击波特效.是一款设计的非常不错的Material Desig ...

  7. 自定义 Material Design风格的提示框

    关闭 自定义 Material Design风格的提示框 2016-04-24 10:55 152人阅读 评论(0) 收藏 举报 版权声明:本文为博主原创文章,未经博主允许不得转载. 其实在14年谷歌 ...

  8. Material UI – Material Design CSS 框架

    Material Design 是谷歌推出的全新的设计理念,采用大胆的色彩.流畅的动画播放,以及卡片式的简洁设计.Material Design 风格的设计拥有干净的排版和简单的布局,容易理解,内容才 ...

  9. Materialize和Material Design Lite的区别

    Material Design Lite是google官方库,Materialize是第三方 Material Design Lite不依赖jquery,Materialize依赖jquery Mat ...

随机推荐

  1. 通过实现Comparable接口结合TreeSet来对对象自动排序

    经过会遇到这样的情况,对于某个对象数组或者链表要按照一定的规则进行排序,那么我们该怎么做呢? 如遇到这样的需求: 1.需求1 对于学生对象按照年龄进行排序,年龄小的排在前面. 单单看到这样的需求,实现 ...

  2. SQLite-CONSTRAINTS(约束)

    SQLite – CONSTRAINTS(约束) 约束是数据列在表上执行的规则.这些是用来限制的数据类型可以进入一个表.这样可以确保数据的准确性和可靠性在数据库中. 级或表级约束可以列.列级约束是仅适 ...

  3. Poj2946-The Warehouse(bfs+哈希)

    题目我就不粘贴了... 题意:给出地图,最大8*8,出口用'E'表示,空地用'.'表示,数字表示此处有多少个箱子,主人公的起点应该是在有箱子的地方,他可以朝四个方向移动,但是只有两种方式 一种是他移动 ...

  4. linux之getcwd函数解析

    [lingyun@localhost getcwd]$ cat getcwd.c /********************************************************** ...

  5. 动态规划之最长公共子序列LCS(Longest Common Subsequence)

    一.问题描述 由于最长公共子序列LCS是一个比较经典的问题,主要是采用动态规划(DP)算法去实现,理论方面的讲述也非常详尽,本文重点是程序的实现部分,所以理论方面的解释主要看这篇博客:http://b ...

  6. pip安装lxml报错

    报错信息![](6a9f8494-8771-49c6-a663-cdcb2bdea123_files/0f4e7b93-9725-4c02-97a8-298d395b6169.png) 解决方法:`` ...

  7. 多校联赛2 Problem2 Warm up 求桥的数目+缩点后的树的直径 当时被不知道原因的爆栈爆到无语了。。

    Warm up Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others) Total S ...

  8. Android学习笔记--JNI的使用方法

    1.JNI是什么 JNI是Java Native Interface的缩写,它提供若干的API实现Java与其他语言之间的通信.而Android Framework由基于Java语言的的Java层与基 ...

  9. CSS基础知识笔记(四)

    元素分类 标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1>...<h6& ...

  10. String()与toString()区别和应用

    首先,String()和toString()方法都是将其它类型的变量转换为字符串的方法.但两者存在一定的区别: x.toString(): 无法转换null和undefined: 来看下面的小例子: ...