Framework Gulp

Bonjour,

Je vous présente mon nouveau framework : Scriptura

Toujours en brouillon, mais sera-t-il finit un jour ?...

Codé originairement avec Grunt, le framework est finalement généré via Gulp. C'est un framework html/css/js qui supporte les syntaxes Jade et Stylus (auparavant Sass). Notez que la syntaxe Jade est parsée afin de supporter du php comme ceci :

{% $content %}

Ce qui donne par exemple, pour un Single.php.jade pour WordPress (projet en cours de dev) qui deviendra une fois compilé Single.php :

extends PatternLayouts

append variables
  _require_wp Functions/SingleVariables

append functions
  _require_wp Functions/Breadcrumb

block breadcrumb
  _php $breadcrumb

block content
  article.article(itemscope itemtype='https://schema.org/Article')
    | {% $image %}
    #index-article
      .wrap
        .grid.print-area
          .m12
            h1.h3 {% $name %}
          .grid6.sizeS-grid12
            .adddropcap.links(itemprop='articleBody') {% $content %}
            include Includes/Buttons
          aside.m6.sizeS-m12
            include Includes/Sidebar

block comments
  .ajax-window-comments

block aside
  include Includes/Relationship

Il suffit de suffixer les fichiers Jade en *.html.jade pour ceux destinés à être en html only, et de les préfixer en *.php.jade si on les destine au php.

À noter aussi la possibilité de générer une font icons simplement en ajoutant/modifiant les SVG situés dans le dossier ./Fonts/GlyphIconsSources, Gulp se chargera ensuite de modifier la police d'icônes, ainsi que le css, en ajoutant/supprimant une nouvelle classe dont le nom sera en rapport avec le nom du svg.

Voilà voilà, je suis ouvert à vos suggestions :
- sur la présentation du site (clarté ou non de la présentation du projet, le code of course...)
- sur le projet lui-même (Jade, Stylus, and Cie), dans ce cas là il vous faudra télécharger le repository et exécuter les commandes comme indiqué.**

**Les commandes une fois tapée, un onglet s'ouvre dans votre navigateur et vous donne ceci :

Modifié par Olivier C (17 Feb 2016 - 17:23)

Bonjour,

Comme personne ne réagit, voici une minuscule contribution.

Ça donne envie de l'utiliser.

Il faudrait essayer de faire relire la page d'accueil en anglais par un anglo-saxon. Je ne suis pas bilingue, mais je crois à titre d'exemple que "data" ne prend pas de "s" au pluriel, qu'on écrit "within" et non pas "with in", etc.

Une traduction en français du "Get Started" serait en cohérence avec le fait qu'il y en a une pour "About".

Pour les exemples avec les photos (comme "Layout for Photoblog"), c'est un peu trop facile de les faire avec un nombre de photos multiple de 2, 3, et 4 !

Quand on change de thème, on voit pendant un instant une page sans style (ça ne le fait bien sûr que si le cache a été vidé avant). Je crois avoir lu dans un de tes posts précédents que c'était plus ou moins volontaire (mais je ne sais pas si c'est vraiment de ça qu'il s'agit). Je pense cependant que plutôt que de montrer une page sans style, il vaudrait mieux se débrouiller pour que la page soit complètement blanche pendant la transition, ou recouverte d'un fond de la couleur dominante du thème précédent ou suivant.

J'ai bien aimé le parti pris de ne pas supporter les anciens navigateurs.

Amicalement,

Bonjour Parsimonhi.

Pour le chargement des styles c'est normal : le switch se fait par javascript et non côté serveur, ce qui serait impossible puisque le site est hébergé sur github. De toute façon il ne s'agit que d'une petite démo annexe, qui me permet en sus de contrôler tous mes styles de manière simple et rapide, donc bon...

[Edit :] Ah si : sur cette page uniquement je pourrais charger tous les styles à l'avance, ce serait plus joli.

Je verrais pour l'anglais, peut-être que la solution serait de rester en français seulement. Je verrais pour ce point. Le problème des docs c'est qu'en produire une c'est lourd, la décliner en deux versions... d'autant plus.

parsimonhi a écrit :
Pour les exemples avec les photos (comme "Layout for Photoblog"), c'est un peu trop facile de les faire avec un nombre de photos multiple de 2, 3, et 4 !

Il s'agit d'exemples d'illustration simple, j'aurais tout aussi bien pu utiliser une grille plus complexe. Tu aurais pensé à quoi par exemple ? Si tu as une image de layout en exemple je veux bien la reproduire, juste pour le fun.

Merci pour ton retour.
Modifié par Olivier C (26 Feb 2016 - 09:12)

Bonjour,

Olivier C a écrit :
De toute façon il ne s'agit que d'une petite démo annexe, qui me permet en sus de contrôler tous mes styles de manière simple et rapide, donc bon...

