Primer Design System par GitHub

[remillc]

https://primer.style

Primer est le Design System derrière le site Github.

Le framework est disponible en open source.

[msevigny]

Intéressant. J'ai regardé rapidement, je vois du codes / des exemples React, rails... Je suis confus dans tout cela, mais je pense que mes réponses sont ici: https://primer.style/guides/react . Si on utilisait ce design system et ce framework dans un front-end React, on suivrait ce guide (en gros). C'est ça?

[remillc-udem]

Oui, en fait je décrirais le site comme suit, en se basant sur le menu de gauche:

Lignes directrices, principes

• Foundations
• UI patterns
• Guides > Accessibility

Description de composants

• Components
• GitHub staff
• Depricated components

Implémentations

• Guides > Figma
• Guides > Rails
• Guides > React

Remarques

Ils ne semblent pas avoir une implémentation "universelle" qu'on pourrait utiliser en dehors des environnements technologiques Rails ou React. Peut-être y a-t-il une solution avec l'implémentation Rails?

Il y a une belle liste éprouvée de components qui couvre les besoins d'un tel site. Le nôtre est d'avantage orienté information que codage, mais on pourrais y trouver une belle source d'inspiration.

[emirgc]

c'est l'avantage d'avoir un système de design qui se construit au fur et à mesure et avant même l'intégration, sachant qu'un système est agnostique par rapport aux technologies.

Quelques sources d'inspiration :

• https://design-system.lib.umich.edu/ - Le système de design de la bibliothèque de l'Université de Michigan
• https://design.quebec.ca/a-propos
• https://conception.canada.ca/
• https://design.st-andrews.ac.uk/
• https://folwell.umn.edu/

et les plus connus :

• https://atlassian.design/

• https://carbondesignsystem.com/

• https://design-system.service.gov.uk/

• https://m3.material.io/foundations

• Article intéressant : https://journal.code4lib.org/articles/15639

La bonne nouvelle, c'est que la plupart des principes en lien avec le contenu sont déjà là sur Mentor (accessibilité, inclusivité, la voix et le ton d'écriture, etc.). Il y a un travail d'adaptation pour s'aligner avec la nouvelle image de marque.

Ça pourrait être un point de départ intéressant.

[remillc-udem]

Une observation en passant: le system design du gouvernement du Québec utilise Svlete comme framework pour leurs composants. Une chose intéressante que j'apprends, c'est qu'on peut compiler un composant Svelte en un Custom element. Ça rend le composant indépendant et réutilisable dans d'autres frameworks comme React, Vue et Angular. Ça ouvre les perspectivess.

[NataliaJabinschi]

Dans le choix d'une bibliothèque de styles pour le frontend, je recommande de ne pas négliger Bootstrap, un incontournable dans le domaine. Bootstrap offre une diversité impressionnante de styles pour différents composants du site, apportant une touche significative à l'esthétique globale. Sa personnalisation facile permet d'ajuster les styles selon les besoins du projet, le tout soutenu par une documentation bien mise en place: https://getbootstrap.com/docs/4.6/getting-started/introduction/
Bootstrap est constamment actualisé grâce à une communauté active, assurant ainsi une adaptation continue aux dernières tendances. L'avantage majeur réside dans son intégration fluide avec de nombreux frameworks tels que Angular, React, ou autre.
De plus, l'abondance de magnifiques maquettes HTML modernes en open source disponibles sur différents plateformes comme Bootstrap Themes.
En parlant de style moderne, j'apprécie également Material Design. Son intégration native avec Angular et son adaptabilité à React en font un choix judicieux.