Appearance

Frontend - skins, Grunt, LESS, webparts ​

Le frontend de StarterKit v2 est anteneur a Vite/Sass : il repose sur Grunt + LESS, avec Bootstrap 3. Chaque client (skin) a son propre dossier de design et sa propre compilation.

Arborescence design ​

design/
├── v2/                       # Design courant (par client)
│   ├── <skin>/
│   │   ├── Gruntfile.js       # Compilation LESS -> CSS (mappe source.less -> target.css)
│   │   ├── package.json       # grunt + grunt-contrib-less + grunt-contrib-watch (Grunt 0.4)
│   │   └── Skins/
│   │       ├── Default/        # Le skin "Default" du client
│   │       │   ├── Less/        # Sources LESS (Bootstrap/, Starterkit/, MAIN.less, ...)
│   │       │   ├── Css/         # CSS compile (genere - ne pas editer)
│   │       │   ├── Webparts/    # Un dossier Less/Css par webpart (Menu, Breadcrumb, Tabs, ...)
│   │       │   ├── Widgets/     # Un dossier Less/Css par widget (Slider, Gallery, GoogleMap, ...)
│   │       │   ├── Foundation/  # Base de styles
│   │       │   ├── Fonts/ Favicons/
│   │       └── Less/            # Bootstrap/ + Starterkit/ partages au niveau Skins
│   ├── _gruntall.sh / _rebuildall.sh
├── v1/                       # Ancien design (legacy)
└── common/                   # CSS communs (CssCommon, CssDatepicker, CssFancybox, ...)

Compilation (Grunt + LESS) ​

  • Outil : Grunt 0.4 via grunt-contrib-less (et grunt-contrib-watch pour le mode watch).
  • Le Gruntfile.js de chaque skin liste explicitement les paires source.less -> target.css. Il ecrit deux fois chaque CSS : dans design/v2/<skin>/Skins/... (source versionnee) ET dans ../../../website/Site/Skins/... (site compile, pour le dev local).
  • LESS organise en Bootstrap/ (Bootstrap 3 complet : grid, navbar, modals, forms, ...), Starterkit/, et un MAIN.less qui agrege le tout. Options de compile : compress, yuicompress, optimization: 2.
  • Granularite : un point d'entree LESS par webpart et par widget (ex. Webparts/Menu/Less/wp-menu.less -> wp-menu.css).
  • Scripts utilitaires : design/v2/_gruntall.sh / _rebuildall.sh pour (re)builder tous les skins.

Webparts vs Widgets (cote frontend) ​

  • Webparts : blocs de chrome / fonctionnalites de page (Menu, Breadcrumb, Search, Tabs, ExpandCollapse, Print, Fontsize, ContrastAccessibility, HomeBanner, FooterBanner/Credits, SiteMap, Timeline, LightBox, Popup*, Intranet, ...). Souvent rendus par macros/UserControls Umbraco.
  • Widgets : blocs de contenu editorial (Slider, Gallery, GoogleMap, Document, LinksList, Newsletter, NextEvents, Teaser*, Social*, Twitter, FacebookFaces, CFFcards, BlogLastArticleGrid, ...). Cote C# : Nanoxi.Content.Widgets (voir ../modules/widgets.md).

Important ​

  • Ne jamais editer les .css generes (sous Skins/.../Css/ ni sous website/). Editer les .less puis recompiler avec Grunt.
  • L'accessibilite est prise en charge cote skin (webparts ContrastAccessibility, Fontsize).
  • Les libs JS tierces sont sous libraryjs/ (fullcalendar, jquery-file-upload, select2, jquery.pwstrength.bootstrap) ; d'autres sont listees dans Readme.md (datepicker Bootstrap 3, cookieconsent, store2, ...).
  • C'est une stack datee (Grunt 0.4, Bootstrap 3, jQuery) : a documenter tel quel, ne pas supposer un equivalent v4 (Vite/Sass).

Contributors

No contributors

Changelog

No recent changes