vs2017 css压缩_2017年6种免费材料设计CSS框架比较

vs2017 css压缩

Material Design Frameworks

It was 2014 when Google introduced Material Design as their design language. Since then it has been adopted and implemented in a plethora of Google products including Gmail, Docs and Drive, to name just a few. Material Design is seen both in native Android and modern web applications – in fact, nowadays it has become increasingly popular.

在2014年,Google引入了Material Design作为设计语言。 从那时起,它已在众多Google产品(包括GmailDocsDrive)中被采用和实现,仅举几例。 Material Design在原生Android和现代Web应用程序中都可以看到-实际上,如今它已变得越来越流行。

Those involved with web development may wish to keep up with the latest design trends and implement Material Design in their work. This article sets out to list Material Design CSS frameworks and their specific features, which will hopefully help you pick the best one suited to your project. Choose your partner in crime wisely – you’re going to need help when creating those outstanding web experiences after all!

与Web开发相关的人员可能希望跟上最新的设计趋势,并在工作中实施Material Design。 本文列出了Material Design CSS框架及其特定功能,以期帮助您选择最适合您的项目的框架。 明智地选择犯罪伙伴–毕竟,在创建出色的网络体验时,您将需要帮助!

It should be noted that some of the following details, such as framework polularity and available features, may slightly differ over time. Should you be interested in any framework, make sure to check the original resources for any last minute update.

应该注意的是,以下某些细节(例如框架的通用性和可用功能)可能会随时间略有不同。 如果您对任何框架感兴趣,请确保检查原始资源以获取最新更新。

1.实现 (1. Materialize)

Materialize

Materialize is arguably one of the most well-known Material Design CSS frameworks out there. Developed by a team of highly skilled, passionate students, Materialize is widely used with many available third party themes. It provides an ideal opportunity to get started with Material Design for the web without sticking your feet into cold water.

Materialize可以说是最著名的Material Design CSS框架之一。 Materialise由一群技能娴熟,充满激情的学生开发,已广泛用于许多可用的第三方主题。 它提供了一个理想的机会,可以开始在网上进行材料设计,而无需将脚踩到冷水中。

  • Maintainers: Alvin Wang et al.

    维护者: Alvin Wang等。

  • Release: 2014

    发行: 2014

  • Version: 0.99.0

    版本: 0.99.0

  • Popularity: 27,000 stars and 3,900 forks on GitHub

    人气: GitHub上有 27,000个星星和3900个叉子

  • Description: “A modern responsive front-end framework based on Material Design”

    描述: “基于Material Design的现代响应式前端框架”

  • Core concepts/principles: Responsive web design and UX focused

    核心概念/原则:响应式网页设计和用户体验

  • Framework size: 931 KB (download)

    框架大小: 931 KB(下载)

  • Preprocessors: Sass

    预处理器: Sass

  • Responsive: Yes

    回应式:

  • Modular: Yes

    模块化:

  • Starting templates/layouts: Yes

    开始模板/布局:

  • Icons: Material Design Icons

    图标: 材质设计图标

  • Typography: Roboto

    版式: Roboto

  • Documentation: Good

    说明文件:

  • Browser support: Firefox 31+, Chrome 35+, Safari 7+, IE 10+

    浏览器支持: Firefox 31 +,Chrome 35 +,Safari 7 +,IE 10+

  • License: MIT

    执照: 麻省理工学院

  • Code sample:

    代码示例:

    <a class="waves-effect waves-light btn">Button</a>
  • Pros: Large user base, continuous development, good documentation, third party support (e.g., templates, extensions, etc.)

    优点:庞大的用户群,持续的开发,良好的文档编制,第三方支持(例如,模板,扩展等)

  • Cons: N/A

    缺点:不适用

  • Ideal for: Getting started with Material Design on the web

    理想选择:网络上的材料设计入门

2. MUI (2. MUI)

MUI Material Design CSS Framework

MUI is quite popular as well. Although an individual effort, it raises the bar by providing out-of-the-box support for Angular, React and WebComponents. The detailed documentation also deserves a thumbs-up.

MUI也很受欢迎。 尽管这是个人的努力,但它通过为AngularReactWebComponents提供开箱即用的支持而提高了标准 。 详细的文档也值得赞许。

  • Maintainers: Andres Morey

    维护者: Andres Morey

  • Published: 2015

    发布时间: 2015年

  • Current version: 0.9.17

    当前版本: 0.9.17

  • Popularity: 3,400 stars and 370 forks on GitHub

    人气: GitHub上有 3400个星星和370个叉子

  • Description: “A lightweight CSS framework that follows Google’s Material Design guidelines”

    描述: “遵循Google物料设计准则的轻量级CSS框架”

  • Core concepts/principles: Cross platform support

    核心概念/原则:跨平台支持

  • Framework size: 461 KB (download) / 6.7 KB (NPM package, minified)

    框架大小: 461 KB(下载)/ 6.7 KB(NPM软件包,最小)

  • Preprocessors: Sass

    预处理器: Sass

  • Responsive: Yes

    回应式:

  • Modular: Yes

    模块化:

  • Starting templates/layouts: Yes

    开始模板/布局:

  • Icons: None bundled

    图标:无捆绑

  • Typography: Arial, Verdana, Tahoma

    版式: ArialVerdanaTahoma

  • Documentation: Very good

    说明文件: 很好

  • Browser support: Firefox, Chrome, Safari, IE 10+

    浏览器支持: Firefox,Chrome,Safari,IE 10+

  • License: MIT

    执照: 麻省理工学院

  • Code sample:

    代码示例:

    <button class="mui-btn mui-btn--primary">Button</button>
  • Pros: Default support for Angular, React, WebComponents and HTML Email, extensive documentation

    优点:对Angular,React,WebComponents和HTML Email的默认支持,广泛的文档

  • Cons: Lack of third party support, e.g., themes, add-ons, etc.

    缺点:缺乏第三方支持,例如主题,附加组件等。

  • Ideal for: Hassle-free integration with Angular, React or WebComponents

    理想选择:与Angular,React或WebComponents的轻松集成

3.表面 (3. Surface)

Surface Material Design CSS Framework

Surface is a minimal, super lightweight CSS framework adopting Material Design. Don’t expect an extensive documentation – although it is sufficient enough to help you become acquainted with the framework and get the job done. Surface can be ideal for rapid prototyping and experimenting with new projects.

Surface是采用Material Design的最小,超轻量级CSS框架。 不要指望广泛的文档,尽管它足以帮助您熟悉框架并完成工作。 Surface是快速原型制作和尝试新项目的理想选择。

  • Maintainers: Ben Mildren

    维护者: 本·米尔德伦

  • Published: 2015

    发布时间: 2015年

  • Current version: 1.01

    当前版本: 1.01

  • Popularity: 190 stars and 40 forks on GitHub

    人气: GitHub上有 190个星星和40个叉子

  • Description: “Design philosophy and aesthetics inspired by Google’s Material Design”

    描述: “受Google的材料设计启发的设计理念和美学”

  • Core concepts/principles: Minimalism

    核心概念/原则:极简主义

  • Framework size: 195 KB (download)

    框架大小: 195 KB(下载)

  • Preprocessors: Sass

    预处理器: Sass

  • Responsive: Yes

    回应式:

  • Modular: Yes

    模块化:

  • Starting templates/layouts: No

    开始模板/布局:

  • Icons: None bundled

    图标:无捆绑

  • Documentation: Weak

    说明文件:

  • Browser support: Firefox, Chrome, Opera, Safari 6.1+, IE 10+

    浏览器支持: Firefox,Chrome,Opera,Safari 6.1 +,IE 10+

  • License: MIT

    执照: 麻省理工学院

  • Code sample:

    代码示例:

    <button class="btn--raised">Button</button>
  • Pros: Lightweight, minimal

    优点:轻巧,最小

  • Cons: Low user base, weak documentation

    缺点:用户群少,文档薄弱

  • Ideal for: Rapid prototyping, experimenting, minimalist design

    理想选择:快速原型设计,实验,极简设计

4.物质基础 (4. Material Foundation)

Material Foundation Material Design CSS Framework

