Designing Tables for Reusability
▻https://uxdesign.cc/designing-tables-for-reusability-490a3760533
“designing a standard table UI pattern that could be used across multiple product lines with different use cases and different target users”
Designing Tables for Reusability
▻https://uxdesign.cc/designing-tables-for-reusability-490a3760533
“designing a standard table UI pattern that could be used across multiple product lines with different use cases and different target users”
devtools-highlighter
▻https://addons.mozilla.org/en-US/firefox/addon/devtools-highlighter
Find and highlight elements on the page with this DevTools panel, using CSS styles and selectors.
Un nouvel outil dans les devtools de #Firefox
How to make your HTML responsive by adding a single line of #CSS
▻https://medium.freecodecamp.org/how-to-make-your-html-responsive-by-adding-a-single-line-of-css
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
Titre un peu racoleur mais tout de même intéressant.
#grid
Muuri - Responsive, sortable, filterable and draggable grid layouts
▻https://haltu.github.io/muuri
Responsive, sortable, filterable and draggable grid layouts
Plein de ressources qui parlent de « comment », mais est-ce qu’il y a une ressource qui parle du « quoi » ? Pas le « pourquoi » ça on comprend bien, mais le « quoi » : comment discriminer, quels sont les styles/types de styles qui doivent être gardés en chargement normal, et quels sont les autres qui devraient être chargés après coup ?
Ah oui merci, ça passe si vite. :)
Je l’avais déjà lu il me semble. Mais je ne comprends toujours pas comment ça peut être fait sur des templates dynamiques, en contexte de CMS à templates (quels qu’ils soient, twig, smarty, squelettes, php wp, etc) et quand on a plein de « types de pages » différentes, et donc où le haut de page peut être différent sur plein de pages.
Dans la réalité du terrain, hors des grosses boites, on fait très rarement des maquettes intégrées purement statiques avec du faux contenu, qui ensuite seront intégrés en templates dynamiques à l’étape suivante, par une autre personne ou pas. Généralement on fait l’intégration directement en template (souvent compilé par PHP car majorité des CMS). Donc je ne vois pas comment on peut savoir la partie critique sur potentiellement plein de pages si différentes.
Ya eu une seule question comme ça dans les commentaires de l’article d’origine, et ya pas vraiment de réponses claires. Et moi je m’attendais à plus de questionnement de ce genre vu comment c’est courant.
Comparing two ways to load non-critical CSS
▻https://gist.github.com/scottjehl/87176715419617ae6994
“I wanted to figure out the fastest way to load non-critical CSS so that the impact on initial page drawing is minimal.”
CSS Diner - Where we feast on CSS Selectors !
▻http://flukeout.github.io
Les sélecteurs CSS : tests des règles de fonctionnement des sélecteurs sous forme d’un jeu
28 CSS Magazine Layouts | Free Frontend
▻http://freefrontend.com/css-magazine-layouts
Collection of HTML and CSS magazine layouts. Demo and download code (*zip).
Le jour où j’aurais le temps... j’en ferais bien mon p’tit #Spip !
Toujours :-) J’aimerais vraiment changer le design de mon site... :-)
Hi hi :-) Mais j’ai tellement l’impression d’y être un boulet :-)
moi je veux bien t’aider, mais j’ai une pratique tellement old school (tout est en HTML dans le Terrier) que je ne suis pas certain d’être très utile. Je peux faire des maquettes si on en cause (que tu me dis ce que tu veux) et confier la mise en forme css à un gars qui sait faire ce genre de trucs.
C’est adorable mais ce que je cherche c’est intégrer du SPIP dans un template HTML/CSS... :-)
Merci encore !
Tu veux un nouveau squelette plus « responsive », en gros ?
Oui, plus responsive, TRES typographique, plus fou que l’actuel que j’utilise...
Des choses comme
▻https://codepen.io/julesforrest/full/xLBbVb
▻https://codepen.io/julesforrest/full/yowMPw
ou mieux encore ▻http://www.mrmarcelschool.com
Avec de beaux titres puisés ici
▻http://tobiasahlin.com/moving-letters
Mais j’avoue que je suis resté bloqué en 2004 avec mes boucles... je suis totalement dépassé par les SPIP 2, 3, etc :-)
Bah, t’es déjà sous SPIP 3.2. Donc, c’est du squelette, surtout du squelette et beaucoup de CSS (on veut des grilles, hein !).
Tu es pressé ? C’est toi qui a tout fait sur ton site ?
La dernière version on y avait un peu tous touché :p
Mais c’est pas « plus responsive », la version actuelle est déjà responsive (à part les commentaires, qui sont pas glop en petit). C’est changer l’ambiance graphique quoi (comme régulièrement) :)
@rastapopoulos , il a tout vrai :-) Beaucoup de gens m’ont aidé ---- comme toujours :-)
Là, j’aimerais bien refaire un squelette qu’on partagerait ensuite, comme feu ▻https://contrib.spip.net/TypoManiac :-)
En fait, je suis largué entre les Z, les Thèmes, les squelettes, les plugins Framework (boostrap et Foundation)...
Non, pas pressé mais un peu de temps d’ici le 20 décembre, alors j’aimerais en profiter un peu... :-)
Tes forums sont comme toi : tout parfait ! :-)
Merci l’ami !
Si vous avez deux minutes les amis :-)
▻https://forum.spip.net/fr_268641.html?debut_forums=%40268645#forum268645
On ne peut pas avoir l’inverse : avoir une image en N&B qui passe en couleur quand on la survole ?
Bah si mais en CSS, si tu produis par les filtres de SPIP une image de telle ou telle sorte, elle est comme elle est, tu peux plus la changer. C’est en CSS qu’il faut la passer en noir et blanc, et la remettre normal en hover.
Chers amis... J’avance bien (sommaire et article) mais je m’arrache les cheveux sur les css responsive...
Le titre des mes articles dépassent largement en version mobile...
Au secours :-)
Apparemment tu réutilises le javascript qui change la taille d’un texte pour qu’il rentre dans une largeur, comme dans ton précédent thème d’avant. Mais il semblerait qu’il merde une fois sur deux à trouver la bonne taille en petit écran. Quand je charge ça marche pas et quand je joue ensuite avec la taille de la fenêtre ça finit par retaille le texte comme il faut au bout d’un moment. Mais bon ça fait un truc super en hauteur. Ça serait sûrement mieux de ne pas l’activer en petit écran et d’écrire plus petit.
Tu as raison, j’ai repris ▻https://github.com/freqDec/slabText que j’adore...
Mais j’ai l’impression qu’avant le titre, le probleme est d’abord le « bloc » (cadre) dans lequel ce titre s’inscrit.... J’ai du mettre trop de padding, machin :-)
Pour reprendre ton idée, comment « interdire » cette utilisation du JQuery sur les téléphones ?
Ma feuille de style est ici
www.davduf.net/lab/squelettes/css/perso.css
Mille mercis :-)
Pour ne pas encombrer SeenThis, j’ai ouvert ceci :-)
▻https://forum.spip.net/fr_268680.html
Au secours :-)
Progressively Enhancing #CSS Layout: From #Floats To #Flexbox To #Grid
▻https://www.smashingmagazine.com/2017/07/enhancing-css-layout-floats-flexbox-grid
When you open the demo, you’ll find yourself on the home page of a website with a very basic layout. You can adjust the slider in the top left to enhance the experience. The layout switches from being very basic to being a float-based layout to being a flexbox layout and, finally, to being one that uses grid.
▻https://s.codepen.io/matuzo/debug/Emddvx
In the following sections, I’m going to show you how I built parts of the demo and why some things just work out of the box.
Using #CSS #Grid: Supporting Browsers Without Grid
▻https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid
When using any new CSS, the question of browser support has to be addressed. This is even more of a consideration when new CSS is used for layout as with Flexbox and CSS Grid, rather than things we might consider an enhancement.
In this article, I explore approaches to dealing with #browser_support today. What are the practical things we can do to allow us to use new CSS now and still give a great experience to the browsers that don’t support it?
Archetype, Digital Typography #design Tool by Our Own Thing, using Google web fonts
▻https://archetypeapp.com/#
#typo #typographie #font #webfont #css #police
Ah voilà enfin retrouvé, je ne me disais bien : ▻https://seenthis.net/messages/597505
et
▻https://seenthis.net/messages/627741
À ce moment là, ils n’avaient pas encore bien configuré leurs redirections http=>https et www=>sans www. Et comme seenthis ne fusionne toujours pas ces URL… Du coup je ne le retrouvais pas.
Fresh Background Gradients | WebGradients.com ?
▻https://webgradients.com
WebGradients is a free #collection of 180 linear #gradients that you can use as content backdrops in any part of your website. Easy copy #CSS3 crossbrowser code and use it in a moment! We’ve also prepared a .PNG version of each gradient.
Une liste organisée et tenue à jour de ressources Sass et SCSS : des frameworks, des librairies, des guides de styles et des articles.
▻https://github.com/Famolus/awesome-sass
Curated list of awesome Sass and SCSS frameworks, libraries, style guides, articles, and resources.
#sass #scss #intégration #css
70 CSS text effects
▻http://freefrontend.com/css-text-effects
Collection of HTML and CSS text effects with little JavaScript: 3D, animated, glitch, hover, shadow, rotating and typing. Demo and download code (*zip).
Pas testé (à cette heure, j’ai codepen.io qui ne charge pas les pages).
#html #css #typographie #javascript #svg
Front-End Checklist | Front-End-Checklist
►http://frontendchecklist.com
The perfect Front-End Checklist for modern websites and meticulous developers
La liste exhaustive des éléments à vérifier lors de la mise en place d’un site : nombreuses références, classement par importance...
A free guide to <head> elements
Petite précision (@sandburg) : ce n’est que très lointainement associable à l’UX design. Déjà ce n’est pas strictement du design, mais du dev, plus précisément une liste de bonnes pratiques de développement web — ce qui, certes, conditionne l’expérience utilisateur/trice, mais de la même façon que tout conditionne l’expérience utilisateur/trice. Je précise, pour éviter d’accroître la confusion, en ces temps où l’UX est tellement à la mode qu’on qualifie un peu tout est n’importe quoi d’UX, au risque que ça ne veille bientôt (voire déjà) plus rien dire.
@tetue
Il semble pourtant admis que l’UX design comprend plusieurs aspects :
– le cognitif
– l’artistique
– le tech
Comme l’ont bien souligné les cartes mémo UX methods : le profil Evangelist, le profil Activist et le profil Scientist.
Pour moi, ces 3 profils, s’ils sont bien dans les rails, sont des ux designer, un peu plus spécialisés qu’un Ux Designer encadrant (qui est souvent le profil rattaché à Ux activist). Quand un tech (genre moi) fait de l’UI depuis 10 ans, a un diplome le sciences cognitives, s’est formé aux approches et aux méthodes d’ux design, les emploie quotidiennement, mais souhaite rester dans le tech au maximum et ne fait pas beaucoup de web, il est quoi ?
On se voit ce WE de toute façon.
Web Typography: Designing Tables to be Read, Not Looked At
▻https://alistapart.com/article/web-typography-tables
“Tables are a frequently overlooked aspect of reading, sometimes overstyled, sometimes poorly thought out. Responsiveness is a particularly thorny issue as the best solutions depend very much on the utility of the table. Tables can be packed with data, rich in content and meaning. Give them the attention they deserve.”
DirtyMarkup Formatter - HTML, CSS, & JavaScript Beautifier
▻https://dirtymarkup.com
Bon, je ne l’utilise que pour du code déjà publié sur le web ...
#www #html #css #javascript #dev
#idée_pour_spip, à intégrer dans le thème/framework CSS des choses disponibles dans l’admin
Design Considerations: Text on Images
▻https://css-tricks.com/design-considerations-text-images
#Image_CSS_overlay_text_Design
Portal CSS
▻https://la-cascade.io/portal-css
Un exemple d’animation exclusivement en CSS (transform : ... et @keyframes). Le résultat est visible sur ▻http://hop.ie/portal
Bulma : a modern CSS framework based on Flexbox
▻https://bulma.io
Un framework CSS (encore un !) basé sur flexbox : complet (grille, éléments, composants, formulaires...), modulaire, open-source, bien documenté. N’inclut pas de javascript ni de jeu d’icones (mais compatible FontAwesome ou autres).
Bémols :
. le nommage des classes est relativement compliqué,
. basé sur SASS plutôt que SCSS
Ya des convertisseurs automatiques de SASS vers SCSS donc ça devrait pouvoir se faire
#framework #CSS #intégration #web
Je viens de regarder un peu le code, et, c’est mon avis personnel mais : ce n’est pas fait avec des mixins, mais tout directement en classes CSS = c’est de la merde. Puisqu’on ne peut pas appliquer le framework sur n’importe quel HTML qu’on veut, on est obligé de mettre en dur leurs classes à eux dans notre HTML.
Balloon.css — #css tooltips for HTML elements
►https://kazzkiq.github.io/balloon.css
#infobulle #tooltip #nojavascript
Tanaguru Contrast-Finder
▻http://contrast-finder.tanaguru.com/result.html?foreground=%2300C0BD&background=%23FFFFFF&algo
un outil en ligne pour ajuster les combinaisons de couleurs texte/fond afin d’avoir un contraste suffisant pour passer les tests d’accessibilité
Bien ! Dans ma première version de ma nouvelle interface, le contraste était insuffisant, mais je ne l’ai su que parce qu’une lectrice a commencé par dire qu’elle ne me lisait plus. Et parce que je lui ai demandé pourquoi, alors, seulement, elle m’a parlé de ses problèmes de vue et de mon problème de contraste.
la nouvelle version (par les concepteurs de Contrast-Finder),
avec une nouvelle URL :
►https://app.contrast-finder.org/?lang=fr
pour contribuer c’est par ici :
►https://github.com/Asqatasun/Contrast-Finder
pour l’histoire du projet #ContrastFinder :
►https://contrast-finder.org/#contrast-finder-history