13个帮你提升开发效率的现代CSS框架

翻译：疯狂的技术宅 原文：1stwebdesigner.com/modern-css-…

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

专一于 CSS 的框架

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

Tailwind CSS

Tailwind与其余框架的区别在于它没有任何预构建的UI组件。相反，它更专一于程序自己，CSS类能够帮助你在构建网站方面领先一步。尺寸、颜色和定位等元素对它来讲才是关键。

官网：tailwindcss.com

Bulma

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

官网：bulma.io/

Picnic CSS

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

官网：picnicss.com/

Materialize

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

官网：materializecss.com/

Pure.css

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

官网：purecss.io/

Base

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

官网：getbase.org/

mini.css

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

官网：minicss.org/

Concise CSS

Concise CSS 提供了一个基于实用程序的框架来使设计师“杜绝臃肿”，它可让你快速入门。若是你须要UI元素的话能够经过单独的套件去添加它们。

官网：concisecss.com/

Mobi.css

Mobi.css 很是小（压缩后仅 2.6KB），主要针对移动用户。可是其内置主题和插件系统还有很大的增加空间。若是基本样式不能知足你的要求，能够在框架之上以模块化的方式进行构建。

官网：getmobicss.com/

Spectre.css

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

官网：picturepan2.github.io/spectre/

超越CSS范畴的框架

有些场景须要更强大的框架 —— 下面这些选择能够帮你完成这项工做。它们不只提供了大量基于 CSS 的元素，并且还能够找到基于 HTML 和 JavaScript 的功能。从某种意义上来讲，几乎就像是从完成了一半的模板开始构建你的网站，你能够经过自定义来知足本身的需求。

Bootstrap

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

官网：getbootstrap.com/

Foundation

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

官网：foundation.zurb.com/

Semantic UI

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

官网：semantic-ui.com/

依赖框架更好地工做

完成你的项目须要作不少工做 —— 这就是框架存在的缘由。它为咱们处理了一些繁重的工做，并为以后的一切提供了基础。

欢迎关注前端公众号：前端先锋，获取前端工程化实用工具包。