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

vs2017 css压缩

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产品(包括Gmail ， Docs和Drive)中被采用和实现，仅举几例。 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 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 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也很受欢迎。 尽管这是个人的努力，但它通过为Angular ， React和WebComponents提供开箱即用的支持而提高了标准 。 详细的文档也值得赞许。

• 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

  版式： Arial ， Verdana ， Tahoma

• 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 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)

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 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 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)

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 Tassinari ， Hai 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压缩