Snippets VSCode

165 raccourcis clavier Emmet‑like spécifiques au Beely Framework, dont 121 pour le markup (106 HTML + 10 JS + 5 JS/HTML — page, sections, formulaires 14 types de champs, accordion/tabs/slider à comptage variable 2→6 items, popups 5 positions, animations configurables, interactions, composants) et 44 pour le CSS (tokens, scaffolding BEM, responsive, dark mode, personnalisation des composants, états interactifs, animations, utilities). Tout est livré directement avec le framework.

Sommaire

1. Principe
2. Conventions de tab stops
3. Installation
4. Utilisation
5. Liste complète des 165 snippets
   • Snippets HTML (121)
   • Snippets CSS (44)
6. Galerie d'exemples (40+ cas concrets)
7. Personnaliser ou ajouter un snippet

Principe

Comme Emmet permet de taper div.foo>p*3 et générer du HTML, les snippets Beely vous laissent taper bly-form, bly-accordion-5, bly-slider-auto, etc. + Tab pour insérer la structure complète. Tous les snippets sont préfixés par bly- pour les filtrer facilement dans VSCode.

Le fichier source est livré avec le framework dans .framework/.vscode/beely.code-snippets et symliké vers .vscode/beely.code-snippets à la racine du projet par setup.sh. Tout le monde clonant un projet Beely en bénéficie automatiquement.

Conventions de tab stops

Tous les snippets suivent les mêmes conventions pour que la prise en main soit immédiate :

Trois types de tab stops sont utilisés :

• $1 — vide, l'utilisateur tape librement
• ${1:défaut} — pré-rempli avec une valeur par défaut
• ${1|val1,val2,val3|} — menu déroulant avec choix limités

Variantes de comptage

Certains éléments existent en plusieurs variantes selon le nombre d'items souhaités :

Installation

Aucune installation manuelle nécessaire : le script setup.sh du template crée le symlink automatiquement.

Installation manuelle (projet existant)

Si vous avez un projet créé avant l'arrivée des snippets, lancez ces commandes à la racine de votre projet :

mkdir -p .vscode
ln -s ../.framework/.vscode/beely.code-snippets .vscode/beely.code-snippets

Redémarrez ensuite VSCode pour que les snippets soient pris en compte.

Vérification

Ouvrez n'importe quel fichier .html dans VSCode, tapez bly, et la liste de tous les snippets Beely doit apparaître dans l'autocomplétion.

Utilisation

1. Ouvrez un fichier HTML
2. Tapez le préfixe d'un snippet (ex : bly-form-steps-3)
3. Appuyez sur Tab ou Entrée pour l'insérer
4. Naviguez entre les champs avec Tab : classe BEM optionnelle d'abord, puis animation, puis contenu
5. Pour les menus déroulants (${...|...|}), utilise les flèches haut/bas et Entrée pour choisir

Astuce : tape juste bly- pour voir la liste complète des snippets disponibles dans l'autocomplétion VSCode.

Liste complète des 165 snippets

121 snippets markup pour la structure et les composants (106 HTML + 10 JS + 5 JS/HTML), 44 snippets CSS pour les tokens, BEM, responsive, états et utilities. Tous activables avec bly- + Tab.

Snippets HTML (121)

Page et structure (8)

Grilles (10)

Boutons et icônes (5)

Animations (9)

Formulaires (22)

Conteneurs et étapes :

Champs (14 types) :

Accordéon, tabs et slider (16)

Popups, modales et tooltips (7)

Interactions data-interact (12)

Composants (13)

