Styleguide

[newick]

To stay consistent with the design we need to have a ressource somewhere to find the good code, the good colors, etc.

A solution is a styleguide (examples: http://styleguides.io/) also named pattern librairy.

My first idea is to create all the code we need there before adding it to the templates.
I like the atomic idea which is used on pattern lab.
All basics styles are atoms, a mix of atoms is a molecule, many molecules make a component, components create a template.

We spoke about it with @vinyll and thought about doing it with CSS vars helped with post processor like PostCSS

We'd like to have different CSS files only called if the component exists in the page.
There would be a common one for the layout, header, footer in every page and in particular page some particular styles (includes exist in Sass, what about PostCSS?)

It could be where we explain how we express ourself in the content ('your' or 'my' in menu for example)

Let's discuss that :)

[fuentesloic]

my only comment about that: warm potetoessss (chaud patate!!) 🥇

I like the idea about atom -> molecule -> component -> template

Sure I agree with calling CSS only if it's needed, atom after atom

@newick Could you detail the steps to do ? because I understand the way and the finality but I lost in my mind about "how" ...

[newick]

@fuentesloic Is it ok for you to start from the styleguide and then apply on the website?

I can start to do a bit of tree view, test it and we'll see then to fill it with existing components.

Another question is: do we put styleguide in website repo or in an dedicated one?
If it's another repo we'll have to create a rule to deploy styles from styleguide to website. I like this idea, like this no CSS is created in website, only in styleguide.
@vinyll any opinion?

[fuentesloic]

@newick, Yep totally, and I agree with you to put all the css in a dedicated one.

[newick]

at the end i'd like somethink as detailed as https://github.com/pattern-lab/starterkit-mustache-basic/blob/4add38e3289537d6fa3d0a57a5a9cabbd09639c1/dist/css/style.css

[vinyll]

+1 to have a dedicated repo for a styleguide.
I'm not sure how it works to require importing styles from a repo to another. Is it just a file to copy from one repo to another? If so, we could create a task make import-styleguide or something that would do the job.

[vinyll]

@newick: I believe we've had this prepared for a while now: https://github.com/neomad-team/styleguide and https://neomad-team.github.io/styleguide/

[newick]

@vinyll yep that's a basis, let's improve it :)