Mise en page d'articles avec Jetstrap

[porcini]

Re : Mise en page d'articles avec Jetstrap

Il y a tout de même quelque chose qui me chiffonne, quand tu dis qu'il y a certains éditeurs de templates qui n'utilisent pas du tout BS, cela veut dire que BS n’est pas une obligation pour le développement en front-end et que dans ce cas il n'est utilisé que pour le back-end de Joomla?

Prenons le cas de YOOtheme? Comment est-ce qu’ils manient BS? Que du UIkit en front-end ou juste une version allégée de BS + UIkit?

[porcini]

Re : Mise en page d'articles avec Jetstrap

…bref, tout un programme.
Merci pour les liens

[ghazal]

Re : Mise en page d'articles avec Jetstrap

Salut,
je suis bien sur d'accord avec Rajoz.

Quelques précisions :
* certains "templaters" n'utilisent pas du tout bootstrap.
Je pense à joomfreak.com, par ex, bootstrap-free.
Ils font des templates très esthétiques et ont l'avantage d'inclure assez systématiquement K2.
Quelques petits défauts mais qui se corrigent.

* Boostrap 3.x n'est pas rétro-compatible
Oui, mais il existe des références et des outils :

Migrating to v3.x · Bootstrap

http://getbootstrap.com/migration/

Bootstrap 3 Upgrade Service. Convert Bootstrap 2.x to 3.

http://upgrade-bootstrap.bootply.com/

* les templates YOOtheme conservent une version "allégée" des CSS de BS en front.
Ce qui complique un peu l'utilisation (et le choix) de bootstrap en front pour les extensions.

PS: il existe un plugin pour insérer UIKIT dans un template non-YOO
mustaqsheikh/superuikit

https://github.com/mustaqsheikh/superuikit

[porcini]

Re : Mise en page d'articles avec Jetstrap

Bonjour Rajoz et merci pour ces éclairsissements.
Je ne comprennais pas comment YOOtheme pouvait se passer de Bootstrap, mais au fait UIkit est une deuxième couche d’un autre framework qui vient cohabiter avec Bootstrap 2.3.2, je suppose que c'est pour continuer d'évoluer de leur côté sans trop dépendre des évolutions de Bootstrap...

Après quelques recherches sur les forums de YOOtheme j’ai trouvé cette réponse que donne un modérateur:

We have our own equivalent of Bootstrap, called UIkit, it forms part of the WARP framework.
Put simply, our UIkit will not intefere with the use of Bootstrap on your site via Joomla, an extension or if you add your own Bootstrap formatting, or if you use your own Bootstrap components.
We apply our own UIkit in out themes, classes we use are our own UIkit ones, not Bootstrap ones.
WARP 7 is not based on Bootstrap.

[Rajoz]

Re : Mise en page d'articles avec Jetstrap

Bonjour Porcini,

Ce n'est pas forcément deux fois plus de travail. La situation actuelle de Bootstrap dans Joomla! le montre clairement.

Joomla! utilise actuellement la version 2.3.2 de Bootstrap qui n'est plus supportée officiellement. Bootstrap 3.1.0 n'étant pas rétrocompatible, les développeurs de Joomla! vont devoir faire un choix difficile pouvant demander beaucoup de travail : support des deux versions, création d'une passerelle entre les deux versions, évolution obligeant les développeurs à migrer leurs extensions, etc.

YOOtheme, en créant son propre framework, peut le maîtriser totalement : correction des bugs, gestion des évolutions, etc.

Amicalement,
Rajoz

[porcini]

Re : Mise en page d'articles avec Jetstrap

Là, je crois que tu es mal tombé avec un template yootheme parce qu'ils sont parmi ceux qui justement ne s'appuient pas sur bootstrap mais sur leur propre front-end framework, UIKit, pas mal du tout par ailleurs.
UIKit est associé à leur framework WARP.

Salut Ghazal,
je reviens sur ce post, non pas sur le sujet de Jetstrap, mais bien sur la politique de YOOtheme et l’adoption de deux frameworks pour un même thème, à savoir UIkit et Bootstrap.
J’aurais voulu avoir l’avis d’un développeur quant à ce type de manœuvre que j’ai du mal à comprendre.
Quel est l’intérêt à adopter deux frameworks? Ce n’est pas deux fois plus de travail? Tu peux m’éclaircir à ce sujet? Merci

[porcini]

Re : Mise en page d'articles avec Jetstrap

Rien de bouleversant, simplement je pense que si les devs de yootheme ont calibré leurs templates pour leur framework (UIKit), implémenter en même temps bootstrap, alors que les deux font à peu près la même chose, ça fait un peu doublon.

