Oxygen Builder : les pratiques de base à adopter

A quoi servent les bonnes pratiques avec Oxygen Builder?

En tant qu’agence de développement web, nous avons l’occasion de travailler des projets avec l’extension WordPress du nom d’Oxygen Builder.

Si vous ne savez pas ce qu’est Oxygen Builder, nous vous invitons à lire l’article de présentation d’Oxygen Builder avant de poursuivre votre lecture 😉

Avec l’expérience, nous avons gardé quelques pratiques intéressantes nous permettant : 

Il est donc essentiel d’avoir de bonnes pratiques à suivre afin d’optimiser au mieux la création d’un projet personnel ou d’un projet client.

Quelles sont les bonnes pratiques à adopter sur Oxygen Builder ?

Dans les pratiques que nous avons adopté nous avons donc :

Les titres des templates et des blocs réutilisables

Pour rappel, les templates sont des modèles de pages ou de blocs pouvant être utilisés sur plusieurs types de postes. Et les blocs réutilisables sont des blocs uniques pouvant être placés sur plusieurs types de poste différents.

Il nous est plusieurs fois arrivé que l’on ait une énorme liste de templates et blocs réutilisables. Pour éviter de trop prendre de temps à chercher un template ou un bloc en particulier, nous les nommons de la même manière pour plus de lisibilité.

D’abord, pour visuellement mieux différencier les blocs réutilisables des templates nous écrivons entre crochets (“[ ]”) le type de contenu.

le fait de nommer avec un préfixe nous fait faire visuellement un premier tri dans notre recherche

Puis après ce fameux préfixe, soyez le plus clair possible dans ce que représente ce template ou bloc en question.
Si c’est un template pour la page des résultats de recherche, écrivez “[Template] Résultats de recherche”.
Et si c’est un bloc contenant une image et un texte sur l’hygiène des mains, par exemple, notez-le ainsi “[Bloc] image et texte hygiène des mains”.
C’est simple mais très efficace pour bien s’y retrouver quand on a une dizaine de templates et une dizaine de blocs réutilisables.

Comment remplir et utiliser les paramètres généraux ?

Comme expliqué plus haut dans l’article, les paramètres généraux permettent une excellente maintenabilité d’un site web, c’est indispensable de les utiliser.

Vous pouvez accéder aux paramètres généraux de votre site via n’importe quel type de poste ou template tant que vous cliquez sur le bouton “Edit with Oxygen”.

Voici comment on accède à l’édition d’une page avec Oxygen (même procédé pour les articles, templates et autres types de poste)
Si vous cliquez seulement sur “Modifier” (situé sur la même ligne que “Edit with Oxygen”) vous éditerez votre template, page, article, ou autre avec l’éditeur de contenu de base de WordPress.

Une fois arrivé sur la page d’édition vous n’aurez plus qu’à cliquer sur le bouton de paramètres puis “Global Styles” et vous serez sur le menu des paramètres généraux de votre site web.

Le bouton des paramètres ouvrant vers les paramètres généraux, les paramètres de base des pages de votre site (la taille maximale, etc) et d’autres petites subtilités
Les paramètres généraux sont juste ici !
Voici tous les paramètres de base de votre site que vous pouvez intégrer : les couleurs, les polices, les titres, le texte, les liens, les breakpoints, les espacements des colonnes et sections, les animations au scroll de la souris, et les scripts JavaScript.

Pour ce qui concerne ces premiers points : les couleurs et les titres, nous allons en parler plus en détail dans les prochaines lignes de cet article. 

Mais avant, parlons de la suite de la liste. 

Les informations globales des textes sont relativement simples à compléter, si vous suivez un webdesign, la taille, la couleur, la hauteur de ligne des textes de votre site vous seront données, vous aurez juste à les entrer dans l’onglet “Body Text”.
En ce qui concerne la ou les police(s) présentes sur le site, il faudra la ou les paramétrer dans l’onglet “Fonts”.

