摘要：官网是围绕构建的，是一个免费的开源框架。官网在压缩后仅为，以移动优先的理念为中心。官网被称为轻量级响应式现代化，是一个基于的框架。通过添加主题或自定义组件能够帮你进一步开发个性化的。官网有时框架可以包含仅对其原始开发人员有意义的类名。
翻译：疯狂的技术宅
原文：https://1stwebdesigner.com/mo...
本文首发微信公众号：前端先锋
欢迎关注，每天都给你推送新鲜的前端技术文章
本文将向你介绍一系列顶级CSS框架。有些人可能听说过，也可能对有些人是全新的。但它们都提供了各种有用的先进功能，可以改善你的工作流程。开始吧！
专注于 CSS 的框架让我们先从一些专注于 CSS 的框架开始。你将找到所有类型的布局和UI元素来自己构建项目的基础。有些甚至可能包含一些 JavaScript 来帮你处理更复杂的功能。
Tailwind CSSTailwind与其他框架的区别在于它没有任何预构建的UI组件。相反，它更专注于程序本身，CSS类可以帮助你在构建网站方面领先一步。尺寸、颜色和定位等元素对它来说才是关键。
官网：https://tailwindcss.com
BulmaBulma是围绕CSS Flexbox构建的，是一个免费的开源框架。你会发现它有许多易于定制的UI元素。它是模块化的，这意味着你可以只导入所需的元素 —— 如列或按钮。
官网：https://bulma.io/
Picnic CSSPicnic CSS 是一个超轻量级的框架，压缩后小于10KB。它具有基于Flexbox的网格布局以及大量的UI元素，可以快速启动项目。你甚至可以找到一个简单的导航栏和模态窗口。
官网：https://picnicss.com/
MaterializeGoogle 的 Material Design 的粉丝肯定喜欢 Materialise。该框架基于流行的设计语言，包括大量基于 CSS 和 JavaScript 的元素。它聚焦于微交互，以使用户界面更加友好。值得注意的是，Materialise 还支持自定义主题。
官网：https://materializecss.com/
Pure.cssPure.css在压缩后仅为3.8KB，以移动优先的理念为中心。它是模块化的，所以你只需导入要使用的元素包。你还可以下载和安装许多常用布局。
官网：https://purecss.io/
BaseBase 是一个模块化框架，正如它的名字所要说明的，其旨在为你的项目提供坚实的基础。它建立在 Normalize.css 之上，提供易于定制的基本样式。你在这里找不到任何太多的东西，但这恰恰就就是重点所在！
官网：https://getbase.org/
mini.cssmini.css 是一个在轻量级和功能丰富之间取得平衡的包。它确实达到了目标，压缩后大约10KB，同时拥有相当多的UI元素和布局。通过它提供的文档你可以深入了解这一切是如何运作的。
官网：https://minicss.org/
Concise CSSConcise CSS 提供了一个基于实用程序的框架来使设计师“杜绝臃肿”，它可以让你快速入门。如果你需要UI元素的话可以通过多带带的套件去添加它们。
官网：https://concisecss.com/
Mobi.cssMobi.css 非常小（压缩后仅 2.6KB），主要针对移动用户。但是其内置主题和插件系统还有很大的增长空间。如果基本样式不能满足你的要求，可以在框架之上以模块化的方式进行构建。
官网：http://getmobicss.com/
Spectre.cssSpectre.css 被称为“轻量级、响应式、现代化”，是一个基于Flexbox的框架。你会发现一些基本的布局、UI和排版风格。此外还有许多功能组件（手风琴、弹出窗口、标签等）都是用纯CSS构建的。总的来说，它做到了很好的平衡性。
官网：https://picturepan2.github.io...
超越CSS范畴的框架有些场景需要更强大的框架 —— 下面这些选择可以帮你完成这项工作。它们不仅提供了大量基于 CSS 的元素，而且还可以找到基于 HTML 和 JavaScript 的功能。从某种意义上来说，几乎就像是从完成了一半的模板开始构建你的网站，你可以通过自定义来满足自己的需求。
BootstrapBootstrap 是由 Twitter 创建的，因为它维护得很好，并提供了一个庞大的预建功能库，所以它几乎无处不在。虽然你可以使用默认设置，但 Bootstrap 也非常易于扩展。通过添加主题或自定义组件能够帮你进一步开发个性化的 UI。
官网：https://getbootstrap.com/
FoundationFoundation 是模块化组件库，可以为你量身打造自己的项目。它有各种各样的选项 —— 从响应式布局到动画。 Foundation 也有自己的 JavaScript 插件API。最后，该框架附带了ARIA属性和角色，用于构建具有可访问性的站点。
官网：https://foundation.zurb.com/
Semantic UI有时框架可以包含仅对其原始开发人员有意义的 CSS 类名。Semantic UI 希望通过使用自然语言来改变叙述。逻辑是很容易遵循的，应该可以加快开发速度。除语言之外，你还可以找到超过 3,000 个主题变量 —— 根据需要，你可以编辑或删除所有这些变量。
官网：https://semantic-ui.com/
依赖框架更好地工作完成你的项目需要做很多工作 —— 这就是框架存在的原因。它为我们处理了一些繁重的工作，并为之后的一切提供了基础。
本文首发微信公众号：前端先锋 欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章 欢迎继续阅读本专栏其它高赞文章：12个令人惊叹的CSS实验项目
必须要会的 50 个React 面试题
世界顶级公司的前端面试都问些什么
11 个最好的 JavaScript 动态效果库
CSS Flexbox 可视化手册
从设计者的角度看 React
过节很无聊？还是用 JavaScript 写一个脑力小游戏吧！
CSS粘性定位是怎样工作的
一步步教你用HTML5 SVG实现动画效果
程序员30岁前月薪达不到30K，该何去何从
14个最好的 JavaScript 数据可视化库
8 个给前端的顶级 VS Code 扩展插件
Node.js 多线程完全指南
把HTML转成PDF的4个方案及实现
更多文章...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/114626.html
摘要：下面我们从前端基础和底层原理开始讲起。对于和这三个对应于矢量图位图和图的渲染来说，给前端开发带来了重武器，很多小游戏也因此蓬勃发展。这篇文章受众之大，后来被人重新整理并发布为，其中还包括中文版。 showImg(https://segmentfault.com/img/bVbjM5r?w=1142&h=640); 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！ 这...
摘要：规范名称定义，便于维护。譬如关于的定义在格式化的中会声明为，而在基本样式的中又可能会声明所以在中会出现多次定义。尽量减少连接数和的大小。基于版本的使用目前使用较广的是版本和，其中的最新版本是的最新版本。 随着CSS3和HTML5的流行，我们的WEB页面不仅需要更人性化的设计理念，而且需要更酷的页面特效和用户体验。作为开发者，我们需要了解一些宝贵的CSS UI开源框架资源，它们可以帮助我...
摘要：规范名称定义，便于维护。譬如关于的定义在格式化的中会声明为，而在基本样式的中又可能会声明所以在中会出现多次定义。尽量减少连接数和的大小。基于版本的使用目前使用较广的是版本和，其中的最新版本是的最新版本。 随着CSS3和HTML5的流行，我们的WEB页面不仅需要更人性化的设计理念，而且需要更酷的页面特效和用户体验。作为开发者，我们需要了解一些宝贵的CSS UI开源框架资源，它们可以帮助我...
摘要：规范名称定义，便于维护。譬如关于的定义在格式化的中会声明为，而在基本样式的中又可能会声明所以在中会出现多次定义。尽量减少连接数和的大小。基于版本的使用目前使用较广的是版本和，其中的最新版本是的最新版本。 随着CSS3和HTML5的流行，我们的WEB页面不仅需要更人性化的设计理念，而且需要更酷的页面特效和用户体验。作为开发者，我们需要了解一些宝贵的CSS UI开源框架资源，它们可以帮助我...
阅读 3363·2021-11-18 13:22
阅读 1560·2021-11-17 09:33
阅读 2740·2021-09-26 09:46
阅读 1050·2021-08-21 14:11
阅读 2702·2019-08-30 15:53
阅读 2502·2019-08-30 15:52
阅读 1743·2019-08-30 10:52
阅读 1382·2019-08-29 15:30