Already experienced with the Foundation Framework by Zurb? Material Foundation was pretty much made for you! The bad news? Development seems to be extremely slow (might even be safe to say abandoned), with not even any point releases. The user base doesn’t look big, either. Hopefully somebody might pick it up at some point and resume progress.

已经对Zurb的Foundation Framework经验丰富? Material Foundation非常适合您! 坏消息? 开发似乎非常缓慢(甚至可以肯定地说放弃了),甚至没有任何发布点。 用户基础也不大。 希望有人可以在某个时候捡起它并恢复进度。

  • Maintainers: Mikolaj Dobrucki

    维护人员: Mikolaj Dobrucki

  • Published: 2014

    发布时间: 2014年

  • Current version: N/A

    当前版本:不适用

  • Supported Foundation version: 6.2.3

    支持的基础版本: 6.2.3

  • Popularity: 300 stars and 60 forks on GitHub

    流行度: GitHub上有 300个星星和60个叉子

  • Description: “Material Design version of Foundation Framework by Zurb”

    描述: “ Zurb的Foundation Framework的材料设计版本”

  • Core concepts/principles: Zurb Foundation based

    核心概念/原则:基于Zurb Foundation

  • Framework size: 218 KB (download)

    框架大小: 218 KB(下载)

  • Preprocessors: Sass

    预处理器: Sass

  • Responsive: Yes

    回应式:

  • Modular: Yes

    模块化:

  • Starting templates/layouts: No

    开始模板/布局:

  • Icons: Material Design Iconic Font

    图标: Material Design标志性字体

  • Typography: None bundled

    版式:无捆绑

  • Documentation: Limited

    说明文件: 有限

  • Browser support: Firefox, Chrome, Opera, Safari 6.1+, IE 10+

    浏览器支持: Firefox,Chrome,Opera,Safari 6.1 +,IE 10+

  • License: MIT

    执照: 麻省理工学院

  • Code sample:

    代码示例:

    <a class="raised-button ink">Button</a>
  • Pros: Familiarity with Foundation

    优点:熟悉基金会

  • Cons: Low user base, slow/abandoned development, weak documentation

    缺点:用户群少,开发缓慢/被遗弃,文档薄弱

  • Ideal for: Developers working with Foundation, integration with Foundation

    理想选择:与Foundation合作,与Foundation集成的开发人员

5.材料设计精简版 (5. Material Design Lite)

Material Design Lite CSS Framework

Material Design Lite was published by Google engineers, therefore you can expect consistency and close alignment with Material Design concepts. Although it had become increasingly popular, it is now on limited support since development has moved to the Material Components for the Web (mentioned below).

Material Design Lite由Google工程师发布,因此您可以期望与Material Design概念保持一致和紧密一致。 尽管它已经变得越来越流行 ,但是由于开发已经转移到Web的“材料组件”(如下所述),因此它受到的支持有限。

  • Maintainers: Addy Osmani et al.

    维护者: Addy Osmani等。

  • Published: 2014

    发布时间: 2014年

  • Current version: 1.3.0

    当前版本: 1.3.0

  • Popularity: 27,800 stars and 4,700 forks on GitHub

    人气: GitHub上有 27,800个星星和4700个叉子

  • Description: “Lets you add a Material Design look and feel to your websites”

    描述: “让您为网站添加Material Design外观”

  • Core concepts/principles: Cross device use

    核心概念/原则:跨设备使用

  • Framework size: 205 KB (download) / 62 KB (NPM package, minified)

    框架大小: 205 KB(下载)/ 62 KB(最小化NPM软件包)

  • Preprocessors: Sass

    预处理器: Sass

  • Responsive: Yes

    回应式:

  • Modular: Yes

    模块化:

  • Starting templates/layouts: Yes

    开始模板/布局:

  • Icons: Material Icons

    图标: 材质图标

  • Typography: Roboto

    版式: Roboto

  • Documentation: Very good

    说明文件: 很好

  • Browser support: Firefox, Chrome, Opera, Safari, IE 10+

    浏览器支持: Firefox,Chrome,Opera,Safari,IE 10+

  • License: Apache License 2.0

    许可证: Apache License 2.0

  • Code sample:

    代码示例:

    <button class="mdl-button mdl-js-button mdl-button--raised">Button</button>
  • Pros: Large user base, maintained by Google developers, close alignment with Material Design

    优点:庞大的用户群,由Google开发人员维护,与Material Design紧密结合

  • Cons: Limited support, ceased development

    缺点:支持有限,已停止开发

  • Ideal for: Simple websites with a sure-fire adherence to Google Material Design look & feel

    理想选择:简单的网站,确保Google Material Design的外观和风格无懈可击