…après UIKit l'équipe de YOOtheme lance son propre CMS PageKit, maintenant on comprend pourquoi leur support est si merdique: Joomla, WordPress et maintenant Pagekit il faudra m'expliquer comment on peut avoir un support digne de ce nom avec quatre gringos à la tête de leur support, (voir bas de page) sans oublier que Monsieur Bob ne répond plus à aucun message depuis le mois de juillet donc ce qui nous ramène à 3 gringos… tout en sachant que l'aide entre utilisateurs est quasi nulle je vous laisse imaginer la qualité de leur support: zéro.
Je regrette d'avoir souscrit un abonnement à leurs templates, maintenant j'y suis lié pour x mois et par contrainte… à bon entendeur...

[porcini]

Re : Mise en page d'articles avec Jetstrap

Salut,
je viens de m’apercevoir que j’ai à nouveau le même problème de redimensionnement à partir des éléments d’une petite boutique en construction via le composant HikaShop, faut-il en déduire que ce composant utilise lui aussi une autre version de Bootsrap? … ça commence à partir dans tous les sens

...simplement je pense que si les devs de yootheme ont calibré leurs templates pour leur framework (UIKit), implémenter en même temps bootstrap, alors que les deux font à peu près la même chose, ça fait un peu doublon

oui en effet, je n’ai toujours pas compris ce changement de direction de la part des devs de YOOtheme, je suppose qu’ils veulent être autonomes à tout point de vue, ainsi tout sera fait maison, mais c’est vrai que tenir à jour plusieurs frameworks cela va être plus du boulot pour eux.
De toute façon de mon côté ce sont les derniers templates que je vais utiliser pour la création de sites, non pas parce qu’ils ont changé de framework, mais parce qu’ils ont un support exécrable et ça pour moi c’est inacceptable.

[ghazal]

Re : Mise en page d'articles avec Jetstrap

En indiquant JHtml::_('bootstrap.loadCss', true); dans le fichier template.config.php je demande à mon template de charger le fichier bootstrap.css qui se trouve dans le dossier media/jui/css/.

Correct.
Plutôt LES fichiers CSS, y compris les fichiers bootstrap "extended" et "responsive".

j’évite à mon template de charger le fichier bootstrap.css propre au template YOOtheme.
Par contre à chaque mise à jour de warp c’est rebelote pour les changements (commenter les lignes) dans le fichier head.php

Correct.
Pour l'update, il arrive un moment du dev joomla où on controle ce qu"on fait.

Je ne comprends toujours pas cette réticence avec Bootstrap et les templates YOOtheme, c’est par rapport à quoi?

LOL.
Rien de bouleversant, simplement je pense que si les devs de yootheme ont calibré leurs templates pour leur framework (UIKit), implémenter en même temps bootstrap, alors que les deux font à peu près la même chose, ça fait un peu doublon.

Ils ont d'ailleurs mis en place l'équivalent de jetstrap :

http://www.getuikit.com/docs/customizer.html

[porcini]

Re : Mise en page d'articles avec Jetstrap

… ça marche

Par contre j’aimerai bien comprendre la manoeuvre effectuée, sinon ça va m’énerver et je vais me sentir con pendant le restant de mes jours… donc si tu peux me dire si mon raisonnement et juste…

En indiquant JHtml::_('bootstrap.loadCss', true); dans le fichier template.config.php je demande à mon template de charger le fichier bootstrap.css qui se trouve dans le dossier media/jui/css/.

En commentant dans le fichier head.php les lignes:

// load bootstrap styles
/*
if ($bootstrap = $this['path']->url('css:bootstrap.css')) {
$this['system']->document->addStyleSheet($bootstrap);
}
*/

j’évite à mon template de charger le fichier bootstrap.css propre au template YOOtheme.
Par contre à chaque mise à jour de warp c’est rebelote pour les changements (commenter les lignes) dans le fichier head.php…

Je ne comprends toujours pas cette réticence avec Bootstrap et les templates YOOtheme, c’est par rapport à quoi?

[ghazal]

Re : Mise en page d'articles avec Jetstrap

Hey,
NB: je m'appuie sur yoo_master

normalement, tu devrais pouvoir te baser sur :

JHtml::_('bootstrap.loadCss', true);

pour les CSS, si tu n'as pas besoin de bootstrap JS

Rajoute cette ligne dans :
templates/yoo_master/layouts/template.config.php
vers la ligne 75

// load css
JHtml::_('bootstrap.loadCss', true);
$this['asset']->addFile('css', 'css:base.css');
$this['asset']->addFile('css', 'css:layout.css');
$this['asset']->addFile('css', 'css:menus.css');

Mais (j'ai pigé d'où vient cette version css allégée de bootstrap) il faut commenter ces lignes dans :
templates/yoo_master/warp/systems/joomla/layouts/head.php

