Dans la meme lignée [2] que ZPIP, seconde distribution de squelettes à laquelle il est de plus en plus associé, ce concept reprend les mêmes idées de factorisation.
L’ambition de cette page n’est que de centraliser/mémoriser les informations échangées, en particulier sur IRC à titre d’archive...
Page en travaux
Quelques liens de documentation existante
rappel des notions de base (Spip 1.9 de 2007, mais tout n’a pas changé... preuve qu’il s’agit d’un sujet récurrent !!) https://contrib.spip.net/Analyse-de..., https://contrib.spip.net/Comment-an... et https://contrib.spip.net/Variations..., et de façon plus ’visuelle’ https://contrib.spip.net/Colorier-l...
les efforts de Spip-Contrib avec deux orientations https://contrib.spip.net/Squelettes pour la présentation des données lues complété par https://contrib.spip.net/Themes pour surcharger uniquement l’apparence [3]
un mot-clé mot 194 de Contrib pour retrouver des Rubriques :
la démarche d’intégration de site Web illustrée : un premier exemple https://contrib.spip.net/Arborescen... complétée par https://contrib.spip.net/Reglage-de...
problème : possibilités limitées, statiques, car on reste au niveau du WebMestre travaillant sur les squelettes !
également, un plugin propose de compléter les feuilles de styles écrites https://www.paris-beyrouth.org/tuto....
Pour aller plus loin, il faut faire appel à des traitements appliqués à la génération automatique de feuilles de styles, en fonction de paramètres factorisés : c’est là qu’interviendra https://lesscss.org/
Less et SPIP
La premiere explication à lire est fournie par Romy, avec la mise-à-jour sur le site officiel des plugins, et le code source.
On consultera l’introduction LESS, ou celle proposée par OpenClassRooms...
Surcharges des feuilles LESS
Le dossier bootstrap2spip/
contient des feuilles de style LESS qui surchargent celles de BootStrap. Voyons un exemple concret avec la feuille alerts.less :
/* importer la feuille d'origine de BootStrap */
@import "bootstrap/css/alerts.less";
/* Ajout des classes info, success, warning, error utilisées dans SPIP */
.info {.alert; .alert-info;}
.success {.alert; .alert-success;}
.warning {.alert;}
.error {.alert;.alert-error}
Ici on voit que la surcharge pour SPIP utilise complètement le fichier natif de BootStrap en lui ajoutant simplement quelques définitions qui héritent de BootStrap. C’est le cas de la plupart des surcharges du dossier bootstrap2spip/
à l’exception de la typographie complètement reprise de SPIP.
Maintenant, à l’occasion de SPIP 3, Cerdic intègre
cerdic :
j’utilise less comme base, et pour faire les declinaisons
et apres je les compile en statique
pour que ça tourne sans less
et la base c’est juste une adaptation de basecss de tetue
en less
Z il utilise #CSS
donc ça prendra ton grid.less
c’est l’astuce de la balise #CSS
il remplace grid.css par grid.less s’il existe
avec zpip-less
Mais Ce n’est pas (encore) documenté/expliqué, donc....
où trouver les bonnes sources ?
Framework CSS : Less, Compass, SASS
Août 2013
Les framework CSS permettent de gérer ses feuilles de style beaucoup plus efficacement en évitant de dupliquer du code.
Le langage CSS (utilisé pour mettre en page une page web HTML) est assez limité au niveau de sa syntaxe. En effet, une feuille de style n’est rien d’autre qu’une succession de sélecteurs CSS auxquels on attribue des propriétés CSS comme la couleur de fond, les marges ou la police de caractère. CSS est un langage déclaratif plus qu’un réel langage de programmation, il n’est par exemple pas possible de créer une variable en CSS.
C’est dans ce contexte que sont apparus plusieurs solutions visant à rendre le CSS flux flexible et plus productif, ce sont les framework CSS. Il en existe plusieurs, voici les principaux :
LESS CSS
LESS CSS (https://lesscss.org/) est le framework CSS le plus populaire, il est utilisé par nombre de projets et notamment par le bootstrap de twitter. Pour résumer, LESS ajouter ces fonctionnalités au langage CSS :
Variable CSS
C’est très utile pour déclarer une couleur par exemple. En général le webdesign d’un site internet utilise un jeu de couleurs très limité, qui revient souvent. Si on souhaite changer le thème coloriel, il faut mettre à jour toutes les occurrences de cette couleur, ce qui est long est fastidieux. Grâce à LESS, il suffit de définir une variable pour chaque couleur, et ensuite de référencer cette variable dans les propriétés CSS.
Exemple :
/* Déclaration d’une variable couleur */
@color : #e7e7e7 ;
/* Utilisation de la variable */
div#header background-color : @color ;
#content h1 color : @color ;
Mixins
Elles permettent de réutiliser des blocs de règles prédéfinis. On peut par exemple s’en servir pour gérer les coins arrondis avec border-radius, sans devoir se palucher toutes les règles CSS avec les préfixes navigateur (-webkit, -moz...).
Exemple :
.coins-arrondis (@radius: 10px){
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}
div#header{
.coins-arrondis;
}
#content h1{
.coins-arrondis(20px);
}
Règles imbriquées
Comme son nom l’indique, cette fonctionnalité sert à imbriquer des sélecteurs pour éviter d’avoir des préfixes à rallonge.
Opération CSS
Il devient possible d’utiliser des opérateurs arithmétiques en CSS pour donner une valeur relative à une propriété. On peut par exemple définir que la largeur de la bordure de tel élément est le triple de la largeur de la bordure de tel autre élément, ou de telle variable.
Fonction CSS
Il s’agit d’un ensemble de fonctions utiles ajoutées par LESS et qui sert par exemple à modifier à la volée la saturation d’une couleur (et donc d’avoir une couleur relative à une autre), comme pour changer la couleur d’arrière-plan d’un bouton au survol en CSS.
Comment fonctionne LESS ?
LESS fonctionne à l’aide d’un fichier Javascript less.js
qui transforme le code LESS en code CSS natif au chargement de la page. Comme vous pouvez vous en douter, cela peut potentiellement ralentir légèrement le temps de chargement des pages car le navigateur doit exécuter le code less.js pour générer le rendu de la page.
C’est pour cette raison qu’il existe aussi un compilateur less (lessc) qui permet de générer le CSS natif côté serveur. Dans ce cas rassurez-vous, ça n’augmentera pas la charge du serveur, puisque la feuille de style ne doit être recompilée à chaque modification des sources (fichier .less). En général il vaut mieux utiliser cette seconde solution, elle est plus propre bien qu’elle soit aussi plus fastidieuse (surtout lors du développement) puisqu’il faut penser à recompiler à chaque modification. De plus, le compilateur (programme lessc) ne fonctionne que sur Unix (linux et Mac OS), et pas sous windows (qui pourra utiliser SimpLESS).
Ne partez pas, les inconvénients dont je vous parlais ci-dessus n’en sont pas, car il existe une application très utile qui s’appelle SimpLESS et qui est absolument géniale !
SimpLESS
SimpLESS est un petit logiciel pour Windows et Mac OS qui recompile automatiquement dès que vous modifiez les sources LESS, comme ça le fichier CSS est toujours à jour et vous n’avez plus à vous soucier vous même de la compilation.
Vous pouvez le télécharger sur le site officiel :https://wearekiss.com/simpless.
SASS (Syntactically Awesome Style)...
Et après...
Evidemment, on pense à LESS pour reprendre l’accès à BootStrap :
actuellement il y a déja une intégration de BootStrap v2 dans Spipr
d’où le plugin Less pour Spip (basé sur une bibliothèque .php)
Mais BootStrap est déja en V3 ; et sa V4 quitte LESS pour SCSS !
Article publié le 22 juillet 2014, et actualisé en juillet 2016 .
Répondre à cet article