Where to put #buttons on #forms
▻https://adamsilver.io/articles/where-to-put-buttons-in-forms
Align the primary button to the left edge of the inputs
illuminate a clear path to completion. Aligning inputs and actions with a strong vertical axis clearly communicates how to go about completing a form."
This layout also helps screen magnifier users to see it without having to pan across.
Les boutons des formulaires de #SPIP seraient mal placés ?
exemple de résultats du « Eye tracking » pour le premier point : ▻https://www.lukew.com/ff/entry.asp?571
Priority Guides : A Content-First Alternative to Wireframes – A List Apart
▻https://alistapart.com/article/priority-guides-a-content-first-alternative-to-wireframes
Une manière de commencer l’ergonomie uniquement sur une liste de contenus ordonnés, hiérarchisés. On se focalise sur la hiérarchie du contenu, sans préjuger du placement (je ne parle même pas des styles mais bien même pas du placement, layout, maquettes filaires). En plus c’est directement mobile-first, puisque juste en une longue colonne.
Du coup, en allant même plus loin que ce que montre l’article, cela peut se faire uniquement en texte amélioré (markdown par ex), et donc dans un pad commun à plusieurs. Cela permet de valider avec les propriétaires du site/clients le « qu’est-ce qu’on décide de mettre dans chaque page », sans du tout passer des heures à discuter de l’affichage.
Can I email… Support tables for #HTML and #CSS in #emails
▻https://www.caniemail.com
A site that offers support info on more than 50 HTML and CSS features tested across 25 email clients.
Tiens, une configuration en #CSS pour fabriquer directement du scroll doux (« smooth scroll ») :
scroll-behavior: smooth;Inconvénient, Safari ne le prend pas en compte (mais ça se dégrade très bien, puisque le scroll sera effectif, simplement il ne sera pas « progressif »).
Avantage, on peut le désactiver facilement avec une media query pour les gens qui ont le mal de mer :
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
Using SVG | CSS-Tricks
▻https://css-tricks.com/using-svg
Synthèse complète de toutes les méthodes pour intégrer du SVG dans une page web
Welcome to the wonderful world of Web Performance
▻https://www.sitespeed.io
Suite d’outils libres pour monitorer la performance des sites, tout installable en docker ou npm.
Connexion dès l’inscription
Ce minuscule plugin permet de connecter directement les personnes qui s’inscrivent immédiatement lorsqu’elles ont fini de remplir le formulaire.
Profils
Ce plugin permet de configurer un ou plusieurs profils utilisateurs en déclarant quelles informations ils peuvent contenir (quels champs, une fiche de personne ou d’organisation, des coordonnées, etc).
Icongram
▻https://icongr.am
Une sorte de méga #cheatsheet pour plein de packs/fonts d’icones.
Vers un système modulaire de publication : éditer avec le numérique – Antoine Fauchié
Le domaine du livre, et plus particulièrement l’édition, connaît des mutations profondes au contact du numérique. Après des phases successives d’informatisation, l’une des manifestations les plus visibles de ces bouleversements est probablement l’ebook. Si le livre numérique est une approche inédite de l’écrit tant dans sa diffusion que dans sa réception, il y a en filigrane des transformations plus essentielles dans la manière de faire des livres. Des structures d’édition imaginent des nouvelles chaînes de publication originales et non conventionnelles pour générer des versions imprimée et numériques d’ouvrages et de documents, remplaçant les traditionnels traitements de texte et logiciels de publication par des méthodes et des technologies issues du développement web. Ainsi un système modulaire de publication peut se substituer à des chaînes linéaires, repositionnant l’humain au cœur des machines ou des programmes. À travers des commentaires de textes et des analyses de cas nous étudions les évolutions du livre avec un regard plus global sur notre rapport à la technique, et nous exposons les principes fondateurs d’un nouveau modèle.
Mémoire d’Antoine Fauchié dans le cadre du Master Sciences de l’information et des bibliothèques, spécialité Publication numérique, de l’Enssib, sous la direction d’Anthony Masure, maître de conférences en design à l’université Toulouse – Jean-Jaurès et de Marcello Vitali-Rosati, professeur au département des littératures de langue française de l’Université de Montréal et titulaire de la Chaire de recherche du Canada sur les écritures numériques.
#publications_hybrides #prepostprint #web2print #digital-first_publishing #système_modulaire_de_publication
Enfin tout lu…
TL ;DR : le dernier chapitre suffit :)
▻https://memoire.quaternum.net/3-un-systeme-modulaire/3-2-les-principes-d-un-nouveau-modele-de-publication
TL ;DR :
– Un système et non plus une chaine
– Interopérabilité + Modularité + Multiformité
– Un format de syntaxe légère (par ex Markdown)
– Un format de description pour les méta-données (par ex YAML)
– Un suivi de version de textes bruts (par ex Git)
– Des convertisseurs vers des formats connus de lecture (HTML, EPUB, etc)
– Un générateur de HTML/XML+styles vers PDF, pour l’instant PrinceXML avec recherche d’alternatives libres
– Chaque élément pouvant être remplacé facilement un jour par autre chose.
Lien avec le post sur WeasyPrint donc, alternative libre en Python à PrinceXML (mais qui n’est pas encore aussi avancé).
►https://seenthis.net/messages/734575
Et @tetue citée dans le texte et la bibliographie. :)
Que deux étoiles depuis trois mois, alors @maieul que ça peut intéresser, et qui d’autre… @hlc aussi, @jluc/@passerelle
#print #impression #publication #édition #web #HTML #CSS #EPUB #PrinceXML #WeasyPrint
Oui, on me l’avait signalé via je ne sais plus quel reseau (irc, je crois, notamment parce que je suis cité).
Il y a des choses encore à creuser. Par ex sur la bibliographie. Là il eécrit en dur <code>(Rouquette et al., 2012)</code>. Ca veut dire que le jour où il veut changer de formatage bibliographique (par ex, passer en note de bas de page avec référence complète), il l’a dans l’os.
Le problème, c’est que MD ne permet pas en soi la gestion de bibliographie. Au mieux on peut brancher sur du Zotero. Mais les styles Zotero sont limités en terme de gestion fine (il y a plein de style, mais toujours pour des cas simples). De même le modèle de bibliographie de Zotero est problématique car il n’a pas de système d’héritage.
Mais bon, à ce jour le plus complet c’est BibLaTeX. mais ca dépend de LaTeX, et donc pas du tout multiplateforme.
C’est pas forcément en dur non, puisque les méta-data sont proposées à être stockées dans des YAML (qui parfois peuvent être inclus en début du MD, parfois dans un fichier dédié). Exemple chez Getty dont il parle :
▻https://github.com/gettypubs/quire/blob/master/content/guide/citation-bibliographies.md
Après on peut dire qu’il manque tel ou tel truc quand on est hyper spécialisé, mais le format YAML permet des imbrications comme on veut, donc c’est pas un blocage pour décrire des choses compliquées. Et ensuite ya des shortcodes pour insérer dans le texte. Il y a donc bien une séparation entre la donnée, puis l’insertion, puis la présentation finale.
D’ailleurs lui-même pour ce mémoire, sa bibliographie est bien à part en fait, dans des fichiers bib :
▻https://gitlab.com/antoinentl/systeme-modulaire-de-publication/blob/master/_bibliographie/bibliographie.bib#L740
Et ensuite il insère pas en dur, où as tu vu ça ?
▻https://gitlab.com/antoinentl/systeme-modulaire-de-publication/blob/master/_memoire/3-un-systeme-modulaire/-3-2-les-principes-d-un-nouveau-modele-de-publication.md
{% cite rouquette_xelatex_2012 %}
my bad, je suis tombé sur un brouillon (mais qui ressemblait furieusement à la forme finale)
▻https://gitlab.com/antoinentl/systeme-modulaire-de-publication/blob/master/materiaux/partie-3/les-principes-d-un-systeme-modulaire-de-publication/index.md#L55
Le système que tu cite chez Getty n’est pas un vrai système de biblio (pas de séparation du formatage et de la structure de donnée). Mais apparement il y a trouvé une manière de brancher son MD sur du bibtex.
Après je dis pas que c’est impossible d’avoir des systèmes « complexe » (encore que pas tant que cela, juste fréquent dans certains domaines) de biblio avec MD mais que, en l’état cela n’existe pas.
De ce que je comprends, jamais il ne s’agira de faire de la biblio, complexe ou pas, avec MD. Ce dernier ne sert qu’à rédiger du texte. La biblio ce sont des méta-données complexes, donc YAML, Bib, ou autre. Et ensuite dans le MD on insère juste des shortcodes, comme des modèles SPIP quoi, pour afficher soit telle référence précise, soit la liste complète.
Du coup apparemment ça existe bien, puisqu’il a effectivement des shorcodes qui viennent insérer (avec le HTML qu’il décide) dans son MD des choses venant de son bib.
certes « avec markdown » était un raccourcis.
Et oui visiblement il est possible d’avoir des shortcut pour gérer de la biblio qui fait appel ensuite à un moteur de formatage de bibliographie. La question qui se pose est de savoir quelles possibilités sont offertes par ce moteur de formatage de bibliographie. Et, à ma connaissance, on ne fait pas aujourd’hui plus puissant aujoud’hui que le couple biblatex+biber pour ca.
Inclusive Components
▻https://inclusive-components.design
A blog trying to be a pattern library. All about designing inclusive web interfaces, piece by piece.
Cards
04/06/18Data Tables
31/03/18Notifications
27/02/18A Content Slider
22/11/17Collapsible Sections
26/10/17Tabbed Interfaces
05/10/17A Theme Switcher
08/09/17Tooltips & Toggletips
25/07/17Menus & Menu Buttons
10/05/17A Todo List
07/04/17Toggle Buttons
31/03/17
#intégration #web #accessibilité #composants #bonne_pratique #bonnes_pratiques #pattern #UX #ergonomie
GitHub - VPenkov/okayNav: The world’s okayest #responsive navigation
▻https://github.com/VPenkov/okayNav
This navigation aims at progressively collapsing navigation links into an off-screen navigation instead of doing it for all the links at the same time.
COOL.
Mais ça ne gère pas les sous-menus par contre. Ça sera pas mal d’arriver à coupler ça à un autre plugin (ou CSS) qui gérerait les sous-menus de manière accessibles (avec nav par clavier aussi) et responsive.
#intégration #web #HTML #CSS #javascript cc @fil
Ah bah ya même un ticket d’amélioration pour ça déjà :
▻https://github.com/VPenkov/okayNav/issues/4
Lancement aujourd’hui de la nouvelle refonte du site #SPIP de ▻http://pensezsauvage.org #shameless_autopromo donc
Depuis quelques années, l’association pensezsauvage fait pousser des plantes potagères, des fleurs curieuses et rares pour récolter les graines à redistribuer et à revendre sur les marchés ou sur internet.
Jusque là, le site disposait du theme_greeny de @marcimat (merci :*) avec un squelette légèrement modifié. Mais l’asso souhaitait quelque chose de plus clair et de responsive, avec une navigation compréhensible à tout·es. C’est finalement Mikou de pensez sauvage lui même qui a dessiné la maquette style Kraft. Pas évident du tout, mais j’estime que c’est bien la technique qui doit se plier aux idées créatives et non l’inverse. J’ai refait l’architecture du site et réalisé les fonctionnalités et l’intégration SPIP html/css/js sur une base zcore. J’ai créé une boutique minimaliste avec trois plugins SPIP : prix, panier et paypal, il n’y a ni compte client ni stockage de coordonnées, bref, rien d’autre qu’un document de l’article avec un champ ’prix’ à remplir.
L’idée est celle d’un onepage où l’internaute navigue par ancres, un petit JS perso permet de tester si l’ancre existe, sinon de renvoyer vers l’URL demandée pour éviter les impasses de navigation et permettre au site d’évoluer à son rythme. Bon, j’avoue que j’étais pas réjouit de mettre tout le catalogue sur l’accueil, mais j’ai trouvé des astuces pour alléger.
Il m’aurait été parfaitement impossible de faire cela sans #CSS3 il n’y a que serait-ce 5 ans et je me suis pas mal amusée à vrai dire.
Le plugin panier a été modifié pour faire apparaitre les sachets de graines au fur et à mesure de leur mise au panier, avec un peu d’ajax perso on reste sur la même page le plus souvent possible. Le plugin lazysizes permet de ne faire apparaitre les images au format définitif que lorsque la vue visiteur est en face.
Comme l’asso et les visiteurs préfèrent de loin les chèques, qui évitent de laisser des données sur internet, le panier une fois remplit peut être imprimé avec un montant qui déduit les frais de paypal.
Pour cela j’ai créé une page reprise par le plugin Dompdf qui créé le pdf du panier de session du visiteur à la volée.
La recherche est en autocompletion sur l’ensemble du catalogue des graines, la page glisse ensuite vers le sachet choisi.
Merci à @jacotte qui a bien voulu revoir de ses yeux de lynx les défauts restants à corriger. Par exemple la font choisie par Mikou ne disposait pas d’apostrophes et de virgules correctes. Je suis donc passée par FontForge pour corriger cela avant l’intégration en base64 dans la CSS.
Merci aussi à @james qui m’a poussé à écrire ce billet !
C’est très très chouette.
Par contre je trouve pas très pratique ce gros header fixe qui me prend un bon tiers de l’écran [edit]si > 1600px de large[/edit] et du coup limite le contenu du catalogue sous les yeux à 1 ligne, assez bas, comme on le voit sur ta dernière capture justement.
@marcimat merci de tes retours
effectivement, je préfère aussi le mode <1600px
je vais peut-être tenter de « dézoomer » la page quand on est >1600px
Et pour « Les autres trucs » c’est tout bêtement les articles en pied de page ! mais c’est pas bien clair, je vais remettre ce titre pour mieux comprendre :)
Paged.js – Paged Media
▻https://www.pagedmedia.org/paged-js
aged.js is an open-source library to paginate content in the browser. Based on the W3C specifications, it’s a sort of polyfill for Paged Media and Generated Content for Paged Media CSS modules. The development was launch as an open-source community driven initiative of it’s still experimental. The core team behind paged.js includes Adam Hyde, Julie Blanc, Fred Chasen & Julien Taquet.
Très intéressant, nous qui essayons de rédiger et générer nos documents papiers longs (cahier des charges, documentation finale, etc) depuis SPIP… Enfin « essayons », non, on y arrive assez bien maintenant, mais toujours avec PrinceXML qui n’est pas libre. Et on reteste Weasy (libre python) régulièrement car il évolue bien.
►https://seenthis.net/messages/734575
À suivre de prêt, cette initiative…
« Supported by Shuttleworth fundation »
The best Icon Tool - Orion Icon Library
▻https://orioniconlibrary.com
#Intégration / #développement : Plugin vs #boiler_plate
Vous êtes plutôt l’un ou plutôt l’autre vous ?
Il y a 1 an, j’attaquais mon squelette perso, celui qui me sert aujourd’hui de base pour la structure html et quelques styles css de bases et qui repose sur ZPIP V2. Ce squelette est (plus que) largement inspiré de Intégraal de @rastapopoulos et SPIPr de Cédric et @ben.
Je commence à avoir quelque chose d’assez adapté à mes besoins. Outre une structure html5, ça permet de gagner beaucoup de temps : une grille à mettre en place ? <INCLURE{fond=inclure/liste/grille,...> + les bons paramètres et le tour est joué.
La question qui se pose maintenant, c’est le fonctionnement : boilerplate ou plugin.
Le plugin , c’est un squelette qu’on surcharge avec un squelette/plugin propre à chaque nouveau projet. Le boilerplate , c’est un squelette qu’on modifie directement pour chaque nouveau projet.
L’avantage du 1er, c’est qu’on partage les évolutions entre tous les sites qui l’utilisent mais l’inconvénient, c’est qu’il faut conserver une compatibilité descendante sous peine, soit de casser le site, soit de ne plus pouvoir profiter des évolutions.
Le 2nd, ben c’est exactement l’inverse.
Au début, le fonctionnement plugin m’allait très bien : je développais mon plugin en même temps que les sites et chacun profitait donc des mise à jour de la structure et des styles de bases. Mais à force de bouger des choses, je me rends compte que ça devient galère de garder cette compatibilité descendante.
Donc voilà, si vous avez des retours d’expérience...
Liens :
SPIPr : ▻https://zone.spip.net/trac/spip-zone/browser/spip-zone/_squelettes_/spipr-dist/trunk
Integraal : ▻https://zone.spip.net/trac/spip-zone/browser/spip-zone/_squelettes_/integraal
integraal (principe) : ▻https://zone.spip.net/trac/spip-zone/changeset/83559/spip-zone
Repo de mon plugin : ▻https://gitlab.com/jmoupah/zcm
Doc de mon plugin : ►https://notes.cousumain.info/ZCM-Squelette-modulaire-SPIP-ZCore.html
Les deux, cela dépend du type de projets sur lesquels tu travailles.
C’est l’exact raison pour laquelle j’ai conçu Intégraal, parce que Zpip ou SpipR ne convenait pas du tout dans les cas où on avait des clients différents, avec des graphismes dédiés à chaque fois, où il faut intégrer des maquettes précises, qui n’ont rien à voir les unes avec les autres.
Dans ce cas, l’avantage d’avoir un plugin commun se réduit drastiquement, pour deux raisons :
1) tu finis par surcharger au moins 50% du truc de base
2) quand il y a une mise à jour du plugin central, ça peut très souvent te péter ton intégration, puisque tu avais basé du graphisme sur une structure qui peut bouger à tout moment !
Voilà donc pourquoi cela fait des années que l’on travaille avec Intégraal et désormais sa commande spip-cli qui permet en 2s d’avoir la structure d’intégration, qu’ensuite on modifie directement.
En revanche, attention, si une partie du travail concerne tout un ensemble de clients qui se ressemblent au moins un peu, et aussi si tu arrives à avoir des bases génériques ET configurables (noisettes ou autre), alors dans ce cas là ça peut de nouveau être intéressant d’avoir un plugin-squelette qui est le même pour tout le monde, et sur lequel tu ne fais que plaquer des styles (et pour ça il faut que tes classes CSS soient génériques aussi, quand je parle de générique, c’est pas juste au niveau des squelettes, <inclure>, etc).
Actuellement, en plus de continuer à utiliser Intégraal, nous sommes en train de réfléchir à un plugin commun aussi, pour d’autres besoins.
En simplifiant :
Intégraal = site à façon, où on conçoit un ensemble de fonctionnalités, une ergonomie et un graphisme propre à ce site, puis on l’intègre tel qu’on l’a conçu.
Plugin = site où on propose aux gens des fonctionnalités qui sont déjà à moitié intégré, parce que ça rentre vraiment dans le périmètre de leurs besoins, et sur lesquels on change juste quelques petites différences graphiques (palette de couleur, typo, header, etc).
Mais du coup, si on change son boiler plate en plugin spécifique au nouveau projet, ça veut dire que chaque nouvelle fonctionnalité ajoutée en cours de développement (donc dans le nouveau projet, tout le monde suit ?) doit être reportée dans le boiler plate source pour profiter au prochain projet.
Ça veut peut être dire qu’il faut attendre que le boiler plate soit arrivé à maturité avant de fonctionner comme ça...
bon, work in progress quoi...
Bah oui, mais seulement si c’est une fonctionnalité générique. Le principe du boiler plate c’est qu’ensuite tu modifies en fonction de ton projet précis. Mais à tout moment, et surtout au début bien sûr, tu peux détecter que tel ajout va te servir dans d’autres futurs projets, donc tu l’ajoutes à ton projet en cours, tu le testes, tu trouves ça cool, et alors tu le reportes sur le boiler plate. C’est ce qu’on fait dans Intégraal depuis le début (même si on n’est pas forcément très rigoureux, ya sûrement plein de choses encore à reporter).
Oui, c’est reporter les évolutions qui semble contraignant.
Je vais tester ce fonctionnement pour mon prochain projet.
A suivre donc...
Hello,
après expérience, je suis resté sur le fonctionnement boiler plate. Même s’il impose une rigueur pour reporter les nouvelles fonctionnalités développées au fur est à mesure, c’est toujours plus réaliste que de vouloir garder une rétro-compatibilité en mode plugin.
Voilà pour mon retour d’expérience perso...
Merci aux uns et aux autres pour les retours, pistes, outils.
Oui c’est bien là l’argument principal : la pérennité et la maintenance sur le long terme. Quand t’as utilisé ce projet pour un site, après 3 ans, ça se trouve tu ne veux plus utiliser la même grille SCSS, t’as améliorer la sémantique du HTML ou la normalisation des classes CSS (BEM etc), bref t’as fait plein de changement, et donc tes personnalisations de l’époque peuvent être toutes pétées si ton projet était un plugin générique à mettre à jour.
Alors qu’avec un boiler plate, tu l’as utilisé tel qu’il était au moment où tu en avais besoin, et tu l’as personnalisé, et basta. Si 3 ans plus tard ya une refonte à faire, de toute façon ça sera sur une autre base. Et si c’est juste des petites modifs, c’est sur le socle de l’époque.
Bien sûr ça c’est quand on doit intégrer des maquettes précises. Quand on propose une solution générique et que les clients ne font que choisir parmi des trucs existants, là faut tout en plugins.
Building Your Color Palette
▻https://refactoringui.com/previews/building-your-color-palette
Ever used one of those fancy color palette generators? You know, the ones where you pick a starting color, tweak some options that probably include some musical jargon like “triad” or “major fourth”, and are then bestowed the five perfect color swatches you should use to build your website?
Home Page - WeasyPrint
▻https://weasyprint.org
Un logiciel serveur pour générer les PDF à partir de pages HTML + CSS (nécessite python 3.8)
Dépot github : ▻https://github.com/Kozea/WeasyPrint
La revue de Linuxfr.org : ▻https://seenthis.net/messages/734549
(on va tester pour faire des retours d’usages...)
On a testé de manière assez poussé en comparaison avec Prince. En testant plein de trucs sur les pages, les trucs à mettre dans les marges, le CSS3…
Weasy est libre et bouge régulièrement alors ça se trouve il y a eu des ajouts depuis il y a quelques mois, mais ça ne gère vraiment pas autant que Prince, notamment en CSS3.
Mais quand on a une maquette graphique pas trop complexe, ça marche parfaitement très bien, et du coup ça permet de générer tout en libre, et donc possiblement côté serveur aussi.
On imaginait peut-être un plugin SPIP qui appellerait une génération sur le serveur… (mais encore une fois, ça dépend de la maquette).
#intégration #CSS #HTML #print #impression
Une initiative en lien, à suivre :
▻https://seenthis.net/messages/742687
Syncope
▻http://nowodzinski.pl/syncope
Super efficace pour définir des réglages typos de base (taille, interlettrage, longueur de ligne), permet aussi de caler un rythme vertical régulier entre titre, inters et paragraphes. Moins complexe que d’autres outils mais c’est aussi bien.
Syncope is a WYSIWYG tool that helps web designers and developers chose the optimal vertical rhythm of the typography for their web pages.
Basically, it’s a set of tools which adjust the rhythm and output the styles in a preferred, production–friendly format. It is also a lot of fun to play with! In fact, if it weren’t for that, this tool wouldn’t have seen the light of day.
Free Flat Icons - FlatIcons
▻https://flaticons.net
Excusez moi du splash mais où trouve-t-on le format SVG ? Celui qui permet de choisir taille/fond/couleur et forme en gardant toujours son poids léger ?
Pff, je m’interroge sur les capacités du web à se régénérer quand le vectoriel semble y être une notion incongrue.
@touti ça n’a pas l’air d’être très libre, et au-delà de ne pas avoir de ZIP avec tout, même quand tu vas sur une icone précise, ya pas de SVG dans le code, c’est basé sur une appli en PHP derrière qui génère le PNG avec GD, donc il a sûrement les SVG en interne, mais seul lui peut les voir depuis son PHP.
Don’t Use My Grid System (or any others)
▻https://noti.st/mirisuzanne/DDJo3H
Rencontre SPIP dans la Drôme du 27 au 30 septembre 2018
▻https://linuxfr.org/news/rencontre-spip-dans-la-drome-du-27-au-30-septembre-2018
SPIP est un logiciel de publication pour internet francophone, réputé notamment pour sa gestion du multilinguisme et son système de squelettes, permettant, tel Monsieur Jourdain, de faire du MySql sans le savoir.
La communauté SPIP est autogérée, sans support d’une structure associative ou commerciale.
Elle organise du 27 au 30 septembre une rencontre (inter)nationale dans la Drôme, dans un gîte au cadre bucolique. Possibilité d’hébergement sur place.
Le programme sera défini collectivement par les participants et participantes à cette rencontre. Mais nous pouvons d’ores et déjà supposer qu’il n’y aura pas que de la programmation, puisque, par exemple, la cuisine sera faite collectivement.lien n°1 : InscriptionTélécharger ce contenu au format Epub Commentaires : voir le flux atom (...)
J’ai besoin d’aide avec des #CSS. J’essaie de reproduire la présentation ultra-alignée d’images carrées telle qu’on la trouve dans Photos sur l’iPhone. L’idée étant d’avoir des vignettes carrées dont la taille n’est pas totalement fixe, et si possible sans s’embêter avec les media queries usuelles selon la taille de l’écran (genre une case de largeur 25% quand on est entre 600 et 720 pixels…).
L’idée c’est que j’arrive à faire ça très bien avec une flex box :
Mais le hic, c’est la dernière ligne. Les deux premières lignes, ça fonctionne magnifiquement, les dimensions des vignettes carrées sont très bien gérées quelle que soit la largeur d’affichage, le nombre de vignettes par ligne se calcule tout seul avec « flexibilité », l’alignement est parfait. Bref le bonheur.
Mes CSS pour l’instant :
ul.carres_oeuvres {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
margin-right: 1px;
}
ul.carres_oeuvres li {
margin-top: 1px;
margin-left: 1px;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 150px;
}Sauf comme tu vois, la dernière ligne, qui occupe toute la largeur mais ne s’aligne pas.
Je voudrais obtenir ceci :
Et j’ai pas trouvé comment…
D’après ce que je vois, il ne faut pas passer par flex mais par grid, qui gère le multiligne.
Grid est un peu moins bien supporté (de 10% je crois) cependant au niveau navigateur
J’ai trouvé !
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); /* (2) */
grid-gap: 1px;C’est la valeur grid-template-columns qui gère le truc…
@kent1 : yep…
Du coup, dans la même CSS, je mets d’abord le display: flex, et en seconde ligne le display:grid, normalement ça fera un fallback qui va bien pour ces 10%.
Et il faudra ajouter un fallback pour ceux qui ne comprennent ni grid ni flex. Un float:left sans doute, à condition que ça me bouffe pas mes dimensions de grilles…
Sinon, je pensais qu’avec Flex, ça y est, on avait atteint le pire des CSS : celles où il faut avoir le mémento à chaque fois qu’on veut faire le moindre truc.
Avec grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));, je pense que grid emporte le pompon du CSS imbitable impossible à mémoriser.
Salut,
c’est un petit bug de flexbox, on peut le contourner en utilisant ::after sur le dernier éléments de la grille.
&::after { // Fix last item align in flexbox
content : ’’ ;
flex : auto ;
}
I Used The Web For A Day With JavaScript Turned Off
▻https://www.smashingmagazine.com/2018/05/using-the-web-with-javascript-turned-off
“The web is a hostile, unpredictable environment, which is why many developers follow the principle of progressive enhancement to build their sites up from a core experience of semantic HTML, layering CSS and unobtrusive JavaScript on top of that.”
Spice-up
Create Simple and Beautiful #presentations
Its features include:
– Exporting to PDF: Share your presentation with anyone, no matter the platform they’re at
– Presentation Browser: Scroll though the presentations you have made and jump right into them with one click!.
– Controller Support: If you have a USB or Bluetooth controller, plug it in and control your slides!
– Templates, so you can whip up a presentation in a blink of an eye.
– Edit images in your favorite editor, and it will automatically update when saved
– Web Viewer: Presentations can now be viewed from a web browser if Spice-Up is not installed, even if you’re not using Linux
