十个最流行的前端 CSS 库

更新日期: 2019-09-04阅读: 9.3k标签: 

前端 css 库,可以帮助用户分担样式设计,从而显著提高原型制作速度;用户则可以凭借前端框架,更加轻松地构建起直观的可用应用程序。目前市场上存在大量前端框架可供选择,本篇文章的主要内容就是关于那些目前最为流行且常用的框架。

为什么要使用 CSS 库,而不选择自定义 CSS?简而言之,时间是一种宝贵的资源,我们不该把它浪费在样式的构建身上。从零开始构建 CSS 是否性能好、效果佳?答案当然是肯定的。但除非您是位身经百战的 CSS 视觉创意人士,否则把这项工作交给专家才是最好的选择。

与此同时,框架则能够更轻松地快速构建起直观的可用应用程序。凭借着极高的人气,目前市场上存在大量前端框架可供我们选择。


Ant Design

项目概括

“Ant Design 能够帮助每一位项目成员降低设计与原型设计工作的难度,同时提高后台应用程序与产品的开发效率。”

——摘自 Ant Design 官网

Ant Design 是一种面向后台应用的设计语言,由 Ant UED 团队开发而成。他们希望借此统一内部后台项目的用户界面规范、减少设计差异以及不必要的实现成本,从而解放出更多可用于设计以及前端开发的宝贵资源。

特性

  • 一种面向 Web 应用程序的企业级 UI 设计语言。

  • 一套开箱即用的高品质 react 组件。

  • 由 TypeScript 编写而成并拥有完整的定义类型。

  • 整套开发与设计资源及工具

环境支持

  • 现代浏览器与 IE 9 以上版本(带有 polyfills)。

  • 服务器端渲染。

  • Electron


Foundation

项目概括

“Foundation 属于一个完整的响应式前端框架家族。利用 Foundation,您将可快速完成从原型到生产的整个流程,为任意目标设备上的站点或应用程序提供支持。Foundation 包含一套完全可定制的响应式网格、一套庞大的 Sass Mixins 库、各类常用 JavaScript 插件以及完全可访问性支持。”——摘自 Foundation 官网

特性

  • a11y 友好性。

  • 简约风格。

  • 灵活的 Sass。

  • ZURB 入门模板。


Bulma

项目概括

Bulma 是一套 CSS 框架,因此只会输出单一 CSS 文件:bulma.css。

大家能够以开箱即用的方式使用以上文件,也可以下载 Saas 源以调用其中各项变量。

但其中不包括 JavaScript,因为人们往往倾向于使用自己的 JS 实现。Bulma 还具有环境中立性:仅属于逻辑意义上的一种样式层。

特性

  • 通过使用最新 CSS3 功能(例如 Flexbox)并配合 CSS 变量与 CSS 网格,Bulma 一直处于浏览器视觉技术领域的最前沿。

  • 简单的网格系统:要构建 Bulma 网格,大家只需要一个.columns 容器,并根据需求将任意数量的.column 条目打包进去即可。

  • 易于学习的语法:类名称简单易读(例如.button 或.title),修饰符便于上手(例如.is-primary 或者.is-large),您能够在几分钟之内轻松学会使用 Bulma。

  • 超过 100 种实用 CSS 助手。


Spectre.css

项目概括

根据官方网站所言,Spectre.css 是“一套轻量化、响应式的现代 CSS 框架,用于实现更快、可扩展性更强的开发能力。Spectre 提供多种排版与元素的基本样式,基于 Flexbox 的响应式布局机制,外加纯 CSS 组件与工具程序。”

特性

  • 轻量化(gzip 压缩后约 10 KB)

  • 美观的组件与调色板。

  • 直观的语法。

  • 灵活性:无需 JS。


Tailwind CSS

项目概括

“Tailwind CSS 是一款高度可定制的低级 CSS 框架,能够为您提供构建定制化设计所需要的全部构建单元,且您将彻底告别那些恼人的样式问题。”——摘自 Tailwind CSS 官网

特性

  • 响应式。

  • 组件友好性。

  • 可定制。


Shoelace

项目概括

“Shoelace.css 是一套轻量化且具有前瞻性的 CSS 库,使用面向未来的 CSS 语法构建而成。其易于使用且具备充裕的定制化空间。Bottstrap 用户将在其中找到熟悉的使用感受,但同时 Shoelace 又拥有令人耳目一新的设计。您几乎能够在任何浏览器上使用 Shoelace。CDN 版本非常适合用于原型设计,但如果要使用完整功能,您也可以从零开始利用 Shoelace 进行构建。”——摘自 Shoelace 官网

特性

  • 轻量化,约 69 KB。

  • 使用原生 CSS 变量与未来 CSS 功能。

  • 易于使用且高度可定制。


Semantic UI

项目概括

“Semantic UI 将单词与类视为一种可交换的概念。各个类使用来自自然语言的语法(例如名词 / 修饰关系、词序与多元性)对概念进行直观链接。其能够实现类似于 BEM 或 SMACSS 的优势,但却不再单调乏味。”——摘自 Semantic UI 官网

特性

  • 简洁的 html 与可交换的单词及类。

  • 简化调试。

  • 主题化


Skeleton

项目概括

“Skeleton 只设计了一些标准的 HTML 元素,同时包含一套网格,但这些已经足够满足大部分需求。如果您正着手建立一个小型项目,或者觉得自己并不需要大型框架提供的那么多实用工具,那么推荐您使用 Skeleton。”——摘自 Skeleton 官网

