Study group level tech stacks, habits and needs

[gael-boyenval]

I will put here the results of my first meetings with you guys. They are just first impressions and are absolutely not absolutes or definitive. Fill free to comment, correct me, or add something you feel that I've missed something.

[gael-boyenval]

Leroy merlin france

your version of the visual identity is up to date.

you have built the "socle commun" that is an internal design system.

It's a separated repo where goes all the common components and elements to help your teams build the website. The website is built using micro-applications that act as subparts of the website, and they are managed like independents websites.

The "socle commun" is built with the atomic design system naming conventions.

for now you estimate that the socle commun is very specific to your usage and that work is necessary to make it available to other BU.

you are generating docs and html patterns using comments in your css files.

you have a style guide that is built and managed through a wordpress website

you have a workflow, and a versioning system in place that you judge efficient.

need more infos :

• how are generated patterns
• what is precisely the workflow and versioning system
• waiting for an access to the wiki and code repos

tech stack

• vanilla js / html css + vue js ( starting )
• LESS / SCSS
• browserify as a build tool
• customized class naming conventions, using an atomic prefix, and modifiers.

Notes :

you seem quite advanced with the "socle commun". It is used in production, but not by all the feature-teams. It is still early enough for you to pivot to adapt the socle commun into a global design system It may be possible to use what was created as a base to the global DS, as long as it can adapt to other BUs.

Strong needs :

you are open to feedbacks regarding your atomic design system implementation, as well as the CSS naming conventions. I think that your strongest need is a good style guide tool, and an advanced tooling to display, enrich and deploy the style guide.

[gael-boyenval]

Leroy merlin Brasil

You have a mature css framework called garden that you have been using and developing since 2015.

The visual identity that you are using is not the most up to date, and migrating to a global design system would help you to keep the global identity in sync with the other BUs

One part of your actual website is a legacy website and the other I using Garden.

tech stack

• vanilla js with babel / html css ( + react in few parts of the website )
• Post-CSS with CSS-next
• OOCSS class naming convention

your stack reflect the desire to be future proof, and using mostly native technologies is a way to maintain this goal.

Notes :

The current style guide document css components, but there is few informations and guidelines regarding how, why, when to use them or not use them. There is no elements regrading accessibility, SEO, user experience or semantic, and the HTML exemples patterns demonstrate the visual result, but maybe not a full and complete reusable component. There is only low levels components that could be common to many websites, but no brands / LM specific higher level components. it's more a well documented CSS framework than a design system at this point.

need more infos :

• on the design side, what is the workflow, how do you manage your patterns ?
• is and how the actual design system used by designers

Strong needs:

• being able to import the patterns without altering the existing legacy code.
• have a modular and progressive way of migrating to the new design system.
• a good way to keep up easily with the global LM visual identity

[gael-boyenval]

Leroy Merlin Italy

you are migrating from an angular application to a react app. your migration being just started, you are quite free to use any provided éléments as long as they play well with your stack. You want to be closer to the french visual identity and website look and feel

tech stack

• react / pure css (using css modules)

Strong needs :

• You want (I presume) quickly available elements to help your migration process

[gael-boyenval]

OPUS

You are building a tool, (for witch I didn't get the exact purpose ;) ) from scratch with Angular 7. For now there is not any line of code.

The design is done and does not follow the LM visual identity

tech stack

• Angular 7
• SCSS

strong needs

• you need more a CSS library than a branding design system
• you need to be able to override the graphical elements to match your own.
• you will be mostly in need of applicative and utility patterns such as grids, forms elements, notifications/messaging systems etc..