Étiquette : responsive

[JavaScript] Mediaqueries et breakpoints en JS ES6+ avec la librairie breakpoint-helper

Base de l’initialisation du helper

Utiliser la méthode listen() avec un breakpoint unique

(Mobile first!) On définit un breakpoint unique à (max-width: 1199px) au-delà duquel on exécute du code pour les Desktops.

La clé/name 'large' correspond à une largeur de 1200px. Le paramètre useMax permet l’ajout et le calcul de la valeur max-width.

Une autre solution si vous souhaitez une meilleure séparation du code exécuté par breakpoint

Cette solution alternative vous permet d’inclure du code pour nettoyer votre DOM dans le listener propre au breakpoint pour lequel vous initialisez également des choses.

[Magento 2] Les dimensions des images visuels produit

Magento v2.3.3, v2.3.4

view.xml de votre thème

Pour les visuels de la fiche produit, que votre thème hérite de blank ou de luma, voici les dimensions à surcharger dans le fichier app/design/frontend/VotreVendor/votretheme/etc/view.xml (ne tenez pas compte des valeurs que j’ai mis, surtout pour le thumbnail) :

  • product_page_main_image: ???
  • product_page_main_image_default: ???
  • product_page_image_large: les dimensions des visuels zoomés du carousel. Remarque: ne pas surcharger permet, il me semble, d’afficher l’image dans sa taille d’origine dans le zoom.
  • product_page_image_medium: les dimensions des visuels qui s’affichent en carousel
  • product_page_image_small: les dimensions des visuels des miniatures (thumbnails) du carousel

Puis en bash:

Modifier le taux de compression (la qualité) des images

En BO:

Stores > Configuration > Advanced > System > Images Upload Configuration > Quality > 100

Dans le code en créant un module (pas testé):

File : {Vendor}/{Module}/etc/di.xml

File : {Vendor}/{Module}/Model/Product You can set the quality to whatever you want. Then flush image cache.

Utilisation dans un PHTML (pas testé):

Image ID could be used in .phtml template like this:

You can set custom dimensions directly in template file:

You can modify other image options in template file. In order to do it in you need to inject image helper class (\Magento\Catalog\Helper\Image) in your block class.

[Bx Slider, responsive] Les images ne s’affichent pas jusqu’à ce qu’on redimensionne la fenêtre du navigateur

bxslider isn’t displaying images until page resize with responsive design

Juste après le code qui initialise le carousel, placer:


Responsive image slider bxslider only works on page reload

As it stands, bxslider is initializing before the images have had time to load, calculating 0 width and height for them, thus giving them no appearance.

Plug-in imagesloaded qui permet d’exécuter du code une fois que les images sont chargées.

[Responsive design][SASS] Un tableau responsive en mode No More Tables (version 2017)

Sources sur github.com – responsive-tables.

Source de départ: No more tables – This technique was developed by Chris Coyier (@chriscoyier) and described in his post Responsive Data Tables at css-tricks.com. While you’re there, you should probably check out the Responsive Tables Roundup post, which showcases all these techniques and more.

Demo JSFiddle.net

jQuery (si besoin de fixer les hauteurs des rangées)

[CSS] Des mediaqueries adaptées à chaque marque et version de smartphones et tablettes

Principalement Apple et Samsung, mais pas que … Device Specific CSS Media Queries Collection.

Version de début septembre 2017; vérifier le git pour la version la plus à jour.

[CSS] Des cercles responsive dont les dimensions s’adaptent de manière homothétique

Source : https://codepen.io/CrocoDillon/pen/trFam.

A noter: par rapport au Codepen où .circle à les propriétés width: 10%; et padding: 5% 0;, mettre width: 100%; et padding: 50% 0; (comme dans le code ci-dessous) rend les cercles parfaitement fluides. Ils s’adaptent au container.

[Foundation 6] Un off-canvas qui prend 50% de la largeur de la fenêtre

Sources JS et SASS maintenues à jour ici : https://github.com/franklang/foundation-sites-plugins.

Dans notre example, le off-canvas de droite prend prend 50% de la largeur de la fenêtre pour les écrans medium et supérieurs.

Les plugins Foundation offcanvas, box (util), mediaquery (util) sont obligatoires.

HTML

http://foundation.zurb.com/sites/docs/off-canvas.html

SASS

jQuery

[CSS] Des images responsive dans un tableau HTML ou dans un container en display: table-cell;

table

nada …

display: table-cell;

ATTENTION: sous IE10, IE11, dans le cadre d’une mise en page Responsive et si vous utilisez des images, il est possible que le redimensionnement homothétique de celles-ci soit mal géré. Vous pouvez ajouter ce style pour corriger le problème :

[Magento 1.x] Un slider multi-produits responsive avec le plugin jQuery Cycle (fourni avec le thème Rwd)

Source : http://jsfiddle.net/kRs2N/6/ et mon fork avec des marges entre les slides http://jsfiddle.net/frontenddeveloper/L3bpavzc/1/.

HTML

CSS

jQuery

[Ergonomie] Galerie de menus de navigation de sites e-commerce

Target

Lowe’s

Nordstrom

Nordstrom’s Mobile E-Commerce UX : Navigation & Product Browsing · 4 Guidelines · Score: 97.2. “State of the Art” Performance.

Curry’s UK

Saint Maclou