特性

  • “轻如鸿毛”,仅约 400 行代码

  • 在设计中充分考虑移动设备平台。

  • 初步样式设计,并不属于 UI 框架。

  • 快速上手,无需编译或安装。

我个人非常喜欢 Skeleton,因为它能够加快开发速度而且设置起来也非常简单。


Tachyons

项目概括

“Tachyons 是一套面向功能性 CSS 与人类的设计系统。无需编写 CSS 代码,您就能够快速构建并设计出新的 UI 方案。”——摘自 Tachyons 官网

“设计系统会随着规模的扩展(无论是组织扩展还是产品扩展)而受到负面影响,这是因为不断有新的组件 / 变体被引入其中。这些谈何有时(或者说经常)缺少记录,因此属于在组件 / 变体需求再次出现时的重复产物。即使是具有记录的组件,对几十甚至数百个实例的所有状态 / 变体进行收集与记录也是项巨大的负担。Tachyons 这类系统通过记录与限制组件的属性解决了这个难题。(我个人将其视为一种「亚原子」设计。)

大家随后可以通过这些亚原子组件(属性)进行组件创建。您只需要管理一份包含各「成分」亚原子组件的完整清单,而不再像过去那样面对组件及其变体的繁琐记录。这些亚原子组件能够以无数种方式组合成无数种组件。这些组件虽然属性多样,但仍受限于一组合理的取值范围(即我们的亚原子组件)。”——Daniel Eden,Facebook 公司设计师

特性

  • 一种移动优先型 CSS 架构。

  • 490 种无障碍颜色组合。

  • 多款调试工具程序,可显著降低布局难度。

  • 轻量化(约 14 KB)。

  • 开源组件库。

  • 能够与纯 HTML、React、Ember、angular 以及 Rails 等顺畅协作。

  • 无限可嵌套的响应式网格系统。

  • 利用 PostCSS 构建而成。


Material Design

项目概括

“由谷歌公司创建并设计,Material Design 是一种设计语言,其中结合了各项成功设计中的经典原则、创新成果与技术方案。谷歌的目标在于开发一套能够在任意平台之上,为所有产品提供统一用户体验的设计系统。”——摘自 Material Design 官网

特性

  • 受到广泛支持。

  • 提供入门模板 。

  • 第三方支持。

如果大家愿意分享您喜欢的 CSS 库,发现本文中存在的错误,或者是我没有提到的顶尖库选项,请在评论中不吝指教!

英文原文: https://medium.com/better-programming/heres-a-list-of-top-css-front-end-libraries-eb0330c04148

链接: https://www.fly63.com/article/detial/5133

JavaScript 社区由一个库引发的“smoosh门”事件到底怎么回事?

一项名为 JavaScript 功能的提案 Array.prototype.flatten 证明与 Web 不兼容。在 Firefox Nightly 中发布该功能会导致至少一个受欢迎的网站中断。鉴于有问题的代码是广泛使用的 MooTools 库的一部分,很可能会有更多网站受到影响。

15个有趣的Javascript 和CSS库

让你了解到新兴和酷炫的web 开发趋势. 精心挑选发布一些认为大家值得关注的库:Direction Reveal、Carbon、Аxios、Jarvis、Toast UI Editor、Micron.js、lit

math.js_灵活强大的JavaScript数学库

math.js是一个广泛应用于JavaScript 和 Node.js的数学库,它的特点是灵活表达式解析器,支持符号计算,内置大量函数与常量,并提供集成解决方案来处理不同的数据类型,如数字,大数字,复数,分数,单位和矩阵。

12 个评估 JS 库你需要关心的事

当你调研一个 JS 库,功能当然是最重要的。作者给出了从 12 个角度全面分析 JS 库的可用性,分别是:特性,稳定性,性能,包生态,社区,学习曲线,文档,工具,发展历史,团队,兼容性,趋势

在使用新的JavaScript库时需要考虑的12件事

对于今年的JavaScript状态调查,我想深入挖掘一下,不仅知道人们正在使用哪些工具和库,还要为什么他们选择使用它们。这意味着我必须找到一种方法将个人偏好转化为冷酷的数据。

React Native 常用的 15 个库

本篇 React native 库列表不是从网上随便找的, 这些是我在我的应用中亲自使用的库。 这些库功能可能跟其它库也有,但经过大量研究并在我的程序中尝试后,我选择了这些库。

10个有趣的javascript和css库

我们的使命是让您了解最新和最酷的Web开发趋势。下面为大家分享10个有趣的javascript和css库:Tessaract.js强大的javascript(节点和浏览器)库,用于从图像中提取文本。

5个功能丰富的交互式Js库

在javascript的帮助下,可以为几乎每个领域(如移动、桌面应用程序和游戏Web开发)创建Web应用程序,因为该编程语言用作服务器端编程语言以实现最大功能,所以它是一种很好的编程语言。在本文中,我们选择了一些最佳的javascript库汇总

Js常用的动态效果库有那些?

当我想要在网上找一个简洁的 Javascript 动效库时,总是发现很多“推荐”的库都是缺乏持续维护的。经过一番研究,我收集了 11 个最好的库,你可以用在自己的项目中。另外我还添加了一些有用但是缺少持续维护的库

10 个实用的 Vue.js 工具和库

如今 Vue 的热度不断攀升,使用者越来越多,Vue.js 工具也随处可见。这种现象不是凭空产生的:Vue 的学习曲线友好,功能驱动的结构清晰易懂,文档出色易学,所以新人入门很容易,经验丰富的开发人员也可以快速从其他框架

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!