Snippets JS — Créer un composant (components/*.js) :

Snippets HTML — Utiliser un composant dans une page :

Dark mode, cookies, content et blog (8)

Patterns composés (2)

Utilitaires JavaScript (7)

Snippets utilisables dans les fichiers JavaScript et HTML (balise <script>).

Snippets CSS (44)

Le framework expose autant de snippets pour les fichiers CSS que pour le HTML, avec la même philosophie : taper bly- dans un .css ouvre l'autocomplétion exhaustive. Les snippets utilisent uniquement les tokens et classes réellement exposés par core/css/tokens.css — aucun token inventé.

Tokens (variables CSS, 10)

Scaffolding BEM (4)

Responsive et media queries (5)

Les breakpoints utilisés sont ceux réellement présents dans le framework : 480px (mobile), 767px (tablette), 991px / 992px (desktop).

Dark mode et theming (3)

Personnalisation des composants (6)

États interactifs et pseudo-classes (5)

Animations CSS (3)

Utilities et patterns courants (8)

Galerie d'exemples

Pour chaque snippet ci-dessous, le code montré est exactement ce qui est inséré quand tu tapes le préfixe + Tab avec les choix par défaut. Tu peux ensuite naviguer entre les tab stops pour personnaliser la classe BEM, l'animation, le texte, etc. Les zones ${1}, ${2:défaut} et ${3|val1,val2|} sont des positions interactives gérées par VSCode (la première étant souvent une classe BEM optionnelle vide).

Exemples HTML

Page complète — bly-page

Génère un template HTML5 minimal avec loader Beely (sans header/footer par défaut). Les composants s'ajoutent via bly-import + bly-header/bly-footer. Tab stops : titre, nom du site, description, classe BEM section.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Titre de la page — Mon Site</title>
  <meta name="description" content="Description pour le SEO.">

  <script src="../core/loader.js"></script>

  <script src="../components/header.js"></script>
  <script src="../components/footer.js"></script>
</head>
<body>

  <div data-component="header" data-site-name="Mon Site" data-logo-link="/index.html">
    <template data-slot="nav">
      <a href="/index.html">Accueil</a>
      <a href="/contact.html">Contact</a>
    </template>
  </div>

  <main id="main-content">
    <section class="section ">
      <div class="container">
        <h1 class="anim-fade-in-up">Titre de la page</h1>
      </div>
    </section>
  </main>

  <div data-component="footer" data-copyright="© 2026 Mon Site">
    <template data-slot="content">
      <nav class="footer__links">
        <a href="/mentions-legales.html">Mentions légales</a>
        <a href="/confidentialite.html">Politique de confidentialité</a>
      </nav>
    </template>
  </div>

</body>
</html>

Hero section animée — bly-hero

Section hero avec choix d'animation dans un menu déroulant (12 animations disponibles). Le tab stop $1 permet d'ajouter une classe BEM custom (ex : section--landing).

<section class="section section--lg ">
  <div class="container">
    <h1 class="anim-fade-in-up">Titre principal</h1>
    <p class="anim-fade-in-up anim--delay-1">Sous‑titre ou accroche.</p>
    <div class="anim-fade-in-up anim--delay-2">
      <a href="#" class="btn btn--primary">Appel à l'action</a>
    </div>
  </div>
</section>

Grille à 4 colonnes pré-générée — bly-grid-4

Évite d'avoir à dupliquer manuellement les 4 cellules. Idem pour bly-grid-2, bly-grid-3, bly-grid-5, bly-grid-6.

<div class="grid " data-cols="4" data-gap="md">
  <div>Colonne 1</div>
  <div>Colonne 2</div>
  <div>Colonne 3</div>
  <div>Colonne 4</div>
</div>

Bento layout sidebar — bly-bento-sidebar

Layout bento avec contenu principal + sidebar (deux variantes : sidebar à droite ou sidebar-left à gauche).

<div class="bento " data-layout="sidebar" data-row-height="md">
  <div>Contenu principal</div>
  <div>Sidebar</div>
</div>

Item de grille avec span — bly-grid-span

Item qui s'étend sur plusieurs colonnes ou rangées. Idéal pour des layouts asymétriques.

<div data-col-span="2" data-row-span="2">Contenu large</div>

Bouton avec icône — bly-btn-icon

Combine bouton + icône Heroicon. Choix du type de bouton (primary/secondary), de l'icône et du texte.

<button class="btn btn--primary ">
  <span data-icon="arrow-right" data-icon-size="20"></span>
  Texte du bouton
</button>

Icône avec animation SVG — bly-icon-anim

Icône Heroicon avec animation SVG au scroll (5 types : draw‑fade, draw, fade‑up, fade, fill).

<span data-icon="heart" data-icon-type="outline" data-icon-size="32" data-icon-animate="draw-fade"></span>

Animation avec délai — bly-anim-delay

Tag custom + animation au scroll + délai (1 à 10 = 100→1000 ms).

<div class="anim-fade-in-up anim--delay-1 ">

</div>

Animation au clic — bly-anim-click

4 animations disponibles : pulse, shake, bounce, ripple.

<button class="anim-click-pulse ">Cliquer</button>

Formulaire complet — bly-form

Formulaire prêt à l'emploi avec nom + email + message, validation chaînée et webhook.

<form class="form "
      data-form-webhook="https://hooks.example.com/form"
      data-form-success="Merci ! Votre message a été envoyé."
      data-form-error="Erreur lors de l'envoi.">

  <div class="form__field form__field--float">
    <input class="form__input" type="text" name="nom" placeholder=" " data-validate="required|min:2">
    <label class="form__label">Nom</label>
    <div class="form__error"></div>
  </div>

  <div class="form__field form__field--float">
    <input class="form__input" type="email" name="email" placeholder=" " data-validate="required|email">
    <label class="form__label">Email</label>
    <div class="form__error"></div>
  </div>

  <div class="form__field form__field--float">
    <textarea class="form__textarea" name="message" rows="4" placeholder=" " data-validate="required|min:10"></textarea>
    <label class="form__label">Message</label>
    <div class="form__error"></div>
  </div>

  <div class="form__nav">
    <button type="submit" class="form__submit">Envoyer</button>
  </div>
</form>

Formulaire 3 étapes avec progress — bly-form-steps-3

Squelette complet 3 étapes avec barre de progression et indicateurs visuels.

<form class="form " data-form-webhook="https://hooks.example.com/form">
  <div class="form__progress"><div class="form__progress-bar"></div></div>
  <div class="form__step-indicators">
    <div class="form__step-indicator form__step-indicator--active">1</div>
    <div class="form__step-indicator">2</div>
    <div class="form__step-indicator">3</div>
  </div>

  <div class="form__step form__step--active" data-step="1" data-step-label="Étape 1">
    <div class="form__nav"><button type="button" class="form__next">Suivant</button></div>
  </div>

  <div class="form__step" data-step="2" data-step-label="Étape 2">
    <div class="form__nav">
      <button type="button" class="form__prev">Précédent</button>
      <button type="button" class="form__next">Suivant</button>
    </div>
  </div>

  <div class="form__step" data-step="3" data-step-label="Étape 3">
    <div class="form__nav">
      <button type="button" class="form__prev">Précédent</button>
      <button type="submit" class="form__submit">Envoyer</button>
    </div>
  </div>
</form>

Champ conditionnel — bly-field-conditional

Champ qui s'affiche dynamiquement selon la valeur d'un autre champ. Le moteur forms.js évalue data-condition avec support =, !=, &&, ||.

<div class="form__field form__field--float" data-condition="autre_champ=valeur_attendue">
  <input class="form__input" type="text" name="champ_conditionnel" placeholder=" ">
  <label class="form__label">Label conditionnel</label>
  <div class="form__error"></div>
</div>

Champ avec règles chaînées — bly-field-validate

Toutes les règles supportées par forms.js : required, email, phone, url, min:N, max:N, regex:/.../:Message d'erreur.

<div class="form__field form__field--float ">
  <input class="form__input" type="text" name="champ" placeholder=" " data-validate="required|email">
  <label class="form__label">Label</label>
  <div class="form__error"></div>
</div>

Upload de fichier — bly-field-file

Dropzone complète avec input file, hint et liste des fichiers uploadés.

<div class="form__field form__file ">
  <label class="form__label">Joindre un fichier</label>
  <div class="form__file-dropzone">
    <input class="form__file-input" type="file" name="fichier" accept="image/*,application/pdf" multiple>
    <div class="form__file-text">Glissez vos fichiers ou cliquez pour parcourir</div>
    <div class="form__file-hint">Maximum 5 Mo</div>
  </div>
  <div class="form__file-list"></div>
  <div class="form__error"></div>
</div>

Input numérique +/− — bly-field-number

<div class="form__field ">
  <label class="form__label">Quantité</label>
  <div class="form__number">
    <button type="button" class="form__number-minus">−</button>
    <input class="form__number-input" type="number" name="quantite" min="0" max="100" step="1" value="1">
    <button type="button" class="form__number-plus">+</button>
  </div>
  <div class="form__error"></div>
</div>

Accordéon multi-ouvertures — bly-accordion-multi

Avec data-accordion-multi, plusieurs items peuvent rester ouverts simultanément (par défaut un seul s'ouvre à la fois).

<div class="accordion " data-accordion-multi>
  <div class="accordion__item">
    <div class="accordion__header">Titre 1</div>
    <div class="accordion__body"><p>Contenu 1.</p></div>
  </div>
  <div class="accordion__item">
    <div class="accordion__header">Titre 2</div>
    <div class="accordion__body"><p>Contenu 2.</p></div>
  </div>

</div>

Accordéon 5 items — bly-accordion-5

Variante de comptage : insère directement les 5 items, aucune duplication manuelle.

<div class="accordion ">
  <div class="accordion__item accordion__item--active">
    <div class="accordion__header">Titre 1</div>
    <div class="accordion__body"><p>Contenu 1.</p></div>
  </div>
  <div class="accordion__item">
    <div class="accordion__header">Titre 2</div>
    <div class="accordion__body"><p>Contenu 2.</p></div>
  </div>
  <div class="accordion__item">
    <div class="accordion__header">Titre 3</div>
    <div class="accordion__body"><p>Contenu 3.</p></div>
  </div>
  <div class="accordion__item">
    <div class="accordion__header">Titre 4</div>
    <div class="accordion__body"><p>Contenu 4.</p></div>
  </div>
  <div class="accordion__item">
    <div class="accordion__header">Titre 5</div>
    <div class="accordion__body"><p>Contenu 5.</p></div>
  </div>
</div>

Système d'onglets — bly-tabs

<div class="tabs ">
  <div class="tabs__nav">
    <button class="tabs__tab" data-tab="tab1" data-tab-active>Onglet 1</button>
    <button class="tabs__tab" data-tab="tab2">Onglet 2</button>
    <button class="tabs__tab" data-tab="tab3">Onglet 3</button>
  </div>
  <div class="tabs__panel" data-tab-panel="tab1"><p>Contenu de l'onglet 1.</p></div>
  <div class="tabs__panel" data-tab-panel="tab2"><p>Contenu de l'onglet 2.</p></div>
  <div class="tabs__panel" data-tab-panel="tab3"><p>Contenu de l'onglet 3.</p></div>
</div>

Slider autoplay infini — bly-slider-auto

Carousel en boucle infinie avec autoplay configurable (ms).

<div class="slider " data-slider-per-view="1" data-slider-loop="true" data-slider-auto="4000" data-slider-gap="md">
  <div class="slider__track">
    <div class="slider__slide">Slide 1</div>
    <div class="slider__slide">Slide 2</div>
    <div class="slider__slide">Slide 3</div>
  </div>
  <div class="slider__dots"></div>
</div>

Slider avec icônes flèches custom — bly-slider-arrows

Personnalisation des flèches via attributs data-slider-arrow-*.

<div class="slider " data-slider-per-view="3 2 1" data-slider-arrow-prev="chevron-left" data-slider-arrow-next="chevron-right" data-slider-arrow-type="outline" data-slider-arrow-size="24">
  <div class="slider__track">
    <div class="slider__slide">Slide 1</div>
    <div class="slider__slide">Slide 2</div>
    <div class="slider__slide">Slide 3</div>
  </div>
  <button class="slider__prev"></button>
  <button class="slider__next"></button>
  <div class="slider__dots"></div>
</div>

Modal centrée — bly-popup

<button data-popup-target="mon-popup">Ouvrir</button>

<div class="popup " data-popup="mon-popup">
  <div class="popup__overlay"></div>
  <div class="popup__content">
    <button class="popup__close" data-popup-close aria-label="Fermer">&times;</button>
    <h2>Titre du popup</h2>
    <p>Contenu du popup.</p>

  </div>
</div>

Panneau latéral droit — bly-popup-right

Pleine hauteur, max 480px de large, glisse depuis la droite. Variantes : bly-popup-left, bly-popup-bottom, bly-popup-top.

<button data-popup-target="panneau-droit">Ouvrir</button>

<div class="popup " data-popup="panneau-droit" data-popup-position="right">
  <div class="popup__overlay"></div>
  <div class="popup__content">
    <button class="popup__close" data-popup-close aria-label="Fermer">&times;</button>
    <h2>Titre</h2>

  </div>
</div>

Tooltip sur icône — bly-tooltip-icon

Combine icône Heroicon + tooltip en une ligne.

<span data-icon="information-circle" data-icon-size="20" data-tooltip="Plus d'informations" data-tooltip-pos="top"></span>

Toggle de classe au clic — bly-interact-toggle

Sans une ligne de JavaScript, ajoute/retire une classe au clic via data-interact.

<button data-interact="click | toggle-class:active | self">Cliquer</button>

Action à l'entrée dans le viewport — bly-interact-viewport

Idéal pour ajouter une classe une fois quand l'élément devient visible (modificateur once).

<div data-interact="viewport-enter | add-class:revealed | self | once">Contenu</div>

Exit-intent popup — bly-interact-leave

Affiche automatiquement un popup quand la souris quitte la fenêtre (utilisateur sur le point de partir).

<div data-interact="window-leave | show | #exit-popup | once"></div>
<div id="exit-popup" data-interact-hidden>Popup d'intention de sortie</div>

Sauvegarder en localStorage — bly-interact-storage

<button data-interact="click | storage-set:local:cle:valeur | self">Sauvegarder</button>

Header avec CTA — bly-header-cta

Le composant header Beely accepte plusieurs data-slot : nav, cta, search, download.

<div data-component="header"
     data-site-name="Mon Site"
     data-logo-link="/index.html">
  <template data-slot="nav">
    <a href="/index.html">Accueil</a>
    <a href="/services.html">Services</a>
    <a href="/contact.html">Contact</a>
  </template>
  <template data-slot="cta">
    <a href="/contact.html" class="btn btn--primary">Devis gratuit</a>
  </template>
</div>

Card avec footer — bly-card

<div data-component="card"
     data-image="/assets/images/placeholder.jpg"
     data-image-alt="Image alternative"
     data-title="Titre de la carte"
     data-text="Description courte de la carte.">
  <template data-slot="footer">
    <a href="#" class="btn btn--primary">En savoir plus</a>
  </template>
</div>

Pattern registerComponent — bly-component

Squelette pour créer un composant Beely custom (à placer dans components/mon-composant.js).

registerComponent('nom-composant', function (slots) {
  return `
    <div class="nom-composant">
      <h3 class="nom-composant__title">${escapeSlotHtml(slots.title || '')}</h3>
      <p class="nom-composant__text">${escapeSlotHtml(slots.text || '')}</p>

    </div>`;
});

Section FAQ — bly-faq

Pattern composé : section + accordéon + animation configurable sur le titre.

<section class="section ">
  <div class="container">
    <h2 class="anim-fade-in-up">Questions fréquentes</h2>
    <div class="accordion">
      <div class="accordion__item">
        <div class="accordion__header">Première question ?</div>
        <div class="accordion__body"><p>Réponse à la première question.</p></div>
      </div>
      <div class="accordion__item">
        <div class="accordion__header">Deuxième question ?</div>
        <div class="accordion__body"><p>Réponse à la deuxième question.</p></div>
      </div>

    </div>
  </div>
</section>

Exemples CSS

Bloc tokens complet — bly-tokens

Snippet le plus utile pour démarrer un nouveau composant : tous les tokens courants sont déjà câblés. Tu n'as qu'à choisir les valeurs dans les menus déroulants.

.mon-element {
  color: var(--color-text);
  background: var(--color-bg);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--font-weight-normal);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);

}

Variables individuelles — bly-color, bly-space, bly-text

Inline variable, pratique pour modifier juste une propriété sans réécrire var(--xxx).

color: var(--color-primary);
margin-bottom: var(--space-4);
font-size: var(--text-lg);

Squelette BEM complet — bly-bem

Génère un block + element + modifier en SCSS-style (compatible CSS imbriqué moderne ou Sass).

.block {


  &__element {

  }

  &--modifier {

  }
}

Block BEM tokens-driven — bly-block

.block {
  display: flex;
  padding: var(--space-4);
  background: var(--color-bg);
  border-radius: var(--radius-md);

}

Media query mobile — bly-mobile

@media (max-width: 480px) {
  .mon-element {

  }
}

Bloc responsive 3 breakpoints — bly-responsive

Le snippet le plus puissant pour le responsive : génère les 3 breakpoints du framework en une seule fois (desktop par défaut + tablette + mobile).

.mon-element {
  /* Desktop par défaut */

}

