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.


Palra Hors ligne Membre Points: 276 Défis: 0 Message

Citer : Posté le 12/06/2014 15:25 | #


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
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 15:26 | #


J'verrais bien quelques satellites sauter dans la "version" mobile, genre le générateur de cours de que l'on cacherait uniquement quand on est en sm ou xs.

Ajouté le 12/06/2014 à 15:26 :
J'verrais bien quelques satellites sauter dans la "version" mobile, genre le générateur de cours de que l'on cacherait uniquement quand on est en sm ou xs.
Theprog Hors ligne Membre Points: 1447 Défis: 20 Message

Citer : Posté le 12/06/2014 15:26 | #


Moi j'aime bien
C'est du latin ?
Eiyeron Hors ligne Ancien modérateur Points: 5525 Défis: 57 Message

Citer : Posté le 12/06/2014 15:26 | #


Palra, t'as déjà une base que je puisse push? Quel site aussi? Gitorious donc?
Lephenixnoir Hors ligne Administrateur Points: 24581 Défis: 170 Message

Citer : Posté le 12/06/2014 15:27 | #


Niveau CSS, on peut dire que "je m'y connais". Je peux vous donner un coup de main si vous le désirez, mais je ne m'y connais que très peu en webdesign.
Mon graphe (11 Avril): ((Rogue Life || HH2) ; PythonExtra ; serial gint ; Boson X ; passe gint 3 ; ...) || (shoutbox v5 ; v5)
Palra Hors ligne Membre Points: 276 Défis: 0 Message

Citer : Posté le 12/06/2014 15:28 | #


Bon bah voilà : https://github.com/palra/bootstrap beaucoup plus simple
C'est du latin oui, le Lorem Ipsum

EDIT par eiyeron : virgule en trop dans l'url
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 15:28 | #


Le Lorem Ipsum est un faux-txte généré pour avoir un visuel avec du "vrai" texte ordonné comme des phrases, des mots, des paragraphes pour vérifier que tout fonctionne comme prévu

Ajouté le 12/06/2014 à 15:29 :
Palra, t'es sure que ça vaut le coup carrément de forker bootstrap? Il y a des générateur pour changer ses couleurs. C'est une librairie, pas une base.
Palra Hors ligne Membre Points: 276 Défis: 0 Message

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


Faudra que vous me donniez vos usernames sur Github pour que je vous ajoute en tant que collaborateurs. Quand au subtilitées de Bootstrap, lisez le README si besoin, plus particulièrement en ce qui concerne Grunt
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 15:29 | #


Eiyeron pour moi.

Ajouté le 12/06/2014 à 15:30 :
Voici un des générateurs dispos : http://pikock.github.io/bootstrap-magic/app/index.html#!/editor
Palra Hors ligne Membre Points: 276 Défis: 0 Message

Citer : Posté le 12/06/2014 15:30 | #


C'est plus simple de forker Bootstrap parce qu'ils proposent dans leur repo les outils pour compiler les sources plus facilement (Grunt justement), et les générateurs se
limitent à changer les couleurs, je pense qu'on devra aller plus loin que ça

Ajouté
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 15:32 | #


Au pire, un css permet de patcher le style, non? Bah si tu veux, sio on peut concevoir un thème plus facilement avec bootstrap, pourquoi pas? On peut se baser sur la version incluse de bootstrap? (sans charger le bootstrap.theme.css là) J'aime pas sa façon de rajouter des gradients de partout.
Palra Hors ligne Membre Points: 276 Défis: 0 Message

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


Pourquoi pas, mais patcher les variables des sources de Bootstrap est plus efficace et plus simple, on est sûr de ne rien oublier comme ça car tous les styles sont définis avec ces variables dans Bootstrap.
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 15:36 | #


Oui, ok, ça marche, j'ai cloné to nrepo, faut que j'installe node, c'est tout?
Palra Hors ligne Membre Points: 276 Défis: 0 Message

Citer : Posté le 12/06/2014 15:38 | #


Voilà, puis après t'installes grunt. Je vais uploader sur le repo un HTML contenant tous les composants de Bootstrap à tester, ce sera plus simple de voir les modifs à l'échelle d'un site.
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 15:39 | #


Ca marche! Pour info, si tu as skype, mon pseudo est le même qu'ici, si tu as besoin de me contacter. Un avantage utile est que 'jai un serv, j'hosterai si je peux les pages de résultat sur le serv.
Palra Hors ligne Membre Points: 276 Défis: 0 Message

Citer : Posté le 12/06/2014 15:41 | #


Super, bah si tu peux hoster le résultat ce serait pas mal oui
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 15:42 | #


Héhé, un VPS ça sert beaucoup.
Palra Hors ligne Membre Points: 276 Défis: 0 Message

Citer : Posté le 12/06/2014 15:46 | #


J'ai mis dans le fichier dist/index.html tous les éléments de Bootstrap à tester.
git pull

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 15:46 | #


C'est noté

Ajouté le 12/06/2014 à 15:56 :
http://geekbros.tk/~eiyeron/bootstrap/

^Template.

Ajouté le 12/06/2014 à 16:17 :
Fais gaffe, compiler bootstrap fait supprimer KitchenSink.

Ajouté le 12/06/2014 à 16:20 :
Mettons-noud 'accord sur les couleurs d'abord.
Palra Hors ligne Membre Points: 276 Défis: 0 Message

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


J'ai fixé le problème de suppression du Kitchen Sink. Pour les couleurs, déjà on garde le même rouge, soit #A91616. Ensuite faut que les autres couleurs collent avec, donc ça fait qu'on a la variable @brand-danger qui vaut #A91616 (dans less/variables.less) puis faut proposer d'autres qui aillent avec.
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: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.

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 109 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