Logo helix ultimate

Helix Ultimate est un framework très prometteur, mais il est basé sur une version figée de Bootstrap4. Cela est dommage, car il est impossible de l'adapter à ses besoins.

Il serait pourtant pratique de définir ses couleurs de base pour les utiliser partout dans son template.

Un fichier custom.css est pris en charge par Ultimate, mais pas sa version SCSS.

Dans cet article, je vais essayer de vous montrer comment passer outre ces limitations.

scss-compiler

Ultimate a une gestion très personnelle du compilateur SCSS. Nous allons donc utiliser mon plugin SCSS Compiler v2.0 pour transformer nos fichiers SCSS en CSS. Ultimate et mon plugin utilisent le même compilateur de leafo, il n'y a donc aucun risque d'incompatibilité.

Pour éviter toutes confusions avec les fichiers gérés par Ultimate dans le dossier scss, nos fichiers SCSS seront mis dans un nouveau dossier scss-custom

scss compiler config

La configuration de SCSS-COMPILER est basique.

Ci-contre la fenêtre des paramètres si vous appliquez toutes mes recommandations.

Pour permettre un copier-coller, les paramètres pour la prise en charge des dossiers.
Dossier(s) SCSS :
templates/shaper_helixultimate/scss-custom
templates/shaper_helixultimate/scss-custom/presets

Dossier(s) CSS :
templates/shaper_helixultimate/css
templates/shaper_helixultimate/css/presets

Contrôler Bootstrap 4

Cela va peut-être évoluer avec Joomla 4, mais actuellement Helix Ultimate utilise un fichier minifié /templates/shaper_helixultimate/css/bootstrap.min.css qui n'est pas modifiable facilement.

Aucune trace des sources SCSS, ni de possibilité de compilation pour l'adapter.

Le déclencheur pour écrire cet article était que sur mon site la couleur cyan des badges infos jurait avec le reste du template. Plutôt qu'une surcharge CSS, j'ai préféré prendre le problème à la source : modifier la couleur cyan de BS4.

Pour cela, il faut :

1/ récupérer les fichiers SCSS de BS4 sur cette page https://getbootstrap.com/docs/4.0/getting-started/download/. Prendre la version 'source'. La version actuelle de Bootstrap est la 4.1, mais je préfère utiliser la même version qu'Ultimate.

note: Avec Joomla 4, il sera possible d'utiliser la version mise à disposition dans /media/vendor/bootstrap/scss.
Il faudra ajuster le chemin dans le fichier bootstrap.min.scss

2/ copier le dossier scss du zip dans le dossier /templates/shaper_helixultimate/scss-custom. Nous renommons ce dossier en bootstrap4 afin d'identifier facilement son contenu.

3/ créer un fichier /templates/shaper_helixultimate/scss-custom/_variables.scss avec le code suivant

// les couleurs de base (avec en commentaire leur utilisation par $theme-colors)
$blue:  #28F;  // primary
$gray-600: #666666; // secondary
$green:  #006400; // success
$cyan:   #0080ff; // info
$yellow:  #ffc107; // warning
$red:  #DC3545; // danger
$gray-100: #f8f8f8; // light
$gray-800: #383838; // dark

// pour appel direct
$color-primary: $blue;
$color-secondary: $gray-600;
$color-success: $green;
$color-info: $cyan;
$color-warning: $yellow;
$color-danger: $red;
$color-light: $gray-100;
$color-dark: $gray-800;

Ce fichier définit les principales couleurs utilisées par BS4
Vous pouvez adapter les couleurs à votre gout, mais il est impossible de modifier le nom des variables ou d'en supprimer.

4/ créer un fichier /templates/shaper_helixultimate/scss-custom/bootstrap.min.scss avec le code suivant

// import des redéfinitions de variables
@import "variables";

// appel compilation
@import "bootstrap4/bootstrap";

Ce fichier va permettre de remplacer la version du fichier bootstrap.min.css fourni par Ultimate par notre version qui utilise les couleurs définies dans le fichier _variables.scss.

Petit rappel, les fichiers SCSS dont le nom commence par un underscore sont des partiels. Ils ne sont jamais compilés en css, mais uniquement importés dans le fichier principal. Attention, scss-compiler ne surveille pas les partiels, il faut forcer la compilation dans ses paramètres ou modifier légèrement le fichier principal qui l'utilise.