@media (max-width: 991px) {
  .mon-element {
    /* Tablette */

  }
}

@media (max-width: 480px) {
  .mon-element {
    /* Mobile */

  }
}

Bloc dark mode — bly-dark-css

Le framework expose [data-theme="dark"] sur <html> via core/js/darkmode.js. Ce snippet permet d'override des styles uniquement en dark mode.

[data-theme="dark"] .mon-element {

}

Override des tokens light/dark — bly-theme-tokens

Changer la valeur des tokens couleur en fonction du thème. Tous les composants qui utilisent var(--color-primary) répercuteront automatiquement le changement.

[data-theme="light"] {
  --color-primary: #3b82f6;

}

[data-theme="dark"] {
  --color-primary: #60a5fa;

}

Variante de section — bly-section-variant

Crée ta propre variante de section custom. Compatible avec l'attribut class="section section--mavariante".

.section--mavariante {
  background: var(--color-bg-alt);
  color: var(--color-text);
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);

}

Variante de bouton — bly-btn-variant

Le framework expose seulement .btn--primary et .btn--secondary. Pour ajouter .btn--accent, .btn--success... utilise ce snippet.

.btn--mavariante {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  border: 1px solid var(--color-accent);
}

.btn--mavariante:hover {
  background: var(--color-accent);

}