Si vous ne suivez pas un webdesign particulier, sachez simplement qu’il ne faut pas qu’un texte soit d’une taille inférieure à 10 pixels, et ce, pour des raisons d’accessibilité.

Les breakpoints sont entrés automatiquement, rien ne change de ce côté.

Pour les sections et les colonnes, cet onglet ne modifie que les marges internes (paddings) de ces éléments, des valeurs par défaut sont ajoutées automatiquement. Vous pouvez les modifier en fonction de votre webdesign si vous le souhaitez.

“Animate on Scroll” permet de créer une animation globale qui se répercute sur les blocs que nous aurons sélectionnés ensuite.

Pourquoi et comment effectuer les réglages des couleurs ?

Passons sur l’un des réglages les plus importants avec les réglages des titres : les couleurs principales de votre projet.

Le chemin d’accès vers une nouvelle couleur globale à ajouter à votre projet.

Ne nommez jamais une couleur globale par le nom d’une couleur (bleu, rouge, jaune, vert anis, …).
Et ceci pour une raison très simple, cette couleur globale va être utilisée par une grande majorité des éléments qui composent votre site. Ce qui fait le lien entre les éléments et la couleur c’est son nom, si vous le changez vous coupez ce lien et ainsi devrez re-choisir la bonne couleur sur les éléments qui étaient concernés…
Ainsi, si vous décidez de nommer une couleur globale “Vert” et que, quelque temps plus tard, vous décidez de remplacer cette couleur par du jaune, vous ne pourrez pas la renommer et la nouvelle couleur jaune s’appellera toujours “Vert”…

Par conséquent, pour nommer vos couleurs globales, nous vous conseillons d’utiliser des mots plus génériques (en anglais de préférence) comme “primary color”, “secondary color” ou encore pour des couleurs concernant des éléments plus spécifiques “link color”, “text color”, “box shadow color’, et ainsi de suite.

Sur votre site web, vous devez avoir au moins deux ou trois couleurs prédominantes, c’est celles-ci qu’il faudra nommer “primary color”, “secondary color”, etc.

Pour vous faire une idée de ce qui peut, avec les couleurs prédominantes de votre site, faire partie de la liste des couleurs globales, on va vous citer une petite liste d’exemples.

Les couleurs qui concernent : 

N’importe quelle couleur utilisée plus d’une fois dans votre projet devra faire partie de cette liste de couleurs globales.

Pourquoi et comment effectuer les réglages de la taille et de la police des titres ?

Comme nous l’avons dit plus tôt, les titres font partie des réglages les plus importants à paramétrer.

Pour cela, je vous ai fait une courte vidéo tutoriel pour expliquer tout cela.

Vidéo tutoriel pour le paramétrage des titres dans les paramètres globaux d’Oxygen Builder

Pour résumer la vidéo en quelques points, il faut donc :

Les onglets permettant de configurer le responsive de votre projet se trouvent en haut à gauche de votre interface d’édition Oxygen

Prenons comme exemple le niveau de titre H1 :

Une fois avoir rempli les deux champs, vous devrez copier le morceau de code entouré dans l’image ci-dessus, sans le “font-size : “ et sans le point virgule à la fin

Ce que le site vous donne en dessous des champs c’est ce morceau de code :

:root {
  font-size: clamp(2rem, calc(2rem + ((1vw - 0.48rem) * 2.0833)), 3.5rem);
  min-height: 0vw;
}

Mais ce qui nous intéresse ici c’est seulement ceci :

clamp(2rem, calc(2rem + ((1vw - 0.48rem) * 2.0833)), 3.5rem)
Si l’unité n’est pas réglée sur “none”, le bout de code que nous avons ajouté ne fonctionnera pas.

Pourquoi et comment utiliser l’unité des REM plutôt que des pixels ?

Dans cet article, nous vous avons demandé d’utiliser l’unité de mesure “rem”. Nous utilisons principalement cette unité de mesure pour une raison simple : quelle que soit la taille de police par défaut du navigateur que vous utilisez, la mise en page s’ajuste automatiquement et correctement afin de s’adapter à la taille du texte qu’elle contient.

