[51CTO.com 快译] 如今我们所浏览的网站, 除了基本的信息展示之外, 大多数具有生动的动画, 多样的布局, 以及诱人的互动元素, 多要归功于 CSS 创新技术的实现. 截至到去年年底, Flexbox 已经被运用到了 Google Chrome 的 83% 加载页面上(请参阅: ), 人们从中能够看到包括 CSS 写入模式(Writing-Mode), 移动动画, 单页面网站, 可变字体, 以及滚动捕捉等方面的新趋势.
CSS 框架是什么? 使用它的好处在哪里?
通常, 业界将 CSS 定义为一种提供有效外观的设计语言. 它可以被用于格式化和描述以文档标记形式编写的外观. 由于 CSS 可以与 XUL 和 SVG 等任何类型的 xml 一起使用, 因此 CSS 框架就像带有文件的现成软件包一样, 可以用作网站的构建基础.
下面我们来看看使用 CSS 框架可以给网站带来哪些具体的好处:
可以明显节省时间: 通过使用 CSS 框架, 开发人员在构建应用或网站时无需从零开始. 他们可以让自己更专注于诸如: 图形设计, 移动媒体优化, 以及目标应用的制作与测试等其他重要任务上.
可实现代码的重用: 如果您正在从事一个大型项目的开发, 其中包含无数的页面, 并且每个页面将处于持续活动与更新的话, 那么代码重用将显得十分有用. 可以说拥有强大重用特性的框架, 可以缩短您项目的准备周期.
消除了跨浏览器的问题: 我们在网站与应用的构建过程中, 最怕出现在某些浏览器上运行或显示不正常的情况. 然而, 由于 CSS 框架可以在任何浏览器上无缝地运行, 因此您将不必担心此类问题的发生.
确保标准结构的一致性: 前端框架通常由 CSS,html 和 JavaScript 文件组成. 这些文件有助于确保所有元素 (如设计, 表单等) 在页面中的一致性.
顶级 CSS 框架
1. Bootstrap( https://getbootstrap.com/ )
最初被称为 Twitter Blueprint 的 Bootstrap, 是作为内部团队使用的工具而创建的. 它是最著名的前端框架之一. 自公开发布以来, Bootstrap 的使用率逐年攀升.
Bootstrap 提供了报警, 按钮, 轮播, 下拉式菜单, 以及表单等设计模板. 借助 Bootstrap 的移动优先 (mobile-first) 功能, 您可以轻松地创建响应式布局, 进而保证在横跨多个设备上的设计一致性.
2. Skeleton( http://getskeleton.com/ )
Skeleton 号称 "简单的响应式样板". 由于此框架只有大约 400 行代码, 因此它更适合于小型项目, 以及开发人员需要创建轻量级内容的应用场景.
由于布局简单, Skeleton 对于那些刚开始使用前端框架的人来说, 是一个不错的选择. 当然, 也正是缺少 CSS 设计模板, 预处理器, 以及整体功能, 受限的 Skeleton 不太适合大型的项目.
3. ZURB Foundation( https://foundation.zurb.com/ )
如果您正在寻找一种响应迅速的前端框架, 那么 ZURB Foundation 就比较适合. 该框架将允许您为所有的设备创建各种生产环境的代码和原型. 通过支持具有 "准系统结构(barebone structure)" 的流行框架, ZURB Foundation 让用户能够使用简单的方法及其入门模板, 来快速生成产品原型. 由于提交量不少于 14,000 次, 而且贡献者超过了 940 名, 因此 ZURB 在 GitHub 上也有着大量的支持. 目前,《华盛顿邮报》和《国家地理》等知名网站都使用的是该框架.
4. UI Kit( https://getuikit.com/ )
UI Kit 以具有高度可定制的轻量级元素而闻名. 它的各种模板能够让您轻地松构建各类 web 界面. UI Kit 的安装包里包含了 CSS,HTML 和 JavaScript 文件, 以及 Sublime Text 和 Atom 编辑器的软件包. 另外, 它还提供了 30 多种模块化的组件, 用户可以对其进行混合与匹配, 以实现多种功能. 也就是说, 您不必反复搜索那些标记和类名.
与 Bootstrap 和 Foundation 等其他框架不同, UI Kit 并非使用 12 列网格设置, 而是将其布局分为了弹性, 网格和宽度三个部分. 当然, 由于缺乏资源, 该框架更适合于那些具有丰富经验的开发人员.
5. Bulma( https://bulma.io/ )
作为最常用的框架之一, Bulma 得到了超过 15 万名开发人员的支持. 它是基于 Flexbox 的免费开源框架之一. 由于 Bulma 框架仅完全能够满足开发响应式网站的最低要求, 因此它对于初学者来说十分容易上手. 另外, 得益于在 GitHub 上有着庞大的用户社区, Bulma 具有良好的技术支持.
6. Materialize( https://materializecss.com/ )
该前端 CSS 框架是根据 Google 的设计规范创建的. Materialize 带有易于使用的 IZ 列网格, 以便很好地用于布局设计. 它的程序包中包括有按钮, 卡片, 表格, 图标, 以及许多其他可供按需使用的组件. 此外, 您还可能用到的功能包括: 拖出式移动菜单, 涟漪效果动画, 以及 Sass mixins 等. 而且, Materialize 可以在任何类型的设备上被使用.
7. Semantic UI( https://semantic-ui.com/ )
由于是一款较新的框架, 因此 Semantic UI 在代码中使用到了自然语言, 而且备受初学者的钟爱. 它的继承系统 (inheritance system) 带有一个高级的主题变量, 为您提供了设计时的完全自由度.
由于自带有大量的第三方软件库, 因此在使用 Semantic UI 时, 您不必调用其他的库, 便可以让 Web 开发的过程更加便捷. 这也是许多初学者和经验丰富的开发人员喜欢它的原因所在.
8. Tailwind CSS( https://tailwindcss.com/ )
Tailwind CSS 与其他框架的不同之处在于, 它的软件包并没有预建 UI 组件. 该框架更关注于实用性. 它包含有各种专注于颜色, 大小和位置的 CSS 类. Tailwind 适合于那些不满足于预设组件, 但希望能够完全自由地定制 Web 设计的开发人员.
9. Picnic CSS( https://picnicss.com/ )
该框架非常轻巧, 其压缩后的代码不到 10KB. 同时, Picnic CSS 还带有基于 Flexbox 的网格布局和许多 UI 元素. 您可以使用它们来启动自己的 Web 开发项目. 另外, Picnic 的模式窗口和导航栏, 也对初学者非常友好.
10. Ionic( https://ionicframework.com/ )
该开源的移动 UI 框架, 可以让用户在不更改代码库的情况下, 开发出适用于 Android 和 iOS 原生的, 以及具有网络高性能的应用. Ionic 带有直观的 UI 组件, 可协助用户加快网站或应用程序的开发过程. 由于提供了卓越的原生功能和速度, Ionic 可以与社区, 主流分析平台, 身份验证服务, 插件以及其他集成平台, 很好地配合使用.
11. Pure.CSS( https://purecss.io/ )
该框架专注于移动优先的理念. 由于 Pure.CSS 是模块化的, 因此您可以轻松地按需导入元素包. 同时, 您还可以获取它的各种可供下载与安装的布局. 以轻便闻名的 Pure.CSS 框架, 在压缩后只有 3.8KB.
12. mini.CSS( https://minicss.org/ )
mini.CSS 同样提供全面的功能和轻巧的框架. 虽然它在压缩后只有 10KB, 但仍然可以提供丰富的布局和 UI 元素. 如果您想对它的工作原理做进一步了解, 那么请查阅它的联机文档.
13. Base( https://getbase.org/ )
如果您的主要任务是为所有的应用程序和 Web 开发项目打下坚实的基础, 那么您应该尝试一下此模块化的框架. 作为号称 "坚如磐石" 的响应框架, Base 基于 Normalize.CSS 提供了基本的可自定义样式. 您可以按需用它来实现简单的应用.
14. Concise CSS( https://concisecss.com/ )
Concise CSS 也是一款简单且实用的框架. 该框架结构紧凑, 明快, 且无需额外添加. 当然, 如果您需要 UI 元素的话, 也可以通过单独的工具包来轻松地进行追加.
15. Mobi.CSS( http://getmobicss.com/ )
压缩后的 Mobi.CSS 仅为 2.6KB, 它是目前您可以找到的最小的框架之一. Mobi 的优势在于速度, 尤其是在针对移动设备的应用场景中. 由于 Mobi.CSS 内置了主题和插件系统, 而且可以按需扩展, 因此用户可以采用模块化的方法, 在其基础上进行构建.
总结
各类 CSS 框架为用户提供了项目正常运行所需的基础. 开发人员可以更好地专注于应用内容和策略, 并设计出具有快速响应能力的网站. 俗话说: 工欲善其事, 必先利其器. 希望您能够从上面的列表中, 选择出适合自己实际需求的框架.
原文标题: How to Speed Up Your Design Process Using Modern CSS Frameworks, 作者: Souvik Banerjee
来源: http://www.tuicool.com/articles/2EZze2y