三年前,我为Smashing Magazine撰写了一篇文章,“ 响应式设计框架:仅仅因为可以,应该吗?
自那时以来,该行业以其典型的突飞猛进的速度发展。Sass是CSS预处理器,已成为大多数工作流程的标准。我们更习惯于调整Sass变量以自定义现有代码。我们放心地使用mixin,建立自己的风格。我们甚至拥有用于生成配色方案的Sass公式,可以将其纳入我们的工作中。
通过使用诸如Node.js,Bower,Grunt,Gulp,Git等技术,工作流本身已成为标准。旧的浏览器继续消失,使前端开发人员可以放心地使用HTML5和CSS3的更多功能,而不必担心重大的跨浏览器兼容性问题。
回顾我2014年的文章中的131条评论时,我看到读者提出了许多使用响应式设计框架的方法:
- 有些人建议将框架的一部分与您自己的自定义代码一起使用。
- 一些开发人员插入了自己的框架,这些框架是从头开始编写的,或者是从另一个框架派生的代码。
- 几个开发人员提出了我未涵盖的框架,包括Susy,Singularity,Breakpoint,UIkit,Pattern Lab,Toolkit,Pure,Cardinal,Skeleton,ResponsiveBP等。
所有这些都是合法的方法。数以百计的框架可用。无论是已经建立的框架还是他们创建的框架,许多从事该业务已有一段时间的人都非常喜欢。
但是,越来越多地,我看到学生,客户和Web开发公司默认将Bootstrap作为其起点,并且通常很少对其是否是当前任务的合适解决方案进行严格的评估。例如,客户雇用我来进行Bootstrap培训,然后询问他们如何添加Foundation固有的功能。当我问“为什么不使用Foundation?”时,他们告诉我他们从未听说过它,并且不知道Bootstrap之外的响应设计还有其他选择。
我无法回顾数十个(即使不是数百个)响应式设计框架。但是,鉴于Bootstrap是响应式设计的500磅重的大猩猩,因此与Bootstrap相比,我选择了另外两个框架进行评估:Foundation和GetUIkit。我根据它们共有的特征选择了这三个框架,因为它们是全方位服务的响应式设计框架。他们提供网格系统,具有自定义功能的一堆变量和mixins的SCSS,几乎所有HTML5标签的基本样式,预样式化的组件(如徽章,标签和卡片)以及一堆基于JavaScript的功能(如下拉菜单,手风琴,标签,图像)画廊,图像轮播等等。所有这三个框架都提供了将文件大小减小为仅在给定网站上工作所需的样式和功能的方法。他们都在积极发展。
同样,我并不是在建议这些是唯一的响应式设计框架,也不是在暗示它们是最好的框架。但是,这些框架是流行的框架,具有大量现成的功能,这使它们对于希望与“ Bootstrap或近似的同类产品”合作的许多开发公司具有吸引力。
背景资料
为了开始讨论,让我们检查每个框架的一些基本背景功能。
正如人们所期望的那样,每个框架都带有一个网格系统。Bootstrap和Foundation的网格系统包括多个断点,嵌套网格,偏移量和源顺序(即,折叠时更改内容的顺序)。确切的断点值会有所不同,但是断点通常可以使用SCSS进行自定义。UIkit的网格完全不同,下面将进行介绍。
在最新的alpha 6版本中,Bootstrap默认情况下具有基于Flexbox的网格系统。(这部分是其Internet Explorer 10+支持浏览器的原因。)默认情况下,Foundation具有浮动网格系统(在某种程度上,其Internet Explorer 9+支持对其有所帮助)。(可选)在Foundation中,可以通过切换适当的Sass变量并重新编译为CSS来编译基于flexbox的网格系统。Foundation指出Internet Explorer 9不支持flexbox,因此如果这是您的目标浏览器,请记住这一点。
与Bootstrap相比,Foundation提供了更多的网格功能,包括居中的列,不完整的行,响应式装订线,语义网格选项和流畅的行。
当使用基于浮点的网格系统时,等高列是一个常见问题。Foundation包含一个名为Equalizer的JavaScript组件。因为UIkit和Bootstrap基于flexbox而不是浮点数,所以等高列内置在网格系统中,永远不会成为问题。
UIkit的网格与Foundation和Bootstrap完全不同。UIkit而不是标准的12列系统,而是将其布局分为三个部分:网格,伸缩和宽度。从grid组件开始,您可以创建任意多的列:
要创建网格容器,请将uk-grid
属性添加到<div>
元素。无需添加类。添加子<div>
元素以创建单元格。默认情况下,所有网格单元都是堆叠的。要将它们并排放置,请从Width组件中添加一个类。uk-child-width-expand
不论有多少,使用都会自动将相等的宽度应用于项目。
如文档中所隐含的那样,在某些布局中,网格会设置可能彼此相邻的框,而width确定这些框的宽度,而flex使用flexbox属性确定每个框内的布局。最后,与其他网格系统不同,UIkit在网格列之间提供了边界。
CSS和默认样式
这三个框架都带有某种程度的CSS样式。可以通过覆盖样式表或修改提供的SCSS或LESS预处理器文件来更改样式。一般来说,为所有或几乎所有HTML5元素都提供了基本样式。所有框架都提供了一些实用程序类,通常用于打印,响应性和元素的可见性。Foundation和UIkit为从该方向编写的语言提供了从右到左的支持。UIkit声明它将具有RTL版本,并具有使用自定义前缀编译UIkit的选项。
从其文档中尚不清楚Bootstrap 4是否提供RTL支持,但是在以前的版本中已经可用。看来这可能是将来稳定发行版的一部分。在Bootstrap社区中包含此功能引起了很多兴趣。
现成的样式最少的框架是Foundation。长期以来,该框架一直假设其用户是更高级的开发人员,他们希望为其项目编写自己的样式。因此,ZURB始终通过设计提供较少的开箱即用样式,这意味着以后将要覆盖的样式将更少。
UIkit提供了两种颜色选项,可通过Inverse组件进行访问。它们包括标准方案(浅色背景和深色文本)和对比方案(深色背景和浅色文本)。UIkit还提供了一些独特的样式化组件,例如文章和评论,以及占位符,该占位符为拖放式文件上传界面提供了一个空白空间。如果您回想起YOOtheme的WordPress和Joomla主题化根源,那么这些功能很有意义。Bootstrap和Foundation都不包含特定于内容管理系统的样式,因此,这是框架的显着特征。
Bootstrap提供的功能远不止Foundation。确实,Bootstrap的独特外观已经渗透到网站上了好几年了。Bootstrap 4的外观与Bootstrap 3相似。Bootstrap仍然提供几种颜色,例如“警告”,“危险”,“主要”,“信息”和“成功”,并且在样式某些HTML元素时通常提供一些变体。 ,例如表格和表格。
还值得比较每个框架中的CSS单元。Bootstrap 4始终使用rem作为其主要CSS单元。但是,它指出:“像素仍然用于媒体查询和网格行为,因为视口不受类型大小的影响。” Bootstrap还将其基本字体大小从版本3的14像素增加到版本4的16像素。
基金会说:“我们几乎在基金会的任何地方都使用rem单元,甚至编写了Sass函数来使它更容易一些。该rem-calc()
函数可以获取一个或多个像素值,并将其转换为适当的rem值。”
最后,UIkit似乎使用像素作为主要尺寸单位,尽管偶尔会在其LESS文件中的某些地方使用百分比和rems。其CSS尺寸原理未在其文档中解决。
导航和导航元素
这三个框架都附带了响应式导航元素。它们都包含一些相当通用的导航组件,例如格式化的面包屑,标签,手风琴和分页。这些之间有一些细微的差异,但它们通常都能按预期工作。
所有这三个框架都带有下拉菜单。通常,这些下拉菜单可用于多种情况:标准的响应式导航栏,选项卡,按钮等。所有三个下拉菜单均包括垂直下拉菜单。Foundation和UIkit还包括水平下拉列表,其中下拉列表显示为行而不是列。
导航栏存在于所有三个框架中。每个导航栏都可以容纳网站品牌和搜索,并可以使其具有粘性,并且元素可以在栏中向左或向右对齐。所有导航栏都折叠,但是它们可能以不同的方式显示折叠的内容(有些通过汉堡包按钮加一个下拉菜单,有些通过画布之外的菜单显示)。导航栏之间也有一些区别。
Bootstrap提供了一些基本的水平和垂直导航栏,这些导航栏具有不同的样式选项(标签,药片,堆叠的药片,合理的样式或普通样式)。它提供了一个单独的水平响应导航栏,该导航栏在折叠时会创建一个汉堡包按钮。有两种配色方案,可以通过SCSS自定义颜色和断点。
Foundation在与Bootstrap类似的早期版本中具有响应式导航栏。在版本6中,它已将几种导航栏处理变成可以组合的单个元素。例如,在折叠时,导航可能会隐藏在汉堡包按钮后面,非画布处理之后或向下钻取菜单之后,在其中用户加载菜单项的屏幕。可以在特定的屏幕尺寸下更改这些类型的导航处理。例如,完整的导航栏可能在桌面尺寸上可用,但切换到针对移动设备的向下钻取。
UIkit的栏提供的功能类似于Bootstrap的功能。默认情况下,它没有内置的切换开关,但是可以通过适当的CSS类和JavaScript轻松添加。折叠的内容通常位于汉堡按钮的后面,并且可能与画布功能无关。UIkit还专门提供了基于图标的导航栏(iconbar)。它附带了26个SVG图标,可以将其集成在此栏中,并有望在将来提供更多图标。
JavaScript组件
这三个框架的基于JavaScript的组件均依赖jQuery。Foundation和UIkit附带了jQuery副本,而Bootstrap依赖于通过CDN或下载连接到jQuery。
这三个框架都包含相似的功能类型:工具提示,模式窗口,手风琴,选项卡,下拉菜单,图像轮播等。
Foundation有两个方便的组件使它与众不同。一个就是Abide,它是功能齐全的HTML5表单验证库。它可以处理表单的客户端错误检查。另一个是Interchange,一个基于JavaScript的响应式图像加载器。它与图像以及部分HTML和文本兼容。它根据媒体查询将适当的内容加载到页面上。尽管响应式设计的定义特征之一是调整大小的图像,但是Bootstrap和UIkit都没有提供类似的功能。
UIkit在其文档中将其样式和JavaScript组件结合在一起,都称为“组件”。目前在其Beta版中可用的一些基于JavaScript的独特组件包括Scroll(可平滑滚动到网页的其他部分)和Sortable,这将在页面上启用拖放网格。
在UIkit的未来版本中,我们将向UIkit 2提供许多组件,包括“ Slideshow,Slider,Slideset,Parallax,Nestable,Lightbox,Dynamic Grid,HTML编辑器,Date和Timepicker组件。”值得强调的是HTML Editor和日期和时间选择器组件,因为它们通常用于管理界面和应用程序中。请记住,YOOtheme会在其业务中创建Joomla和WordPress主题,因此这些是其重要组成部分。Foundation和Bootstrap都不包含这些易于管理的小部件,因此,这是此框架的显着特征。
但是,UIkit最具特色的JavaScript功能之一是:
UIkit正在侦听DOM操作,并且会在将组件插入DOM或从DOM中删除时自动初始化,连接和断开组件。这样,它可以轻松地与Vue.js和React之类的JavaScript框架一起使用。
那么,哪个最好?
这取决于!这三个项目都得到了积极维护,并致力于追随者。最后,适合您的框架将取决于项目的要求,需要编程的帮助(使其变得漂亮吗?编码功能?)和您的个人编码理念(Rems与像素,LESS与Sass?)。与所有技术一样,没有完美的选择,您将不得不在功能,功能和代码样式上做出让步。
考虑到这一点,在决策时需要权衡以下几点。
- 浏览器支持。此处介绍的框架版本支持类似的浏览器。但是,返回一个框架版本,或遵循有关合并polyfill的说明,可能会增加对重要浏览器的支持。特别是,如果需要Internet Explorer 8支持,则可能需要查看Bootstrap 3。
- CSS单位差异。Foundation几乎将其所有单位都保留在Ems和Rems中。Bootstrap主要使用em和rems,带有用于媒体查询的像素。UIkit主要使用像素测量。一些开发人员对这些方法有很强的见解,可能会基于它们选择一个框架。
- 样式数量。UIkit具有许多现成的样式。基金会少得多。引导程序介于两者之间。您需要覆盖多少样式?您想已经展示多少款式?您只想写很少还是什么都不写?
- CSS预处理程序。基础是用SCSS原生编写的。Bootstrap在版本3中有一个从LESS到SCSS的端口,然后在版本4中重写了它的SCSS。UIkit在beta中仍可以在LESS中工作,但是它将在将来的版本中提供SCSS端口。这也可能会影响您对框架的选择。
- 工作流程。如果您希望修改SCSS文件,请知道Foundation会将您锁定在相当严格的工作流程中。Bootstrap和UIkit提供了工作流程,但是您可以选择其他工作流程或根本不选择任何工作流程。
- JavaScript组件。Foundation提供表单验证和响应式内容管理。UIkit是专门为与反应式JavaScript框架一起使用而构建的,它包括用于构建管理界面的组件。根据您所需的组件,这可能会影响您的决定。
- 网格差异。Bootstrap和Foundation提供12列网格。UIkit提供了非常不同的网格布局方法,其样式也非常不同。使用SCSS可以轻松地将Foundation的网格修改为更多或更少的列,也可以使其具有语义。UIkit和Bootstrap的网格默认情况下是基于flexbox的,而Foundation的网格则是基于float的,但是可以通过SCSS转换为flexbox。