La framanav surcharge certains CSS de framasoft.net

[leblanc-simon]

Avec la nouvelle framanav, certains CSS (a:hover par exemple) sont surchargés par rapport au site principal (sur fs.net, le a:hover { color: #f80 } est surchargé par bootstrap : { color: #005580 })

4 possibilités :

• on ne fait rien :-)
• on ajoute #framanav devant chaque éléments de définition CSS sur le CSS bootstrap de la framanav (mais cela signifie qu'il faudra inclure un fichier CSS bootstrap en plus de la framanav pour un site fait avec bootstrap)
• on fait un CSS spécial framanav ne reprenant que les éléments utile à la framanav (copier/coller du code de bootstrap utilisé par la framanav en le préfixant de #framanav)
• quand on repère une surcharge sur le site principal, on ajoute !important dans le CSS du site principal

Je ne suis pas certain d'avoir la vision correcte sur l'utilisation de la framanav, je vous laisse le choix de la solution et je m'occupe de faire un pull request avec la solution mise en place (ou non dans les cas 1 et 4 :-))

[pyg77]

Chaque solution a ses avantages et inconvénients. Et ma préférence allait à la n°1, afin

• de garder une compatibilité la plus grande possible avec bootstrap (parce que rien ne dit qu'on ne va pas ajouter des fonctionnalités à la nav au fur et à mesure)
• de conserver une forme de cohérence graphique entre les différents sites (polices, champs, etc, et donc couleurs de liens :p ). Cette cohérence est bien évidemment limitée, mais elle permet de retrouver une certaine unité visuelle entre nos sites.

Bref, pour moi, c'était plutôt "solution 1" avec la possibilité de surcharger dans un fichier spécifique de la Framanav (cf define("FNAV_EXTRA_CSS", false); dans https://github.com/framasoft/framanav/blob/master/conf/config.default.php ). Cf http://www.framasoft.net/framanav/extra.css par exemple.

Mais bon, je reste ouvert à la discussion pour toute autre solution qui serait plus pertinente. (pour les solutions 2 et 3, j'avais regardé du côté de LESS et de https://github.com/vic/prefix-css mais bon ça nous oblige à nous séparer de la branche officielle)

[freepius]

Il ne faut pas se leurrer, à un moment ou un autre, les projets framasoft auront probablement besoin de personnaliser bootstrap. En effet, ses CSS par défaut sont relativement limitées. Beaucoup de projets Web choisissent la personnalisation :

• soit via la page de customisation de boostrap : http://twitter.github.io/bootstrap/customize.html ;
• soit directement depuis les sources LESS.

Cette dernière solution est très simple, et vous permettra de réaliser les possibilités 2 et 3, proposées plus haut. Voici comment faire.

Dans une console Unix, faire :

$ git clone https://github.com/twitter/bootstrap.git
$ git clone https://github.com/leafo/lessphp

Note : lessphp est un compilateur écrit en Php, pour les fichiers LESS. Vous pouvez aussi utiliser le compilateur "officiel" du projet LessCSS.org (mais qui est plus compliqué à installer).

Au même niveau que les dossiers boostrap et lessphp, créez un fichier main.less contenant seulement ceci :

#framanav {
    @import "bootstrap/less/bootstrap.less";
}

Puis, compilez votre fichier LESS : $ ./lessphp/plessc main.less main.css

Toutes les règles CSS ainsi générées dans le fichier main.css seront préfixées par #framanav. De plus, vous pouvez tout à fait modifier les fichiers :

• bootstrap/less/bootstrap.less, afin de choisir les fonctionnalités bootstrap à inclure ou non.
• bootstrap/less/variables.less, afin de personnaliser les variables bootstrap (les couleurs, les marges, etc.).

Avec cette solution, pas de problème pour suivre la branche principale du projet bootstrap. Un petit git pull régulier dans le dossier bootstrap, et c'est bon !

[qtheuret]

Merci Mathieu pour ce précieux conseil !

2013/4/19 Poisbeau Mathieu notifications@github.com

Il ne faut pas se leurrer, à un moment ou un autre, les projets framasoft auront probablement besoin de personnaliser bootstrap. En effet, ses CSS par défaut sont relativement limitées. Beaucoup de projets Web choisissent la personnalisation :

• soit via la page de customisation de boostrap : http://twitter.github.io/bootstrap/customize.html ;
• soit directement depuis les sources LESS.

Cette dernière solution est très simple, et vous permettra de réaliser les possibilités 2 et 3, proposées plus haut. Voici comment faire.

Dans une console Unix, faire :

$ git clone https://github.com/twitter/bootstrap.git $ git clone https://github.com/leafo/lessphp

Note : lessphp est un compilateur écrit en Php, pour les fichiers LESS. Vous pouvez aussi utiliser le compilateur "officiel" du projet LessCSS.org (mais qui est plus compliqué à installer).

Au même niveau que les dossiers boostrap et lessphp, créez un fichier main.less contenant seulement ceci :

framanav {

@import "bootstrap/less/bootstrap.less";

}

Puis, compilez votre fichier LESS : $ ./lessphp/plessc main.less main.css

Toutes les règles CSS ainsi générées dans le fichier main.css seront préfixées par #framanav. De plus, vous pouvez tout à fait modifier les fichiers :

• bootstrap/less/bootstrap.less, afin de choisir les fonctionnalités bootstrap à inclure ou non.
• bootstrap/less/variables.less, afin de personnaliser les variables bootstrap (les couleurs, les marges, etc.).

Avec cette solution, pas de problème pour suivre la branche principale du projet bootstrap. Un petit git pull régulier dans le dossier bootstrap, et c'est bon !

— Reply to this email directly or view it on GitHubhttps://github.com/framasoft/framanav/issues/1#issuecomment-16640913 .

Quentin THEURET

"La route est longue, mais la voie est libre…" www.framasoft.org

Framasoft ne vit que par vos dons (déductibles des impôts). Merci d'avance pour votre soutien ;-) soutenir.framasoft.org

Framasoft, sa vie, son œuvre, sur une seule page : fr.wikipedia.org/wiki/Framasoft

Nous suivre sur :

• Identica : identi.ca/framasoft
• Twitter : twitter.com/framasoft
• Facebook : www.facebook.com/framasoft

[pyg77]

Bonjour, je m'étais posé la question pour LESS, mais cela me paraissait un peu lourd à mettre en oeuvre juste pour préfixer des classes (Framasoft étant un joyeux bazar en terme de serveurs (11 ou 12, je ne les comptes même plus :p) ). Et du coup rajouter LESS aurait encore rajoutée une couche logicielle sur un serveur. Mais je ne connaissais pas lessphp, et cela me parait effectivement une excellente solution.

Du coup, merci pour le tutoriel détaillé ;-)

Le seul "frein" pour moi à utiliser LESS, c'est que dans certains cas, il est "utile" pour nous d'intégrer bootstrap sur l'ensemble du site (cf par exemple la version de dev de http://dev.framadate.org ) Cela permet d'avoir une certaine cohérence graphique (champs de formulaires, alertes, etc) sans avoir à intégrer un bootstrap.css et un bootstrap-framanav.css (je sais pas si je suis clair, là)

Enfin bref, c'est effectivement une solution à tester, alors merci encore ;)

[freepius]

Pour votre «frein» à l'utilisation de LESS, voici mon avis.

Comme la Framanav est (presque) commune à tous les projets framasoft, cela semble cohérent qu'elle ait son propre CSS (à inclure dans tous les sites, qu'ils utilisent bootstrap ou non). Ce CSS étant indépendant, il serait alors très malin d'enlever toutes les inclusions inutiles dans le fichier bootstrap/less/bootstrap.less, puis de minifier le fichier CSS résultant. Vous gagnerez en légèreté de page à faire cela, le CSS ne contenant plus que le strict minimum pour la Framanav.

Une autre solution est :

• Inclure le fichier bootstrap-framanav.css dans les projets n'utilisant pas bootstrap.
• Inclure seulement le fichier boostrap.css sinon.

Mais, perso, j'opterais pour la «règle unique» : un CSS indépendant pour la Framanav.

Une note sur Lessphp : c'est un projet très actif, solide (bien testé, bcp utilisé...) et qui suit relativement de près sont cousin «officiel» de LessCss.org. Vous pouvez tout à fait ne l'utiliser qu'en local. Le but ici est de générer un CSS à mettre sur les serveurs (mieux vaut, dans tous les cas, écrire une procédure de génération de ce CSS).

Sinon, c'est avec plaisir pour le petit coup de main :-) !

[pyg77]

J'avais effectivement évalué la possibilité de ne garder uniquement les CSS utilisées par la framanav.

Je ne l'ai pas fait pour plusieurs raisons :

• manque de temps (et oui, on a tendance - comme partout - à travailler dans l'urgence) : les classes sont souvent interdépendantes et faire un "nettoyage" en repérant chaque classe utilisée - en prenant en plus en compte les classes responsive - prendrait un certain temps (sans doute payant au final, je ne dis pas le contraire)
• j'imaginais mal une mise à jour simple de ces classes (bon, après, on peut certes se dire que la nav n'est pas sensée bouger, mais qui sait)

Bref, ce sont peut être de "mauvais" arguments, j'en conviens ;)

Quoi qu'il en soit, je pense me repencher rapidement sur le sujet, tant que la framanav n'est pas déployée sur chaque site...

[freepius]

Oui, c'est sûr, le travail aurait été titanesque et complètement abrutissant, s'il avait fallait toucher directement le fichier CSS.

Mais l'opération se révèle très facile en manipulant les LESS, que ce soit pour supprimer les fonctionnalités inutiles, ou pour mettre à jour les classes.

En tout cas, bon courage pour le déploiement de cette Framanav. Elle apporte bcp de clarté est est très propre ! Et puis, à l'occasion, si jeu peux donner un coup de main... :-)