// load bootstrap styles
/*
if ($bootstrap = $this['path']->url('css:bootstrap.css')) {
$this['system']->document->addStyleSheet($bootstrap);
}
*/

Comme cela, tu ne récupères que les fichiers bootstrap du package présents dans

media/jui/css/

Mais je persiste à penser que ce n'est pas une super idée de tester bootstrap dans un template yootheme.

[porcini]

Re : Mise en page d'articles avec Jetstrap

... fini les vacances, retour à la case départ... et dans le bordel de mes travaux à la maison, pas marrant comme retour

Tout d’abord merci pour la réponse et le temps dédié à résoudre mon problème.
Donc si j’ai bien compris le fichier qui pose problème est le fichier Bootstrap en relation au template YOOtheme?
J’avoue être un peu pommé avec tous ces fichiers Bootstrap, il y en a beaucoup dans la hiérarchie de Joomla…
Quelle serait alors la meilleure solution pour avoir un fichier Bootstrap adoptant le même comportement que celui par exemple du template Beez3? …ou devrais-je plutôt dire quels sont les fichiers Bootstrap à comparer et à corriger afin d’avoir le résultat souhaité?

[ghazal]

Re : Mise en page d'articles avec Jetstrap

Autant pour moi pour bootstrap.js qui effectivement ne gère pas les "grids".

En revanche, du point de vue CSS, il y a peut-être un pb sur ta version (sur toukoul).
J'ai fait un quick diff sur
bootstrap.css original/
bootstrap.css joomla315/
bootstrap.css ta version

- entre bootstrap.css original et bootstrap.css ta version
pas mal de différences
- entre bootstrap.css original et bootstrap.css joomla315 (in /media/jui/css/bootstrap.css)
quelques petites diffs, surtout au niveau .modal

* suggestion
faudrait peut-être récupérer aussi bootstrap-responsive.css
in /media/jui/css/bootstrap-responsive.css

checker qd même les conflits potentiels avec responsive.css de Yootheme

Cela dit, il y a aussi la maniere dont le bloc bootstrap est appelé, via l'API joomla (JHtml::_('bootstrap.framework'); ) ou ta méthode perso.

[porcini]

Re : Mise en page d'articles avec Jetstrap

… heu, pour être honnête j’ai du mal à suivre le dernier message...

J’ai peut-être oublié d’expliquer la partie la plus importante.
Le template que j’utilise intègre Bootstrap mais n’est pas responsive, il y en a un petit paquet chez YOOtheme sous Warp 6 qui ne le sont pas (ils sont repris dans le tuto que je link plus loin).
Pour pallier ce manque j’ai trouvé un tuto qui explique la procédure à suivre et je dois dire que la mise à jour fonctionne bien: mise en page fluide, dimensions en %… bref tout fonctionne SAUF le problème que j’ai énoncé plus haut.

Puisqu’une image vaut mieux qu’un grand discours, voici mon problème illustré.

Ici le projet Jetstrap.
Avec une structure de type:

<div class="container">
  <div class="row-fluid">
    <div class="span4">
      <h3> Span 4 </h3>
      <p> Content </p>
    </div>
    <div class="span4">
      <h3> Span 4 </h3>
      <p> Content </p>
    </div>
    <div class="span4">
      <h3> Span 4 </h3>
      <p> Content </p>
    </div>
  </div>
</div>

les blocs se redimensionnent normalement et arrivés à une certaine taille d’écran ils se superposent les uns en dessous des autres. Tout est ok.

Ici le site en construction et la page qui me donne du souci.
Avec la même structure énoncée plus haut, le bloc principal et son contenant restent figés, par contre mon composant com_content lui se redimensionne sans problème.
Si je change la classe container en container-fluid (c'est la règle que j'ai adopté dans mon cas) le problème est résolu à moitié, le contenant se redimensionne, mais arrivé à une certaine résolution d’écran les blocs ne se superposent jamais, ils rétrécissent jusqu’à rendre le contenu illisible… that’s my problem!

Donc pour faire bref, on va dire que cela fonctionne à moitié et pas vraiment comme c'est le cas dans Jetstrap ou dans le template Beez3...

[ghazal]

Re : Mise en page d'articles avec Jetstrap

ah !
dans mon yoomaster warp 6, seulement les css, pas le JS.

Dans head.php
yoo_master/warp/systems/joomla/layouts/head.php

// load jQuery
JHtml::_('jquery.framework');

// load bootstrap styles
if ($bootstrap = $this['path']->url('css:bootstrap.css')) {
	$this['system']->document->addStyleSheet($bootstrap);
}

JHtml::_('jquery.framework');

ne charge QUE jQuery

Ref :
J3.1:Javascript Frameworks - Joomla! Documentation

http://docs.joomla.org/Javascript_Frameworks