Les membres ayant 30 points peuvent parler sur les canaux annonces, projets et hs du chat.
La shoutbox n'est pas chargée par défaut pour des raisons de performances. Cliquez pour charger.

Forum Casio - Vie communautaire


Index du Forum » Vie communautaire » Nouvelle charte graphique pour PC
Palra Hors ligne Membre Points: 276 Défis: 0 Message

Nouvelle charte graphique pour PC

Posté le 10/06/2014 23:54

Bonjour à tous,

Dans la continuité de ce HS, j'ai proposé à la communauté un nouveau design pour le site, et pour ce faire, il faut définir une charte graphique claire et précise pour pouvoir créer un thème Bootstrap correspondant.

Tout d'abord, les grandes lignes : flat design ou design plus réaliste ? Côtés plats ou arrondis ? Dégradés de couleurs ou pas ? Ombrages ? Si oui, où ?

Je complétais ce post plus tard, afin d'ajouter les critères de la charte graphique (qui ne sont ni plus ni moins les variables des sources de Bootstrap), mais si vous voulez en discuter, ça se passe ici !

Edit by Eiyeron : bossant sur le thème aussi, je stocke une page mise à jour à chaque modif que je fais/palra fait sur le thème sur mon serveur.


Eiyeron Hors ligne Ancien modérateur Points: 5525 Défis: 57 Message

Citer : Posté le 12/06/2014 16:42 | #


Ptoing j'ai envoyé une nouvelle branche de mon pseudo pour te montrer ce que j'ai fait pour le moment. J'ai crée un mixin du nom de "brand-planet-casio" qui comprend la couleur du @danger avec ton gradient.
Palra Hors ligne Membre Points: 276 Défis: 0 Message

Citer : Posté le 12/06/2014 16:48 | #


Regarde aussi ma branche, elle est un peu plus ressemblante à celle actuelle, y compris quand on clique sur les liens. Finalement il vaut mieux pas changer @danger, c'est trop sombre pour le reste, autant le garder tel quel je crois
Calculatrice : Graph 35+ modée
Système d'exploitations : Apricity OS - Windows 10
Eiyeron Hors ligne Ancien modérateur Points: 5525 Défis: 57 Message

Citer : Posté le 12/06/2014 16:53 | #


J'ai vu qu'on peut utiliser les mixins de bootstrap, je vais changer pour utiliser ceux-ci.
Palra Hors ligne Membre Points: 276 Défis: 0 Message

Citer : Posté le 12/06/2014 16:57 | #


Je les avais totalement oubliés ceux là ! Merci du rappel
Calculatrice : Graph 35+ modée
Système d'exploitations : Apricity OS - Windows 10
Eiyeron Hors ligne Ancien modérateur Points: 5525 Défis: 57 Message

Citer : Posté le 12/06/2014 16:59 | #


Bon, c'est moins évident qu'il n'y paraît. Pour les panels, ils ont un mixin qui ne supoporte que des couleurs comme arguments, j'e suis obligé de rajouter un gradient par la suite.
Palra Hors ligne Membre Points: 276 Défis: 0 Message

Citer : Posté le 12/06/2014 17:04 | #


J'ai pas très bien saisi le problème, pourtant ça rend bien sur ton template non ?

Ajouté le 12/06/2014 à 17:06 :
Par contre tu ne devrais pas mettre la couleur rouge sur les panels par défaut, ce sera à nous après de choisir la classe couleur adaptée par la suite, ça n'a pas de sens sinon
Calculatrice : Graph 35+ modée
Système d'exploitations : Apricity OS - Windows 10
Eiyeron Hors ligne Ancien modérateur Points: 5525 Défis: 57 Message

Citer : Posté le 12/06/2014 17:08 | #


Palra a écrit :
J'ai pas très bien saisi le problème, pourtant ça rend bien sur ton template non ?

Ajouté le 12/06/2014 à 17:06 :
Par contre tu ne devrais pas mettre la couleur rouge sur les panels par défaut, ce sera à nous après de choisir la classe couleur adaptée par la suite, ça n'a pas de sens sinon


