Create a style guide or pattern library for OFN styles about inception-pipe HOT 8 CLOSED

Hi there !
StyleGuide is done: openfoodfoundation/openfoodnetwork#7284 ! 🎉
Now we need to choose between two CSS framework, that's why I created two issues, to test them:
openfoodfoundation/openfoodnetwork#7500
openfoodfoundation/openfoodnetwork#7501

from inception-pipe.

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, ...)

from inception-pipe.

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.

from inception-pipe.

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.

from inception-pipe.

There's also a growing style component guide in Figma: https://www.figma.com/file/A1RDmHC9dMxhjF7JTtiMuB/Components-library?node-id=0%3A1

from inception-pipe.

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.

from inception-pipe.

I'm sensing a very large amount of excitement about implementing a styleguide. Couple of questions:

• We'll just be adding the new components to the styleguide as we create them, right? Not creating a catalogue of all the existing UI elements?
• The one that's been proposed is StoryBook, which works directly with ViewComponents code?
• It would probably make more sense to implement this after the first round of Product Uplift has actually been finished, right? We won't actually have any components until then, and the ones we do create might not be very stable at the beginning (eg they'll be changing regularly)?

from inception-pipe.

Hi @Matt-Yorkley ,
Here's my answers, according to what I understand, and what I'm expecting:

• Yes, adding only new component as we create is, to me, a good way to start around StyleGuide. Maybe later, we could add components to StyleGuide if we have to modified it. And maybe even later, we could do some effort to add each component we use. But let's start with the lean way: adding only new components.
• As I understood, StoryBook can be use into a rails app if we use https://github.com/github/view_component to create component (which seems to be, without talking about any StyleGuide, a good idea), and if we install https://github.com/jonspalmer/view_component_storybook which is basically a proxy to run storybook inside a Rails app. You can see some of my thoughts inside this document : https://docs.google.com/document/d/1YFQLm0WyfJp1WkHUqr-uhlUtOo5PD8inPzaVkGZ69iA/edit
• The main idea was to take advantage of having a new interface to design/develop (with new components) and setting up a StyleGuide as for many reasons we suspect to be a good idea. Not sure to understand your point: what do you mean by first round? For example, @jaycmb created the first issue for the first component we could have in our StyleGuide (needs to implements the surrounding structure first) : openfoodfoundation/openfoodnetwork#7199.

from inception-pipe.