6. Web的材料组件 (6. Material Components for the Web)

Material Components for the Web CSS Framework

Material Components for the Web is the successor to Material Design Lite and is maintained by Google engineers and designers. Its high-level goals include modularity, adherence to the Material Design guidelines and seamless integration with other JavaScript frameworks and libraries.

Web的Material Components是Material Design Lite的后继产品,由Google工程师和设计师维护。 它的高级目标包括模块化,遵守材料设计准则以及与其他JavaScript框架和库的无缝集成。

  • Maintainers: Addy Osmani et al.

    维护者: Addy Osmani等。

  • Published: 2014

    发布时间: 2014年

  • Current version: 0.13.0

    当前版本: 0.13.0

  • Popularity: 5,000 stars and 480 forks on GitHub

    人气: GitHub上有 5,000个星标和480个分叉

  • Description: “Create beautiful apps with modular and customizable UI components”

    说明: “使用模块化和可定制的UI组件创建漂亮的应用程序”

  • Core concepts/principles: Modularity and integration with JS frameworks/libraries

    核心概念/原则:模块化和与JS框架/库的集成

  • Framework size: 117 KB (NPM package, minified)

    框架大小: 117 KB(NPM软件包,最小)

  • Preprocessors: Sass

    预处理器: Sass

  • Responsive: Yes

    回应式:

  • Modular: Yes

    模块化:

  • Starting templates/layouts: None

    开始模板/布局:

  • Icons: Material Icons

    图标: 材质图标

  • Typography: Roboto

    版式: Roboto

  • Documentation: Very good

    说明文件: 很好

  • Browser support: Firefox, Chrome, Safari, IE 11/Edge

    浏览器支持: Firefox,Chrome,Safari,IE 11 / Edge

  • License: Apache License 2.0

    许可证: Apache License 2.0

  • Code sample:

    代码示例:

    <button class="mdc-button mdc-button--raised">Button</button>
  • Pros: Maintained by Google developers, close alignment with Material Design, integration with JavaScript frameworks

    优点:由Google开发人员维护,与Material Design紧密结合,与JavaScript框架集成

  • Cons: Slightly lower user base

    缺点:较低的用户群

  • Ideal for: Consistency with Material Design Guidelines

    理想选择:与材料设计准则一致

奖励:Material-UI (Bonus: Material-UI)

Material UI Material Design UI for React Components

Although, strictly speaking, not a CSS framework, Material-UI is an interesting approach to implementing Material Design using React components. Developed by Call-Em-All, who have been using it in one of their projects, Material-UI now has thousands of stars and forks on GitHub.

虽然严格来说,它不是CSS框架,但是Material-UI是使用React组件实现Material Design的一种有趣方法。 由一直在其项目之一中使用过的Call-Em-All开发,Material-UI现在在GitHub上有成千上万的星叉。

  • Maintainers: Olivier Tassinari, Hai Nguyen et al.

    维护者: Olivier TassinariHai Nguyen等。

  • Published: 2014

    发布时间: 2014年

  • Current version: 0.18.5

    当前版本: 0.18.5

  • Popularity: 26,700 stars and 4,700 forks on GitHub

    人气: GitHub上有 26,700个星星和4700个叉子

  • Description: “A Set of React Components that Implement Google’s Material Design”

    描述: “一组实现Google物料设计的React组件”

  • Core concepts/principles: Cross platform support

    核心概念/原则:跨平台支持

  • Framework size: 429 KB (NPM package, minified)

    框架大小: 429 KB(最小化NPM软件包)

  • Preprocessors: Less

    预处理器:更少

  • Responsive: Yes

    回应式:

  • Modular: Yes

    模块化:

  • Starting templates/layouts: Yes

    开始模板/布局:

  • Icons: None bundled

    图标:无捆绑

  • Typography: None bundled, designed to work with Roboto

    版式:不捆绑,旨在与Roboto一起使用

  • Documentation: Good

    说明文件:

  • Browser support: Not specified, any modern browser should work

    浏览器支持:未指定,任何现代浏览器都可以使用

  • License: MIT

    执照: 麻省理工学院

  • Code sample:

    代码示例:

    <RaisedButton label="Button" primary={true} style={style} />
  • Pros: Extends React

    优点:扩展React

  • Cons: Knowledge of React, Node and/or Single Page Applications (SPAs) required

    缺点:需要了解React,节点和/或单页应用程序(SPA)

  • Ideal for: Developers working with aforementioned technologies and methodologies

    理想选择:使用上述技术和方法的开发人员