Ok, je note. J'ai crée un mixin qui fait le soft dégradé. Il s'appelle PC_gradient.
Palra Hors ligne Membre Points: 276 Défis: 0 Message

Citer : Posté le 12/06/2014 17:17 | #


J'ai déplacé ton mixin dans le fichier mixins/gradients.less et l'ai renommé #gradient.softVertical. Et si tu as des classes à ajouter, évite de le faire dans les variables
Calculatrice : Graph 35+ modée
Système d'exploitations : Apricity OS - Windows 10
Eiyeron Hors ligne Ancien modérateur Points: 5525 Défis: 57 Message

Citer : Posté le 12/06/2014 17:18 | #


C'est noté (temporaire).

Faudra peut-être baisser l'amplitude du darken, non? 3% pour le default, je pense.
Palra Hors ligne Membre Points: 276 Défis: 0 Message

Citer : Posté le 12/06/2014 17:19 | #


Non au fait je l'ai carrément modifié ton mixin

Ajouté le 12/06/2014 à 17:20 :
Oui, donc justement, j'ai fait ça de ton mixin
.softVertical(@color: #FFF, @percent: 5%)

On peut donc choisir l'intensité à chaque fois

Ajouté le 12/06/2014 à 17:20 :
Sinon, oui on peut le mettre à 3 je pense aussi

Ajouté le 12/06/2014 à 17:30 :
Et enfin, j'ai mergé tes modifs dans ma branche, fais y un tour !
Calculatrice : Graph 35+ modée
Système d'exploitations : Apricity OS - Windows 10
Eiyeron Hors ligne Ancien modérateur Points: 5525 Défis: 57 Message

Citer : Posté le 12/06/2014 17:44 | #


Je ne vois pas du tout où se situe sofyGradient dans ton commit.
Palra Hors ligne Membre Points: 276 Défis: 0 Message

Citer : Posté le 12/06/2014 18:01 | #


https://github.com/palra/bootstrap/blob/palra/less/mixins/gradients.less#L17

C'est vrai que ça aurait été mieux si j'avais pushé le tout
Calculatrice : Graph 35+ modée
Système d'exploitations : Apricity OS - Windows 10
Eiyeron Hors ligne Ancien modérateur Points: 5525 Défis: 57 Message

Citer : Posté le 12/06/2014 18:08 | #


Oui en effet. Je mergerai tes modifs pour revenir à une base claire.
Pour la couleur de PB, va-t-on utiliser d'autres couleurs ? J'aimerais garder les principales pour leur sémantique.
Palra Hors ligne Membre Points: 276 Défis: 0 Message

Citer : Posté le 12/06/2014 18:11 | #


De PB, de PC tu veux dire ? Sinon oui on tournera toujours autour du même rouge.

Ajouté le 12/06/2014 à 19:08 :
Bon du coup j'ai quasiment fini le thème sur ma branche, jettes y un coup d'oeil

Ajouté le 12/06/2014 à 19:12 :
Voilà à quoi ça ressemble ici :
Cliquez pour découvrir
Cliquez pour recouvrir

Calculatrice : Graph 35+ modée
Système d'exploitations : Apricity OS - Windows 10
Cartix Hors ligne Membre Points: 2748 Défis: 98 Message

Citer : Posté le 12/06/2014 19:23 | #


Tu veux pas mettre l'image dans un spoiler svp ?
Sinon j'aime vraiment bien le design, reste à voir ce que ça donnerai sur mobile
Palra Hors ligne Membre Points: 276 Défis: 0 Message

Citer : Posté le 12/06/2014 19:29 | #


Ca donne ça :
Cliquez pour découvrir
Cliquez pour recouvrir



Calculatrice : Graph 35+ modée
Système d'exploitations : Apricity OS - Windows 10
Cartix Hors ligne Membre Points: 2748 Défis: 98 Message

Citer : Posté le 12/06/2014 19:36 | #


Nickel. Beau boulot
Louloux Hors ligne Ancien administrateur Points: 7035 Défis: 61 Message

Citer : Posté le 12/06/2014 19:49 | #


Lephenixnoir a écrit :
Pourtant quand tu affiches une image vectorielle dans ton navigateur à 100%, elle a bien une taille, non ?
Le mien me dit "image.svg, nominally 128x128". De toute façon, il lui faut bien une taille à cette image, sinon un logiciel ne saurait pas comment l'afficher si rien n'est précisé.
De toute façon vu le contexte, inutile de dépasser 128x128.

Une image vectorielle est affichée avec une taille dans le navigateur (il en faut bien une), mais elle n'a pas réellement de taille puisque tu la redimensionnes à souhait (c'est l'intérêt) : c'est le logiciel qui l'affiche qui va choisir sa taille.

Palra a écrit :
C'est du latin oui, le Lorem Ipsum

C'est du faux latin constitué à partir de syllabes d'un texte de Cicéron ou Sénèque. C'est pour tester la forme d'un message sans se soucier du contenu.

Palra a écrit :
Ok, on pourrait lancer ça après le bac, j'ai vraiment besoin de réviser, enfin si tu veux créer le repo vas y, puis donnes nous le lien après

Ouais oublie ça pour quelques jours et ramène-nous un mention TB
Palra Hors ligne Membre Points: 276 Défis: 0 Message

Citer : Posté le 12/06/2014 20:04 | #


Louloux a écrit :

Ouais oublie ça pour quelques jours et ramène-nous un mention TB

Si seulement ...
Calculatrice : Graph 35+ modée
Système d'exploitations : Apricity OS - Windows 10
Eiyeron Hors ligne Ancien modérateur Points: 5525 Défis: 57 Message

Citer : Posté le 12/06/2014 20:14 | #


Palra, faut s'occuper à present des borders avec les couleurs custom.

Ajouté le 12/06/2014 à 21:52 :
J'ai colorisé légèrement les zébras des tables et j'ai fixé le bouton toggle du navbar en mode responsive qui avait des couleurs par défaut et moches.
Palra Hors ligne Membre Points: 276 Défis: 0 Message

Citer : Posté le 12/06/2014 22:39 | #


Voici les designs définitifs :
Version PC
Cliquer pour enrouler



Version tablette
Cliquer pour enrouler



Version mobile
Cliquer pour enrouler



Calculatrice : Graph 35+ modée
Système d'exploitations : Apricity OS - Windows 10

LienAjouter une imageAjouter une vidéoAjouter un lien vers un profilAjouter du codeCiterAjouter un spoiler(texte affichable/masquable par un clic)Ajouter une barre de progressionItaliqueGrasSoulignéAfficher du texte barréCentréJustifiéPlus petitPlus grandPlus de smileys !
Cliquez pour épingler Cliquez pour détacher Cliquez pour fermer
Alignement de l'image: Redimensionnement de l'image (en pixel):
Afficher la liste des membres
:bow: :cool: :good: :love: ^^
:omg: :fusil: :aie: :argh: :mdr:
:boulet2: :thx: :champ: :whistle: :bounce:
valider
 :)  ;)  :D  :p
 :lol:  8)  :(  :@
 0_0  :oops:  :grr:  :E
 :O  :sry:  :mmm:  :waza:
 :'(  :here:  ^^  >:)

Σ π θ ± α β γ δ Δ σ λ
Veuillez donner la réponse en chiffre
Vous devez activer le Javascript dans votre navigateur pour pouvoir valider ce formulaire.

Si vous n'avez pas volontairement désactivé cette fonctionnalité de votre navigateur, il s'agit probablement d'un bug : contactez l'équipe de Planète Casio.

Planète Casio v4.3 © créé par Neuronix et Muelsaco 2004 - 2024 | Il y a 82 connectés | Nous contacter | Qui sommes-nous ? | Licences et remerciements

Planète Casio est un site communautaire non affilié à Casio. Toute reproduction de Planète Casio, même partielle, est interdite.
Les programmes et autres publications présentes sur Planète Casio restent la propriété de leurs auteurs et peuvent être soumis à des licences ou copyrights.
CASIO est une marque déposée par CASIO Computer Co., Ltd