对于 UI / UX 设计人员而言, 要制作一个在每个浏览器上都看起来不错的漂亮网站不是一件容易的事. 在创建网站布局并使其美观时, 开发人员必须考虑所有 web 浏览器和移动视图.
恐惧始终存在于内部, 如果设计在某个愚蠢的浏览器上某个地方可怕地崩溃, 该怎么办! 多亏了 CSS 使开发人员的生活变得无限轻松的框架.
CSS 框架消除了大部分麻烦, 如今, 开发人员无法想象没有 CSS 框架的代码. 这些框架不仅节省了大量时间, 而且还有助于以更好, 更快的方式构建漂亮的响应式 Web 应用程序.
这些框架提供了基本结构, 包括网格, 交互式 UI 模式, Web 排版, 工具提示, 按钮, 表单元素, 图标. 提供了现成的解决方案, 这有助于快速构建网站. 您不需要从头开始, 也可以重用项目中的代码.
现在有一个问题, 哪个框架最适合您? 如果您不熟悉前端开发, 那么选择框架可能会有些棘手.
老实说, 每个 CSS 框架都有其优缺点, 因此, 这取决于您的特定需求. 在本文中, 我们将讨论一些适用于大多数行业开发人员的流行 CSS 框架.
我们在过滤这些框架时会牢记它们的优缺点. 让我们讨论这些框架.
1,Bootstrap
地址: https://getbootstrap.com/
您可能肯定已经听说过此框架, 即使这是您的第一个工作. 该框架是第一个推广 "智能手机优先" 理念的框架. Bootstrap 是世界上最流行的 CSS 框架, 它于 2011 年由 Twitter 引入.
Bootstrap 在大规模构建响应式设计方面有很大帮助. 当包含相关的引导程序类时, 它将自动针对不同的屏幕尺寸调整设计. 它提供了大量的插件和主题生成器.
该框架的当前版本是 Bootstrap 4, 其中包括一些其他功能, 例如新的配色方案, 新的修改器, 新的实用程序类. 版本 4 是使用 Sass 构建的, 这意味着 Bootstrap 现在已经支持 Less 和 Sass.
优点:
快速成型
大型生态系统
大量的组件
Less 和 Sass 支持
简单的文档和较低的学习曲线
由 Twitter 开发, 因此对社区有长期的长期信任.
2,Foundation
地址: https://get.foundation/
开发人员说, 如果编程是一种宗教, 那么基金会和 Bootstrap 的家伙将处于障碍的两边. Foundation 是世界上另一个使用最广泛的一流 CSS 框架. 许多公司 (例如 Facebook,eBay,Mozilla,Adobe 甚至 Disney) 都使用它. 该框架是基于 Saas(如引导程序)构建的. 它更加复杂, 灵活并且易于定制. 它也带有 CLI, 因此很容易与模块捆绑器一起使用. 它提供了 Fastclick.JS 工具, 可在移动设备上更快地呈现.
优点:
创建响应式设计
强大的电子邮件框架
极高的灵活性
在线网络研讨会培训支持.
易于定制.
提供了完整的模块化工具集, 可让您解决几乎所有的界面任务
UI 组件及更多: 先进的成像系统, 定价表组件, 表单验证, 垂直时间轴布局, RTL 支持等等.
3,Bulma
地址: https://bulma.io/
与其他 CSS 框架相比, Bulma 是市场上相对较新的框架, 但 Bulma 设法在短时间内获得了用户的很多关注. 这个免费的开源 CSS 框架基于 Flexbox 布局模型. 最好的事情是, 它完全基于 CSS, 根本不需要 JavaScript. 全球有 200,000 多名开发人员在使用它. 它反应灵敏, 轻巧, 并且遵循 "移动优先" 的方法.
优点:
所有 CSS 类名称均按逻辑命名, 因此易于学习和记住语法.
纯 CSS, 无 JavaScript
大社区
模块化: 使用 Saas 构建, 您可以通过仅导入所需的必要功能来设计界面.
大量组件, 例如垂直对齐解决方案, 布局以及媒体对象
4,Pure
地址: https://purecss.io/
由 Yahoo 开发的 Pure 是一个轻量级的响应 CSS 框架. 它使用 Normalize.CSS 构建, 可帮助使用网格和菜单创建响应式布局. 可以将其分为不同的 CSS 模块, 并且可以根据您的需求和偏好导入这些模块. 因此, 如果仅需要网格系统, 则无需导入整个 CSS 并增加站点的加载时间. 与 Bootstrap 不同, 它不允许创建固定的布局.
优点:
移动友好
完全基于 CSS, 因此很容易学习.
它提供 5 点, 2 点, 24 点等的变化. 因此, 在创建网格和列系统时可以更加灵活地使用它.
5,Semantic UI
地址: https://semantic-ui.com/
该框架以其令人难以置信的主题效果以及简单优雅的设计而闻名. 语义 UI 是使用人类友好的 html 的响应框架, 它允许您创建一个独特而美观的网站, 而无需进行多次更改. 它提供 3000 多个主题变量和 50 多个 UI 组件. 它还支持第三方库, 如 React,Meteor,Ember,React 等.
优点:
友好的类名: 它使用人类友好的 HTML, 因此可以使用自然语言进行编码.
与 Bootstrap 4 和其他框架相比更具吸引力的布局.
仅加载必要的组件, 从而减少了下载时间和文件大小
广泛的组件
6,Tailwind CSS
地址: https://tailwindcss.com/
Tailwind CSS 是一个灵活且高度可定制的低级 CSS 框架. Tailwind 用 PostCSS 编写并用 JavaScript 配置. 您将使用低级实用程序类来自定义设计, 而不是使用预先构建的组件, 从而使您可以完全控制网站的最终制作方式. 从正面尺寸到间距, 从断点到阴影, 从颜色到边框尺寸都可以自定义. 例如, 您可以为按钮赋予药丸, 轮廓和 3D 外观. 您可以个性化每个方面, 并且可以以独特的样式创建设计, 该样式看起来绝对不同于其他框架, 例如 Bootstrap 或 UI 套件.
优点:
易于定制
实用程序类
带有响应式选项
7,UI kit
地址: https://getuikit.com/
这个强大的 CSS 框架以极简主义功能而闻名. UI Kit 是一个轻量级的最小 CSS 框架, 几乎包含其他框架的所有功能.
您可以使用最大的空白空间和许多 UI 组件 (例如 SVG 图标, 进度条, 图像制作器等) 来创建超干净, 优雅且美观的 Web 界面. 有许多令人难以置信的组件, 统一的样式和自定义选项. 您可以使用 Nestable 之类的组件创建高级界面. 它使用可靠且无冲突的命名约定. 您还可以使用纯 HTML 设计复杂的基于 flexbox 的布局.
优点:
极简主义
大量有用的 UI 组件集合.
与更少和更少兼容
包含 JavaScript
对任何设备的适应性
8,Materialize CSS
地址: https://materializecss.com/
如果您喜欢使用材料设计, 那么您绝对应该检查一下这个框架. 它由 Google 于 2014 年创建, 该框架对于想要设计网站或 Android Web 应用程序的人来说是一个很好的解决方案. 许多 Google 产品都在此框架上实现, 例如 YouTube,Gmail,Google 云端硬盘和 Google 文档.
它带有一些现成的组件和类, 使您无需花费太多精力就可以尽快完成工作. 该框架使用由 Bootstrap 建立的基于 12 列网格的布局, 响应性动画和过渡, 填充以及诸如灯光和阴影之类的深度效果. 使用其预建的入门模板, 您可以以最少的设置时间来设计网站.
优点:
材料设计
引导网格
大量的组件选择
轻松定制
与 Sass 兼容
9,Skeleton
地址: http://getskeleton.com/
顾名思义, Skeleton 是最简单, 响应最少的 CSS 框架. 它仅包含 400 行代码, 但是提供了在项目中使用的多种选择. 诸如网格, 版式, 按钮, 表单, 列表, 媒体查询, 表格等功能使您可以轻松创建复杂的网站. 我们已经在 CSS 框架中提到了它, 但是更少的代码行没有将自身定义为 CSS 框架, 库甚至模块. 它实际上是一个样板, 对小型项目或作为 UI / UX 开发人员开始其职业的人都非常有用. 它仅带有有限数量的标准 HTML 元素, 但这足以开始使用简单而优雅的网站.
优点:
移动友好
简单易学
10,Miligram
地址: https://milligram.io/
顾名思义, 这是另一个轻量级 CSS 框架, 旨在更快地创建网站. 框架的大小仅为 2Kb, 但它具有许多功能和 Web 开发工具来满足您的需求. 它为开发人员提供了灵活性, 并允许他们使用 CSS3 规范提供的所有功能. 您还可以使用几行自定义 CSS 进行扩展.
优点:
基于 Flexbox 网格
超级设计主题
我们已经提到了一些 CSS 框架, 这些框架在开发人员中非常流行, 但是您也可以尝试其他一些 CSS 框架. 其他一些流行的框架包括 Susy,Animate.CSS,Paper CSS,NES.CSS,Base,Tent CSS,Simple Grid,Spectre,Mustard UI,Picnic CSS,Mini.CSS,Gumby 等.
我目前是在职前端开发, 如果你现在也想学习前端开发技术, 在入门学习前端的过程当中有遇见任何关于学习方法, 学习路线, 学习效率等方面的问题, 你都可以申请加入我的前端学习交流裙: 前面: 603 中间: 985 最后: 993. 里面聚集了一些正在自学前端的初学者 裙文件里面也有我做前端技术这段时间整理的一些前端学习手册, 前端面试题, 前端开发工具, PDF 文档书籍教程, 需要的话都可以自行来获取下载.
来源: http://www.jianshu.com/p/6e4edbf707b5