结论 (Conclusion)

It would be almost impossible to declare a winner among available Material Design frameworks. End users may choose which one to use according to their own needs and requirements. Think of operating systems – there is no right or wrong choice, each one arrives with its own unique pros and cons. When looking for CSS frameworks, however, you may want to take the following aspects into account:

要在可用的材料设计框架中宣布优胜者几乎是不可能的。 最终用户可以根据自己的需求和要求选择使用哪个。 想想操作系统–没有正确或错误的选择,每个操作系统都有其独特的优缺点。 但是,在寻找CSS框架时,您可能需要考虑以下方面:

  • User base: How many people are using the framework? Larger user bases not only indicate the software has been thoroughly tested, but also that there is the possibility of third party support in the form of templates and extensions.

    用户群:有多少人在使用该框架? 更大的用户群不仅表明软件已经过全面测试,而且还可能以模板和扩展的形式提供第三方支持。

  • Contributor base: Who is developing the framework – is it company and/or individuals working together? Frequent changes in the code, including bug fixing and acceptance of pull requests indicate that developers and interested parties strive to make the framework even better.

    贡献者基础:谁在开发框架–是公司和/或个人一起工作吗? 代码中的频繁更改(包括错误修复和接受拉取请求)表明,开发人员和相关方致力于使框架更好。

  • Development: How frequent are new releases? Some frameworks are constantly on the bleeding edge, while others prefer to keep up at a lower pace. If you’re into creating prototypes and trying out new things, you might want to opt for the former.

    开发:新版本的发布频率如何? 一些框架始终处于前沿,而另一些框架则希望保持较低的发展速度。 如果您要创建原型并尝试新事物,则可能希望选择前者。

  • Documentation: How detailed and clear is the official documentation? Good docs are helpful especially for people who are just getting started. Code samples and even default templates are going to help you develop quickly without much hair pulling.

    文档:官方文档有多详尽? 好的文档对刚入门的人特别有用。 代码示例,甚至是默认模板都将帮助您快速发展,而不会拖长头发。

  • Learnability: Are there any prerequisites before getting started? If you are merely into deploying web applications in no time and don’t wish to experiment with technologies you haven’t previously worked with, you’re probably better off with a framework which doesn’t require you to know or learn additional technologies in order to be able to use it.

    可学习性:开始之前是否有任何先决条件? 如果您只是想立即部署Web应用程序而又不想尝试以前从未使用过的技术,那么最好使用不需要您了解或学习其他技术的框架,这会更好。为了能够使用它。

In the end, based on your personal skills, preferences and requirements, the selection is entirely yours.

最后,根据您的个人技能,偏好和要求,选择完全取决于您。

Oh, are you perhaps curious to see what’s out there besides Material Design? Make sure to read Ivaylo Gerchev‘s comparison of The 5 Most Popular Frontend Frameworks of 2017.

哦,您也许想知道除了材料设计之外还有什么? 确保阅读Ivaylo Gerchev 对2017年5种最流行的前端框架的比较。

Happy tinkering!

修修补补!

Have you used any of the material design CSS frameworks listed in this article for your projects? Which one and why? If I’ve missed your favorite CSS framework, please let us know in the comments!

您是否为项目使用了本文列出的任何材料设计CSS框架? 哪一个,为什么? 如果我错过了您最喜欢CSS框架,请​​在评论中告诉我们!

翻译自: https://www.sitepoint.com/free-material-design-css-frameworks-compared/

vs2017 css压缩

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值