Framework

**Rajoz** · 19/01/2015, 14h40

Re : Framework

Bonjour d0b3,

J'ai un peu de temps devant moi

Quelle chance !

Mon choix c'était naturellement porté sur Bootstrap vu qu'il est inclus dans Joomla! MAIS il semble, après recherches, qu'il soit difficile d'utiliser une base BS3 puisqu'il y a des conflits entre la VS BS2 de Joomla! et la VS BS3 du template. Même l'appel <jdoc:include type="head" /> charge BS2...

La version actuelle v3.x de Joomla! intègre Bootstrap v2 et cela ne devrait probablement pas changer avant la v4.x ou alors pour une adaptation permettant d'utiliser les deux versions BS2 et BS3 (rétrocompatibilité nécessaire de J!3.x). Comme J!3.x doit être supporté deux ans après la dernière de ses versions, on a encore du temps devant nous.

Il y a des incompatibilités entre BS2 et BS3 comme par exemple les span utilisés pour le grid de BS2 qui ont été remplacés par un nouveau grid dans BS3.

BS n'est utilisé que pour la partie affichage. Joomla! permet de réécrire cette partie affichage par substitution (override) des vues dans le template. On peut donc adapter les affichages pour qu'ils utilisent BS3 et sans conflit.

Certaines extensions additionnelles (non natives de Joomla) peuvent être codées pour n'utiliser que BS2. C'est pour permettre l'affichage correct de ces extensions que certains frameworks utilisant BS3 intègrent aussi une version adaptée et réduite de BS2.

Pour info, BS2 n'est pas chargé par <jdoc:include type="head" /> mais par JHtml::_('bootstrap.framework') pour le JS et JHtml:: ('bootstrap.loadCss', true, $this->direction); ?> pour le CSS. Il suffit donc de ne pas utiliser ces deux instructions pour pouvoir utiliser le framework que l'on veut.

1. Est-il plus intéressant d'utiliser un autre framework (foundation, gumby, ...) afin d'éviter les conflits quand on utilise Joomla! ?

