LD Consulting — Structure CSS

Structure CSS

Organisation cible des fichiers CSS. Les fichiers d’entrée importent les familles du Design System ; les styles réels restent dans les dossiers modulaires. Les styles métier isolés sont isolés dans une entrée dédiée pour préparer la version neutre.

Entrées CSS

design-system.css

Point d’entrée principal du core : importe les fondations, layouts, composants, molécules et organismes génériques.

ds-foundations.css

Point d’entrée fondations : importe foundations/*.css.

ds-layouts.css

Point d’entrée layouts : importe les structures globales de page.

ds-components.css

Point d’entrée composants : importe components/*.css.

ds-molecules.css

Point d’entrée molécules : importe uniquement les molécules génériques du core.

ds-organisms.css

Point d’entrée organismes : importe uniquement les organismes génériques du core. Il est déjà chargé par design-system.css.

ds-templates.css

Point d’entrée templates : importe templates/*.css. À charger seulement sur les pages de catalogue ou de structure templates.

ds-documentation.css

Styles réservés aux besoins propres à la documentation : schémas, previews, grilles de démonstration et labels techniques. Les classes app-ds-* ne doivent pas reproduire les composants existants du Design System.

Règles d’ajout CSS

Nouveau style global

Ajouter la règle dans le fichier modulaire concerné, jamais directement dans un fichier ds-*.css.

Fondation

Utiliser css/foundations/*.css?v=neutral-36-footer pour les tokens, bases, typographies, icônes et règles structurelles globales.

Composant

Utiliser css/components/nom-du-composant.css?v=neutral-36-footer.

Organisme

Utiliser css/organisms/nom-de-l-organisme.css?v=neutral-36-footer pour les organismes génériques. Un organisme doit rester neutre avant d’entrer dans le core.

Template

Utiliser css/templates/*.css?v=neutral-36-footer, uniquement pour les structures de templates ou adaptations locales.

Documentation

Utiliser css/documentation/*.css?v=neutral-36-footer uniquement pour les éléments propres à la documentation. Pour le texte courant, les titres, les cartes, les panels, les boutons ou les badges, réutiliser les classes du Design System.

Structure cible

css/
  design-system.css?v=service-packs-page
  ds-foundations.css
  ds-layouts.css
  ds-components.css
  ds-molecules.css
  ds-organisms.css
  ds-templates.css
  ds-documentation.css

  foundations/
    tokens.css
    base.css
    typography.css
    icons.css
    motion.css
    layout.css

  components/
    buttons.css
    badges.css
    notifications.css
    progress.css
    ...

  molecules/
    avatars.css
    pagination-stepper.css
    section-headers.css
    ...

  organisms/
    panels.css
    page-header.css
    app-header.css
    footer.css
    data-lists.css
    stat-cards.css
    ...

  templates/
    structures.css
    catalogue.css

  documentation/
    base.css
    layout-guide.css
    component-sections.css
    mobile-menu.css
    responsive.css

À éviter

Ne pas ajouter de règles réelles dans ds-components.css, ds-molecules.css, ds-organisms.css ou ds-foundations.css.

Ne pas dupliquer dans ds-documentation.css les composants déjà définis dans le Design System réel.

Ne pas recréer localement les cartes, panels, badges, boutons, footers ou bottom navs dans les templates.

Ne pas déplacer un composant sensible sans vérifier ses démos et templates consommateurs.