perso j'en suis au tout début de la prog de l'UI, mais je compte bien m'appuyer sur bootstrap. Note que n'importe quel framework peut faire l'affaire, tant qu'il permet d'utiliser des mixins (voir mon post précédent).
Pour personnaliser l'interface sur bootstrap c'est le fichier variables.less ou un truc du genre qu'il faut surcharger (on ne touche pas au fichier, on écrase les variables avant d'appeler le reste, vu que c'est compilé ça ne génère pas de gros fichiers). De plus, il faut compiler son projet de manière à ce que le code même de bootstrap n'apparaisse pas (excepté certains fichiers). ça se gère via les directives d'import, avec le mot-clé "reference". De cette manière, le framework fait vraiment office de librairie et on a un CSS tout petit en sortie, surtout minifié.
Ainsi tu peux personnaliser le rendu, et tu peux écraser certaines mixin si tu ne veux pas de coins arrondis pour les boutons par exemple. Le framework t'apporte plein de choses très pratiques. Par exemple positionner les différents éléments de l'interface facilement, et d'attaquer le responsive design sans trop se casser le c*l.
Ensuite, pour un jeu proprement dit, tu auras surtout des bordures différentes, des boutons stylisés, ce genre de choses. Tout ça tu le définis à la suite du framework dans ton fichier de style.
L'avantage avec cette approche c'est que tu ne prends du framework que ce qui t'intéresse, et tu es libre de rajouter tout ce qui est spécifique à un jeu. Si tu veux avoir des champs de formulaire spécifiques tu peux les décrire sans que bootstrap interfère. Si tu choisis d'inclure des éléments de bootstrap sous forme complète (sans le "reference"), tes champs de formulaire doivent avoir la classe "form-control" pour que bootstrap y touche. Donc si tu ne la mets pas ben tu es peinard. Je ne sais pas si ça fonctionne comme ça avec d'autres frameworks ceci dit.
Donc pour résumer, les avantages du framework ici c'est le positionnement des éléments (grille), la typographie, les formulaires facilement mis en place mais pas obligatoirement, des classes pour gérer les messages (success, warning, danger, etc.) et le tout facilement personnalisable. Je ne connais pas d'exemple de jeu ou ça ne pourrait pas s'appliquer.
L'inconvénient pour un novice c'est de devoir utiliser Less, mais personnellement je l'utilise généralement donc ça s'intègre bien dans mon workflow. Le seul truc un peu relou c'est que bootstrap est long à compiler de cette façon (moins d'une seconde je te rassure) donc si ton environnement de dev est en "watch" sur tes fichiers ça peut ralentir un peu. Mieux vaux recompiler à la mano et ne pas garder la mauvaise habitude de recharger sa page à chaque petit modif et coder bloc par bloc.
Par exemple, un code d'un projet à moi :
Et voici le contenu du fichier variables.less :
Et note que si tu n'ajoutes aucun style, comme on n'utilise que des références, et bien le rendu du CSS sera vide, on n'a donc vraiment pas le "bloat" de bootstrap. (En fait, on aura quand même le contenu de fonts.less dans notre exemple, puisque on ne l'appelle pas par référence (et de toute façon c'est des directives font-face donc c'est logique.))
Pour personnaliser l'interface sur bootstrap c'est le fichier variables.less ou un truc du genre qu'il faut surcharger (on ne touche pas au fichier, on écrase les variables avant d'appeler le reste, vu que c'est compilé ça ne génère pas de gros fichiers). De plus, il faut compiler son projet de manière à ce que le code même de bootstrap n'apparaisse pas (excepté certains fichiers). ça se gère via les directives d'import, avec le mot-clé "reference". De cette manière, le framework fait vraiment office de librairie et on a un CSS tout petit en sortie, surtout minifié.
Ainsi tu peux personnaliser le rendu, et tu peux écraser certaines mixin si tu ne veux pas de coins arrondis pour les boutons par exemple. Le framework t'apporte plein de choses très pratiques. Par exemple positionner les différents éléments de l'interface facilement, et d'attaquer le responsive design sans trop se casser le c*l.
Ensuite, pour un jeu proprement dit, tu auras surtout des bordures différentes, des boutons stylisés, ce genre de choses. Tout ça tu le définis à la suite du framework dans ton fichier de style.
L'avantage avec cette approche c'est que tu ne prends du framework que ce qui t'intéresse, et tu es libre de rajouter tout ce qui est spécifique à un jeu. Si tu veux avoir des champs de formulaire spécifiques tu peux les décrire sans que bootstrap interfère. Si tu choisis d'inclure des éléments de bootstrap sous forme complète (sans le "reference"), tes champs de formulaire doivent avoir la classe "form-control" pour que bootstrap y touche. Donc si tu ne la mets pas ben tu es peinard. Je ne sais pas si ça fonctionne comme ça avec d'autres frameworks ceci dit.
Donc pour résumer, les avantages du framework ici c'est le positionnement des éléments (grille), la typographie, les formulaires facilement mis en place mais pas obligatoirement, des classes pour gérer les messages (success, warning, danger, etc.) et le tout facilement personnalisable. Je ne connais pas d'exemple de jeu ou ça ne pourrait pas s'appliquer.
L'inconvénient pour un novice c'est de devoir utiliser Less, mais personnellement je l'utilise généralement donc ça s'intègre bien dans mon workflow. Le seul truc un peu relou c'est que bootstrap est long à compiler de cette façon (moins d'une seconde je te rassure) donc si ton environnement de dev est en "watch" sur tes fichiers ça peut ralentir un peu. Mieux vaux recompiler à la mano et ne pas garder la mauvaise habitude de recharger sa page à chaque petit modif et coder bloc par bloc.
Par exemple, un code d'un projet à moi :
// import de bootstrap
@import (reference) "../../../vendor/twbs/bootstrap/less/mixins/grid-framework.less";
@import (reference) "../../../vendor/twbs/bootstrap/less/mixins/grid.less";
@import (reference) "../../../vendor/twbs/bootstrap/less/grid.less";
@import (reference) "../../../vendor/twbs/bootstrap/less/mixins/clearfix.less";
// etc ...
// import de lib perso
@import (reference) "tempo.less"; // grille verticale pour le rythme des typo
// définitions des font-face
@import "fonts.less";
// ensuite nos variables
@import (reference) "variables.less";
// et voilà tout est prêt à être utilisé, on écrit ensuite notre style.
// ... ici ...
Et voici le contenu du fichier variables.less :
// D'abord importer les variables par défaut de bootstrap
@import "../../../vendor/twbs/bootstrap/less/variables.less";
// Puis les surcharger
...
// et redéfinir également les variables pour nos autres librairies, dans mon cas
// pour tempo.less
...
Et note que si tu n'ajoutes aucun style, comme on n'utilise que des références, et bien le rendu du CSS sera vide, on n'a donc vraiment pas le "bloat" de bootstrap. (En fait, on aura quand même le contenu de fonts.less dans notre exemple, puisque on ne l'appelle pas par référence (et de toute façon c'est des directives font-face donc c'est logique.))