On peut utiliser n'importe quel framework de front-end à condition d'écrire les substitutions qui vont bien. D'ailleurs certains développeurs de templates utilisent leur propre framework à la place de Bootstrap, par exemple c'est le cas pour YOOtheme qui utilise son framework uikit (http://getuikit.com/).

2. Quels sont les solutions pour intégrer BS3 (frontend) avec Joomla! ? (des template clubs y arrive bien...)

Il suffit de ne charger que BS3

(et écrire les overrides et les CSS nécessaires pour certaines extensions additionnelles).

On peut aussi partir sur un des frameworks qui utilisent BS3. Ma liste n'est pas exhaustive, voici les premiers auxquels je pense (ces frameworks ont tous un template de base gratuit) :

3. Quid du poids final... BS est déjà trop lourd à mon goût :s

Les versions "min" sont assez réduites en poids. De toutes façon il y a besoin de CSS et de JS ce qui fait toujours un certain poids.

Par ailleurs, le poids reste quelque chose de relatif, ce qui est important c'est de voir le résultat final sur les performances d'affichage avec des outils comme GTmetrix.

Pour sourire un peu, je me souviens avoir eu au tout début de J!3.0 une remarque identique de quelqu'un qui trouvait que BS était trop lourd alors que sur son site il y avait en page d'accueil un slider avec une dizaine d'images de 500k chacune

.

L'avantage d'un framework c'est de pouvoir rapidement et facilement (après formation) faire face à plusieurs types de besoins. Il est forcément plus lourd qu'un code qui ne répond qu'à un seul besoin mais qu'il faut réécrire/adapter à chaque fois avec tous les risques de bug afférents.

Et s'il charge 2x BS ???

Joomla! ne charge qu'une seule fois BS avec les instructions citées plus haut. Le seul risque peut être avec des extensions non natives qui ne sont pas bien écrites de ce point de vue. Dans ce cas, il est possible d'en parler au développeur ou de modifier le code de l'extension en changeant l'appel à BS.

Amicalement,
Rajoz

**d0b3** · 20/01/2015, 23h03

Re : Framework

Merci pour la réponse très complète

J'aurais aimé éviter les overrides en raison des "mises à jour" nécessaire à ces même overrides.

J'ai essayé T3 et il faut dire qu'il n'est pas mal du tout : j'aime particulièrement ça flexibilité, l'organisation utilisée et la maitrise total du code. Je le trouve en revanche extrêmement complexe et peu documenté. Trop de fichiers LESS natifs dont je n'aurai aucune utilité viennent alourdir le framework et complexifie sa compréhension.

En fait, mon intérêt pour un framework se limite à deux points :

1. La grille responsive pour créer plus rapidement une structure et surtout sur base d'un standard qui me permettrait si changement ultérieur, une lecture plus aisée de celle-ci.

2. Gagner du temps dans la création du menu : le menu de T3 sont assez complet, menu off-canvas, collapse, recherche...

Maintenant j'aurai préféré utilisé directement BS pour garantir mon indépendance vis à vis de JoomlArt... Charger uniquement la partie grille de BS3 me paraît possible sans aucun conflit et il est alors facile de trouver un "add-on" BS pour un menu off-canvas.

La possibilité d'un autre framework qui remplit uniquement mes besoins et est donc extrêmement léger et plus rapidement compréhensible me paraît aussi être une bonne solution. Dans ce cas en revanche, le mieux me semble être de charger le framework et BS pour éviter les overrides. Je n'ai en revanche pas encore trouver ce framework idéal

Et un truc m'embêtes, j'aime particulièrement l'idée dans Joomla! de pouvoir ajouter une taille BS.

Que me conseillerais-tu au final ? Qu'utilises-tu ?

**jisse03** · 21/01/2015, 07h23

Re : Framework

Bonjour,

Parfaitement d'accord avec les commentaires de Rajoz.
Personnellement, mais il s'agit d'une affaire de goûts personnels, j'utilise surtout YJSG, qui permet un choix aisé entre BS2 et BS3 directement dans sa configuration, respecte BS, intègre un méga-menu, les sliders latéraux, etc et génère un code final bien optimisé.
De plus, il est bien documenté, y compris concernant la gestion des grids, leur extension et la création de styles dérivés.

**Rajoz** · 21/01/2015, 15h28

Re : Framework

Bonjour d0b3,

Très difficile de donner un conseil sur un framework. Cela dépend essentiellement de tes besoins et de ta vision des services qu'il doit fournir de base.

D'un côté il y a l'usine à gaz où quasiment tout est prévu qui va permettre de répondre fréquemment (et rapidement) à des demandes très différentes et très diverses. Mais elle est lourde, complexe et la formation va demander un investissement certain, sans parler des mises à jour qui sont parfois un peu pénibles (j'ai déjà eu des soucis).

D'un autre côté il y a le truc tout simple, immédiat à prendre en main. Mais qui va nécessiter des compléments avec des tests de compatibilité pour leur intégration.

Entre les deux il y a un grand choix...

J'ai souvent des demandes qu'une personnalisation de Protostar suffit à satisfaire, même s'il faut parfois compléter un peu BS2 ou ajouter une extension par-ci par-là. Peu de documentation mais pas vraiment besoin.

En BS3, Blank est léger et permet de construire son site en partant de la base, il ne comporte que le minimum mais avec quand même compression des css et compilateur less intégré. Pour la documentation, euh... c'est aussi le minimum.

Comme jisse03, j'apprécie YJSG pour la qualité de sa documentation et la richesse de ses fonctionnalités.
Je suis d'ailleurs en train d'étudier la faisabilité d'utiliser Eximium (YJSG v2) pour le site d'aide de l'administration que j'avais créé avec Protostar pour J!3.1 et 3.2 et que je souhaiterais mettre à jour pour J!3.4 dont les écrans d'administration évoluent.

Enfin, le choix dépend aussi des utilisateurs qui peuvent avoir leur idée et demander (voire imposer) d'utiliser un framework particulier ou de personnaliser un template commercial.

Amicalement,
Rajoz

**d0b3** · 21/01/2015, 23h32

Re : Framework

YJSG C'est claire est de loin le plus complet. Seul leur système de licence m'embête. Obligé de prendre la total pour utiliser les templates de façon commercial et je compte uniquement utiliser quelques templates de temps en temps.

Là j'ai un projet depuis hier... Donc tout de suite, j'ai moins de temps. Mais j'essayerai de faire un site en T3 quand j'aurai du temps ; il semble me correspondre dans sa philosophie.

L'autre qui pourrait m'intéresser c'est knacss mais j'ai l'impression que le principe sémantique, qui est excellent de prime à bord, ne correspond plus à l'utilisation d'un développement Less. De plus, avec ce framework je ne sais comment partir avec ses 3 manières d'utiliser la grille... dans ma tête, la bonne manière n'est pas claire

Mais il est claire que sur le long terme, je compte créer ma propre bibliothèque de mixins. Voilà pourquoi seul la grille et le menu m'intéresse...

**lomart** · 22/01/2015, 08h14

Re : Framework

L'autre qui pourrait m'intéresser c'est knacss mais j'ai l'impression que le principe sémantique, qui est excellent de prime à bord, ne correspond plus à l'utilisation d'un développement Less. De plus, avec ce framework je ne sais comment partir avec ses 3 manières d'utiliser la grille... dans ma tête, la bonne manière n'est pas claire

J'aurais aimé éviter les overrides en raison des "mises à jour" nécessaire à ces mêmes overrides.

2 réponses qui se contredisent.

knacss est uniquement un framework CSS très très léger conçu pour faciliter la mise en page. Pour l'utiliser avec Joomla, il faut réécrire toutes les surcharges (Joomla! core et extensions). C'est la solution que j'ai utilisée durant un certain temps, mais devant ce travail colossal et sans fin, j'ai opté pour une autre approche.

Pour la prochaine version de mon site, j'utilise knacss, du moins son principe, sur 2 points :
- le template, pour avoir des colonnes d'égales hauteurs (le mode row/col) ou des blocs annonces sur une même ligne (le mode autogrid). Je n'utilise pas du tout le mode grid qui est très limité
- la rédaction des articles et modules personnalisés, où la notation compacte des classes fait merveille pour la mise en page interne. Une alternative au shortcodes.

Mais bootstrap 2 et 3 sont également présent. La base est BS3, mais j'ai fait des @extend SCSS pour les classes spanX, offsetX de BS2 pour éviter les overrides. Le fait d'utiliser BS3 est plus par plaisir que par nécessité.

Pour le menu, j'utilise une extension externe. Knacss n'en a pas et celui de bootstrap est spartiate.

Donc j'utilise le principe de knacss aux endroits où j'ai une maitrise totale du code généré et bootstrap pour que le core Joomla et les extensions s'y retrouvent.

Je n'utilise pas LESS mais SCSS qui est plus souple et plus puissant pour construire le CSS.

**d0b3** · 22/01/2015, 11h00

Re : Framework

Une réponse intéressante : SCSS, c'est SASS si je ne me trompe pas... Qu'a t-il de mieux ?

Si j'utilisais Knacss, je le chargerais en plus de la version BS de Joomla! pour éviter les overrides.

Entre BS2 et BS3... C'est uniquement les classes (et mixins) de dimensionnement en fonction du support qui m'intéressent en lieu et place des spanX.

"@extend SCSS pour les classes spanX, offsetX de BS2 pour éviter les overrides" -> C'est à dire charger BS3 mais ajouter les classes spanX ?

Sinon j'étais partie de l'idée qu'avec le temps, je créerai ma propre bibliothèque de mixins, il est possible de mélanger celle de plusieurs framework avec mes propres mixins, au final, seul les mixins utilisées seront incluse dans le fichier CSS compilé. J'ai l'impression que c'est là la bonne méthode, les mixins sont ultra puissante...

**lomart** · 22/01/2015, 11h11

Re : Framework

SCSS, c'est SASS si je ne me trompe pas... Qu'a t-il de mieux ?

Oui, c'est une variante d'écriture. SASS a plein de chose en plus: la fonction extend, les variables par défaut, des vraies boucles et instruction de comparaison, une meilleure gestion des chaines, ...

Entre BS2 et BS3... C'est uniquement les classes (et mixins) de dimensionnement en fonction du support qui m'intéressent en lieu et place des spanX.

Oui, j'ai juste étendue les classes .com-md-X pour les spanX avec ce code SCSS

Code:

// Prise en charge des spanX pour les extensions non surchargées
@for $i from 1 through 12 {
    .span#{$i} {
        @extend .col-md-#{$i};
    }
}

**d0b3** · 22/01/2015, 11h21

Re : Framework

Envoyé par lomart Voir le message

Oui, j'ai juste étendue les classes .com-md-X pour les spanX avec ce code SCSS

Code:

// Prise en charge des spanX pour les extensions non surchargées
@for $i from 1 through 12 {
    .span#{$i} {
        @extend .col-md-#{$i};
    }
}