Custom props slider — bly-slider-arrows-css

Personnaliser visuellement les flèches du slider Beely sans toucher au code JS, juste via les custom props CSS.

.slider {
  --slider-arrow-size: 48px;
  --slider-arrow-color: var(--color-primary);
  --slider-arrow-bg: var(--color-bg);
  --slider-arrow-border: var(--color-border);
  --slider-arrow-hover-bg: var(--color-primary);
  --slider-arrow-hover-color: var(--color-text-inverse);

}

Bloc complet d'états interactifs — bly-states

Tous les états interactifs accessibles d'un coup : hover + focus-visible + active + disabled.

.mon-element {
  transition: all var(--transition-fast);


  &:hover {

  }

  &:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  &:active {
    transform: scale(0.98);
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;

  }
}

Focus-visible accessible — bly-focus

Outline accessible WCAG, à utiliser systématiquement sur tout élément interactif custom.

&:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;

}

Animation @keyframes — bly-keyframes

@keyframes nom-anim {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Propriété transition tokens — bly-transition

transition: all var(--transition-fast) ease;

Centrer en flex — bly-flex-center

display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);

Aspect ratio — bly-aspect

Choix dans menu déroulant : 16/9, 4/3, 1/1, 3/4, 9/16, 21/9.

aspect-ratio: 16 / 9;
object-fit: cover;

