Framework
Vous trouverez ici tout ce qu’il vous faut pour utiliser SipaUI dans votre site. Les composants bien sûr, mais aussi les éléments de bases (les « fondations ») comme la grille, les marges, les classes d’aide… ainsi que les fonctionnalités JavaScript disponibles. Vous trouverez aussi comment installer SipaUI dans votre site.
Cas d’usages
Si vous produisez du contenu pour le groupe SIPA, vous serez confrontés à 2 cas d’usage différents : la création d’un nouveau site ex nihilo ou bien l’intégration d’un bloc de contenu dans un site existant.
SipaUI pour un site
SipaUI porte tout le CSS et le JS nécessaire à l’affichage des composants graphiques prévus par la charte. Un site l’utilisant ne devrait donc quasiment pas avoir besoin de CSS supplémentaires pour afficher ces composants. D’autant plus que SipaUI intègre un système de « thèmes » poussé qui peut lui permettre de répondre à vos besoins de personnalisation. SipaUI intègre aussi une grille, des classes de marges, ainsi que des classes éditoriales qui permettent de mettre en page le contenu. Malgré tout, SipaUI ne suffira pas et vous aurez besoin de CSS propres pour gérer tous les cas et éléments non prévus dans SipaUI (header, footer, mise-en-page…). Vous avez alors 2 possibilités :
- Mixer vos CSS avec ceux de SipaUI (même découpage en fonction des media queries) afin d’optimiser les performances en évitant d’appeler plusieurs fichiers CSS et, éventuellement, en appelant que les composants nécessaires.
- Appeler SipaUI à part. C’est plus simple, mais moins performant et moins souple.
SipaUI pour un bloc s’intégrant dans un site du groupe
Un bloc simple ne devrait pas avoir de CSS propres ; les composants graphiques de SipaUI devraient suffire à gérer son affichage. Dans le cas contraire, il y aura 2 possibilités :
- Il manque des composants dans le framework. Vous pouvez alors demander les évolutions nécessaires (cf. ci-dessous).
- Il s’agit de besoins spécifiques à un bloc très particulier (p. ex. un bloc météo), dans ce cas le bloc devra porter ses propres CSS. Il serait alors possible que ces CSS soient appelées dans le bloc (au lieu d’être concaténées avec les CSS du site) pour éviter de ralentir le site, mais attention à l’effet FOUC.
Dans tous les cas, le créateur du bloc devra passer par la validation de l’équipe Plateforme. Le second cas devra rester une exception plutôt que la norme (l’ajout de ressources JS/CSS a un impact direct sur les performances de la page).
Outils d’aide de cette documentation
Recherche de composants
Un filtre est à votre disposition en haut du menu secondaire pour vous aider à retrouver un composant sur la base de son nom dans le menu. La recherche est par conséquent possible en français et en anglais (nom des composants dans l’arborescence des dossiers du framework).
Changement de largeur
La mise-en-page de cette documentation induit une largeur réservée pour les iframes de démonstration. Cela implique que, par défaut, dans une fenêtre large, vous verrez ces visualisations en « mode tablette ». Chacune de ces iframes de visualisation comporte toutefois (quand la taille du navigateur le premet) des boutons pour changer cette largeur et vous permettre de voir le contenu dans différents tailles :
- mobile [360px],
- tablette [940px],
- desktop [pleine largeur] et
- format libre (utilisez le coin inférieur droit pour redimensionner).
Changement de thème
Afin de pouvoir visualiser le rendu des composants dans chaque thèmes, vous avez accès à un sélecteur en haut de page vous permettant de changer celui-ci.