合理使用 CSS 框架，加速 UI 设计进程

[GrapeCityChina]

现在的网站风格已经与它们很早之前的样子有了很大的不同。如果现在再回过头去看有些公司最初的网站 UI，我想大多数互联网用户都很难认得出来。所以也多亏了网页设计技术的创新，现在网站不仅仅是只能显示信息，它们同样也可以拥有有趣的动画、多样的布局和互动的元素。而其中，这些大部分都是由 CSS 来实现的。

所以 CSS 的出现为原本平平无奇的网页注入了活力。这也是网站的用户体验得到进一步进化的原因。这可能就是当今几乎所有的网站或多或少都在使用 CSS 的原因之一。

今年，一些 CSS 技术正在掀起一场新的技术革新，例如：Flexbox，尽管在 Google Chrome 上 83%的页面加载使用了 Flexbox，但另一个名为 Grid 的新竞争对手也正在慢慢流行起来。另外还有 CSS Writing-Mode 、移动动画、单页网站、灵活字体和滚动捕捉等技术也可能产生一定影响。

但在本文里，不会讨论不同 CSS 技术之间的异同，主要是以介绍 CSS 框架为主。因为过去的几年里它们才开始流行起来，但已经有越来越多的开发人员已经开始接触使用它们了。

CSS 框架是什么？

我们将 CSS 定义为一种设计语言，它为 HTML 文档的 UI 设计提供了帮助。通过 CSS 进行设计有很多优势，它可以与任何类型的 XML 一起使用，也包括 XUL 和 SVG 。CSS 框架就像是一个现成的包，其中包含可以作为网站结构基础的文件。

使用框架有很多好处。以下是其中一些：

• 节省时间：这是最突出的优势之一。使用 CSS 框架，开发人员在构建应用或网站时无需从零开始。他们可以空出学习的时间专注到其他重要工作上，例如 UI 设计，移动端化以及解决特定浏览器兼容问题。
• 代码可重用：如果你的项目是一个拥有很多页面的大型项目，并且后续仍在持续更新，那么框架的使用将对你将很有用的。可以说拥有强大重用特性的框架，能明显缩短您项目的准备周期。
• 跨浏览器的问题：长久以来，处理各浏览器间的访问差异，是广大前端开发者最为头疼的事情。 但 CSS 框架能提前为您发现并解决各浏览器间的差异，以保证您可以在任何浏览器中无差异的运行。
• 标准结构确保一致性：前端框架通常由 CSS，HTML 和 JavaScript 文件组成，这些文件有助于确保所有页面中元素（如设计和表单等）的一致性。

优秀的 CSS 框架

Bootstrap

Bootstrap 最初是 Twitter Blueprint 作为供团队内部使用的工具而创建的。但在它公开发布后，它受到了开发者广泛使用，使用率增长不断增长。

Bootstrap 为警告窗、按钮、轮播、下拉菜单、表单等元素提供了设计模板。通过 Bootstrap 移动优先功能，可以为您轻松创建响应式布局，它能为您的应用在多个设备上实现一致的设计。

Skeleton

Skeleton 以“简单支持响应式样板”的特点著称。因为该框架只有大约 400 行代码，它更适合于较小的项目或开发人员有着轻量化要求的情况。

对于那些刚刚开始使用前端框架的人来说，这也是一个不错的选择。但因为 Skeleton 缺乏了 CSS 设计模板、预处理器和更多丰富性功能，这使得它不太适合更大的团队和项目。

ZURB Foundation

如果您正在寻找的是一个快速且响应迅速的前端框架，那么 ZURB Foundation 可能正是您要的。它允许您为所有设备创建生产环境的代码和原型。依靠 ZURB Foundation 支持具有“准系统结构”的框架结构，可以让用户快速地完成产品设计原型。同时它在 GitHub 上也有大量的支持，提交的数量超过了 14000 个，贡献者也在 940 个以上。目前华盛顿邮报和国家地理等网站均使用了 ZURB Foundation 框架。

UI Kit

UI Kit 以具有高度可定制的轻量级元素而著称。基于使用它提供的模板，您将可以轻松创建各种 Web 界面。它的安装包里包含了 CSS 、HTML 和 JavaScript 文件，以及用于 Sublime Text 和 Atom 编辑器的包。另外，它还提供 30 多个可混合搭配的模块化组件，以实现更多功能。这意味着您不必重复搜索标记和类名。

