2014年5个最流行前端框架对比

使用 SVG 输出 Octicon

2016/03/18 · HTML5 ·
SVG

原文出处:
aaronshekey   译文出处:[百度EFE

  • Justineo]()   

GitHub.com 现在不再使用字体来输出图标了。我们把代码库中所有的 Octicon
替换成了 SVG 版本。虽然这些改动并不那么明显,但你马上就能体会到 SVG
图标的优点。

图片 1

Octicon 上的对比

切换到 SVG
以后,图标会作为图片渲染而非文字,这使其在任何分辨率下都能很好地在各种像素值下显示。可以比较一下左侧放大后的字体版本和右侧清晰的
SVG 版本。

10款最佳JavaScript 和 HTML5演示(幻灯片)框架

2014/12/26 · HTML5,
JavaScript ·
HTML5,
Javascript,
幻灯片

本文由 伯乐在线 –
cucr
翻译,黄利民
校稿。未经许可,禁止转载!
英文出处:devzum.com。欢迎加入翻译组。

JavaScript 和
HTML5 框架在现代浏览器中为创建演示文稿扮演着重要的角色。他们在web页面中嵌入特性,提供了一种有效的方式来展示信息。一般来说,手动编写需要大量的时间和精力。而且手动真的很复杂,初学者如果没有应用有效的技术无法获得足够的成果。另一方面,演示框架具有在不发生任何问题和复杂性就产生很好的工作成果的特性。他们以最大的速度和准确性交付最好的web开发成果。

HTML5在现代设计师和web开发人员中变得非常受欢迎。其丰富的功能和无滞后的表现在很大程度上提高一个网站的功能和效率。你可以很容易地通过选择一款出色的框架来修改你的网站的界面外观,。毫无疑问,这是微软power
point和keynote的一个完美的web替代品。

因此,看看这些顶级JavaScript和HTML5演示框架,并选择最好的一款,通过这些幻灯片演示框架的帮助来展示你的任务。

2014年5个最流行前端框架对比

2015/01/08 · CSS,
HTML5 ·
bootstrap,
Foundation,
Pure, Semantic
UI,
UIkit,
前端框架

本文由 伯乐在线 –
kinolee
翻译,JustinWu
校稿。未经许可,禁止转载!
英文出处:www.sitepoint.com。欢迎加入翻译组。

当今时代众多CSS的前端框架纷涌而至,但真正的优秀的却屈指可数。

在这篇文章中我们将对我认为最好的五个框架进行比较,每个框架都有自己优缺点和特定的应用领域,这允许你根据特定项目的需求选择合适的框架。比如,如果你的项目比较简单,你就不需要复杂的框架,此外,许多选项是模块化的,这允许你仅使用你需要的组件,或者混合使用不同框架的组件。

我们要讨论的框架都是基于其在github上的人气展示的,首先说最流行的,当然是:Bootstrap。

(注意:下面的一些信息在未来的几周和几月后就过时了,如:GitHub
上的评分(Stars)和版本数,因此如果你是在这篇文章发布很久以后阅读的话,你需要留意这一点。此外,还要注意框架大小是否将必要的CSS和JS文件最小化。)

为何使用 SVG?

1) HTML5 Slides

图片 2

Slides是一款有效的web开发演示框架。由谷歌提供,这款框架提供了一个链接,通过它可以极大容易和舒适地获取模板。大家需要做的就是复制样本幻灯片的代码,并为他们填上新的内容。

1. Bootstrap

Bootstrap 在当今流行的各种框架中是无可争议的老大。鉴于其每天仍在增长的巨大人气,可以肯定,这个美妙的工具绝对不会让你失望,它也不会在你成功建立网站前就离你而去。

图片 3

  • 创建者: Mark Otto and Jacob
    Thornton.
  • 发布: 2011
  • 当前版本: 3.3.1
  • 人气: 在Github上有75,000+ stars
  • 描述: “Bootstrap是最流行的的 HTML, CSS和 JavaScript
    响应式开发框架 ,web上开发的第一个移动项目.”
  • 核心概念/原则: RWD 和移动优先
  • 框架大小: 145 KB
  • 预处理器: Less 和 Sass
  • 响应式: Yes
  • 模块化: Yes
  • 开始模板/布局: Yes
  • 图标设置: Glyphicons Halflings set
  • 附加/插件: 没有捆绑插件,但许多第三方插件可用.
  • 独特的组件: Jumbotron
  • 文档: 良好
  • 定制: 基本的GUI定制器。不幸的是,你需要手动输入的颜色值,因为没有可用的颜色选择器。
  • 浏览器支持: Firefox, Chrome, Safari, IE8+
    (你需要 Respond.js for IE8)
  • 许可证: MIT

Notes
on Bootstrap

  •  Bootstrap 的主要优点是它非常流行。从技术上讲,它并不一定比这次列出来的其他框架好,但它提供的资源(文章和教程、第三方插件和扩展、主题开发者等等)比其他四个框架的总和还要多。简而言之,Bootstrap无处不在。这是人们继续选择它的主要原因。
  • (注意:“独特的组件”的意思是,相比这里提到的其他框架是独一无二的。)

