在 Firefox OS 上创建具有原生外观的 UI 的推荐方法是什么？答案

【问题标题】：What's the recommended way to create a native-looking UI on Firefox OS?在 Firefox OS 上创建具有原生外观的 UI 的推荐方法是什么？
【发布时间】：2013-12-11 00:07:27
【问题描述】：

我知道在 Firefox OS 中每个应用程序都是一个网络应用程序，但我想在我自己的应用程序中创建一个“原生”外观和感觉，这意味着我希望它“适合”内置应用程序样式。

Mozilla 甚至为此提供了风格指南：
http://www.mozilla.org/en-US/styleguide/products/firefox-os/

是否可以在我的应用程序中包含样式表和/或 JavaScript，以创建看起来像样式指南中的控件和 UI 元素？

（我可以在那个网站上找到的唯一下载是一个包含所有设计的 PSD，但我正在寻找可以使用的东西。）

【问题讨论】：

也许这会让你感兴趣 - github.com/mozilla-b2g/gaia/tree/master/apps
同上我注意到应用程序的复选框太小而无法检测到我的胖手指

标签： javascript html css user-interface firefox-os

【解决方案1】：

您有一些 UI 指南的良好链接，但您可以查看我们称之为 Building Blocks 的内容，甚至可以在 GitHub 上获取这些内容。另一种方法是查看我们在GAIA 中所做的事情，但在任何情况下，都不仅仅是导入 CSS 文件。

【讨论】：

如果你查看我发布的链接，你会看到一些东西：在构建块上，你可以复制/粘贴 HTML 作为 CSS 来复制我们在 Firefox OS 应用程序中使用的一些元素。如果您想了解更多关于 GAIA 应用程序（基于 HTML5 的 Boot 2 Gecko 手机 UI - Firefox OS），因为它是 HTML 格式，您可以查看我们如何制作 UI。
谢谢 Fred，看来 building blocks 是我需要的 :) 一条评论：滑块组件不起作用（至少在 Firefox 25 中我可以' t拖动它）

【解决方案2】：

除了Building Blocks，还有基于X-Tags的Mozilla Brick，包含在Mozilla Appmaker中。

【讨论】：

【解决方案3】：

从 https://github.com/buildingfirefoxos/Building-Blocks.git 克隆 BuildingBlocks

如果您更喜欢 Bower 的管理器库，请使用 bower install building-blocks。

如果您希望您的 web 应用程序可以在其他浏览器上运行，请包含 cross_browser.css。

例如，确保检查index.html。 Building Block 组件仅由 CSS 编写，位于 style 和 style_unstable 文件夹中。

如果您想要更多代码示例，请安装带有示例和源代码的 Firefox 浏览器 https://marketplace.firefox.com/app/ui-demos 的 UI Demos。

用法在我的博文中更新 http://blog.gasolin.idv.tw/2013/09/reuse-gaia-ui-elements-with-building.html

【讨论】：

这和 Fred 在他的回答中所说的一样。