Étiquette : grille

[jQuery] Bootstrap 3 et affix ne conserve pas la pleine largeur d’un élément si j’utilise les classes de la grille

[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

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 :

[Bootstrap 3] Ajouter un point de rupture supplémentaire à la grille avec la version SASS de Bootstrap 3

Dans notre exemple, nous allons chercher à ajouter un breakpoint col-xl-… pour des résolutions d’écran plus larges que col-lg.
Pour ce faire, il faudra éditer 4 fichiers :

  1. bootstrap/mixins/grid-framework.scss
  2. bootstrap/mixins/grid.scss
  3. bootstrap/variables.scss
  4. bootstrap/grid.scss

Une fois ces ajouts effectués, vous pourrez utiliser toute la batterie de mixins et de classes offerte par la grille Bootstrap pour les breakpoints XS, SM, MD, LG, mais également votre nouveau point de rupture XL !

mixins/grid-framework.scss

Rajouter en début de fichier la classe .col-xl-… dans le mixin make-grid-columns (arguments + boucle for) :

mixins/grid.scss

Rajouter en fin de fichier les mixins make-xl-column, make-xl-column-offset, make-xl-column-push, make-xl-column-pull (vous pouvez vous inspirer de la batterie de mixins déjà présente pour make-lg-…) :

variables.scss

Rajouter les Media queries breakpoints pour Extra Large screen / wide desktop :

Rajouter les Container sizes :

grid.scss

Rajouter un Container widths pour le breakpoint xl :

En toute fin de fichier, rajouter un Extra Large grid :

[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] Centrer horizontalement des colonnes de la grille dans un design responsive à l’aide de CSS

Honteusement pompé de Bootstrap 3 responsive centered columns. Demo en ligne (toujours sur le site de l’auteur original) : Demo.

Une solution simple à mettre en place pour centrer horizontalement des colonnes multiples dans Bootstrap 3 (également valable pour supports mobile).

Ze problème

Il peut arriver que vous souhaitiez centrer horizontalement des colonnes Bootstrap, en général lorsque le nombre de ces dernières est impair, ou lorsque vous leur assignez une max-width et qu’elles ne remplissent pas la rangée row qui les contient.

Ze solution

Vous pouvez aussi assigner une min-width, une max-width ou une largeur fixe aux colonnes.

[Bootstrap] Un breakpoint à 480px pour une prise en charge du rendu en orientation paysage sur périphériques mobiles (smartphones).

Source : Introduces a new break point ‘xs1’ at 480px.

Utilisation :

Vous obtenez une batterie de nouvelles classes nommées d’après le modèle Bootstrap col-xs1-1, col-xs1-2, col-xs1-3, etc.. qui vous permettront de cibler les périphériques mobiles type smartphones en orientation paysage.

Ces boîtes s’organiseront en mode 1×4 on 0 > 479px, 2×2 on 480 > 767px, 4×1 on 767 > *px.

Mise en place :

Dans la CSS Bootstrap, intercaler entre les styles définis pour les classes .col-xs- et .col-sm- :

Intercaler entre .hidden-xs et .hidden-sm :

[CSS] [jQuery] Afficher une liste d’éléments dont la hauteur peut varier

looks_products

Exemple de solution mise en place : http://www.despetitshauts.com/fr/t-shirtsm-courtes-25.html.

Tentative en exploitant la fonction outerHeight de jQuery

La solution ci-dessous semble fonctionner 🙂

Simulation : http://jsfiddle.net/frontenddeveloper/2s0s1eag/29/.
Même chose mais à partir de Bootstrap : http://jsfiddle.net/frontenddeveloper/51xxem3p/6/.

Tentative avec la propriété columns de CSS3

Simulation : http://jsfiddle.net/frontenddeveloper/5doayaa5/5/.

Pour :

  • On conserve un markup HTML cohérent (les éléments de la liste sont déclarés dans un ordre logique d’apparition)
  • On ne surcharge pas le serveur par l’emploi de JavaScript

Contre :

  • Pas compatible à partir d’IE9 (<a href="http://caniuse.com/#search=columns">columns</a>) (voir pour l’existence d’un polyfill qui gère les contraintes responsive)
  • Le contenu n’est pas ordonné de gauche à droite (rangée après rangée), mais de haut en bas (colonne après colonne)
  • Pas de contrôle sur le comportement lorsqu’il n’y a pas le nombre exact d’éléments (2 looks + 16 produits) dans la page, notamment en responsive
  • Comportement responsive pas terrible…

Tentative avec Bootstrap 3 et Masonry

Inspiré de : http://codepen.io/anon/pen/eIxCp. Simulation : http://jsfiddle.net/frontenddeveloper/rbgsypLm/2/.

Pour :

  • Le contenu est ordonné de gauche à droite (rangée après rangée)

Contre :

  • On est obligé de surcharger légèrement Bootstrap (.container { padding-left:0; padding-right:0; }) et le framework CSS peut poser problème lorsqu’il est couplé à Masonry…
  • On ne conserve pas un markup HTML cohérent (les éléments de la liste ne sont pas déclarés dans un ordre logique puisque le deuxième look est intercalé entre le produit 13 et le produit 14)… Avec tous les ennuis que cela comporte de gérer son imbrication au sein de la liste et de conserver un affichage cohérent (y compris en responsive) lorsque le nombre d’éléments change !
  • Toujours pas de contrôle sur le comportement lorsqu’il n’y a pas le nombre exact d’éléments (2 looks + 16 produits) dans la page
  • Comportement responsive catastrophique

Conclusions :

A moins de partir dans un dev JS très lourd qui prend en compte le nombre d’éléments à afficher pour replacer le 2ème look dans le DOM à chaque fois :

  • qu’on agit soit sur la largeur de la fenêtre (problématique responsive),
  • ou qu’on agit sur le nombre de produits à afficher (design prévu pour 2 looks et 16 produits – il peut y avoir moins de produits dans le rayon ou suite à un tri effectué par l’utilisateur)

…c’est pas possible d’avoir un affichage cohérent :/

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

[CSS][Bootstrap 3] Utiliser la propriété vertical-align avec la grille

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 :

Source : Bootstrap: Vertical align into a Grid v2 – CodePen

Le mixin LESS