Journal Une nouvelle feuille de style

Posté par (page perso) . Licence CC by-sa
Tags :
33
2
fév.
2013

Bonjour les gens,
Pour bien démarrer 2013 (je suis un peu à la bourre), je vous propose une nouvelle css:

screenshot

(version mobile)

Cela fait bien longtemps que j'ai commencé à la développer et à l'utiliser, il est donc largement temps de la diffuser, même s'il doit rester de nombreux défauts. L'idée de base était de faire une css qui s'adapte bien à tous les formats ( responsive ) et qui permette une consultation agréable sur smartphone. Je ne suis pas vraiment satisfait du style des commentaires mais je n'ai pas trouvé mieux pour le moment (dur de trouver un truc à la fois joli et pratique pour garder le fil de l'arborescence). Les suggestions sont les bienvenues.

Le design reprend pas mal de choses de oli.jp style guide (licence by-sa) ainsi que de bootstrap (je ne suis pas webdesigner, juste bidouilleur occasionnel). Merci également à CrEv et sa css solarized, qui m'a mis sur la bonne voie avec l'utilisation de sass.

Les sources sont disponibles sur github et la version compilée est ici.

  • # pas mal !

    Posté par (page perso) . Évalué à 5.

    vraiment sympa cette feuille, je trouve celle par défaut déjà bien, mais celle-ci change un peu, et est très classe. Je vais la tester pour voir.

    Je trouve que c'est une bonne idée d'atténuer les éléments autour du texte principal (c'est à dire les autres titres par rapport au texte de l'article en cours de lecture), néanmoins je trouve l'atténuation un peu trop poussée pour le coup.

    Autre chose, dans les commentaires, quand on écrit ça passe par dessus la mention "markdown", j'imagine que ça devrait être un peu décalé pour éviter de chevaucher cela.

    « I approve of any development that makes it more difficult for governments and criminals to monopolize the use of force. » Eric Raymond

    • [^] # Re: pas mal !

      Posté par (page perso) . Évalué à 1.

      Que c'est bio ! Vraiment.

      Love, bépo.

    • [^] # Re: pas mal !

      Posté par (page perso) . Évalué à 2.

      Je trouve que c'est une bonne idée d'atténuer les éléments autour du texte principal (c'est à dire les autres titres par rapport au texte de l'article en cours de lecture), néanmoins je trouve l'atténuation un peu trop poussée pour le coup.

      effectivement ca manque peut-être un peu de contraste, je me suis habitué mais je comprend que ça puisse géner. Je vais voir si je trouve une texture de fond un poil plus claire.

      Autre chose, dans les commentaires, quand on écrit ça passe par dessus la mention "markdown", j'imagine que ça devrait être un peu décalé pour éviter de chevaucher cela.

      corrigé. Merci pour le retour.

      • [^] # Re: pas mal !

        Posté par (page perso) . Évalué à 2. Dernière modification le 03/02/13 à 09:56.

        En fait le fond est très bien, peut-être qu'en mettant le texte juste un ton au dessus de ce qu'il est actuellement… d'autant plus que les icônes sont beaucoup plus foncées, et que par exemple lorsque ça mélange liens et texte annexe, comme dans "Des règles de modération sont applicables aux commentaires", le contraste est presque trop important. L'idéal serait d'atténuer le texte pas important (comme celui indiqué plus haut), et renforcer la tonalité des liens, mais pas trop.

        Enfin, dans des parties comme "Ce commentaire est-il pertinent ou inutile", on ne voit plus du tout ce qui est lien de ce qui ne l'est pas (idem pour pages perso), c'est un peu déroutant.

        Pour la correction du markdown, je ne la vois pas, soit l'ancien css est toujours dans le cache, soit il n'a pas été recompilé suite à la modification. (edit : c'était bien un problème de cache. De plus le "modifier/répondre" a bien été corrigé !)

        « I approve of any development that makes it more difficult for governments and criminals to monopolize the use of force. » Eric Raymond

        • [^] # Re: pas mal !

          Posté par (page perso) . Évalué à 2.

          J'ai mis une couleur un peu plus foncée pour voir ce que ça donne.
          Pour le problème de cache, j'ai mis une durée de cache assez longue pour soulager mon serveur et éviter d'avoir à retélécharger la css trop souvent, donc il faut forcer le rafraîchissement.
          Je ne sais pas dans quelle mesure il serait possible d'ajouter le hash de la css dans l'url pour les css externes ?

          • [^] # Re: pas mal !

            Posté par (page perso) . Évalué à 3.

            c'est très bien comme ça, merci

            « I approve of any development that makes it more difficult for governments and criminals to monopolize the use of force. » Eric Raymond

  • # Suis-je un mec de droite ?

    Posté par . Évalué à 9. Dernière modification le 02/02/13 à 17:01.

    Elle est très jolie. Comme beaucoup d'autres ici.

    Mais voilà, je n'arrive pas à utiliser une autre feuille de style que contrib/kaiska-new qui était celle par défaut de DLFP avant qu'il ne passe sur RoR.

    Est-ce que ça fait de moi un dinosaure partouzeur de droite ?

    Ruby est le résultat d'un gamin qui apprend le Java, puis jette un œil à Perl et se dit « je peux le réparer! »

  • # Très chouette

    Posté par (page perso) . Évalué à 2. Dernière modification le 02/02/13 à 18:05.

    J'apprécie les liens généraux en haut à gauche dans un bandeau toujours visible.
    Les liens à droite dans la CSS par défaut sont anti-ergonomiques au possible, le regard étant généralement porté dans le coin nord-ouest.
    Attention néanmoins aux liens répondre/modifier du commentaire qui se chevauchent (bug reproductible naturellement seulement pendant le cours laps de temps qui suit la création du commentaire).

    • [^] # Re: Très chouette

      Posté par (page perso) . Évalué à 2.

      J'adore aussi !
      Mais pourquoi y a-t-il autant d'erreurs au validateur ? (La réponse est dans la question, mais j'imagine que ce ne sont pas de "simples" erreurs…)

      Debug the Web together.

      • [^] # Re: Très chouette

        Posté par (page perso) . Évalué à 2.

        Le validateur à l'air d'avoir un problème avec certaines règles css (rgba(), *zoom), sans que je sache trop pourquoi …

    • [^] # Re: Très chouette

      Posté par . Évalué à 1. Dernière modification le 03/02/13 à 00:34.

      J'ai ce problème de chevauchement quand la fenêtre n'est pas assez large, ce qui est embêtant dans le cas ou l'on colle deux fenêtres l'une à côté de l'autre sur un écran de 1680 pixels de large (sous chromium). Je suppose que la largeur de la police de la feuille de style y est pour quelque chose.

      Nimage

      Sinon le logo en haut à gauche passe derrière le cadre blanc. Ces détails mis à part, j'aime autant l'esthétique que l'ergonomie et j'adopterais cette feuille de style dès qu'elle sera peaufinée.

      PS: Tout compte fait, j'ai aussi Répondre et Modifier qui se chevauchent peut importe la taille de ma fenêtre.

      • [^] # Re: Très chouette

        Posté par (page perso) . Évalué à 2.

        Pour le logo et le lien "Modifier" c'est corrigé. Par contre pour le reste c'est plus compliqué si je veux garder cette disposition …

        • [^] # Re: Très chouette

          Posté par . Évalué à 1.

          Là, tout de suite maintenant tout est beau, tout fonctionne. Donc un grand merci et tout.

  • # Merci && Bug

    Posté par (page perso) . Évalué à 1. Dernière modification le 02/02/13 à 22:07.

    Très chouette. Je l'utilise maintenant. J'espère que tu ne casseras pas le lien, c'est ce que j'ai renseigné au site…

    J'ai remarqué un petit bug minime : quand les titres de commentaires sont trop longs, ou que l'on est trop loin dans les emboîtements de commentaires, le titre du commentaire se chevauche avec le « Ce commentaire est-il pertinent ou inutile ? ».
    Nimage

    Edit : Ah d'ailleurs c'est pareil avec le Répondre/Modifier. : Nimage

    De ses yeux vastes comme des océans, encroûtés de chassie et de poussière d'astéroïdes, Elle fixe le But Ultime.

    • [^] # Re: Merci && Bug

      Posté par (page perso) . Évalué à 1.

      J'espère que tu ne casseras pas le lien, c'est ce que j'ai renseigné au site…

      C'est celui que j'utilise aussi donc si je le casse en général je m'en rend compte assez vite.

      J'ai remarqué un petit bug minime : quand les titres de commentaires sont trop longs, ou que l'on est trop loin dans les emboîtements de commentaires, le titre du commentaire se chevauche avec le « Ce commentaire est-il pertinent ou inutile ? ».

      oui je connais le problème, mais j'ai pas vraiment de solution. Je suis un peu limité du fait de ne pas pouvoir toucher au code html.

      Ah d'ailleurs c'est pareil avec le Répondre/Modifier.

      j'ai remarqué ca tout à l'heure mais comme le lien modifier est éphémère, il a disparu entre temps. J'ai testé une modif on va voir ce que ça donne ;-).

  • # sass & co

    Posté par (page perso) . Évalué à 4.

    Merci également à CrEv et sa css solarized, qui m'a mis sur la bonne voie avec l'utilisation de sass.

    Ben de rien ;)

    Franchement, ça fait un moment que je ne fais plus de css. Que du sass, scss, less, google stylesheet. C'est quand même beaucoup plus puissant / intéressant.

    D'ailleurs, alors que j'étais plus syntaxe scss, j'utilise de plus en plus sass qui est plus sympa si on part from scratch (pas de css existant) et qui est plus cohérente dans un contexte ruby + coffeescript + haml puisqu'on a 4 syntaxes presque identiques.

    Sinon, ça me fait dire que je devrais finir de corriger deux trois petites choses dans solarized, ça ferait du bien…

    Bravo pour ta css

    • [^] # Re: sass & co

      Posté par (page perso) . Évalué à 1. Dernière modification le 03/02/13 à 19:20.

      Franchement, ça fait un moment que je ne fais plus de css. Que du sass, scss, less, google stylesheet. C'est quand même beaucoup plus puissant / intéressant.

      Je songeais justement à préparer une feuille de style pour Linuxfr (j'en suis encore à la mockuper dans Gimp), et je pense profiter de l'occasion pour me mettre aux Sass et compagnie. Ce qui me fait un peu flipper, n'étant pas du tout programmeur, mais je pense pouvoir y arriver avec un peu d'abnégation.

      Autrement, félicitations saimn, tu as fait ma nouvelle CSS préférée :)

  • # Très bien pour les smartphones

    Posté par . Évalué à 1.

    Ta feuille de style donne un très bon affichage sur les smartphones. Merci et bravo !

Suivre le flux des commentaires

Note : les commentaires appartiennent à ceux qui les ont postés. Nous n'en sommes pas responsables.