Artwork

[eliemichel]

Je sais pas trop où mettre ça, mais au moins les issues tout le monde les vois.

Le terme « Artwork » est un peu fort, c'est juste une suggestion en passant ! @tmos Si t'as des dessins dans un coin toi aussi, balance !

[tmos]

A vrai dire il me semble qu'on avait plutôt dit reprendre greeder là où il en est a l'heure actuelle non ? Il y a déjà un gros travail qui a été réalisé dessus et personnellement l'interface me plait beaucoup.

J'ai quelques mockups mais ce sera plus pour des détails de l'interface :)

Par contre étant donné que tu sembles parti dans une direction assez différente, je pense que tu peux carrément faire un thème alternatif non ? :))

[eliemichel]

J'ai juste jeté des idées qui me passaient par la tête en vrac sur le papier, mais je suis bien d'accord avec l'idée de reprendre le thème greeder. En fait j'étais juste parti pour faire un logo au début puis j'ai déliré un peu. ^^ Mais avoir plusieurs thèmes à proposer peut être bien aussi, je vais réfléchir à ça !

[tmos]

Pas de souci :) J'ai quelques idées de logos aussi, je les coucherai sur papier (inkscape).

On 17 juillet 2014 13:35:29 CEST, Elie Michel notifications@github.com wrote:

J'ai juste jeté des idées qui me passaient par la tête en vrac sur le papier, mais je suis bien d'accord avec l'idée de reprendre le thème greeder. En fait j'étais juste parti pour faire un logo au début puis j'ai déliré un peu. ^^ Mais avoir plusieurs thèmes à proposer peut être bien aussi, je vais réfléchir à ça !

---

Reply to this email directly or view it on GitHub: https://github.com/Phyks/Freeder/issues/9#issuecomment-49295637

[eliemichel]

T'as l'intention d'utiliser un truc comme Less ou Sass ou pas ? J'ai vu que t'avais fait un fichier color.css : c'est vrai que même sans aller jusqu'à utiliser un truc complètement automatisé, regrouper toutes les règles de couleur c'est pas mal, ça permet de pouvoir assez simplement modifier l'idée générale du thème.

Je sais pas si c'est vraiment une bonne idée — réinventer la roue, c'est mal — mais un petit script de ce style peut être pratique :

import re

colors = {
    '$red': '#ff0000'
}

def multiple_replace(dict, text): # From http://code.activestate.com/recipes/81330-single-pass-multiple-replace/
    regex = re.compile("(%s)" % "|".join(map(re.escape, dict.keys())))
    return regex.sub(lambda mo: dict[mo.string[mo.start():mo.end()]], text) 

with open('color.css.tpl', 'r') as tpl:
    with open('color.css', 'w') as css:
        for line in tpl:
            css.write(multiple_replace(colors, line))

(Notez que je n'ai pas testé le code)

[tmos]

Pour Saas, less, etc. Je ne prévois pas d'en utiliser, ça ajoute des étapes pour pas grand chose pour moi, et surtout ça créé des dépendances. Au final même sur des projets CSS de milliers de lignes je n'en n'ai jamais ressenti le besoin.

Pour colors.css j'ai un poil changé l'orga (pas encore comité), j'ai fait un base.css où sont les couleurs + d'autres choses. Mettre toutes les couleurs à part créait trop de doublons de propriétés. Je n'exclus pas le fait de changer de méthode d'organisation au fur et a mesure, si le besoin s'en fait sentir.

Au final avec un jeu de 4 couleurs, les variables Saas/Less, c'est un canon pour tuer une mouche ;)

Ton script fait quoi ? Je t'avoue que je ne sais même pas dans quel langage c'est ^^'

[tmos]

À noter qu'il est fort probable qu'on intègre, tout comme dans greeder, un script de minification du CSS.

[Phyks]

Je passe en coup de vent, busy busy jusqu'à ce soir… =(

C'est du python pour refaire une fonction de base de SASS, la définition de variables.

[tmos]

Ah ok ! Bah en effet c'est pas con du tout de faire ça en python :D Mais je maintiens que pour un si petit ensemble de couleurs, pas vraiment besoin de variables, ça ajoute une couche à CSS qui n'est pas indispensable.

D'autant plus que :%s/#333/#666 est une commande assez efficace en cas d'urgence remplacement :D

[eliemichel]

Ouais ça marche toujours de faire un gros replace qui tache, mais faut faire gaffe à bien regrouper toutes les couleurs dans le même fichier, ou dans peut de fichier, et de documenter où c'est. Parce que modifier les couleurs c'est un truc que les gens aiment bien faire pour adapter le thème à leur site et qui peut parfois être galère (je pense en particulier à un thème Shaarli qui en avait mis dans chaque fichier html…)

Et oui, phyks a raison, c'est juste un truc qui fait un gros replace mon script. On définit ce qu'on veut dans le dict = { '$nom_de_la_variable': '#abcdef' } et ça fait rien de plus. Pour les gens qui aiment pas python on peut même mettre ça dans un fichier de conf et le charger en tant que module python comme ici

[tmos]

Perso j'ai rien contre python, mais je n'aime pas ajouter des étapes en plus. En particulier sur CSS, qui est un peu le langage maltraité du moment :D À croire que tout le monde le trouve trop simple.

Selon moi il faut maintenir une très bonne organisation pour faire un CSS maintenable et efficace, et c'est ce qui fait peur aux gens. Pas besoin de variables, comme tu le dis très bien, on va tout regrouper au même endroit, profiter des différents fichiers et ce sera tout aussi clair :)

Et évidement, la minification rendra la division en N fichiers totalement transparente, je propose juste qu'on attende la première intégration satisfaisante de greeder pour la mettre en place :)

[eliemichel]

1. S'il y a une phase de minification, ajouter un petit replace ne rendra pas les choses plus difficiles.
2. Je suis gobalement pas pour l'utilisation de Sass and co, à la fois pour réduire le nombre d'étapes de compilation et pour éviter les dépendances. On est d'accord pour ça.
3. Mais faut quand même pas se leurrer : CSS a des côtés chiants. J'ai jamais utilisé Sass ni aucun autre de la famille mais j'ai souvent rêvé d'avoir des variables pour éviter d'aller faire des copier coller de code couleur de partout… Sinon faut que l'éditeur de code liste lui-même les couleurs usuelles, mais j'ai pas el temps de coder un éditeur de code là ^^

Donc on est globalement d'accord, et au pire si on hardcode les couleurs je pleurerai pas, mais bon.

[tmos]

Perso je préfère rester sur du CSS pur :)

