13个加快开发效率的现代CSS框架
专心于 CSS 的框架
让我们先从一些专心于 CSS 的框架开端。你将寻到所有类型的规划和UI元从来本人构建项目的根基。有些乃至大概包括一些 JavaScript 来帮你处置更复杂的功效。
Tailwind CSS
Tailwind与其他框架的不同在于它没有任何预构建的UI组件。相反，它更专心于程序本身，CSS类可以帮忙你在构建网站方面领先一步。尺寸、色彩和定位等元素对它来说才是关键。
官网：https://tailwindcss.com
Bulma
Bulma是环绕CSS Flexbox构建的，是一个免费的开源框架。你会发明它有很多易于定制的UI元素。它是模块化的，这意味着你可以只导入所需的元素 —— 如列或按钮。
官网：https://bulma.io/
Picnic CSS
Picnic CSS 是一个超轻量级的框架，紧缩后小于10KB。它具有基于Flexbox的网格规划乃至大量的UI元素，可以快速启动项目。你乃至可以寻到一个简便的导航栏和模态窗口。
官网：https://picnicss.com/
Materialize
Google 的 Material Design 的粉丝必定喜爱 Materialise。该框架基于流行的设计说话，包罗大量基于 CSS 和 JavaScript 的元素。它聚焦于微交互，以使会员界面愈加友好。值得留意的是，Materialise 还支撑自定义主题。
官网：https://materializecss.com/
Pure.css
Pure.css在紧缩后仅为3.8KB，以移动优先的理念为中心。它是模块化的，所以你只需导入要使用的元素包。你还可以下载和安置很多常用规划。
官网：https://purecss.io/
Base
Base 是一个模块化框架，正如它的名字所要说明的，其旨在为你的项目供给坚实的根基。它创立在 Normalize.css 之上，供给易于定制的根本样式。你在这里寻不到任何太多的东西，但这恰恰就就是重点所在！
官网：https://getbase.org/
mini.css
mini.css 是一个在轻量级和功效丰硕之间取得均衡的包。它确实到达了目标，紧缩后大约10KB，同时具有相当多的UI元素和规划。通过它供给的文档你可以深入理解这一切是怎样运作的。
官网：https://minicss.org/
Concise CSS
Concise CSS 供给了一个基于有用程序的框架来使设计师“杜绝臃肿”，它可以让你快速入门。假如你需要UI元素的话可以通过独自的套件去增加它们。
官网：https://concisecss.com/
Mobi.css
Mobi.css 非常小（紧缩后仅 2.6KB），主要针对移动会员。但是其内置主题和插件系统还有很大的增长空间。假如根本样式不克不及知足你的要求，可以在框架之上以模块化的方式停止构建。
官网：http://getmobicss.com/
Spectre.css
Spectre.css 被称为“轻量级、响应式、现代化”，是一个基于Flexbox的框架。你会发明一些根本的规划、UI和排版风格。此外还有很多功效组件（手风琴、弹出窗口、标签等）都是用纯CSS构建的。总的来说，它做到了很好的均衡性。
官网：https://picturepan2.github.io/spectre/
超过CSS范围的框架
有些场景需要更强大的框架 —— 下面这些选中可以帮你完成这项工作。它们不仅供给了大量基于 CSS 的元素，并且还可以寻到基于 HTML 和 JavaScript 的功效。从某种意义上来说，几乎就像是从完成了一半的模板开端构建你的网站，你可以通过自定义来知足本人的需求。
Bootstrap
Bootstrap 是由 Twitter 创立的，由于它保护得很好，并供给了一个巨大的预建功效库，所以它几乎无处不在。虽然你可以使用默许设定，但 Bootstrap 也非常易于扩展。通过增加主题或自定义组件能够帮你进一步开发个性化的 UI。
官网：https://getbootstrap.com/
Foundation
Foundation 是模块化组件库，可认为你量身打造本人的项目。它有许许多多的选项 —— 从响应式规划到动画。 Foundation 也有本人的 JavaScript 插件API。最后，该框架附带了ARIA属性和角色，用于构建具有可拜访性的站点。
官网：https://foundation.zurb.com/
Semantic UI
有时框架可以包括仅对其原始开发人员成心义的 CSS 类名。Semantic UI 但愿通过使用天然说话来改动论述。逻辑是很容易遵照的，应当可以加快开发速度。除说话之外，你还可以寻到超越 3,000 个主题变量 —— 按照需要，你可以编纂或删除所有这些变量。
官网：https://semantic-ui.com/
依靠框架更好地工作
完成你的项目需要做许多工作 —— 这就是框架存在的缘由。它为我们处置了一些沉重的工作，并为之后的一切供给了根基。
以上就是13个加快开发效力的现代CSS框架的具体内容，更多请关注百分百源码网其它相关文章！