Oui oui, c'est du détail. Mais comme le reste est quasi parfait, il fallait bien que je trouve quelque chose !

Olivier C a écrit :
Il s'agit d'exemples d'illustration simple, j'aurais tout aussi bien pu utiliser une grille plus complexe. Tu aurais pensé à quoi par exemple ?

J'aurais par exemple mis 23 images au lieu de 24. Ça oblige à prévoir ce qui se passe sur la dernière ligne et/ou ça montre comment faire à un éventuel utilisateur. Je n'ai pas essayé de tester ton exemple avec 23 images : ça tombe peut-être en marche tout seul.

Amicalement,

parsimonhi a écrit :
ça tombe peut-être en marche tout seul.

Non, il faut quand même le configurer afin de savoir ce que l'on souhaite comme comportement. Pour reprendre ton exemple on pourrait faire une "case" manquante par défaut (le plus simple et à mon avis le plus esthétique), ou encore imaginer que les trois dernières images soient plus grandes afin d'occuper tout l'espace disponible. C'est tout a fait faisable en l'état avec ce framework.

Si tu as une idée de layouts complexes je le ferai sur CodePen, juste pour le fun.

Bonjour,

Olivier C a écrit :
...ou encore imaginer que les trois dernières images soient plus grandes afin d'occuper tout l'espace disponible.

Suivant la largeur du viewport, on n'a pas forcément 4 images par ligne. Pas si simple me semble-t-il ! C'est sûr qu'on peut le faire, et que tu vas y arriver. Mais si je me mets à la place de celui qui débute avec ton outil, il peut pas mal galérer. C'était le sens de ma remarque.

EDIT : je suis d'accord avec toi sur le fait que le plus simple et esthétique est de rajouter une case vide.

Amicalement,
Modifié par parsimonhi (26 Feb 2016 - 11:44)

Bonjour,

Olivier C a écrit :
Si tu as une idée de layouts complexes je le ferai sur CodePen, juste pour le fun.

Je vais voir si je n'ai pas dans mes projets passés un cas "bien comme il faut". Commence à trembler ! (je plaisante bien sûr)

Amicalement,

parsimonhi a écrit :
Bonjour,Je vais voir si je n'ai pas dans mes projets passés un cas "bien comme il faut".

Ça marche !

Bonjour,

Voici donc un problème général (qui peut avoir un intérêt pour pas mal de gens) : l'affichage de résultats d'une compétition à élimination directe.

En voici un exemple : http://jeudego.org/_php/affiche_asian_TV_Cup.php

Il y a aussi ce genre de "tableaux" de résultats sur les sites sportifs bien évidemment (en particulier ceux qui traitent du tennis). Mais la qualité est très aléatoire, d'où un intérêt supplémentaire à bien traiter ce problème.

Cela peut aussi servir en généalogie.

Pour en revenir au lien que j'ai donné, dans chaque case, on a le nom des joueurs et un numéro, mais tu peux oublier ce qu'il y a dans les cases (on pourrait y ajouter un drapeau de pays, une photo, etc.). La taille de chaque "case" est inconnue à priori. Il suffit que la solution fonctionne avec des "cases" contenant ce que tu veux. Par contre, il faut faire apparaitre une ligne qui relie certaines "cases", matérialisant un arbre. Cerise sur le gâteau, l'utilisation de canvas pour tracer l'arbre n'est pas souhaitée.