UI Kit 与 Bootstrap 和 Foundation 等其他框架的不同之处在于它没有使用将页面分为 12 列的网格设置。它将它的布局分为三个组件，即 Flex 、Grid 和 With 。不过由于相关的支持资源不多，所以这个框架更适合有相当经验的开发人员来使用。

Bulma

Bulma 作为最常用的框架之一，已经得到了超过 15 万名开发人员的支持。它是基于 Flexbox 的免费开源框架之一。Bulma 易于使用，即使是作为初学者，也是非常易于上手的，因为该框架仅保留了开发人员开发响应式网站的最低要求。同时，在支持方面，Bulma 在 GitHub 上拥有一个庞大的用户社区，可提供支持。

Materialize

这个前端 CSS 框架是根据 Google 的设计规范而创建的。它带有易于使用的 IZ 列网格，在布局方面具备良好的基础。它的包里还包括了按钮，卡片，表格，图标以及许多其他随时可用的常用组件。

您还可以使用如：拖出式移动菜单，涟漪动画效果，SASS mixins 等功能。另外，Materialize 也是可以在任何类型的设备上使用。

Semantic UI

尽管 Semantic UI 是作为较新的框架之一，但它在几个方面的努力还是值得肯定的。首先，它在代码中使用了自然语言，这可能受到初学者开发人员的青睐。而且它的继承系统中有一个高级主题变量，所以这使你在设计时拥有较高的自由度。

使用 Semantic UI 时，您不必使用其他库，因为它附带了大量的第三方库。这使您的 Web 开发过程更加方便。凭借它出色的功能，可能很轻松俘获新老开发人员。

Tailwind CSS

Tailwind CSS 与其他 CSS 框架不同，因为它的包中没有预置任何的 UI 组件。该框架更多注重的是实用性。它附带的 CSS 类可以在您构建网站时需要设置颜色、大小、位置等内容时为您提供极大的帮助。Tailwind 是为那些希望在网页设计方面拥有完全自由度的开发人员而设计的。

Picnic CSS

该框架非常轻量，压缩后代码尺寸不到 10KB 。Picnic CSS 还提供了基于 Flexbox 的网格布局和许多 UI 元素，还包括了适合初学者使用的模态窗口和导航栏，您可以使用它们来启动您的 Web 开发项目。

Ionic

这个开源的移动 UI 框架可用于为原生 Android 和 iOS 开发出高网络性能的应用程序。它带有直观的 UI 组件，有助于加快网站或应用程序的开发过程。

Ionic 提供卓越的原生功能和速度，并能很好地与社区、主要分析、身份验证、插件和其他功能集成一起工作。

Pure.css

Pure.css 专注于移动优先的理念。由于 Pure.css 是模块化的，您可以很轻松地导入您要使用的包。您还可以访问大量可供下载和安装的布局。Pure.css 以其轻量著称。在压缩后，这个框架的尺寸只有 3.8KB 。

mini.css

mini.css 也是一款能够提供完整功能且足够轻量的框架，它压缩后的大小约为 10KB，虽然它是个很轻量的框架，但它仍然提供大量布局和 UI 的元素。如果您想了解它的工作原理是怎样的，您可以通过它的文档了解。

Base

如果您的主要工作是为所有的应用程序和 Web 开发项目打下坚实的基础，那么您可以尝试一下这个模块化框架。Base 自称是 “坚如磐石”的响应性框架。Base 基于 Normalize.css ，并提供基本的、可自定义的样式。如果你的需求只是一个简单的框架，那么它可以满足你。

Concise CSS

如果你需要的是一个简单并实用的框架，那么 Concise CSS 可能会是你的选择。它的框架是为那些想要“放弃臃肿”的开发人员准备的。顾名思义，它们为开发人员提供的是不包含其他额外附件的包，如果需要更多 UI 元素，您可以通过单独的工具包完成添加。

Mobi.css

压缩后的 Mobi.css 只有 2.6KB ，它是您能找到的最小的框架之一。它的执行速度是它的特点，特别是对于移动设备，所以如果你追求的是速度，那么试试这个框架吧。

不过，和其他模块化框架一样，如果您需要的不只是它们提供的基本样式和功能，您可以在其基础上以模块化方式进行构建。

总结

各类 CSS 框架除了为用户提供了项目正常运行所需的基础外，还确保了您的应用在各浏览器中访问的一致性和包含响应式的网站设计。这样您就可以集中精力更好地去专注于应用程序的内容和策略的制定。那么，希望您能从上面的列表中找到符合您需求的框架。