Catégorie : Responsive Design

[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)

[Responsive design][jQuery][SASS] Un tableau responsive en mode Flip Scroll (version 2017)

Sources sur github.com – responsive-tables.

Source de départ: Responsive Tables – Flip Scroll. his technique was first published by David Bushell (@dbushell). For the full low down on this technique visit his post on the technique, Responsive Tables (2). While you’re there, it’s also worth checking out his responsive calendar proof of concept.

Demo jsFiddle.net; Même chose (optimisé par Anthony)

Attention: le système de mediaqueries SASS/JS dans le code qui va suivre est issu de Foundation 6.

[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.

Utiliser les points de rupture du composant grille de Bootstrap 3 pour créer des media-queries JS avec Enquire.js

Demo en live sur jsFiddle.net.

Fichier global-vars.js :

Fichier global-mediaqueries.js :

[Magento 1.9] Afficher un nombre de produits par rangée différent en fonction du viewport dans la liste de catégories/produits du thème RWD

Méthode #1 : vous avez une contrainte responsive

Une solution full CSS qui gère le nombre de produits par rangée en fonction du viewport.
Cette solution repose sur l’exploitation du mixin SASS product-grid natif au thème Rwd et sur la modification de 2 fichiers :

  • app/design/frontend/rwd/yourpackage/template/catalog/product/list.phtml pour l’ajout de classes supplémentaires nécessaires à l’activation des media-queries
  • skin/frontend/rwd/yourpackage/scss/module/_product-list.scss pour l’ajout des mediaqueries

list.phtml

Trouver la ligne suivante sous la section <?php // Grid Mode ?> :

…et ajouter les classes suivantes :

Remarque : la logique est la même que celle du système de grid responsive proposé par Bootstrap pour ceux qui connaissent.

_product-list.scss

Pour info : les variables prédéfinies à exploiter

  • $product-column-spacing : espace entre les colonnes (valeur en px).
  • $productsGridActionHeight : hauteur d’un item produit (valeur en px – si la hauteur de l’élément .product-info change, cette valeur devrait être ajustée).

Repérer le mixin suivant :

…et ajouter juste en dessous :

Méthode #2 : vous n’avez pas de contrainte responsive

Prendre la main sur le nombre de produits par rangée en modifiant un paramètre de layout.

catalog.xml :

Trouver la section Category layered navigation layout ou la section Category default layout et localiser la ligne suivante :

Modifier la valeur de <count /> selon le nombre de colonnes souhaité.

Méthode #3 (bidouille – ne pas utiliser)

Source : How to change product column quantity in Magento

Il faut modifier 2 fichiers :

  • app/design/frontend/default/yourtheme/layout/catalog.xml
  • app/design/frontend/default/yourtheme/template/catalog/product/list.phtml

catalog.xml :

Trouver la section Category layered navigation layout ou la section Category default layout et ajouter les lignes suivantes (ou modifiez les si elles existent déjà) :

Remarque : vous pouvez cibler le template de votre choix en modifiant la valeur entre la balise <template />.

list.phtml :

Trouver la ligne suivante sous la section <?php // Grid Mode ?> :

…et la remplacer par :

Remarque : vous pouvez choisir le nombre de colonnes par rangée à affocher en modifiant la valeur de $_columnCount.

[jQuery][Responsive Design] Exécuter des fonctions en se basant sur les media queries CSS plutôt que sur la largeur de la fenêtre du navigateur

Source : Firing Responsive jQuery Functions based on CSS Media Queries Rather than Window Width.
Ressources en ligne

Problème: jQuery $(window).width() et les Media Queries CSS3 ne sont pas toujours très en phase.

Lorsqu’on utilise Firefox, IE ou Opéra pour naviguer sur un site responsive, on peut remarquer au redimensionnement en largeur de la fenêtre un léger décalage dans l’exécution d’une media querie par rapport avec un javascript auxquels on a assigné des break-points similaires.

Cet différence provient d’une inconsistence dans la prise en compte de la présence des scroll-barres verticales par les largeurs déclarées pour les media queries.

Ce bug a pour effet qu’une valeur de largeur identique déclarée dans une media query et par jQuery ne s’exécutera pas tout-à-fait au même moment.

Solution: utiliser jQuery pour détecter un changement sur une propriété CSS plutôt que sur la largeur de la fenêtre du navigateur.

Plutôt que de mesurer la largeur d’écran au redimensionnement de la fenêtre, je vérifie si un changement de règle CSS s’est opéré par le biais d’une media query. De cette façon, sans se préoccuper de la manière dont le navigateur prend en charge la largeur de la scroll-barre verticale, le code jQuery et la media query seront exécutés au même moment.

Supposons que la classe « .sampleClass » possède une règle « float: left; » avant la media query et une règle « float: none; » après. Au redimensionnement de la fenêtre, je vérifie un changement de cette règle.

jQuery

Ou (versions les plus récentes de jQuery 1.x) :

CSS

Ressources en ligne

[jQuery][Superfish] Activer/désactiver Superfish au redimensionnement de la fenêtre du navigateur

Superfish intègre une méthode destroy (depuis la version 1.7.3 au moins… à vérifier pour des versions antérieures mais dans le cas contraire, mettre à jour son plug-in) qu’on peut appeler en fonction de la largeur du viewport. La navigation peut ensuite être re-stylée via CSS et les mediaqueries.

Avec enquire.js

Sans enquire.js

Source : http://stackoverflow.com/questions/6748301/disable-superfish-on-resize-event

[CSS] Des tableaux responsives en full CSS

Ressources en ligne :

Deux exemples maison pour un tableau comparatif :

Tableau comparatif dont les éléments à comparer deviennent horizontalement scrollables en vue mobile

Simulation JSfiddle.net (avec code source propre), demo.

table-comparison-one_desktop-mobile

Tableau comparatif dont les éléments à comparer se désolidarisent pour s’empiler en vue mobile

Nouveau: une version plus flexible basée sur Flexbox (sources core). https://jsfiddle.net/frontenddeveloper/ay5v30p5/

…et la gueule de cette version Flexbox sous IE11:


Simulation JSfiddle.net (avec code source propre). Attention : la partie commentée du code CSS ne semble pas adaptée à notre exemple.

table2_desktop-mobile

En utilisant display: inline-block; sur les rangées et white-space: nowrap; sur le corps du tableau :

Source et simulation (Flip Scroll) : http://elvery.net/demo/responsive-tables/#flip-scroll.

Récupérer les hauteurs (en px) de chaque cellule d’en-tête, les stocker dans un tableau et les réattribuer aux cellules correspondantes dans le corps du tableau.

Version SASS de flip-scroll

Version SASS de No More Tables

Source : http://elvery.net/demo/responsive-tables/#no-more-tables.

Attention : ajouter un !important à td { padding-left: 50%; } si vous utilisez Twitter Bootstrap pour styler vos tableaux.

Ajout d’une classe .ignore à placer sur les <td /> qui ne doivent pas faire l’objet d’une transformation. La rangée du tableau transformé n’aura alors pas de libellé (en-tête).

En utilisant display: block; et les data attributes HTML5 :

Source : http://codepen.io/geoffyuen/pen/FCBEg.

Simulation : http://jsfiddle.net/frontenddeveloper/gf7R3/.

Mixin SASS

[CSS][Responsive Design] Les media-queries de base pour cibler les périphériques standards.

[jQuery][Responsive Design] Centrer verticalement un élément en jQuery

…et conserver le centrage au redimensionnement de la fenêtre.