Каков рекомендуемый способ создания родного пользовательского интерфейса в ОС Firefox?

Я понимаю, что в Firefox OS каждое приложение является веб-приложением, но я хотел бы создать «родной» внешний вид в своем собственном приложении, что означает, что я хочу, чтобы оно «соответствовало» встроенным стилям приложения.

У Mozilla даже есть руководство по стилю для этого:
http://www.mozilla.org/en-US/styleguide/products/firefox-os/

Есть ли таблица стилей и/или код JavaScript, которые я могу включить в свое приложение, чтобы создать элементы управления и элементы пользовательского интерфейса, похожие на те, что указаны в руководстве по стилю?

(Единственной загрузкой, которую я смог найти на этом сайте, был PSD, содержащий все дизайны, но я ищу что-то готовое к использованию.)


javascript user-interface html css firefox-os
person Venemo    schedule 11.12.2013    source источник
comment
Возможно, это вас заинтересует — github.com/mozilla-b2g/gaia/tree/ мастер/приложения   -  person levi    schedule 11.12.2013
comment
Я также заметил приложения с флажками, которые слишком малы, чтобы обнаружить мои толстые пальцы.   -  person Adrian Garner    schedule 12.12.2013

Ответы (3)


arrow_upward
3
arrow_downward

У вас есть хорошая ссылка на некоторые рекомендации по пользовательскому интерфейсу, но вы можете проверить то, что мы называем строительными блоками, или даже получить их на GitHub. Другой способ — посмотреть, что мы сделали в GAIA, но в любых ситуациях речь идет не только об импорте CSS-файл.

person fharper    schedule 11.12.2013
comment
Если вы проверите ссылки, которые я разместил, вы увидите пару вещей: в строительных блоках вы можете копировать/вставлять HTML как CSS, чтобы воспроизвести некоторые элементы, которые мы использовали в приложениях Firefox OS. Если вы хотите узнать больше о том, как приложение GAIA (пользовательский интерфейс телефона на основе HTML5 для Boot 2 Gecko — Firefox OS), поскольку оно в HTML, вы можете увидеть, как мы сделали пользовательский интерфейс. - person fharper; 11.12.2013
comment
Спасибо, Фред, кажется, строительные блоки — это то, что мне нужно :) Один комментарий: компонент слайдера не работает (по крайней мере, в Firefox 25 я не могу его перетаскивать) - person Venemo; 11.12.2013

arrow_upward
2
arrow_downward

Помимо стандартных блоков, существует также Mozilla Brick на основе X-тегов, включенных в Мастер приложений Mozilla.

person Community    schedule 10.08.2014

arrow_upward
0
arrow_downward

клонировать BuildingBlocks из https://github.com/buildingfirefoxos/Building-Blocks.git

Или сделайте bower install building-blocks, если вы предпочитаете библиотеки менеджеров от Bower.

Включите cross_browser.css, если хотите, чтобы ваше веб-приложение могло работать в других браузерах.

Обязательно проверьте, например, index.html. Компоненты Building Block написаны только с помощью CSS и расположены в папках style и style_unstable.

Если вам нужны дополнительные примеры кода, установите демонстрационные версии пользовательского интерфейса в браузере Firefox https://marketplace.firefox.com/app/ui-demos, который поставляется с образцом и исходным кодом.

Использование обновлено в моем сообщении в блоге http://blog.gasolin.idv.tw/2013/09/reuse-gaia-ui-elements-with-building.html

person gasolin    schedule 03.01.2014
comment
Это то же самое, что сказал Фред в своем ответе. - person Venemo; 03.01.2014