[tmos]

Voilà, j'ai enfin réussi à faire dans Inkscape ce que j'avais en tête !

Voici donc le logo auquel j'ai pensé, décliné sur deux jeux de couleurs pour avoir une idée sur différents fonds, et la version favicon, également utilisable sur un espace limité.

La police utilisée est la Quicksand, qui est une police sous licence libre : http://www.fontsquirrel.com/fonts/quicksand

Les ondes rappellent le côté radio et actualités, le F de freeder étant donc l’émetteur central de toutes ces informations. Je trouve que ça reste assez sobre pour être valable quelque soit le thème utilisé, mais la police brise un peu cette sobriété en ajoutant un côté «roundouillet» sympa et un peu moins sérieux.

Vous en pensez quoi :) ? 

[Phyks]

<333333333333333333333333333333

(surtout sur fond sombre)

[eliemichel]

Quicksand rocks ! Je l'utilise sur mon site d'ailleurs…

Par contre je trouve qu'il y a pas mal d'espace perdu. Vu de loin (genre en favicon) le F se voit pas très bien.

Et avec des traits fins ça donne quelque chose ou pas ? Quicksand je l'utilise habituellement pour les textes fins. Et tout cas, que ça soit Quicksand ou ma fonte maison du premier post, on est visiblement d'accord pour la typo sur un truc à trame bien ronde.

edit: Sur les logos de flux habituels, outre le fait qu'il y a trois ondes l'espace entre deux ombres est généralement moins important, d'épaisseur similaire à celle des traits des ondes.

[tmos]

J'avoue que j'étais exactement en train de me dire la même chose quant à l'espace «perdu» (sur la petite version ronde, l'autre me semble bien par contre). Par contre perso je traiterais le mal dans l'autre sens : en épaississant le tout !

Voici quelques essais, avec en final la taille favicon des différentes version.

Je pense qu'en version favicon 32x32 il faudrait juste laisser le F on perd assez vite en lisibilité, par contre et en version meilleure définition, j'aime assez les (( )).

Vous en pensez quoi ?

[eliemichel]

Les (( )) c'est pratique pour écrire le logo en ASCII-art. =)

[tmos]

Pas faux ! Et j'ai oublié de mentionner le fait que ça rappelle aussi le logo de RSS évidement :d

[eliemichel]

Ça allait de soi ;)

[tmos]

Et en version grand (me suis planté dans la taille dans le post précédent) :

[eliemichel]

Beaucoup trop gras le premier je trouve. Le second (ou celui d'avant) donnerait quoi avec les extrémités des ondes carrées plutôt que rondes ?

[tmos]

Tout à fait d'accord pour le gras, par contre ça améliore un peu la lisibilité en 16×16px C'était mon premier essai (pas sauvé), et ça romp un peu trop avec la police je trouve :/

Cela dit dans la dernière version (très fine), je ne pense pas qu'on distingue la différence rond/carré

[tmos]

Ça vous va si je fait un premier essai d'intégration dans le thème ? Ça sera sûrement plus parlant :)

[eliemichel]

Bien sûr ! On n'attends que ça.