JeuWeb Créez votre jeu par navigateur !

t.bodeux · 16-08-2014, 01:20 AM

Bonjour à tous et à toutes.

Quand on veut commencer un site, on a souvent besoin de collection de classes qui permettent de donner une cohérence à sa présentation. On en trouve beaucoup sur le web mais, malheureusement, elles sont souvent fortement typée ou très lourde.

C'est pour cela que j'ai décidé de commencer à en coder une qui se veut être le plus neutre possible tout en ouvrant beaucoup de possibilités.

Elle à l'avantage d'être assez légère, neutre et surtout de garder un rythme horizontal constant (une baseline ici fixée à une et demi fois plus grande que le texte de base). J'utilise les REM, ainsi, si on change la taile dans le <html> tout le reste de la page suit la décision. Elle se veut facilement customisable (fichier de config).

Pour le moment, la source SASS n'est pas disponible car la librairie n'est pas terminée.

Je vous demande ainsi votre avis et si vous le désirez, vous pouvez télécharger la feuille de style.

La page de démonstration

Aedius · 16-08-2014, 02:06 AM

Effectivement ça peut être pratique ce genre de chose.

Est-ce que dans les possibilité que tu as prévus, il y a la possibilité de typer les boutons ?
Par exemple en définissant une image en bg ou un type d'ombre ?

Enfin ... En lisant "en ouvrant beaucoup de possibilités" mon cerveau a fait *boom*

**niahoo** · 16-08-2014, 02:54 AM

Hello, c'est intéressant, mais si tu utilises SASS tu peux piocher parmi les composants de bootstrap uniquement ceux qui t'intéressent, par exemple la typographie et les boutons.

t.bodeux · 16-08-2014, 01:44 PM

Tous les composants sont paramétrables via SASS (couleur, taille, border-radius, ombres).
Vu que les styles sont fortement typé, il te suffit dans ta page de style a rajouter à la classe maitresse ce que tu veux avoir pour que tous les boutons changent de la même manière:

[class*=button] {

  background-image: url('../assets/images/button-background-overlay.png");

}

Je ne critique pas le SASS de bootstrap ou de Foundation mais il est souvent fort verbeux et impliquent de charger des composants global pour une simple librarie de boutons par exemple. De plus, ils respectent rarement un rythme horizontal qui permet une lisibilité de site plus facile et moins fatigante. Rajoute à cela que, souvent, les composants chargés offrent une quantité énorme de possibilité que tu n'utiliseras probablement pas (une bonne critique a été faite par Tim O’Reilly, les sites utilisants Bootstrap par exemple utilisent en moyenne 15% des classes et du code proposé et autant la maquette d'un site est vite terminée, autant la changer devient difficile .)

Le but de cette libraire est de fournir une mise en page simple et très légère tout en restant facilement modifiable selon les cas. Elles ne visent en aucun cas a remplacer ou réinventer les gros Frameworks qui existent déjà.

**Xenos** · 17-08-2014, 08:18 PM

Bon, ben perso, je passe là encore.

Pour moi, "button-yellow", c'est pas du CSS.
CSS est censé séparer fond et forme (sinon, il n'a aucun intérêt autre qu'alourdir le code, autant faire du code dans les balises <style> ou l'attribut @style). Si on doit changer le code HTML pour changer la présentation, c'est qu'on a foiré la séparation.
Or, si je veux passer le bouton d'inscription de vert (button-green) à jaune (button-yellow), il faut que je change le code HTML (valeur de @class). C'est pas cohérent.

Si les codeur veulent pas apprendre CSS, qu'ils quittent le web (ou ne s'occupent que du HTML/back office), ou s'ils ont la flemme de taper du code, qu'ils changent de métier...

Comme je disais...

[class*="button"]

Ca, c'est un sélecteur massacré (qui sélectionne "zretigbuttonjibazre" par exemple et pas que les classes avec "button-*"). Utilises une nouvelle classe "button", ou alors, liste les "button-*" sur lesquels appliquer les règles.

Bon, bref, allez, c'est pas moi qui utiliserai un framework de ce type, donc, je me tais, et je me sauve Smile

Bonne continuation, et ne prend pas mal ces remarques: c'est juste que certains tutoriaux des débuts du CSS ont apparemment fait de sacrés dégâts dans le monde des développeurs.

**niahoo** · (Modification du message : 17-08-2014, 10:50 PM par niahoo.)

Ben si tu utilises Less/SASS :



.mon-super-bouton {

    .button-yellow();

}

C'est pas les frameworks le problème. C'est comme tu le dis de séparer les couches. Mais ça s'arrête là. (bon mis à part qu'on voudrait plutot séparer aussi les parties du CSS avec une mixin "button" et une mixin "yellow" ou "warning" comme dans bootstrap.

Arnadus · 17-08-2014, 11:05 PM

Je suis le seul à trouver que l'utilisation de frameworks front-end de présentation n'est pas adaptée pour des jeux en ligne?
Pour des sites e-business, forums, réseaux sociaux (etc.) OK mais pour des jeux qui se doivent d'immerger le joueur dans un univers bien spécifique (on trouve des jeux sur les pirates, moyen-age, zombies, football etc. ), je trouve que ce n'est pas spécialement adapté. Personnellement, je fais chaque fois appel à un web designer pour qu'il me fasse un bouton/cadre/champ de form personnalisé lorsque j'en ai besoin.

Du coup, j'en profite pour poser quelques questions: Vous utilisez beaucoup ce genre d'outil? Si oui, vous vous en servez pour la structure générale ou/et pour des éléments spécifiques?

**niahoo** · (Modification du message : 18-08-2014, 12:38 AM par niahoo.)

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 :





// 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.))

**Ter Rowan** · 18-08-2014, 01:30 PM

perso j'ai utilisé foundation (bon, pas très longtemps, une dizaine de jours) et j'en suis arrivé un peu à la même conclusion qu'Arnadus

la seule valeur ajoutée que j'ai trouvé au framework est la grille, bah j'en est copié une et mis a peu près à ma sauce et c'est fini.
Le reste me semble intéressant si tu utilises tel quel car l'effort pour restyler un élément d'un framework me semble équivalent à faire from scratch

bon c'est peut être le "ticket d'entrée" qui me fait dire ça mais avoir des bouton de la couleur x, j'ai pas besoin d'un framework en surchargeant la couleur x, je fais ma classe css associée.

Je vois trois points forts à un framework :

- la grille
- la rigueur que cela impose (mais si tu es déjà rigoureux ce n'est plus valable)
- le prêt à l'emploi pour une application de gestion ou on a presque tout déjà comme souhaité (mais pour un jeu, il en faut sacrément plus)

Harparine · 19-08-2014, 03:39 PM

Salut, je rajouterai un dernier point fort et le plus important selon moi : les bonnes pratiques.
Les frameworks de qualité sont souvent bien codés et sont une mine d'idée pour trouver des solutions élégantes.