回顾不同的响应式CSS前端框架

Nilesh耆那教徒的
曼达索尔理工学院讲师

摘要

在本文中，我们比较了不同的响应式CSS框架，发现Bootstrap具有更大的灵活性和稳定性。Bootstrap框架由社区积极维护。

介绍

响应式设计是一种利用灵活布局、灵活图像和层叠样式表媒体查询来创建网页的方法。响应式设计的目标是构建能够检测访问者屏幕大小和方向的网页，并相应地改变布局。

响应式设计是一种有点复古的网站设计方法，它解决了由于新型移动设备的激增而引起的许多设计问题。响应式设计页面使用网格上的x和y坐标来进行布局，使用数学百分比来表示图像，而不是使用固定宽度参数。使用百分比而不是固定宽度参数和网格布局可创建更流畅的布局，该布局将自行调整大小以适应显示的大小。

媒体查询是层叠样式表(CSS)的一个特性，它允许开发人员指定某种样式何时生效。例如，使用CSS2，如果请求，媒体查询将提供打印机友好的样式表。CSS3扩展了查询功能，允许样式表针对设备的显示，并根据查询响应为桌面、平板电脑或智能手机的样式表提供服务。

这种能力意味着，开发人员不必为网站构建一个特殊的移动版本——这通常需要从头开始编写新代码——而是可以简单地为同一个网页构建多个样式表，甚至可以将不同的图像与每个样式表关联起来。因此，HTML代码可以被重新利用，而不必重写，这节省了大量的开发时间。

CSS框架

框架是处理一类常见问题的一套标准化的概念、实践和标准，可以作为参考，帮助我们处理和解决性质类似的新问题。
在网页设计的世界里，为了给出一个更直接的定义，框架被定义为一个由标准化代码(HTML, CSS, JS文档等)的文件和文件夹结构组成的包，它可以用来支持网站的开发，作为开始构建网站的基础。

前端框架(或CSS框架)

前端框架通常由一个由标准化代码(HTML, CSS, JS文档等)的文件和文件夹结构组成的包组成。

通常的组件有:

创建网格的CSS源代码:这允许开发人员以一种简单而通用的方式定位构成站点设计的不同元素。

HTML元素的排版样式定义。

解决浏览器不兼容的情况，使网站在所有浏览器中都能正确显示。

创建标准CSS类，这些类可用于为用户界面的高级组件设计样式。

关于响应式框架:目前，响应式网页设计技术的兴起，促进了网站的发展，可以适应不同的移动和桌面设备的各种分辨率，导致了响应式框架的出现。也就是说，他们解决了制作响应式网站的常见问题。这些框架……从安装的角度提供响应性的解决方案。

框架的选择

在CSS框架中，我们可以根据其复杂性区分两种类型的框架:简单框架和完整框架。这种区别是主观的，并不意味着一个比另一个更好，而是它们根据所需的复杂性和/或灵活性提供不同的解决方案。

完整的框架

它们通常提供完整的框架，并具有可配置的特性，如样式排版、表单集、按钮、图标和其他可重用组件，用于提供导航、警报、弹出窗口等功能、图像框架、HTML模板、自定义设置等。

引导

圆滑，直观，强大的前端框架，更快，更容易的web开发。由@mdo和@fat在Twitter上构建，Bootstrap使用较少的CSS，通过Node编译，并通过GitHub管理，帮助书呆子在网络上做很棒的事情。

twitter.github.com/bootstrap

基础3

一个高级的响应式前端框架。Foundation 3是用Sass构建的，Sass是一个强大的CSS预处理器，它允许我们更快地开发Foundation本身，并为您提供了快速定制和构建Foundation的新工具。

foundation.zurb.com

骨架

一个美丽的模板响应，移动友好的发展。Skeleton是一个CSS文件的小集合，可以帮助你快速开发出在任何尺寸上看起来都很漂亮的网站，无论是在17英寸的笔记本电脑屏幕上还是在iPhone上。

getskeleton.com

YAML 4

一个模块化的CSS框架，为真正灵活，可访问和响应的网站。YAML在主要的现代浏览器(如Chrome, Firefox, Opera, Safari和Internet Explorer)中进行了测试和支持。

yaml.de

Tuktuk

不要试图与Bootstrap或Foundation竞争，因为他们在另一个联赛。只需担心如何轻松创建响应式和完全可扩展的站点。

tuktuk.tapquo.com

Gumby

Gumby框架是一个响应式的960网格CSS框架，其中包括多种类型的网格，具有不同的列变化，使您能够在整个项目的生命周期中保持灵活。

gumbyframework.com

Kube

面向专业开发人员的css框架。最小和足够。适应性和响应性。革命网格和美丽的排版。没有强加的风格和自由。

imperavi.com/kube

奠定基础

GroundworkCSS是用非常强大的CSS预处理器Sass从头开始构建的。

groundwork.sidereel.com

ResponsiveAeon