5/ afficher une page en frontend pour lancer la compilation. il peut-être nécessaire de rafraichir l'affichage pour voir l'effet du CSS.

Quelques explications :

- les couleurs de base de BS4 (primary, info, warning, ...) sont affectées indirectement dans la map $theme-colors. BS4 ne définit pas la couleur pour "info", mais utilise la couleur "cyan". Pour avoir la même teinte dans toutes les utilisations du cyan, je modifie directement la couleur cyan. Pour info, la définition se trouve à la ligne 46 du fichier bootstrap4/_variables.scss :

$cyan: #17a2b8 !default;

L'important est le mot !default qui signifie que la valeur sera utilisée par défaut si elle n'est pas définie ailleurs.
La première partie de bootstrap.min.scss importe le fichier _variables.scss qui définit les couleurs à utiliser - le mot !default n'est pas indiqué.

- la dernière ligne (@import bootstrap4/bootstrap) va lancer la compilation du fichier principal bootstrap4/bootstrap.scss sous le nom bootstrap.min.css afin d'écraser le fichier appelé par Helix Ultimate.

Créer un fichier custom.scss

Créer son fichier de personnalisation en SCSS présente un énorme avantage. En plus des facilités de codage, il permet de commenter de façon détaillée son code sans alourdir le fichier CSS. Le fichier sera minifié et les commentaires ne seront pas repris

Nous allons donc créer un fichier scss-custom/custom.scss . Ce sous-dossier est surveillé par scss-compiler. Il sera donc compilé en css/custom.css, fichier qui est chargé par Ultimate si il existe.

Son contenu est libre, mais il doit commencer par l'importation de nos variables

// import des redéfinitions de variables
@import "variables";

Si vos règles CSS les utilisent, vous aurez une harmonie de teintes avec celles de BS4

Utiliser les variables de BS4 pour Ultimate

Presets Helix Ultimate

Les presets d'Ultimate n'utilisent pas les couleurs de BS4. Ni celle d'origine, ni celles que nous avons redéfinies.

Si on utilise un custom Style, aucun preset n'est défini. Ultimate utilise les règles du fichier css/presets/default.css

Nous allons créer un fichier SCSS qui va remplacer ce fichier par le nôtre qui contient nos couleurs.

Ce fichier, à télécharger ci-dessous, doit être copié dans un sous-dossier scss-custom/presets

La ligne dans les paramétres de SCSS-COMPILER templates/shaper_helixultimate/scss-custom/presets va le compiler dans le dossiers css/presets

Créer un fichier editor.css :

TinyMCE et JCE utilisent le fichier css/editor.css (si existant) pour l'aperçu en mode éditeur.

Si l'on veut avoir un rendu proche en mode édition de celui sur le site, il faut créer un fichier /templates/shaper_helixultimate/scss-custom/editor.scss avec les principales règles.

N'oubliez pas d'importer les variables au début de ce fichier.

Utiliser Icomoon avec Bootstrap 4.0

Bootstrap 4.0 ne propose plus de librairies d'icônes. A chacun de choisir parmi les quelques pistes qu'il propose : https://getbootstrap.com/docs/4.0/extend/icons/

Par contre Jommla 3.8.x et la version beta de Joomla 4.0 mettent à disposition 2 polices d'icônes : icomoon et font-awesome. IcoMoon est compatible Bootstrap 2, alors que font-Awesome serait la police préconisée par Joomla 4. C'est d'ailleurs la police utilisée par Helix Ultimate.

Le problème est que les anciens articles ainsi que beaucoup d'extensions utilisent les icônes de Bootstrap2. Nous allons voir comment les récupérer.

La première étape est d'ajouter le fichier '_icomoon.scss' dans notre dossier 'custom-scss'

ensuite, il suffira d'ajouter ces lignes au début de notre fichier custom.scss

// ====== Ajout Icomoon
@import "icomoon";

Après compilation des SCSS, vous retrouverez vos icoMoon's


J'espère que ces quelques précisions et astuces aideront les découvreurs de ce fabuleux framework. N'hésitez pas à partager les vôtres.


Pour découvrir le monde du SCSS : Comparaison SCSS / LESS

Print Friendly and PDF