@grid-legends/design-system

Système de design CSS de Grid Legends. Plugin installable en tant que dépendance npm via GitLab.

FR — Prérequis : clé SSH GitLab

Pour installer le package sans mot de passe, tu dois avoir une clé SSH liée à ton compte GitLab.

# 1. Générer une clé (si tu n'en as pas)
ssh-keygen -t ed25519 -C "[email protected]"

# 2. Copier la clé publique
cat ~/.ssh/id_ed25519.pub

# 3. Vérifier la connexion
ssh -T [email protected]

Colle le résultat du step 2 dans GitLab → Préférences → Clés SSH.

FR — Installation & utilisation

1. Ajouter la dépendance

Dans le package.json de ton projet principal :

{
  "dependencies": {
    "@grid-legends/design-system": "git+ssh://[email protected]/grid-legends/front/design-system.git#main"
  }
}

Pour épingler une version précise, utilise un tag Git :

"@grid-legends/design-system": "git+ssh://[email protected]/grid-legends/front/design-system.git#v1.0.0"

2. Installer

npm install

3. Importer dans ton CSS

Usage standard — plugin uniquement (recommandé) :

@import '@grid-legends/design-system';

Usage complet — avec les styles de la page showcase :

@import '@grid-legends/design-system/full';

Import à la carte :

@import '@grid-legends/design-system/css/tokens/_tokens.css';
@import '@grid-legends/design-system/css/atoms/_button.css';
@import '@grid-legends/design-system/css/molecules/_card.css';
/* etc. */

Structure des fichiers

css/
├── plugin.css              ← point d'entrée recommandé (sans showcase)
├── main.css                ← tout inclus
├── tokens/_tokens.css      ← variables CSS (:root)
├── base/                   ← reset, animations
├── layout/                 ← nav, container, hero
├── atoms/                  ← button, badge, input, alert, tab
├── molecules/              ← card, stat-bar
├── ds/                     ← showcase uniquement (ne pas importer en prod)
└── utilities/              ← responsive

Développement local (symlink)

# Dans ce repo
npm link

# Dans ton projet principal
npm link @grid-legends/design-system

EN — Prerequisites: GitLab SSH key

To install the package without a password prompt, you need an SSH key linked to your GitLab account.

# 1. Generate a key (if you don't have one)
ssh-keygen -t ed25519 -C "[email protected]"

# 2. Copy the public key
cat ~/.ssh/id_ed25519.pub

# 3. Test the connection
ssh -T [email protected]

Paste the step 2 output into GitLab → Preferences → SSH Keys.

EN — Installation & usage

1. Add the dependency

In your main project's package.json:

{
  "dependencies": {
    "@grid-legends/design-system": "git+ssh://[email protected]/grid-legends/front/design-system.git#main"
  }
}

To pin a specific version, use a Git tag:

"@grid-legends/design-system": "git+ssh://[email protected]/grid-legends/front/design-system.git#v1.0.0"

2. Install

npm install

3. Import in your CSS

Standard usage — plugin only (recommended):

@import '@grid-legends/design-system';

Full — includes design system showcase styles:

@import '@grid-legends/design-system/full';

Cherry-pick imports:

@import '@grid-legends/design-system/css/tokens/_tokens.css';
@import '@grid-legends/design-system/css/atoms/_button.css';
@import '@grid-legends/design-system/css/molecules/_card.css';
/* etc. */

File structure

css/
├── plugin.css              ← recommended entry point (no showcase)
├── main.css                ← everything included
├── tokens/_tokens.css      ← CSS custom properties (:root)
├── base/                   ← reset, animations
├── layout/                 ← nav, container, hero
├── atoms/                  ← button, badge, input, alert, tab
├── molecules/              ← card, stat-bar
├── ds/                     ← showcase only (do not import in prod)
└── utilities/              ← responsive

Local development (symlink)

# In this repo
npm link

# In your main project
npm link @grid-legends/design-system

Versioning

git tag v1.0.0
git push --tags