ResponsiveAeon是一个优雅和简约的css3网格系统框架，现在有一个响应网格，所有基于百分比与mediaqueries, html5起点和javascript

www.newaeonweb.com.br responsiveaeon

如何选择合适的呢?

为我的网站选择合适的框架绝非易事，原因如下:

1.每个站点都是不同的，需要不同的特征。为单页站点使用一个非常完整的框架可能会得到足够的结果，但肯定会错过许多资源。2.目前，它们没有太多显著的区别:它们都非常完整且易于使用。

安装速度:有些非常简单的安装和开始使用。其他的需要更多的时间来配置。

易于理解:有些有点难以掌握，很复杂。相比之下，其他人则相对更直接。

选项:一些框架比其他框架更复杂，提供了更多的配置选项、小部件和界面选项。这将使你的网站做得更好。

与其他系统的集成。

最佳长期支持:一些数字项目缺乏时间连续性，更新和支持服务停止。最好选择那些提供持续支持保证的公司。他们中的许多人都得到了市场上提供其他专业产品的公司的支持。

使用框架的优点和缺点

优势

简洁整洁的代码解决常见的CSS问题浏览器兼容性学习良好的实践使用一个单一的过程来解决常见的问题，使维护各种项目更加简单。有助于协作工作

缺点

混合内容和表示未使用的代码剩余更慢的学习曲线你不需要自己学习

比较:

在这篇回顾文章中，我们将比较我认为目前可用的五个最好的框架。每个框架都有自己的优缺点，以及特定的应用领域，允许您根据特定项目的需要进行选择。例如，如果您的项目很简单，就不需要使用复杂的框架。此外，许多选项都是模块化的，允许您仅使用所需的组件，甚至可以混合使用来自不同框架的组件。我要探讨的框架是基于它们在GitHub上的受欢迎程度来介绍的，从最受欢迎的开始，当然是Bootstrap。

1.引导

Bootstrap是当今可用框架中无可争议的领导者。鉴于其巨大的知名度，每天仍在增长，你可以肯定这是美妙的

Toolkit不会让你失望，也不会让你独自建立成功的网站。

Bootstrap说明

Bootstrap的主要优势在于它的巨大人气。从技术上讲，它不一定比列表中的其他框架更好，但它提供的资源(文章和教程、第三方插件和扩展、主题构建器等)比其他四个框架的总和要多。简而言之，Bootstrap无处不在。这也是人们继续选择它的主要原因

(注意:我所说的“独特组件”是指它们仅与此列表中提到的框架相比是独特的。)

2.ZURB基金会

基金会是这个比较中的第二大参与者。有了像ZURB这样可靠的公司的支持，这个框架有了一个真正强大的……嗯……基础。毕竟，Foundation被用于许多大型网站，包括Facebook、Mozilla、Ebay、Yahoo!《国家地理》等。

基金会是一个真正的专业框架，提供业务支持，培训和咨询。它还提供了许多资源来帮助您更快、更轻松地学习和使用该框架。

3.语义界面

语义UI是一个持续的努力，使网站建设更加语义化。它利用自然语言原理，从而使代码更易于阅读和理解。

Semantic是这里讨论的框架中最具创新性和功能最全面的框架。框架的整体结构和命名约定，在清晰的逻辑和类的语义方面也优于其他框架。

4.纯雅虎!

Pure是一个轻量级的模块化框架——用纯CSS编写——它包含了可以根据需要一起使用或单独使用的组件。

结论:

最后，让我们为您提供一些选择正确框架的指导方针。以下是一些需要注意的更重要的事情:

这个框架有足够的知名度吗?更大的受欢迎程度意味着更多的人参与到项目中，因此，更多的社区教程和文章，更多的真实示例/网站，更多的第三方扩展，以及与相关web开发产品的更好集成。广受欢迎也意味着该框架更经得起未来的考验——拥有更大社区的框架被抛弃的可能性要小得多。

该框架是否正在积极开发中?一个好的框架需要随着最新的web技术不断升级，尤其是在移动领域。

框架是否已经成熟?如果一个特定的框架尚未在实际项目中使用和测试，那么您可以随意使用它，但在您的专业项目中依赖它可能是不明智的。

框架是否提供了良好的文档?为了促进学习过程，良好的文档总是可取的。

框架的具体程度是什么?这里的主要观点是，与具有高级专一性的框架相比，更通用的框架更容易使用。在大多数情况下，最好选择应用了最少样式的框架，因为它更容易定制。与覆盖或覆盖现有的CSS规则相比，添加新的CSS规则要方便和有效得多。另外，如果在现有规则的基础上添加新规则，最终会得到未使用的规则，这将不必要地增加CSS的大小。

参考文献

http://www.awwwards.com/what-are-frameworks-22-best-responsive-css-frameworks-for-web-design.html
http://www.sitepoint.com/5-most-popular-frontend-frameworks-compared/
http://responsive.vermilion.com/compare.php