Spipr Spip-R

-  presentation d’un site multi-definitions

• 1024
• 600
• 300 (avec redimensionnement des images)

Les plugins :
-  bootstrap
-  less
-  spip-r
-  Z-core

D’autes plugins utiles :
-  cesure (pour couper correctement les mots de textes dans des petites largeurs..)
-  intranet/extranet pour forcer l’identification
-  Acces restreint
-  un plugin complementaire pour forcer l’inscription dans une/des zones par saisie d’un code personnalisé
-  CS (pour troller ;-)
-  un plugin

Utilisation de préprocesseurs de CSS (SASS et LESS) : voirhttp://blog.humancoders.com/les-id-...
(voir également le plugin des CSS Imbriquées d’Arno)

Fonctionnement générique

-  le fichier body.html (contenant egalement des sémantiques HTML5 )
-  intégrer LESS : utiliser boot-theme.less =>
@import « css/boot-theme-all.less » + les trois @import « css/boot-theme-XXX.less » (qui sont des CSS-ike ! )
acces par des media -querys : sur un min-width par exemple..

• difficulté de retrouver la compléteion et la coloration syntaxique : typer .lessdans l’IDE comme .css
• possibilites de surcharges globales faciles : une syntaxe fort interessante
  • les surcharges sont ecrites en mode arborescent..
  • le compilateur less donne des indications d’erreur de syntaxe faciles à voir dans FF
  • mais les modifications de FireBug -les lignes signalées- sont inutilisables :

-  facilité de gestion :
-  necessite de bien comprendre les regles des CSS natives
-  génération de beaucoup de code CSS d’un volume/complexité infernal...
-  attention aux chemins : mais il est possible d’utiliser directement le chemin relatif (cf Marcimat !)
-  bootstrap est développé en priorité pour construire des interfaces applicatives..
-  il est aussi considéré que Bootstrap est trop « intrusif » sur les restrictions de design, sinon l’intégrateur est obligé de refondre fortement le généré pour retrouver les enrichissements et regles de typo..

cela télécharge toutes les feuilles....

mobile-first ou pas ??

Definitions : (zoom texte ou graphiques /pixels)
-  pour la taille de typo : exprimer en unite relative : em ou pourcentage
(mais bootstrap est aligné en pixels et pas en pourcentage)
-  pour la largeur d’ecran : deux écoles :
s’opposent

• traditionnellement on exprimait les seuils en pixels
• expression en em conseillée par certains (selon le seuil de zoom)
  Noter que les comportements des nouveaux objets arrivant ont des comportements divergents, sans compter les effets de marche selon les seuils... [1]
  (l’idée vient de proposer plus de seuils...) il s’agit alors de prendre en compte la largeur de lecture ; et les brakpoints utilisés (y compris dans BootStrap) sont souvent basés sur les matériels Apple : il faut plutot se limiter à deux seuils différents (cela offre trois tailles)...

Attention également à la gestion des images : ne pas utiliser image_reduire, mais attention aux grosses images fournies par

Voir les deux plugins responsive d’Arno et Cedric