En effet, contrairement au pixel, le rem permet une meilleure adaptabilité au niveau du responsive.

Pour se faciliter la tâche et éviter de faire des conversions de pixels vers le rem à chaque fois, nous ajoutons à presque la totalité de nos projets un morceau de code qui permet, pour faire simple, de faire en sorte que 1 rem soit l’équivalent de 10 pixels.

Ce bout de code se présente comme suit : 

html {
    font-size: 62.5%; /* pour avoir une base de 10px au lieu de 16px */
}

Ce dernier devra être placé dans une feuille de style CSS nommée “Common”. Cette feuille de style concerne le code qui s’appliquera à la globalité de votre projet.
Pour en savoir plus sur les feuilles de style CSS, nous vous invitons à continuer votre lecture, c’est justement le sujet suivant.

Pourquoi et comment utiliser des feuilles de style CSS dans Oxygen Builder ?

Comme énoncé plus tôt, les feuilles de style CSS permettent de centraliser tout le code que vous voulez ajouter à votre site.

Car en effet, il est possible avec Oxygen Builder, d’utiliser un bloc exprès, appelé “Code Block”, pour placer du code en plein milieu d’une page, il est parfois bien utile de l’utiliser mais seulement pour des cas exceptionnels. 

Si on se mettait à utiliser des “Code block” partout et/ou d’écrire du code dans l’onglet “JavaScript” présent dans tous les blocs, ce serait un enfer pour s’y retrouver et encore plus si on revient sur le projet des mois ou des années après.
Ainsi, centraliser tout le code ajouté dans des feuilles de style CSS vous évitera de perdre du temps en recherche.

Voici le bouton d’accès aux feuilles de style de votre site web.  Vous trouverez cet onglet à chaque fois que vous ouvrirez l’éditeur de contenu d’Oxygen Builder.
Le bouton d’ajout d’une feuille de style CSS, et à sa droite le bouton “Add Folder” qui permet de créer un nouveau dossier de feuilles de styles CSS.

Nous vous conseillons d’ajouter une première feuille de style qui centralisera les codes qui s’appliqueront sur l’ensemble du projet. Puis, les prochaines seront plus précises au niveau de l’endroit où s’appliquent les codes ajoutés à l’intérieur. 

Pourquoi et comment créer des classes CSS ?

Enfin, avec Oxygen Builder, nous avons la possibilité de créer des classes avec n’importe quel(s) paramètre(s).

C’est un avantage conséquent pour gagner du temps à la création de votre projet, et surtout pour avoir une maintenabilité optimale.

Pour rappel, une classe CSS permet de lier plusieurs mêmes paramètres de style sur des blocs choisis.

Note importante : quand deux blocs ou plus ont un même point commun, ou même plusieurs, il faut créer une classe.

Voyons comment procéder. 

Nous voyons sur notre web design plusieurs blocs ayant comme points communs un fond vert et un padding de 2 rem.

Ces deux paramètres peuvent être créés sous deux classes séparées car ce sont des paramètres simples qui peuvent être utilisés sur d’autres blocs.

En cliquant sur la barre présentant l’id d’un des blocs cible nous pouvons voir apparaître un champ de création de classe CSS.
Ajout du fond vert à la classe “background-color__green” soit avec les couleurs globales entrées au préalables dans les paramètres globaux (recommandé), soit avec le tableau de couleurs.
Ajout de 2 rem en padding pour la classe “p-2”.
Grâce à la barre de recherche de classes il est très facile de retrouver les classes créées et de les ajouter à n’importe quel bloc

C’est sur ces mots que se termine cet article.
Nous espérons que cet article sur Oxygen Builder vous aura aidé.
Si vous ressentez que vous avez besoin d’approfondir vos connaissances sur Oxygen Builder, ou si vous faites face à une problématique spécifique, n’hésitez pas à nous contacter. Nous vous répondrons dans les meilleurs délais.
Nous vous souhaitons une bonne navigation !