Responsive Data Tables | CSS-Tricks
▻https://css-tricks.com/responsive-data-tables
Une astuce en CSS pour rendre les tableaux HTML de données responsives (spoiler : utilise des ::before)
ping @tofulm :)
-
-
Lancement aujourd’hui de la nouvelle refonte du site #SPIP de pensez sauvage #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 :) -
-
-
-
-
20 Best Free HTML5, #css3, Bootstrap Landing Page Templates in 2018
▻https://hackernoon.com/20-best-free-html5-css3-bootstrap-landing-page-templates-in-2018-717488cWebsite template is the best solution for site building. Here are 20 Best Free Bootstrap landing page templates in 2018 for creative and powerful website building.Your landing page is fundamental in persuading new visitors to take certain actions when visiting your site. Whether it be having users sign up, register, or even buy your product or service, designing an excellent landing page will help you realise this goal.But how do you quickly build a quality landing page? Using a powerful and flexible landing page template may be your best choice. Most HTML5, Bootstrap, and CSS3 templates include features that can help you effortlessly create a page. In addition, web designers and developers readily share free responsive landing page templates on the Internet for you to use. Mockplus (...)
-
CSS Grid in IE : CSS Grid and the New Autoprefixer | CSS-Tricks
▻https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixerUtilisation des propriétés CSS3 grid avec Internet Explorer : les adaptations/contournements apportés par Autoprefixer et les propriétés vraiment pas supportées.
Voir aussi :
– le repo d’autoprefixer ▻https://github.com/postcss/autoprefixer (Gulp / Grunt / js autonome...)
– le repo de html-autoprefixer pour les CSS inline : ▻https://github.com/RebelMail/html-autoprefixer -
The ultimate guide to proper use of animation in UX
▻https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9« bonnes » et « mauvaises » pratiques pour l’intégration des animations CSS dans les interfaces utilisateurs (en anglais)
-
Fresh Background Gradients | WebGradients.com ?
▻https://webgradients.comWebGradients 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.
-
-
#css Buttons With Icons But No Images
▻http://www.paulund.co.uk/css-buttons-with-icons-but-no-imagesUtiliser les codes CSS 3.0 pour des icones sans images. Traduction disponible sur ▻http://paulund.developpez.com/tutoriels/css/boutons-icones-sans-images
-
Pannellum
►https://pannellum.orgA Lightweight #panorama Viewer for the Web Pannellum is a lightweight, free, and open source panorama viewer for the web. Built using #HTML5, #CSS3, #JavaScript, and #WebGL, it is plug-in free.
-
semble t’il que c’est le script utilisé pour les salles virtuelles de « Fabre dans mon canapé » (par ex : ►https://fabre.montpellier3m.fr/Salle-1-2)
Le repo Github : ▻https://github.com/mpetroff/pannellum
La doc : ►https://pannellum.org/documentation/overview
Sur la projection « equirectangular » : ▻https://wiki.panotools.org/Equirectangular_Projection
-
-
US Open Sessions - Motion Demo
▻http://www.shanemielke.com/archives/usopen-sessionsTags : #animation #motion_design #web #CSS3 #démo
-
CSS Reference | Codrops
▻http://tympanus.net/codrops/css_reference/#section_css-data-typeAn extensive CSS reference with all the important properties and info to learn CSS from the basics
-
Hover.css - A collection of CSS3 powered hover effects
▻https://ianlunn.github.io/HoverA collection of #CSS3 powered #hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.
-
Jack in the flexbox
▻http://jackintheflexbox.tumblr.comDu Responsive design sans Media Queries Il est...
-
Un blog/tumblr recensant tous les tests de flexbox du labo de Raphael Goetter. Ya des trucs de oufs, qui sont tous simples en code pourtant, c’est génial.
Un jour je me mettrai à flexbox aussi, mais je ne sais pas où ça en est niveau compat’, ni comment on fait pour les navigateurs qui ne le reconnaissent pas.
#intégration #web #html #css #flexbox
-
-
CSS Shapes Editor for Chrome
▻http://razvancaliman.com/writing/css-shapes-editor-chromeCSS Shapes allow web designers to wrap content around custom paths, but authoring them is not trivial.
None of the traditional tools used in web design currently export code for CSS Shapes and the syntax conversion workflow is unwieldy and time-consuming. It wouldn’t help too much even if they did. CSS Shapes are meant to be used in the browser context where it’s easy to see how they interact with other elements on the page in various configurations. The shape authoring process should capitalize on this affordance, something external editing tools are not well equipped to do.
To solve this problem, I released the CSS Shapes Editor for Chrome. It is a Developer Tools extension which provides an interactive editor for shape property values.
-
Pour mémoire, on a un truc sous SPIP qui fonctionne de manière totalement automatique (ça détecte les limites de l’image) et sur n’importe quel navigateur depuis… 2006 :-))
▻http://paris-beyrouth.org/tutoriaux-spip/article/un-habillage-irregulier-float(Après, c’est le genre de chose dont l’utilité pratique est assez problématique sur le Web. C’est très séduisant parce que ça reproduit un comportement typique du papier, et comme avec les tablettes on a l’impression de s’approcher du format magazine… ; mais en pratique, je n’ai jamais vu grand chose de très satisfaisant sur le Web. Et avec le responsive, je crains qu’on ne complique encore un peu la question.)
-
Ce qui est intéressant, dans ce cas précis, ce n’est pas tant l’usage au jour le jour pour un site web courant, que ce que cela suggère au nivaux des possibilités “techniques” dans l’utilisation des ccs et du html.
Au “Monde”, par exemple, nous sommes en train de configurer un CMS print propriétaire qui utilise largement XML et CSS pour la gestion de la mise en page (ce qui est en partie le cas avec InDesign).
Le Shape Editor de Chrome suggère juste l’idée qu’il pourrait être possible un jour de faire de la mise en page avancée et à façon dans une interface Web... tu me vois venir ;-)
-
-
Oh, genre XPress dans une interface Web ? Tu as Pages sur iCloud qui est assez spectaculaire (pas de détourage automatique des images, en revanche, même s’il y a des possibilité d’habillage). Évidemment, c’est très grand public comparé à Indesign.
-
-
Can I use... Support tables for #HTML5, #CSS3, etc
►http://caniuse.com“Can I use” provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
-
SlidesJS, a #responsive #slideshow plug-in for #jQuery
▻http://www.slidesjs.comSlidesJS is a responsive slideshow plug-in for jQuery (1.7.1+) with features like touch and #CSS3 transitions.
-
-
Besoin d’inspiration pour un design d’interface #Web ?
▻http://www.soon7.com/developpements/besoin-dinspiration-pour-un-design-dinterface-webLors du design d’application, site mobile ou encore site internet, l’ergonomie et l’aspect visuel est un point très important. Pour imaginer tout type d’élément d’interface, vous pouvez utiliser le moteur #ui Cloud, qui vous permet de chercher dans une base de données impressionnante d’exemples comme un style formulaire, de boutons, de navigation, etc. Vous […]
#Dév_&_Code #Graphisme #css3 #html5 #interface #ux_design #webdesign
-
▻http://css-tricks.com/css-animation-tricks
The following is a guest post by Zach Saucier. Zach cooks up some pretty inspiring animations over on CodePen. I couldn’t be happier that he wanted to share some of the tricks he uses to create them, especially because they are things we all strive for: efficiency, reusability, practicality, and speed.
-
#CSS_Zen_Garden: The Beauty of #CSS Design
▻http://csszengarden.com/219Tags : CSS Zen Garden #démo CSS #CSS3 #animation #transition
-
Freewall : plugin jquery pour réaliser un site en “Dynamic #grid Layouts”
▻http://www.soon7.com/developpements/freewall-plugin-jquery-pour-realiser-un-site-en-dynamic-grid-layoutsFreewal est un plugin jquery assez impressionnant permettant de créer des mises en pages de type block qui se réarrangent automatiquement (un peu comme #pinterest ou #metro) en utilisant des animations #css3. Ceci permet donc de faire des mises en page reponsive en fonction de vos besoin. Vous pouvez le customiser selon vos besoins : […]
-
#grille #javascript #frontdev #mise-en-page #web
Javascript désactivé, c’est tout pété. Faudrait être sûr de pouvoir l’activer sur un gabarit qui fonctionne déjà quand la lib n’est pas là. Ça ne devrait être qu’un outil en plus pour améliorer chez ceux qui ont javascript.
-
-
Glide.js : un #slider léger, responsive et touch-friendly !
▻http://www.soon7.com/developpements/glide-js-un-slider-leger-responsive-et-touch-friendlyGlide.js est un petit slider très sympathique, jugez-par vous même : - Léger : environ 4,5 Kb compressé - Transition #css3 ultra rapides (avec fallback en #javascript pour les anciens navigateurs) - Responsive - fonctionne sur tablettes et smartphones - API avec callbacks - Gère les événements Swipe - Flèches et bulles de navigation - […]
-
▻http://www.google.com/webdesigner
Google y va de son environnement d’animation et de design HTML.
Très très orienté « bannières de pub » au premier abord. On verra les premier retours.
ça pourrait être pas mal si cette solution est scriptable et intégrable à des outils ou workflows sur mesure (logiciels 3D, écosystème #node.js / #Grunt)
-
▻https://github.com/EmyLibrary/emy
EMY is an Efficient Mobile web librarY to create lightweight mobile web applications using HTML5 & CSS3. The goal is not to recreate what JQuery Mobile or Sencha is doing, but to provide an lightweight & simplier alternative for modern platforms.
Emy is fully working on iOS, Android, Blackberry, WindowsPhone and even latest Symbian series & Firefox OS.
Demo URL : ▻http://www.emy-library.org/demos
Une des présentations de l’apéro #chtijs de ce soir. J’ai bien aimé le coté « KISS ». Un outil intéressant, je pense, là où la plupart dégainerait de gros frameworks qui pourraient apporter plus de soucis que de solutions.
#HTML5 #javascript #CSS3 #mobile
-
Type & Grids : Free Responsive HTML5 Template | Smashing Magazine
▻http://www.smashingmagazine.com/2013/08/07/type-grids-free-template
Un #template #html5 #css3 qui propose pas mal de variantes. Peut être intéressant à intégrer en thème pour #spipr ?
Pour le copain de travail de @ben qui n’est pas sur seenthis mais qui devrait ^^