Il peut y avoir des blancs (c'est à dire que l'arbre n'est pas complet, des joueurs sont exemptés, en particulier au début de la compétition).

Dans la solution, il faudrait prévoir un bandeau pour le haut (le menu de gauche et le bas de page, on peut les oublier). Ce n'est pas le plus dur.

Pour le html, tu peux partir soit sur celui du lien que j'ai donné en exemple (tu ne gardes que le contenu bien entendu, des <div> donc) soit sur l'idée d'une liste avec des ul et des li, éventuellement sur plusieurs niveaux d'imbrication (si ça peut t'arranger).

Et il faut bien évidemment que ce soit lisible sur un téléphone !

Est-ce que ça te va, comme exemple ?

Amicalement,
Modifié par parsimonhi (26 Feb 2016 - 13:13)

Effectivement... Ton exemple dépasse largement le cadre de mon framework (je pensais plutôt au layout global d'une page).

Mais qu'à cela ne tienne, l'exercice m'intéresse : je me pencherais sur ce problème spécifique et si j'arrive à quelque chose je te ferais un retour.

@parsimonhi : Tiens, voici mon embryon de solution sur un topic dédié : Le défi de Parsimonhi....
Modifié par Olivier C (28 Feb 2016 - 08:25)

Bonjour,

Un site qui me semble bien balancé sur le fond, sur un sujet que je ne maîtrise pas certes.

Rapidement, la navigation me semble fluide et aérée, adaptée au sujet.
Mon avis pour que la forme soit plus cohérente avec le fond…

Une petite remarque sur le grand S qui fait trop Illustrator (courbure tronquée en haut). Les gros textes du titre dans un vieux bordeaux avec des initiales stylisées, c'est pas super moderne, surtout avec du code, ça lutte un peu. Regroupez, plutôt que de caler un mot au dessus et une ligne en dessous. S'il s'agit du nom du site et de sa baseline, clarifier en laissant le nom en grand et la baseline en tout petit juste en dessous. Il vaut mieux associer les deux, visuellement et pour donner un message clair. Faites simple et efficace !

Pas fan non plus de ce fond gris trop soutenu, avec des couleurs éteintes par dessus. Ça manque de fraîcheur alors que les couleurs vives et franches, les fonds blancs ou gris très clairs ont la cote. Il y a des raisons pour cela, en choisissant des couleurs franches et contrastées, on évite les variantes qui d'un écran à l'autre peuvent s'avérer ternes ou sales. Inspirez-vous des sites en vogue actuellement ou des palettes de couleurs Material design par exemple.

https://www.materialpalette.com/
http://www.materialui.co/colors
https://color.adobe.com/fr
…

Les fonds sombres sont à éviter, sauf si on souhaite donner un aspect "tableau de bord", mais c'est plus difficile à décliner ensuite et peut rapidement devenir lourd.

Un exemple avec des polices de caractère modernes et un fond neutre et clair, qui met en valeur les textes, le code et les éléments de couleurs en petites touches (vert flashy, bleu code, violet frais… ), ainsi que les visuels. Une variante gris et noir (gris foncé) pour structurer le texte courant et les tags.

https://coderwall.com/p/bxyvna/material-color-palette

Notez la simplicité et la clarté de la mise en page : moderne !

Et enfin, attention aux blocs textes trop larges ou mal proportionnés (sur votre capture d'écran «Hello World!»). Prévoyez une largeur maximale et n'hésitez pas à placer une marge à partir d'une certaine largeur d'affichage. Pour le confort et la lisibilité il est recommandé d'éviter les paragraphes avec des lignes de plus de 80 signes (espaces incluses), au pire, environ 100 signes pour les très petits textes. Plus est une faute de typo et va décourager nombre de lecteurs.
Un petit guide typo basique à mettre dans ses favoris :

http://www.pompage.net/traduction/8-facons-simples-d-ameliorer-la-typographie-dans-vos

Pas de lettrine "à l'ancienne" pour compenser le manque de structure de la mise en page, c'est inutile et désuet. Jouez plutôt avec la taille et la graisse des caractères. Par exemple, gras/grand/couleur pour les titres, regular/petit/gris pour le texte courant.
Pas de texte gris sur gris, ça manque de contraste. Noir, gris foncé sur blanc ou gris très clair (genre R/V/B:240) + touches de couleurs placées judicieusement pour aider à la lisibilité (1 à 2 couleurs max, 3 dans cas particulier (voir cas cité en exemple ci-dessus.

En responsive (en petite largeur), le burger icon en gris sur gris dans une teinte proche manque de contraste. Même avec le fond carré plus foncé ajouté en dessous. En améliorant le contraste, le carré pourra être enlevé et le pictogramme sera plus lisible.


Le résultat de tout ça devrait donner un site plus moderne, clair, efficace et lisible. Autrement dit, la forme au service du fond.

Voilou pour moi. Et félicitations pour le travail accompli ! C'est du lourd !
Modifié par spongebrain (05 Mar 2016 - 18:17)

Et ben voilà ! Tout de même ! Je me disais : "Et moi alors ? Je l'ai quand mon commentaire de Spongebrain ?"

@spongebrain : merci pour ce commentaire conséquent au contenu intéressant. Je vais retenir quelques remarques qui m'ont plus particulièrement touché, le burger icon par exemple.

Pour les couleurs... je pense qu'il s'agissait de la critique du thème "Ratatouille" installé par défaut : j'ai fais quelques tests sur un fond beaucoup plus clair, avec un remaniement de toutes les autres couleurs, mais je trouve que l'on y perd beaucoup pour ce qui est de la marge de manoeuvre dans la gestion des couleurs plus claires. Je ne trouve pas qu'un fond gris fasse vraiment sale sur les écrans actuels (moins de 5 ans). À l'inverse un fond trop clair, presque blanc - même s'il est effectivement tendance - est souvent perçu comme très impersonnel et même agressif pour la lecture, c'est en tout cas l'avis de mon entourage. Bref, les goûts et les couleurs... Je vais tout de même garder les modif's que je viens de faire pour ajouter un nouveau panel de couleur à la panoplie.

PS : et merci pour le lien vers ton article que j'avais d'ailleurs été le premier à commenter
Modifié par Olivier C (17 Mar 2016 - 08:24)