Cheatsheet Global.scss

Lecture Rapide

• Les classes en block__element avec des modificateurs .-etat sont souvent des composants reutilisables.
• Les classes typographiques comme .body-02 ou .heading-01 peuvent etre posees directement sur du texte.
• Les utilities comme .d-flex, .mt-16, .px-md-24 ou .justify-content-between sont les plus safe a reutiliser.
• Les composants comme .button et les icons demandent parfois une structure HTML precise.
• Les classes applicatives comme .cartLine, .header, .woosmapContainer et .productCard sont reutilisables seulement avec leur markup complet et leur JS eventuel.

Focus Utilities

Cette partie regroupe les classes a usage unique : une classe = une intention CSS simple. Les variantes x/y, comme .mx-* ou .px-*, touchent deux proprietes mais gardent une seule intention : axe horizontal ou vertical.

Display Responsive

<div class="d-none d-md-flex">Visible en flex a partir du desktop</div>
<div class="showMobile">Visible seulement mobile/tablet</div>
<div class="showDesktop">Visible seulement desktop</div>

Flex

<div class="d-flex flex-column flex-md-row align-items-center justify-content-between gap-16">
  ...
</div>

Margin, Padding, Gap

Valeurs disponibles : 0, 2, 4, 6, 8, 10, 12, 16, 20, 24, 28, 32, 40, 48, 56, 64, 80, 96, 120, 160, 240, 320, 400.

<section class="px-16 px-md-40 py-32">
  <div class="d-flex flex-column gap-16 gap-md-24">
    ...
  </div>
</section>

Typographie

<h2 class="heading-01">Nouvelle collection</h2>
<p class="body-02">Une phrase courte de presentation.</p>
<span class="price-02">39,99 EUR</span>
<span class="price-slashed-02">49,99 EUR</span>

Ombres, Blur Et Tokens

.my-card {
  padding: var(--sfra-spacer-16);
  color: var(--sfra-black);
  background: var(--sfra-white);
  box-shadow: var(--sfra-shadow-01);
}

Boutons

Base obligatoire : .button.

<button class="button -primary -black -medium">Ajouter au panier</button>

<button class="button -secondary -black -small -iconLeft">
  <i class="icon-heart -small"></i>
  Wishlist
</button>

<button class="button -transparent -iconOnly -medium" aria-label="Fermer">
  <i class="icon-close -small"></i>
</button>

Icons

Base icons : toute classe qui commence par .icon- herite d'une taille et d'un rendu commun. Les classes nommees qui pointaient vers des SVG absents ont ete retirees du SCSS ; pour reutiliser une icon nommee, il faut que son asset existe dans le dossier attendu.

• Utiliser une classe .icon-* seulement si le masque/image correspondant existe.
• Ajouter une taille avec .-small, .-medium, etc.
• Dans un CTA, l'icon herite souvent sa couleur via background-color.

<i class="icon-search -medium" aria-hidden="true"></i>
<button class="button -primary -black -iconLeft">
  <i class="icon-plus -small" aria-hidden="true"></i>
  Ajouter
</button>

Tags

Base obligatoire : .tag.

<span class="tag -promotion caption-strong-02">-30%</span>
<span class="tag -wecare"><i class="icon-wecare"></i><p>WeCare</p></span>

Size Buttons

Composant pour selectionner une taille ou une option courte.

<div class="sizeButtonList__container">
  <button class="sizeButton__container -default-classic">XS</button>
  <button class="sizeButton__container -default-classic -selected">S</button>
  <button class="sizeButton__container -outOfStock">M</button>
</div>

Messages De Tag

<div class="tagMessage__container -promotion">
  <i class="icon-promo -small tagMessage__icon"></i>
  <span class="tagMessage__text">Offre speciale</span>
</div>

Badges

<span class="badges notification black caption-strong-01">2</span>
<span class="badges online on" aria-hidden="true"></span>

Tabs

Structure attendue : .tabs contient des .tab et une .tabUnderline.

<div class="tabs">
  <button class="tab -active">Details</button>
  <button class="tab">Livraison</button>
  <span class="tabUnderline"></span>
</div>

Color Bubbles

<div class="colorBubbleContainer -grid">
  <div class="colorBubbleContainer__wrapper">
    <button class="colorBubble -selected" style="--colorBubbleBackground:#0b1215">
      <span class="colorBubble__border"></span>
    </button>
    <button class="colorBubble -light" style="--colorBubbleBackground:#fdfdfd">
      <span class="colorBubble__border"></span>
    </button>
  </div>
</div>

Visual Indicator

<div class="visualIndicator__container">
  <button class="visualIndicator__itemContainer -active"></button>
  <button class="visualIndicator__itemContainer"></button>
  <button class="visualIndicator__itemContainer"></button>
</div>

Visual Slider

Composant plus structurel, souvent pilote par JS.

<div class="visualSlider">
  <div class="visualSlider__container -horizontal">
    <div class="visualSlider__item"><img src="image-1.jpg" alt=""></div>
    <div class="visualSlider__item"><img src="image-2.jpg" alt=""></div>
  </div>
  <div class="visualSlider__indicator -horizontal">
    <div class="visualIndicator__container">
      <button class="visualIndicator__itemContainer -active"></button>
      <button class="visualIndicator__itemContainer"></button>
    </div>
  </div>
</div>

Overlays Produit

Ces classes sont reutilisables surtout dans une card produit.

Loading Et Helpers D'etat

<div class="loading loaderContainer">
  <span class="loader-element"></span>
</div>

<div class="aspect-ratio">
  <img src="product.jpg" alt="">
</div>

<span class="badge -promo">Promo</span>

Blocs A Reutiliser Avec Prudence

Ces familles existent dans Global.scss, mais elles semblent plus applicatives que Storybook autonome.

Recettes Courantes

<button class="button -primary -black -medium -animated">
  Voir la selection
</button>

<a class="button -secondary -black -small" href="#">
  Decouvrir
</a>

<button class="button -transparent -iconRight -medium">
  Ajouter
  <i class="icon-plus -small"></i>
</button>

<span class="tag -promotion caption-strong-02">
  Offre speciale
</span>

<p>
  <span class="price-02">29,99 EUR</span>
  <span class="price-slashed-02">39,99 EUR</span>
</p>

<button class="colorBubble -L -selected" style="--colorBubbleBackground:#8f1d2c">
  <span class="colorBubble__border"></span>
</button>

A Verifier Avant Reutilisation

• Le composant a-t-il besoin de JS ? C'est probable pour .tabs, .visualSlider, .quickAddToCartOverlay et .productCard.
• Le composant a-t-il besoin d'un enfant precis ? Exemple : .colorBubble attend .colorBubble__border.
• Le composant depend-il d'une classe contexte ? Exemple : plusieurs regles produit dependent de .product-grid.
• Le visuel depend-il d'une image locale ? Les icons/illustrations pointent vers ../images/pictos/....
• Le style est-il un helper ou un vrai composant ? .body-02 est safe partout, .cartLine__itemPrice ne l'est pas.

Document genere depuis la cheatsheet Markdown locale. Pour une mise en ligne simple, heberger ce fichier HTML tel quel.