图标字体渲染问题

图标字体从来只是一种 hack。我们之前使用一个自定义字体,并将图标作为
Unicode 符号。这样图标字体就可以通过打包后的 CSS
来引入。只要简单地在任意元素上添加一个
class,图标就可以显示出来。然后我们只使用 CSS
就能即时改变图标的尺寸和颜色了。

不幸的是,虽然这些图标是矢量图形,但在 1x
显示屏下的渲染效果并不理想。在基于 WebKit
的浏览器下,图标可能会在某些窗口宽度下变得模糊。因为此时图标是作为文本输出的,本来用于提高文本可读性的次像素渲染技术反而使图标看起来糟糕许多。

2) Reveal.js

图片 4

Reveal.js是一款著名的web开发框架。它创造很棒的幻灯片,可以水平和垂直定位。通过使用它,你可以很容易地为你的演示添加各种效果的完美组合和3
d幻灯片过渡。大量的web开发人员正在使用这款有效并且可靠的框架。

2. Foundation by ZURB

Foundation是这几个框架中第二大的,在像ZURB一样实力雄厚的公司支持下,这个框架确实很强大,是的,就是foundation。毕竟, Foundation已经在很多大型网站上投入使用,包括 Facebook,
Mozilla, Ebay, Yahoo!和国家地理等等。

图片 5

  • 创建者: ZURB
  • 发布: 2011
  • 当前版本:5.4.7
  • 人气: 在Github上有18,000+ stars
  • 描述: “世界上最优秀的响应式前端框架”
  • 核心概念/原则: RWD 、手机优先、语义的
  • 框架大小: 326KB
  • 预处理器: Sass
  • 响应式: Yes
  • 模块化: Yes
  • 开始模板/布局: Yes
  • 图标设置: Foundation Icon
    Fonts
  • 附加/插件: yes
  • 独特的组件: Icon Bar, Clearing Lightbox, Flex Video, Keystrokes,
    Joyride, Pricing Tables
  • 文档: 良好,还有许多额外的资源是可用的。
  • 定制: 没有GUI编辑器,只能手工定制。
  • 浏览器支持: Chrome, Firefox, Safari, IE9+; iOS, Android,
    Windows Phone 7+
  • 许可证: MIT

对页面渲染的改进

因为我们直接将 SVG 注入
HTML(这也是我们选择这种方式更大的原因),所以不再会出现图标字体下载、缓存、渲染过程中出现的样式闪动。

图片 6页面闪动

3) Impress.js

图片 7

另一款有效的框架是Impress.js。这是一款神奇的框架,幻灯片排列在3
d空间,同时定义在“div”元素中,并通过足够的数据属性控制x,y,z的位置和旋转。通过使用它,您可以很容易地设计一些流畅的,惊人的,新颖的幻灯片。

Notes on Foundation

Foundation 是一个提供业务支持、培训和咨询真正专业的框架。它还提供了很多资源帮助你更快和更容易学习和使用框架。

可访问性

就像在《图标字体已死》一文中所述,有些用户会覆盖掉
GitHub
的字体。对于患有读写障碍的用户,某些特定字体是更加容易阅读的。对于修改字体的用户来说,我们基于字体的图标就被渲染成了空白方框。这搞乱了
GitHub 页面布局,而且也不提供任何信息。而不管字体覆盖与否,SVG
都可以正常显示。对于读屏器用户来说,SVG
能让我们选择是读出 alt 属性还是直接完全跳过。

4) Deck.js

图片 8

如果你想要一款可靠的框架来创建出色的web演示。deck.js可以满足您的需求。这是一款最古老的HTML5幻灯片之一,具有惊人和有效的功能来显示你的幻灯片。它的API文档对创建用户自定义的扩展起到很大的帮助。

3. Semantic UI

Semantic
UI 经过多年的努力,致力于能够以更语义化的方式构建网站。它使用自然语言的原则,使代码更可读,更容易理解。

图片 9

  • 创建者: Jack Lukic
  • 发布:2013
  • 当前版本:1.2.0
  • 人气: 在Github上有12,900+ stars
  • 描述: “基于自然语言有效原则的UI组件框架”
  • 核心概念/原则: 语义,标签的矛盾性、响应式
  • 框架大小: 552KB
  • 预处理器: Less
  • 响应式: Yes
  • 模块化: Yes
  • 开始模板/布局: No
  • 图标设置: Font Awesome
  • 附加/插件: yes
  • 独特的组件: Divider, Flag, Rail, Reveal, Step, Advertisement,
    Card, Feed, Item, Statistic, Dimmer, Rating, Shape.
  • 文档: 非常好。Semantic提供了一个很好的组织文档,还有一个提供入门指南,定制和创建主题单独的网站,。
  • 定制: 没有GUI定制器,只能手工定制。
  • 浏览器支持:Firefox, Chrome, Safari, IE10+ (IE9 with browser
    prefix only), Android 4, Blackberry 10
  • 许可证: MIT

发表评论

电子邮件地址不会被公开。 必填项已用*标注