Dans ce cas ci, si jamais ton affichage doit être différent suivant un support, comment fais tu ? Par exemple, si tu as téléchargé une extension qui utilise la classe spanX et que tu aimerais l'afficher différemment sur mobile. Cible tu une ID pour modifier l'affichage (mixins ou autre) ? Ou alors procède tu as un override ?

**lomart** · 22/01/2015, 11h23

Re : Framework

Sinon j'étais partie de l'idée qu'avec le temps, je créerai ma propre bibliothèque de mixins, il est possible de mélanger celle de plusieurs framework avec mes propres mixins, au final, seul les mixins utilisées seront incluse dans le fichier CSS compilé. J'ai l'impression que c'est là la bonne méthode, les mixins sont ultra puissante...

Tout à fait.
Je pars sur une base Bootstrap pour la compatibilité Joomla
J'ajoute une couche de routines (classes) utilitaires knacss personnalisé
et pour chaque template:
- je mets en commentaires les partiels SCSS inutiles
- j'ajoute une personnalisation dans un fichier custom en étendant si besoin les classes originales BS3, Knacss

Avec cette méthode, je n'ai pas du tout modifié les fichiers bootstrap 3

Note: le mixin n'est qu'une procédure qui permet de créer des classes.

**lomart** · 22/01/2015, 11h25

