Tagcolonnes

[Foundation 6] Une grille flexbox aux largeurs de colonnes custom avec les mixin flex-grid-size

Doc Foundation 6 – Flex Grid – @mixin flex-grid-size

Une rangée basée sur 8 colonnes

[Bootstrap 3][SASS] Changer la valeur de la variable $grid-columns

Retenir : lorsqu’on redéfinit ponctuellement la valeur de la variable $grid-columns pour créer une batterie de styles spécifique à un affichage en x (autre que la valeur par défaut qui est 12) colonnes, il faut penser à redéclarer systématiquement la valeur par défaut juste après. Cf. l’exemple ci-dessous.

Source : Bootstrap: Advanced Grid Tricks (sous-partie Redefining grid-columns).

Le truc ici est de réaliser qu’SCSS parse de haut en bas et qu’à partir du moment où il atteint la partie de notre code où nous cherchons à redéfinir la variable $grid-columns les propriétés précédentes ont déjà été générées.

Si nous changeons la valeur de $grid-columns à 5 pour générer une batterie de styles spécifiques pour une grille 5 colonnes et que nous remettons cette valeur à la valeur par défaut (12) ensuite, nous n’obtiendrons pas d’effets de bord.

Dans l’exemple ci-dessus, des classes .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4 et .col-xs-5 seront générées pour créer une mise en page sur 5 colonnes (réparties sur 100% de largeur) par rangée.

Créer une batterie de classes pour une grille 5 colonnes

[Bootstrap 3] Un layout 5 colonnes responsive avec Twitter Bootstrap 3

Ressources en ligne :

Méthode SASS pour 5 colonnes (concept Bootstrap)

Fonctionne et génère la batterie complète de styles nécessaires :

Ne fonctionne pas (génère des classes pour 12 colonnes) :

Méthode pré-processeur pour 5 colonnes de largeurs égales

Source : Five equal columns in twitter bootstrap.
Méthode qui génère moins de code, mais uniquement des briques de largeur égale (20%).

SASS

LESS

Méthode alternative pour une palette complète sur 5 colonnes (CSS)

Source : Quick tips: 5 columns layout with Twitter Bootstrap, 5 equal columns Bootstrap grid layout with 1, 2, 3, 4 of five.

[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] Des colonnes de même hauteur avec height

equal-height

Update : code désormais disponible sous forme de plug-in !

Plug-in jQuery

Dans le template HTML

Le paramètre setEqualHeight() sert à déterminer le nombre d’éléments par ligne (3 éléments par ligne dans le code d’exemple ci-dessous).

Remarque #1: Il reste la possibilité de définir depuis vos feuilles de styles des propriétés

et

pour gérer des hauteurs minimum et maximum pour vos blocs.

Utiliser ce plug-in dans le cadre d’un site responsive

Faire fonctionner jQuery $(window).width() et CSS3 Media Queries de concert

Source : Firing Responsive jQuery Functions based on CSS Media Queries Rather than Window Width

Mettre en place le redimentionnement et le re-calcul des hauteurs côté jQuery

Il est indispensable de réinitialiser la hauteur du bloc ou de la colonne ciblée par le redimensionnement, sinon le plug-in ne sera pas capable d’écraser la valeur qu’il a précédemment affecté.

Si erreur « TypeError: $(…).css(…).setEqualHeight is not a function »

Remplacer le code du plug-in comme suit :

…et utiliser la fonction comme suit :

Si les éléments ciblés ne prennent pas la même hauteur au chargement de la page…

…mais seulement une fois que la fenêtre est redimensionnée, utiliser le plug-in dans la forme donnée plus haut dans le paragraphe Si erreur « TypeError: $(…).css(…).setEqualHeight is not a function » et déclenchez le de façon suivante :


Ancien article…

Source : http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/

Simulation : http://jsfiddle.net/frontenddeveloper/6GPKn/

© 2020 devfrontend.info

Theme by Anders NorénUp ↑