firefoxux / styleguide Goto Github PK
View Code? Open in Web Editor NEWINACTIVE - http://mzl.la/ghe-archive - A style guide for Firefox.
License: Mozilla Public License 2.0
INACTIVE - http://mzl.la/ghe-archive - A style guide for Firefox.
License: Mozilla Public License 2.0
(read the following in Seinfeld voice)
what's the deal with a static dir sitting in the repo?
STEPS TO REPRODUCE
EXPECTED RESULTS
ACTUAL RESULTS
Hey @bwinton here are some changes we'll need for the menu, let me know if you have any questions. Once these are done I'll take another look :). Thanks!
... we don't have 'em! Is this spec'd out somewhere other than the Sketch files @shorlander?
Need some inspiring and engaging copy for the Home, Visual Design, Components and Resources pages.
At line numbers 69, 70, and 71 over here -> https://github.com/FirefoxUX/StyleGuide/blob/master/contents/colours.html#L69 - they are all #2284e6. Is this intentional?
Apologies if this isn't the right place to ask this.
For Selections:
For Progress States:
For Download:
How does the user know that they can copy the color, and how would the know that the color is now in their clipboard? And would they now it the color contains the # or not? Even if indication is only via the tooltip, giving feedback seams very important to me.
For examples on how such indication and feedback could work see bit.ly shortened link or dropbox & google drive link sharing.
The Mozilla Style Guide on mozilla.org used to include wordmarks for use with Firefox. Trying to access these wordmarks results in a redirect to "https://design.firefox.com/photon/visuals/product-identity-assets.html#using-icons-with-firefox-wordmarks-or-logos" which doesn't include wordmarks for Firefox (+ Quantum), Nightly, etc. Is the intent that recreating wordmarks is up to the individual?
Additionally "Product Identity Assets" is (opinion mine) needlessly complicated. Can we just have a subsection for "Logos and Wordmarks"?
Firefox Heartbeat uses a Heart symbol that is not in this list.
The "import export" icon under the Places section on this page is a little hard to read at a small size.
Reported by @sevaan here: FirefoxUX/icons#10
We use both on this page: https://firefoxux.github.io/StyleGuide/#/buttons
But we should probably settle on one.
We have them right now, but not sure if we still need them. Anyhow, it might be valuable to have specs for print stuff too.
Currently browsing...
(this is also a test issue to check if Trello integration is working)
I've recently started using browser_style
for my popups, mainly to try and see how the styles work. During that I have made a few observations and @bwinton asked me to post those here:
.panel-section-footer-button
in order for the styles to match. This of course moves the browser styles back into the extension, which is not optimal.<ul>
as .panel-section-list
may require clever resetting of styles. While I do not necessarily think that's something the browser_styles should take care of, it is weird to see all the panel examples just use <div>
s<section>
without classes when enabling browser_style
s in a popup, since it's specifically opt-in, but I can understand if you want to avoid that.That's all that comes to mind right now, I hope this is useful input. Generally I really like the idea of having native styles an extension can use to appear more integrated.
When you click on a style guide colour, it should automatically copy the hex value to the users clipboard (along with a little "Copied!" notification).
How do we integrate that site into the style guide? Link out? Build it as a sub-page in the site?
v1 of the site will not have search.
Is this something we can fit into v1?
Scour the style guide files and makes sure everything is represented on the style guide site.
Since we're killing Patterns.
As per conversation with Madhava.
Also, see about making the height of the iframe be the height of the content.
There is an arrow in the dropdown fields in the style guide, but this glyph is missing on the icons page.
All of the pages in the contents
directory should have reasonable text in them, describing the various pages, and including rationale where appropriate.
If you want to work on this, please leave a comment as to which file you're updating, so that we don't duplicate work! ๐
The link to the "Staging Site" at the top of the old Style Guide is dead and should probably redirect to the correct place.
We internally agreed that we are building a Design System and not a Style Guide. Can we rename the repository accordingly? We should also align on who we name the repository under Firefox UX. Sometimes we user camel case other times hyphens. Personally I prefer all lowercase with hyphens.
Please remove the top-level Patterns section. We do not have content for this yet.
Couple options:
All fields will have a "click to copy" button. If that's the case, do we need to expand to show all?
Working on it, need to move it past the first revision.
Michael and Markus were working on copy for this, I believe. I will make it look like something!
Many docs website use this one https://www.algolia.com/
https://www.mozilla.org/en-US/styleguide/
is old and outdated.
The current choice does not have enough contrast.
Are they:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.