Mois : mars 2015

Attention : doc en cours de rédaction …

Si vous souhaitez conserver dans votre thème personnalisé l’affichage homogène et minimaliste fondé sur le framework Bootstrap et l’ensemble de petites fonctionnalités (modals, zoom produit) liées au core de Change Cross Commerce, il est nécessaire de ré-exploiter certaines feuilles de style présentes dans le thème Rbs_Base.

Change Cross Commerce, bien qu’embarquant un nombre assez conséquent de dépendances CSS (le framework Bootstrap est éclaté en autant de feuilles LESS que de composants et plug-ins qui le constituent), est pensé de manière à pouvoir écraser uniquement les composants qui demanderaient une ré-écriture et à exploiter les versions core pour tout le reste.

• Arborescence standard : où trouve-t’on les feuilles de style ?
• Arborescence d’un thème personnalisé : où consigner les feuilles de styles, les surcharges et les ré-écritures ?
• assets.json : déclarer les dépendances JS, CSS et les locales de traduction de votre thème.
• Surcharger ou écraser ?
• start.less : le point de départ pour vos imports de feuilles de styles.
• bootstrap.less : le point de départ pour vos ré-écritures de composants Bootstrap.
• variables.less : le point de départ pour définir l’aspect général des éléments des éléments de frontoffice.

Arborescence standard : où trouve-t’on les feuilles de style ?

Le thème par défaut de Change Cross Commerce embarque (selon moi) deux types de feuilles de styles :

1. les composants natifs Bootstrap accessibles à tous depuis la page Customize and Download du site officiel,
2. les fichiers ajoutés par l’équipe en charge du développement du produit pour des fonctionnalités non couvertes par Bootstrap (redimensionnement des médias, helpers, quelques fixes, …).

Arborescence d’un thème personnalisé : où consigner les feuilles de styles, les surcharges et les ré-écritures ?

assets.json : déclarer les dépendances JS, CSS et les locales de traduction de votre thème.

Pour l’inclusion de start.less :

Surcharger ou écraser ?

Nous avons vu plus haut que le thème par défaut de Change Cross Commerce embarquait deux types de feuilles de styles. Avec le recul que j’ai actuellement sur le développement avec la solution, j’ai fait le choix :

• d’écraser les composants natifs Bootstrap que je souhaitais modifier.

  Dans le cadre d’une surcharge, il faudrait d’abord ré-écrire des styles reset pour annuler la portée du code standard sur l’affichage pour, ensuite seulement, poser son code spécifique.
  Ici, on copie/colle et on modifie directement le code du composant natif à sa convenance.

  (Si on maîtrise un minimum la logique d’articulation Bootstrap) on évite une certaine lourdeur, on gagne en temps de maintenance et on conserve la flexibilité du framework. Une mise à jour mineure du core Bootstrap ne rendra pas la migration des fichiers natifs partiellement ré-écrits plus ardue car ils demeurent, pour la plupart, très légers. Et une mise à jour majeure du core Bootstrap (passage à une version supérieure) forcerait de toute manière le développeur à un travail de migration plus approfondi.

• de surcharger les fichiers ajoutés par l’équipe en charge du développement du produit pour des fonctionnalités non couvertes par Bootstrap.

  On importe d’abord le fichier standard, puis sa surcharge contenant uniquement les propriétés redéfinies. La nature des déclarations CSS contenues dans ces fichiers et leur impact sur l’affichage front fait qu’aucun exercice d’écriture de code reset ne serait de toute manière nécessaire.

start.less : le point de départ pour vos imports de feuilles de styles

Il existe deux manières d’importer des dépendances CSS dans Change Cross Commerce :

1. Renseigner le fichier assets.json.

   Avantages/Inconvénients : vous pouvez appeler de manière sélective vos dépendances en fonction des différents gabarits de pages qu’embarque votre thème. Si vous avez beaucoup de feuilles de styles, la lisibilité de votre code en prendra un coup…

2. Créer un fichier start.less

   Avantages/Inconvénients : les imports de feuilles de styles se font pour l’ensemble des gabarits de pages. Cette méthode se révèle moins sélective à moins de créer et d’appeler dans un fichier start-[libellé_de_mon_template].less différent pour chaque gabarit de page.

Exemple d’un fichier surchargé : image-formats.less

On ne ré-écrit que les lignes qu’on souhaite changer pour les besoins de son thème Custom :

bootstrap.less : le point de départ pour vos ré-écritures de composants Bootstrap

On appelle les composants qui ne nécessitent pas d’écrasement depuis le thème Base et les ré-écritures depuis le thème Custom :

variables.less : le point de départ pour définir l’aspect général des éléments de frontoffice.

Ce fichier définit un nombre important de variables garantes de l’homogénéité d’affichage des éléments typographiques, des éléments de formulaire et des divers composants Bootstrap (grille et mediaqueries, menus, fil d’ariane, pagination, modal, …). Il constitue les fondements de l’affichage de toute interface embarquant le framework Bootstrap et, donc, par extension de tout thème Change Cross Commerce.

• Exploitez-le au maximum pour préserver un agencement et un affichage homogène des contenus dans vos pages.
• Prenez bien connaissance des variables existantes avant de déclarer des doublons ou de redéfinir à-la-sauvage des déclarations CSS supplémentaires qui concerneraient l’aspect de composants embarqués.