Closed jaycmb closed 2 years ago
I started this work when i first joined by starting a document for 'Interface inventory' https://docs.google.com/presentation/d/1wkM5XUaHpLq-rB4HQ14-IDO__26PFpLiVMmjXhqLaY0/edit?usp=sharing
here's the folder with the up to date screen grabs: https://drive.google.com/drive/folders/18gcoAUyhP_nTQ_VNQZINtVvGcQ2HplJR?usp=sharing
the idea of this exercise being done before a pattern/CSS library is to detail the inconsistencies in the UI.
Cool! I think having that screen grabs in a structured way would be a good start for a "directory" of which styles are currently used and where.
There's also a growing style component guide in Figma: https://www.figma.com/file/A1RDmHC9dMxhjF7JTtiMuB/Components-library?node-id=0%3A1
I also have access to some work that Yuko did in 2018 on this here: https://zpl.io/2GXg6g9
I believe one of the problems is that there is not an 'open' single source of truth for the visual style guide of OFN. My frame of reference is from Ushahidi's Pattern Library docs here
I'd be curious to hear what @jibees thinks about how to build a style guide that is open.
Hi. (sorry, I'm late, I didn't see this notification) I totally agree on building such a styleguide: as you mentioned I think it's very relevant and useless to have on single source of truth, both for developers and designers (but maybe for product manager too). Having it on Figma, or maybe elsewhere could be a good first step but is, to my opinion, not enough. To trust such a styleguide and avoid inconsistencies, this is important that the styleguide use the same code as our app. Also having a styleguide makes sense in a components world, to be sure having consistents and customized components, and not reinventing the wheel each times. To conclude, I truly recommend to implements a styleguide inside or beside our application, but using the same code (css, layout, ...)
I'm sensing a very large amount of excitement about implementing a styleguide. Couple of questions:
Hi @Matt-Yorkley , Here's my answers, according to what I understand, and what I'm expecting:
Hi there ! StyleGuide is done: https://github.com/openfoodfoundation/openfoodnetwork/pull/7284 ! 🎉 Now we need to choose between two CSS framework, that's why I created two issues, to test them: https://github.com/openfoodfoundation/openfoodnetwork/issues/7500 https://github.com/openfoodfoundation/openfoodnetwork/issues/7501
Problem Description
Currently there is no OFN CSS library or style guide where all UI styles are documented in one place. This leads to inconsistencies of styles across the product (both shopfront & admin), that are confusing to shoppers and admin users.
Solution
A library that includes all styles in use across different elements
This will help