Tronquer N lignes — bly-clamp

Tronque le texte sur N lignes (2 par défaut, choix 2-5 dans le menu).

display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;

Visuellement masqué accessible — bly-sr-only

Cacher visuellement un élément tout en le gardant accessible aux lecteurs d'écran (alternative au pattern display: none).

position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;

Pattern section custom complet — bly-section-css

Génère une variante de section + son responsive en une seule fois.

.section--custom {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
  background: var(--color-bg);
  color: var(--color-text);

  .container {

  }

  @media (max-width: 767px) {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }
}

Personnaliser ou ajouter un snippet

Le fichier source est .framework/.vscode/beely.code-snippets. Comme c'est un submodule Git, toute modification doit être commitée et poussée dans le repo beely-framework pour bénéficier à tous les projets.

Pour ajouter un snippet projet‑spécifique (qui ne sera pas partagé via le framework), créez un nouveau fichier .vscode/projet.code-snippets à la racine de votre projet :

{
  "Mon snippet": {
    "scope": "html",
    "prefix": "mon-prefix",
    "body": [
      "<div class=\"mon-bloc\">",
      "  $0",
      "</div>"
    ]
  }
}

Syntaxe des tab stops

• $1, $2, $3…  — Positions du curseur (Tab pour passer à la suivante)
• ${1:défaut}  — Tab stop avec valeur par défaut
• ${1|option1,option2,option3|}  — Tab stop avec menu déroulant
• $0  — Position finale du curseur

Ajouter une variante de comptage

Pour ajouter par exemple un bly-accordion-7, copiez l'entrée "Beely Accordion 6 — Accordéon 6 items" dans beely.code-snippets, renommez-la, ajoutez le 7ème item, et assurez-vous que le préfixe est unique.