Appearance

Frontend - LESS, Grunt, skins ​

Modele ​

Le frontend est par skin. Pas de bundler moderne : le CSS est ecrit en LESS et compile en CSS par Grunt (grunt-contrib-less). Cote JavaScript, librairies classiques : jQuery 3.5.1, DataTables 1.10.21, datetime-moment, moment.js 2.26.0.

Arborescence design ​

design/
├── v2/<skin>/                 # un dossier par client
│   ├── Gruntfile.js           # mapping LESS -> CSS (source + double destination)
│   ├── package.json           # dependances grunt
│   └── Skins/<SkinName>/
│       ├── Less/              # sources LESS (MAIN.less, richTextEditor.less, ...)
│       ├── Css/               # CSS compile (genere - ne pas editer)
│       └── Webparts/<part>/Less|Css/   # styles par webpart (Menu, ...)
├── common/                    # assets partages (ex. CssDatepicker)
└── backend/                   # styles backoffice

Grunt ​

Le Gruntfile.js de chaque skin declare une tache less qui compile chaque .less vers deux destinations :

  • la destination locale du design (Skins/.../Css/...)
  • la destination dans le site : ../../../website/Site/Skins/.../Css/...

Cela permet de voir le resultat directement dans website/ pendant le dev. Mode watch :

bash
cd design/v2/<skin>/
npm install
npm install -g grunt-cli
grunt          # watch : recompile les LESS modifies en CSS

Toolchain casse sur Node moderne : les package.json des skins figent grunt ~0.4.5 + grunt-contrib-less ~0.11 (less 1.7), incompatibles avec Node recent (constate avec Node 25, 2026-09). Contournement : compiler avec npx -y less@3.13.1 Skins/<Skin>/Less/MAIN.less <sortie> (meme mode math que less 1.x), MAIS le formatage de sortie differe du CSS committe (~400 lignes de bruit sur un MAIN.css) -> ne pas recommitter la sortie brute ; verifier la regle produite dans la sortie puis reporter chirurgicalement le changement dans le .css committe, LESS d'abord (le .less reste la source de verite). Alternative propre : vieux Node (8/10) via nvm.

Multi-skin par client : quand un client a plusieurs variantes de design (ex. actiondiabete : Gruntfile.js = Ad2020, Gruntfile.js___DIABVS = Diabvs), le Gruntfile.js actif cible UN skin ; utiliser grunt --gruntfile Gruntfile.js___XXX less (ou permuter les fichiers) pour compiler l'autre.

Integration au build Cake ​

Lors du Postbuild, les CSS/JS et assets du skin sont copies depuis design/ et Nanoxi.Cms.Resources/ vers website/. Le watch Grunt ecrit deja dans website/Site/Skins/..., donc en dev local on n'a pas besoin de relancer le postbuild pour un simple changement de style.

Regles ​

  • Ne jamais editer les .css compiles : editer le .less source dans design/v2/<skin>/Skins/.../Less/ puis lancer grunt.
  • Les styles du backoffice / RTE (richTextEditor.less) suivent la meme mecanique.
  • Les patches umbraco.css (backoffice Umbraco) sont a part : source de verite Nanoxi.Cms.Resources/Umbraco/assets/css/umbraco.css, a reappliquer a chaque update Umbraco (voir patterns.md).

Contributors

No contributors

Changelog

No recent changes