Re : Framework

Dans ce cas ci, si jamais ton affichage doit être différent suivant un support, comment fais tu ? Par exemple, si tu as téléchargé une extension qui utilise la classe spanX et que tu aimerais l'afficher différemment sur mobile. Cible tu une ID pour modifier l'affichage (mixins ou autre) ? Ou alors procède tu as un override ?

Si l'extension n'est pas prévue pour être responsive, il faut rentrer dans le dur : l'override

**d0b3** · 22/01/2015, 14h20

Re : Framework

Tes parties mis en commentaire, ça doit prendre du temps de dingue vu la quantité de less ou sass dans des framework tel quel BS ou Foundation : du temps pour le faire mais surtout du temps pour connaître ces classes. Maintenant c'est claire que le résultat doit être de qualité !

**lomart** · 22/01/2015, 14h29

Re : Framework

Tes parties mis en commentaire, ça doit prendre du temps de dingue vu la quantité de less ou sass dans des framework tel quel BS ou Foundation

J'ai dit: je mets en commentaires les partiels SCSS inutiles

Un partiel en SASS est un fichier qui commence par un underscore pour être importé par le fichier template. Comme en LESS d'alleurs. Mettre en commentaire, la gestion des navbar (par exemle) prend 2 secondes

Framework

Framework

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Annonce

Partenaire de l'association