search

FirefoxUX / photon

Firefox’s Photon Design System.
https://design.firefox.com/photon/
Mozilla Public License 2.0
273 stars 74 forks source link

How do you actually use this? #268

Closed purdy closed 6 years ago

purdy commented 6 years ago

I went through the site on a pretty fast skim, so I may have missed this, but when I'm writing a WebExtension popup, I'm interested in adhering to the Photon styles, but I don't see how to include those styles in my popup. How about an example?

Thanks!

aminalhazwani commented 6 years ago

Hey @purdy thanks for the feedback! We could probably add a resource for add-ons authors as well under our resources section.

@designakt there is an open bug for a minor update on extension.css (accessible via the browser_style flag). I am going to review the changes today during our weekly Photon meeting. After the update is shipped and deployed we could add it as a resource!

designakt commented 6 years ago

@purdy Currently we mostly have visual documentation, but no coded definition. As you suggesed, our intended next step is to provide examples of how to style an extension to look photony.

As next step I will see which UI elements are most poular with extensions, and @aminalhazwani will gather all photon css styles we have and create an example using those.

Based on this example we will evaluate how such Photon styling is best integrated in developers workflows. (maybe the css is enough, maybe we can integrate parts of it in Firefox)

aminalhazwani commented 6 years ago

Hey @purdy we kicked off the photon-extention-kit project (see PR/1). Feel free to adhere there for more information and feedback https://github.com/FirefoxUX/photon-extension-kit

purdy commented 6 years ago

Awesome! It'd be good to add a mock extension as an example, too. I'll post that feedback there, too.

Unfortunately, my add-on is dead atm because there's apparently no API to access the cache service. :(

Thanks!