十个最流行的前端 CSS 库

阅读数:5365 2019 年 9 月 4 日 08:25

十个最流行的前端CSS库

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

为什么要使用 CSS 库,而不选择自定义 CSS?简而言之,时间是一种宝贵的资源,我们不该把它浪费在样式的构建身上。从零开始构建 CSS 是否性能好、效果佳?答案当然是肯定的。但除非您是位身经百战的 CSS 视觉创意人士,否则把这项工作交给专家才是最好的选择。
与此同时,框架则能够更轻松地快速构建起直观的可用应用程序。
凭借着极高的人气,目前市场上存在大量前端框架可供我们选择。

Ant Design

项目概括

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

十个最流行的前端CSS库

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

特性

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

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

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

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

环境支持

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

  • 服务器端渲染。

  • Electron

Foundation

项目概括

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

十个最流行的前端CSS库
十个最流行的前端CSS库

特性

  • a11y 友好性。

  • 简约风格。

  • 灵活的 Sass。

  • ZURB 入门模板。

Bulma

项目概括

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

十个最流行的前端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 组件与工具程序。”

十个最流行的前端CSS库

特性

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

  • 美观的组件与调色板。

  • 直观的语法。

  • 灵活性:无需 JS。

Tailwind CSS

项目概括

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

十个最流行的前端CSS库

特性

  • 响应式。

  • 组件友好性。

  • 可定制。

Shoelace

项目概括

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

十个最流行的前端CSS库

特性

  • 轻量化,约 69 KB。

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

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

Semantic UI

十个最流行的前端CSS库

项目概括

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

特性

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

  • 简化调试。

  • 主题化

十个最流行的前端CSS库

Skeleton

项目概括

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

十个最流行的前端CSS库

特性

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

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

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

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

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

Tachyons

项目概括

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

十个最流行的前端CSS库

“设计系统会随着规模的扩展(无论是组织扩展还是产品扩展)而受到负面影响,这是因为不断有新的组件 / 变体被引入其中。这些谈何有时(或者说经常)缺少记录,因此属于在组件 / 变体需求再次出现时的重复产物。即使是具有记录的组件,对几十甚至数百个实例的所有状态 / 变体进行收集与记录也是项巨大的负担。Tachyons 这类系统通过记录与限制组件的属性解决了这个难题。(我个人将其视为一种「亚原子」设计。)
大家随后可以通过这些亚原子组件(属性)进行组件创建。您只需要管理一份包含各「成分」亚原子组件的完整清单,而不再像过去那样面对组件及其变体的繁琐记录。这些亚原子组件能够以无数种方式组合成无数种组件。这些组件虽然属性多样,但仍受限于一组合理的取值范围(即我们的亚原子组件)。”
——Daniel Eden,Facebook 公司设计师

特性

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

  • 490 种无障碍颜色组合。

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

  • 轻量化(约 14 KB)。

  • 开源组件库。

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

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

  • 利用 PostCSS 构建而成。

Material Design

项目概括

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

十个最流行的前端CSS库

特性

  • 受到广泛支持。

  • 提供入门模板

  • 第三方支持。

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

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

评论

发布