如今我们所浏览的网站,除了基本的信息展示之外,大多数具有生动的动画、多样的布局、以及诱人的互动元素,多要归功于CSS创新技术的实现。截至到去年年底,Flexbox已经被运用到了GoogleChrome的83%加载页面上(请参阅:https://www.chromestatus.com/metrics/feature/timeline/popularity/1692),人们从中能够看到包括CSS写入模式(Writing-Mode)、移动动画、单页面网站、可变字体、以及滚动捕捉等方面的新趋势。

CSS框架是什么?使用它的好处在哪里?

十五种加速设计开发的CSS框架

通常,业界将CSS定义为一种提供有效外观的设计语言。它可以被用于格式化和描述以文档标记形式编写的外观。由于CSS可以与XUL和SVG等任何类型的XML一起使用,因此CSS框架就像带有文件的现成软件包一样,可以用作网站的构建基础。

下面我们来看看使用CSS框架可以给网站带来哪些具体的好处:

  • 可以明显节省时间:通过使用CSS框架,开发人员在构建应用或网站时无需从零开始。他们可以让自己更专注于诸如:图形设计、移动媒体优化、以及目标应用的制作与测试等其他重要任务上。

  • 可实现代码的重用:如果您正在从事一个大型项目的开发,其中包含无数的页面,并且每个页面将处于持续活动与更新的话,那么代码重用将显得十分有用。可以说拥有强大重用特性的框架,可以缩短您项目的准备周期。

  • 消除了跨浏览器的问题:我们在网站与应用的构建过程中,最怕出现在某些浏览器上运行或显示不正常的情况。然而,由于CSS框架可以在任何浏览器上无缝地运行,因此您将不必担心此类问题的发生。

  • 确保标准结构的一致性:前端框架通常由CSS、HTML和JavaScript文件组成。这些文件有助于确保所有元素(如设计、表单等)在页面中的一致性。

十五种加速设计开发的CSS框架

优秀CSS框架

1. Bootstrap

最初被称为Twitter  Blueprint的Bootstrap,是作为内部团队使用的工具而创建的。它是最著名的前端框架之一。自公开发布以来,Bootstrap的使用率逐年攀升。

Bootstrap提供了报警、按钮、轮播、下拉式菜单、以及表单等设计模板。借助Bootstrap的移动优先(mobile-first)功能,您可以轻松地创建响应式布局,进而保证在横跨多个设备上的设计一致性。

2. Skeleton

Skeleton号称“简单的响应式样板”。由于此框架只有大约400行代码,因此它更适合于小型项目,以及开发人员需要创建轻量级内容的应用场景。

由于布局简单,Skeleton对于那些刚开始使用前端框架的人来说,是一个不错的选择。当然,也正是缺少CSS设计模板、预处理器、以及整体功能,受限的Skeleton不太适合大型的项目。

3. ZURB Foundation

如果您正在寻找一种响应迅速的前端框架,那么ZURB  Foundation就比较适合。该框架将允许您为所有的设备创建各种生产环境的代码和原型。通过支持具有“准系统结构(barebone  structure)”的流行框架,ZURB  Foundation让用户能够使用简单的方法及其入门模板,来快速生成产品原型。由于提交量不少于14,000次,而且贡献者超过了940名,因此ZURB在GitHub上也有着大量的支持。目前,《华盛顿邮报》和《国家地理》等知名网站都使用的是该框架。

4. UI Kit

UI Kit以具有高度可定制的轻量级元素而闻名。它的各种模板能够让您轻地松构建各类Web界面。UI  Kit的安装包里包含了CSS、HTML和JavaScript文件、以及Sublime  Text和Atom编辑器的软件包。另外,它还提供了30多种模块化的组件,用户可以对其进行混合与匹配,以实现多种功能。也就是说,您不必反复搜索那些标记和类名。

与Bootstrap和Foundation等其他框架不同,UI  Kit并非使用12列网格设置,而是将其布局分为了弹性、网格和宽度三个部分。当然,由于缺乏资源,该框架更适合于那些具有丰富经验的开发人员。

5. Bulma

作为最常用的框架之一,Bulma得到了超过15万名开发人员的支持。它是基于Flexbox的免费开源框架之一。由于Bulma框架仅完全能够满足开发响应式网站的最低要求,因此它对于初学者来说十分容易上手。另外,得益于在GitHub上有着庞大的用户社区,Bulma具有良好的技术支持。

6. Materialize

该前端CSS框架是根据Google的设计规范创建的。Materialize带有易于使用的IZ列网格,以便很好地用于布局设计。它的程序包中包括有按钮、卡片、表格、图标、以及许多其他可供按需使用的组件。此外,您还可能用到的功能包括:拖出式移动菜单、涟漪效果动画、以及SASS  mixins等。而且,Materialize可以在任何类型的设备上被使用。

7. Semantic UI

由于是一款较新的框架,因此Semantic UI在代码中使用到了自然语言,而且备受初学者的钟爱。它的继承系统(inheritance  system)带有一个高级的主题变量,为您提供了设计时的完全自由度。

由于自带有大量的第三方软件库,因此在使用Semantic  UI时,您不必调用其他的库,便可以让Web开发的过程更加便捷。这也是许多初学者和经验丰富的开发人员喜欢它的原因所在。

8. Tailwind CSS

Tailwind  CSS与其他框架的不同之处在于,它的软件包并没有预建UI组件。该框架更关注于实用性。它包含有各种专注于颜色、大小和位置的CSS类。Tailwind适合于那些不满足于预设组件,但希望能够完全自由地定制Web设计的开发人员。

9. Picnic CSS

该框架非常轻巧,其压缩后的代码不到10KB。同时,Picnic  CSS还带有基于Flexbox的网格布局和许多UI元素。您可以使用它们来启动自己的Web开发项目。另外,Picnic的模式窗口和导航栏,也对初学者非常友好。

10. Ionic

该开源的移动UI框架,可以让用户在不更改代码库的情况下,开发出适用于Android和iOS原生的,以及具有网络高性能的应用。Ionic带有直观的UI组件,可协助用户加快网站或应用程序的开发过程。由于提供了卓越的原生功能和速度,Ionic可以与社区、主流分析平台、身份验证服务、插件以及其他集成平台,很好地配合使用。

11. Pure.css

该框架专注于移动优先的理念。由于Pure.css是模块化的,因此您可以轻松地按需导入元素包。同时,您还可以获取它的各种可供下载与安装的布局。以轻便闻名的Pure.css框架,在压缩后只有3.8KB。

12. mini.css

mini.css同样提供全面的功能和轻巧的框架。虽然它在压缩后只有10KB,但仍然可以提供丰富的布局和UI元素。如果您想对它的工作原理做进一步了解,那么请查阅它的联机文档。

13. Base

如果您的主要任务是为所有的应用程序和Web开发项目打下坚实的基础,那么您应该尝试一下此模块化的框架。作为号称“坚如磐石”的响应框架,Base基于Normalize.css提供了基本的可自定义样式。您可以按需用它来实现简单的应用。

14. Concise CSS

Concise  CSS也是一款简单且实用的框架。该框架结构紧凑、明快、且无需额外添加。当然,如果您需要UI元素的话,也可以通过单独的工具包来轻松地进行追加。

15. Mobi.css

压缩后的Mobi.css仅为2.6KB,它是目前您可以找到的最小的框架之一。Mobi的优势在于速度,尤其是在针对移动设备的应用场景中。由于Mobi.css内置了主题和插件系统,而且可以按需扩展,因此用户可以采用模块化的方法,在其基础上进行构建。

总结

各类CSS框架为用户提供了项目正常运行所需的基础。开发人员可以更好地专注于应用内容和策略,并设计出具有快速响应能力的网站。俗话说:工欲善其事,必先利其器。希望您能够从上面的列表中,选择出适合自己实际需求的框架。

原文标题:How to Speed Up Your Design Process Using Modern CSS  Frameworks,作者:Souvik Banerjee