PMSIpilot UI, le thème bootstrap made in PMSIpilot

Chez PMSIpilot, nous développons une multitude d’applications web, que ce soit pour nos clients, ou pour des outils internes. Et pour chaque application, nous sommes confrontés à la problématique du design, de la cohérence par rapport aux autres applications. L’idée d’avoir une base commune s’est donc rapidement imposée.

riad-query

Préconisations

  • Lorsqu’on parle de librairie graphique CSS, on pense souvent à Twitter Bootstrap. Donc pour simplifier l’intégration de nos applications (majoritairement Angular.js) avec les différentes librairies Javascript qui génèrent du code Bootstrap ready, nous avons décidé de développer notre librairie sous forme de thème Bootstrap.
  • Aussi, nos applications doivent avoir la même base, mais une identité unique à chacune des applications à travers les couleurs. Nous avons donc mis en place un système de thème assez simple pour permettre à chaque application de choisir trois couleurs principales.
  • Avec un versionning en semver, et une compilation less effectuée au plus tard (côté application), le workflow de mise à jour du design de nos différentes applications s’est retrouvé grandement amélioré.

Téléchargement
La librairie UI est disponible sur Github et une démo est disponible ici.

Utilisation

Installer la librairie

bower install pmsipilot-ui --save

Inclure les less, et personnaliser son thème

@import 'bower_components/fontawesome/less/font-awesome';
@import 'bower_components/bootstrap/less/bootstrap';
@import 'bower_components/pmsipilot-ui/less/bootstrap';

body {
    .theme-colored(@themeColorOne, @themeColorTwo, @themeColorThree);
}
 

Riad

Lead Developper Frontend @PMSIpilot, Computer Science Engineer (INSA Lyon, USTO Oran), Amateur photographer share about various topics: Web, Technology, ...

 

Laisser un commentaire