来自 Web前端 2020-05-07 05:42 的文章
当前位置: 网上澳门金莎娱乐 > Web前端 > 正文

十个最流行的前端 CSS 库网上澳门金莎娱乐

时间: 2019-09-04阅读: 906标签: 库

时间: 2019-05-13阅读: 301标签: 框架

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

本文将向你介绍一系列顶级CSS框架。有些人可能听说过,也可能对有些人是全新的。但它们都提供了各种有用的先进功能,可以改善你的工作流程。开始吧!

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

专注于 CSS 的框架

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

让我们先从一些专注于 CSS 的框架开始。你将找到所有类型的布局和UI元素来自己构建项目的基础。有些甚至可能包含一些 JavaScript 来帮你处理更复杂的功能。

Ant Design项目概括

Tailwind CSS

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

Tailwind与其他框架的区别在于它没有任何预构建的UI组件。相反,它更专注于程序本身,CSS类可以帮助你在构建网站方面领先一步。尺寸、颜色和定位等元素对它来说才是关键。

——摘自 Ant Design 官网

官网:

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

Bulma

特性

Bulma是围绕CSS Flexbox构建的,是一个免费的开源框架。你会发现它有许多易于定制的UI元素。它是模块化的,这意味着你可以只导入所需的元素 —— 如列或按钮。

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

官网:

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

Picnic CSS

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

Picnic CSS 是一个超轻量级的框架,压缩后小于10KB。它具有基于Flexbox的网格布局以及大量的UI元素,可以快速启动项目。你甚至可以找到一个简单的导航栏和模态窗口。

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

官网:

环境支持

Materialize

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

Google 的Material Design的粉丝肯定喜欢 Materialise。该框架基于流行的设计语言,包括大量基于 CSS 和 JavaScript 的元素。它聚焦于微交互,以使用户界面更加友好。值得注意的是,Materialise 还支持自定义主题。

服务器端渲染。

官网:

Electron

Pure.css

Foundation项目概括

Pure.css在压缩后仅为3.8KB,以移动优先的理念为中心。它是模块化的,所以你只需导入要使用的元素包。你还可以下载和安装许多常用布局。

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

官网:

特性

Base

a11y 友好性。

Base 是一个模块化框架,正如它的名字所要说明的,其旨在为你的项目提供坚实的基础。它建立在 Normalize.css 之上,提供易于定制的基本样式。你在这里找不到任何太多的东西,但这恰恰就就是重点所在!

简约风格。

官网:

灵活的 Sass。

mini.css

ZURB 入门模板。

mini.css 是一个在轻量级和功能丰富之间取得平衡的包。它确实达到了目标,压缩后大约10KB,同时拥有相当多的UI元素和布局。通过它提供的文档你可以深入了解这一切是如何运作的。

Bulma项目概括

官网:

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

Concise CSS

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

Concise CSS 提供了一个基于实用程序的框架来使设计师“杜绝臃肿”,它可以让你快速入门。如果你需要UI元素的话可以通过单独的套件去添加它们。

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

官网:

特性

Mobi.css

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

Mobi.css 非常小(压缩后仅 2.6KB),主要针对移动用户。但是其内置主题和插件系统还有很大的增长空间。如果基本样式不能满足你的要求,可以在框架之上以模块化的方式进行构建。

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

官网:

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

Spectre.css

超过 100 种实用 CSS 助手。

Spectre.css 被称为“轻量级、响应式、现代化”,是一个基于Flexbox的框架。你会发现一些基本的布局、UI和排版风格。此外还有许多功能组件(手风琴、弹出窗口、标签等)都是用纯CSS构建的。总的来说,它做到了很好的平衡性。

Spectre.css项目概括

官网:

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

超越CSS范畴的框架

特性

有些场景需要更强大的框架 —— 下面这些选择可以帮你完成这项工作。它们不仅提供了大量基于 CSS 的元素,而且还可以找到基于 HTML 和 JavaScript 的功能。从某种意义上来说,几乎就像是从完成了一半的模板开始构建你的网站,你可以通过自定义来满足自己的需求。

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

Bootstrap

美观的组件与调色板。

Bootstrap 是由 Twitter 创建的,因为它维护得很好,并提供了一个庞大的预建功能库,所以它几乎无处不在。虽然你可以使用默认设置,但 Bootstrap 也非常易于扩展。通过添加主题或自定义组件能够帮你进一步开发个性化的 UI。

直观的语法。

官网:

灵活性:无需 JS。

Foundation

Tailwind CSS项目概括

Foundation 是模块化组件库,可以为你量身打造自己的项目。它有各种各样的选项 —— 从响应式布局到动画。 Foundation 也有自己的 JavaScript 插件API。最后,该框架附带了ARIA属性和角色,用于构建具有可访问性的站点。

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

官网:

特性

Semantic UI

响应式。

有时框架可以包含仅对其原始开发人员有意义的 CSS 类名。Semantic UI 希望通过使用自然语言来改变叙述。逻辑是很容易遵循的,应该可以加快开发速度。除语言之外,你还可以找到超过 3,000 个主题变量 —— 根据需要,你可以编辑或删除所有这些变量。

本文由网上澳门金莎娱乐发布于Web前端,转载请注明出处:十个最流行的前端 CSS 库网上澳门金莎娱乐

关键词: