firefoxux/photon

Firefox’s Photon Design System.

Photon Design System

This project is no longer maintained or worked on. More to come soon on our next design system documentation website.

Running Photon

Requires:

• docker

To run (with hot-reloading!):

• First, check out this repository into a folder.
• Go to your command line, enter that folder, and run the following commands:

docker pull praqma/gh-pages
docker run --name photon -d -v $PWD/jekyll:/home/jenkins -p 4000:4000 praqma/gh-pages || docker start photon
docker exec -it photon jekyll serve --watch --host=0.0.0.0

• Open up http://localhost:4000/photon/

Once you have something you like, it's time to share it with the rest of us!

To get your changes merged:

• Make sure you're working on master, and submit the pull request to there.
• Make your pull request as small as possible (so it's easier to review and merge them).
• If it's something that needs to be merged as soon as possible, add a tag (e.g. urgent).

photon's Issues

Use https :-)

https://design.firefox.com gives an invalid security certificate error (it's using the github cert) ;_;

Sync camera icon is missing from icon set

Camera icon can be seen when uploading a new display pic.

@ryanfeeley Can you provide the correct asset?

Add oranges to design system

Would be great to get the orange colors from design-tokens added to the DS website 🍊

Redundant links on Resources page

Under every font in the Typography section you have the text "Learn more about it in the typography page." under every font.

Suggestion: Just use that string once under the header.

All downloads should be available under the Resources section

Right now I can download some assets from the Resources section, but also from the Typography section. Maybe all the downloads should be under Resources and there could be a link to it from the Typography page. Or the content could be duplicated on to both.

Add BiDi/RTL guidelines

We should include some basic guidelines for bidirectional UI.

We can use some prior work like:

• Firefox OS: https://mozilla.app.box.com/s/bcm3s5i2v6js5uk0ws3tsywse8bgncgo
• Firefox for iOS: https://bug1160759.bmoattachments.org/attachment.cgi?id=8738225
• Focus: mozilla-mobile/focus-android#31
• Fennec: https://mana.mozilla.org/wiki/display/PM/RTL+Support+on+Fennec
• https://material.io/guidelines/usability/bidirectionality.html#
• http://unicode.org/reports/tr9/
• https://developer.apple.com/library/content/documentation/MacOSX/Conceptual/BPInternational/SupportingRight-To-LeftLanguages/SupportingRight-To-LeftLanguages.html
• https://msdn.microsoft.com/en-us/globalization/mt662340.aspx
• https://www.w3.org/International/questions/qa-html-dir

Clicking on section "Color" on iOS did not show colors

Eric reported that for him, using the menu on mobile to navigate to Colors, did not get him there.

not able to link to a second headline with the same text

On pages with the same headline in different sections, it is only possible to link to the first instance of that headline.
see https://firefoxux.github.io/photon/copy/copy-rules.html#sentence-case
(where I can only link to sentence case in the section about desktop, not to sentence case in the section about android)

Document Photon Components

Right now, the only place where there is sufficient documentation on the Panel UI and other UI components is on the out of date Australis Style Guide.

To resolve this, it is necessary to add sufficient documentation on all the Photon UI components to the Photon Design System documentation.

Word List: move to lowercase 'web' and 'internet'

Pending words description and feedback from copy team regarding all 'web' related words ('Web page', 'Web feed', ...).

Examples Section

Could we display a curated sample of products implementing this design system?

Feedback component broken on mobile

thanks @brassy- for reporting it

fix repetition of motion principles on the motion page

The motion page states the 3 principles defining motion 3 times in a row. Twice in a sentence, and a third time as headlines.
https://firefoxux.github.io/photon/motion/motion.html

Icons not loading on the front page

When I mouse over a section on the front page like "launch faster" I get a broken image icon. Inspecting with the dev tools shows that the svg is not loaded.

Document standard CSS font-family for websites

The docs currently suggest using Fira Sans for websites. It would be great to suggest a CSS font family to use as fallbacks:

'Fira Sans', -apple-system, BlinkMacSystemFont, 'segoe ui', 'helvetica neue', helvetica, ubuntu, roboto, noto, arial, sans-serif

refs mozilla-services/screenshots#3266

Improve tables layout on mobile

On a small screen (~320px) sometimes tables content collapse on multiple lines. Think about a possible solution to keep the layout clean.

share header link icon borken on intro page

Icon does not show up on intro page header...

Include README.md (or parts of it) from Icon repo ? in "Export your icon" section

This file, that Helen previously wrote contains some useful information, notably how everything should be aligned on the pixel grid to avoid blurriness.

Some parts could be reinstated in https://bwinton.github.io/DesignSystem/iconography.html#export-your-icon

Improve interaction of main navigation aka sidebar

@tinahsieh has been working on a new interaction proposal for the design system navigation. can anyone help us on the javascript/animation side? for the time being we need only the interaction implemented, the style is currently under discussion and, if it's not too difficult, I can take care for it later on.

Downloadable colour palettes

I would find it pretty useful if I could download the colour pallettes and import them into Sketch and/or Photoshop.

Update green palette based on new spec

Would be great to be able to link to icon assets

Right now you can link to the entire page with the icons on it but I can't link to a specific one for sharing with my team. Is there a way to directly link to the view with the sidebar for the correct icon?

Titles in homepage do not show blue highlight when link icon is clicked

The headings just in the homepage do not show the blue highlight when the link icon is clicked. If I reload the page with an hash appended to the url the blue highlight is visible.

Wrong color code listed for one of the grays in dark theme

Under Dark Theme, Grey 70 is listed as #4a4a4f. However, in the Gray color section #4a4a4f is Gray 60.

Make a package available on npm that includes the styles and relevant assets etc.

Would be really nice if at some point when this stabilizes if we could import a package from npm that would give us a versioned set of styles (fonts assets etc) that we could pull into our site css.

This way we can our site easily up to date with everything that's available here.

Google Analytics might be way off

With probably most of us at Firefox using some sort of AdBlocker or Tracking Protection our analytics might be way off and therefore useless to us.
Let's do our own session count to get an idea of the difference and to see if it is actually a problem.

Rebuild and reload after html include change

Currently the only way to see recently made changes to an html include is via stopping and rerunning the process

Change https://firefoxux.github.io/ to http://design.firefox.com/

(And while you're at it, change firefox-icons to icons in the urls. 😉)

Content search

Many docs website use this one https://www.algolia.com/. Or as @bwinton suggested https://cse.google.com/cse/ instead? Or better yet, https://duckduckgo.com/search_box 😉!

Incorrect title case for New tab

Typo in this graphic. Page titles should be in the title case as described in the text.
http://design.firefox.com/photon/images/copy/page-titles-do.svg

Firefox Design Values

Is there any place for the FDV? Or is that out-of-date now?

https://people-mozilla.org/~madhava/FDV/

no title case in copy rule example on page title

The visual showing how to do title case on a page title, does not show the title in title case.
Current Text: New tab
Expected Text: New Tab

see https://firefoxux.github.io/photon/copy/copy-rules.html#page-titles

(https://screenshots.firefox.com/CXpVvzuwpyhMPwfa/design.firefox.com)

Better i.a. for generic pages

How can we better manage those 4 generic/intro pages?

- Welcome
- Getting started
- Principles
- Design for scale

Current version:

- Welcome (hidden under the firefox ds logo)
- Firefox Design System
  - Getting started
  - Principles
  - Design for scale

[Website Design] No graceful fallback when browser lacks JavaScript support

design.firefox.com/photon website does not provide graceful fallback when viewed with a browser lacking JavaScript support, or when using NoScript and not allowing scripting from firefox.com. Other portions of the website, such as Values and Firefox Icons, also have some missing content when client-side JavaScript is not available, but this issue is specifically about the Photon Design System due to the egregious nature of the lacking fallback.

Specifically, none of the site's information is viewable. Link is a screenshot of how the site is rendered by Firefox 55 under these conditions:
https://i.imgur.com/guGJe4h.png

This is someone opposed to Mozilla's aim for a free, open, compatible web.

Expected behavior:

• Content should still be viewable, even in a raw form.
• Message, otherwise hidden by JavaScript, stating something to the effect of, "This website looks better with JavaScript enabled. Our unobscurated scripts are available in our GitHub for your viewing pleasure."

I'd offer patches, but due to my lack of Javascript knowledge and current Meatspace Life issues, I fear such would be more of a hindrance than a help at this time.

reference relevant hardware info like OS and screen size

Help people know what hardware they most likely design for by providing information like:
popular display resolution: https://hardware.metrics.mozilla.com/#detail-display-resolution
popular operating system: https://hardware.metrics.mozilla.com/#goto-os-and-architecture
maybe there is something similar for other platforms too.

Could be added to design for scale, or it could have it's own section.

[icons] The different icon states are not very clear

http://design.firefox.com/photon/visual/icons.html#state

The document indicates 3 icon states (active, hover, inactive). Is inactive the default state ? If so, Why would the default state be 25% opacity?

Color uses singular in the menu, and plural in the page title

We should use the same in both places. Preferably singular.

"Iconography" is a much broader subject than just "icons", that happens to also cover "Illustrations".

Incorrect links on Resources page

Under Icons, the link "icon grid" goes to a 404 page.
Under Typefaces, the links to the Typography page all go to the Welcome page.

Indicate anchors to allow linking directly to them

For people to be able to link to sections of a page, they should be made aware of the anchors that exist, and be able to get the URL to directly link to them.
Additionally we should highlight an anchor that is active for people to know that this is being linked to.
Smashing Mag is a good example of both those aspects:

(see Smashing Magazin - link to an anchor in an article)

A List Apart provides similar functionality, but seams a bit too technical with it:

Typo in Photon Design System word list: "webmaster - One word, lowercas."

http://design.firefox.com/photon/copy/word-list.html#webmaster

"lowercase" is missing an "e".

Expected to be able to close the menu on mobile

Michael Verdi reported that he was surprised that he couldn't close the menu on mobile to go back to where he was.

Overlapping elements on the bottom of the sidebar

Hi,

if the window's height gets to small, the bottom 3 elements gets pushed over the other sidebar-elements.
Here is a demo.

Style the photon design system website with the photon design system

Yo dawg

Search icon on different platforms use different directions

As showing above, the search icon on macOS is tilting toward the left, while on Windows and Linux is tilting toward the right. It will be great if we can make it explicit on the Firefox icons website.

Add GA production view

@ericawright we are now accessible at design.firefox.com/photon

Typo on introduction page

Based on @johngruen suggestion, under 'For Developers' chapter change 'Consolidate' to 'Consult'.

Idea: One large font package

Right now I can download 5 different fonts from the Typography section. If I was setting up a computer as a designer, I'd probably want all of them. Maybe it would be convenient to also provide one zip with all the fonts so I don't have to download/decompress/install 5 separate times.

Development documentation

I am currently working on a wiki page for content creators and editors. It gives instructions on how to use the repository for creating and editing contents. I also created a how it works wiki page where we could document how the repository works, it would be mostly for developers. Would be nice to add contents also there 😄

SyntaxError: Unexpected token ... (webpack.config.js:70)

npm install && npm run build, I see the following error:

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]
npm WARN workshop@ No repository field.
npm WARN workshop@ No license field.

> workshop@ build PATH_TO_REPO/photon
> cross-env NODE_ENV=production webpack --optimize-minimize

PATH_TO_REPO/photon/webpack.config.js:70
  ...pagePlugins,
  ^^^

SyntaxError: Unexpected token ...
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:374:25)
    at Object.Module._extensions..js (module.js:417:10)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)
    at module.exports (PATH_TO_REPO/photon/node_modules/webpack/bin/convert-argv.js:80:13)
    at Object.<anonymous> (PATH_TO_REPO/photon/node_modules/webpack/bin/webpack.js:39:40)
    at Module._compile (module.js:410:26)

npm ERR! Linux 4.8.0-42-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "build"
npm ERR! node v4.2.6
npm ERR! npm  v3.5.2
npm ERR! code ELIFECYCLE
npm ERR! workshop@ build: `cross-env NODE_ENV=production webpack --optimize-minimize`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the workshop@ build script 'cross-env NODE_ENV=production webpack --optimize-minimize'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the workshop package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     cross-env NODE_ENV=production webpack --optimize-minimize
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs workshop
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls workshop
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     PATH_TO_REPO/photon/npm-debug.log

(I have replaced my repository path with PATH_TO_REPO)